Category Archives: Design

v11

By —

Version 11.1

I realize that I was just writing about v10 four-and-a-half months ago. I liked it, but I haven’t done a ton of front-end work lately and I was itching to work on something. I started working on this probably six or seven weeks ago. It made its first public appearance on Dribble on July 14th. There’s a ton going on here, so I’m going to try and break it down a bit here.

Navigation

When I finally had something I wanted to build, I started with the main navigation. My first thought was to do it in CSS. The only sticking point is the darker yellow shadow on the bottom. It’s not even that hard to do, just a bunch of dropshadows. The way I did it looks pretty horrible in Safari, though, and not much better in Chrome. I’m going to look into this again when I get a minute because it would be awsome for customization. I’d love to be able to put an option in the customizer that lets you pick the nav color.

Mixins

So, I used Compass for this. Compass is the best reason for using SASS right now, in my opinion. Instead of maintaining your own list of mixins, which is likely to become out of date quickly, you can use Compass. It’s open source and used by tons of people.

And with SASS 3.2, there are some really cool things you can do with @media queries. For me, the following mixins made this theme easier to code and should make it much easier to maintain.

@mixin breakpoint($point) {
    @if $point == mid {
        @media (min-width: 800px) { @content; }
    }
    @else if $point == large {
        @media (min-width: 1170px) { @content; }
    }
}

@mixin retina() {
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) { @content; }
}

Post Formats

This theme supports Standard, Link, Image, Video, Audio, Quote, and Status formats. Links still link to some external site or article. Image, Video, and Audio posts display extra content above the post title. Quote and Status posts are pretty straight forward, but it’s worth noting that they don’t have titles.

I’m still managing these with the Crowd Favorite Post Formats plugin.

Widgets

There are a couple of built in widgets. The biography widget, currently at the top of the sidebar, is available. It asks for an email address and will automatically pull your gravatar and profile information. The social icons are another widget that are part of this theme. Currently there are icons for Twitter, Dribbble, Forrst, Github, Google+, Facebook, LinkedIn, LastFM, Skype, Flickr, Vimeo, and WordPress.

WordPress.org Theme Directory

I’m going to submit this to the Theme Directory. The only thing I haven’t quite figured out yet is how to handle the navigation on mobile. The problem is that you can’t reliably set more than one level of sub-menus right now. Since they expand out to the right, eventually stuff is being drawn outside the page. I have some ideas for this, so hopefully I can get that figured out in the next week and get this thing up for review.

Since there’s no good way of distributing themes with specific TypeKit typefaces, I added some Google Fonts fallbacks that can be enabled in the customizer.

Theme Customizer

There are a few things you can specify in the customizer. The copyright notice starts you with a format of “© {yyyy}”. I replace the “{yyyy}” pattern with the current year. Hopefully it’s not super confusing, but I’m not replacing any other pattern so “{yy}” isn’t going to get you the last two digits of the current year or anything.

Google Fonts can be enabled, as I mentioned previously.

The background image or color can also be specified. The default is what I have set here, but you can upload your own image or pick your own color too.

Notes

  • I stole the awesome ❮ and ❯ arrows from Chexee.
  • The Wisconsin glyph in the footer is from StateFace.
  • Retina, baby. The entire thing has been written to take advantage of a retina screen. And it’s nice.
  • There’s a bunch of stuff from _s in here. Take a look. That’s the place to start.
  • The current breakpoints are at 650px, 800px and 1170px.
  1. Honestly, I don’t even remember how I came up with this number. It seems unreasonable. But I’m pretty sure I counted at some point. ↩

v10

By —

Version 10 of this site is back to a minimal type design. I go back and forth between wanting to design fun stuff and wanting the design to get out of my way. Obviously, I’m back in the mode of wanting my writing to stand out and look as good as possible. I spent a decent amount of time looking at typefaces for this design, which I’ve never really put a whole lot of thought into — at least not from the beginning like this. I decided to go with Chaparral Pro for the headings (which is scary close to being a Serif face) and FF Meta Pro for the body type. Some of the smaller, uppercase headings are Helvetica. The download buttons like those on the Network Favicons post are also Helvetica. The typefaces are being provided by Typekit, naturally.

There’s still stuff that needs to be finished. I’ve got an entire list on a piece of 11×17 poster board in my apartment. The design is mostly finished. I need to look at the single pages of the portfolio again, but other than that I’m pretty happy with this. Most of the changes I need to make are administrative things, like figuring out how to track my short domain with Google Analytics.

It’s fully responsive. When it’s really small you lose the logo, but other than that it’s all there. A branding expert would probably tell me it’s important to put the logo in people’s faces on mobile as well, but it didn’t fit and I’m not really interested in pushing the content down any more than it already is. I’m using min-height along with the standard min-width for the media queries because of the height of the sidebar. The portfolio is always in “mobile” mode because I wanted to show thumbnails in the full width of the browser, which meant moving the sidebar.

This is the first project that I use LESS start to finish and it was a dream. First, if you have problems keeping your CSS organized like I usually do, LESS (or SASS) forces you to fix that — not in a way that’s more work, but just because of how nesting works. Second, apps like CodeKit1 automatically compile & compress your CSS and reload your browser window when you save. Sometimes it doesn’t even have to reload, the CSS just gets injected into the page.

I introduced link posts, which I introduced last week. The CF Post Format Plugin is awesome for managing post formats. I plan to use this to post some of the links that I find around that web that are particularly interesting.

I’m pretty happy with how this design has turned out, but I’d love to hear any thoughts or suggestions.

  1. In addition to compiling & compressing a huge list of languages including LESS, SASS, and CoffeeScript, CodeKit does syntax checking, lets you define frameworks (like the vendor prefix framework I use), and will compress images. It’s my favorite app for this sort of thing and definitely worth checking out. ↩

Dsgn365 Podcast Launch

Posted:

We launched the dsgn365 podcast this week. Check out the introductory episode and make sure to subscribe in iTunes.

New Theme — JB Minimal

By —

I started working on a new theme a couple weeks months ago. At this point, it’s pretty much finished so I’ll go through it a bit.

In terms of general changes, this design features HTML5, much more CSS3, and far less images in the layout structure. It’s probably not as easy on the eyes in non-modern browsers, but it’s not like there’s a ton of styling going on anyway. I’ve stayed mostly with black and white which transfers easily across any browser you could think of. I haven’t done any extensive testing across browsers, but I rarely do for personal themes. I know — it’s a bad habit to get into, but this site is so always evolving and I would be in a constant holding pattern if I decided to do extensive testing before pushing it live.

Home

The home page still has the same stuff going on as it did in the last revision, but this time it’s much more linear and not quite as many photos. The main page title is just text — there’s no CSS images going on here. I’ve tried to lighten the load on images that are loaded into the page. You’ll probably notice the little Typekit bug in the corner of the page. They’re generously supplying some of the non-standard fonts for the page.

I’ve added a few new feeds to the social section and also removed some background images from there. The fading at the end of each line is now done via a white shadow on the date. I’ve removed the “joshbetz:” and also added some links with regular expressions. You’ll also see that I’ve brought back the feature that displays only the time if you’re looking at something that happened in the past 24 hours and the date otherwise.

The photos are still coming from flickr and being generated by (a very old) FancyFlickr. The photos in the Photos section are bigger with less of them. I really need to get out and shoot though or people will start to think those are static. The random photo that I had wanted forever has also remained.

On the sidebar I’ve added a small photo and a short biography which links to the newly re-crafted About page.

Everything Else

You’ll also notice that the big “Josh Betz” title doesn’t appear unless you’re on the homepage. This is another feature that I think is very important. Not quite as much here as on other sites, but it’s something I’ve been thinking about for quite some time now and decided to add it. While there’s no title on the page, there has to be a way to know where you are and how to navigate around the site if you need to, so I’ve decided to go with a fixed “title” bar with some basic menu options to get back home and to some of the other pages on the site. I really like how it fades out when you scroll away from the top too.

Look around. What’s your favorite part? What do you hate?

Old Themes

Some people have asked for my old themes in the past and I’d love to be able to just zip them up and put up links, but they’re so personalized that it will take some work to generalize them at least to scrub my name off before they’re ready for the real world. It’s one of my goals to have this done for a few of them at least by Christmas. Maybe.

Designing in Black & White

Posted:

Not that I’ve been involved in a ton of logo design, but it seems like the best ones are always fairly simple. Think about it, if you’re a designer you probably find yourself looking at artwork and putting it together in your head as I often do — but you rarely see a super complex looking logo and think to yourself, “amazing”. The amazing ones are almost always amazingly simple. One way to help with this — and simplify everything — is to work in two colors, probably black and white.

Maybe some people are thinking you can’t do much with black and white, but I’m going to tell you the opposite. Designing in black and white gives you so many more options. First of all, you’re ensuring a maximum of two colors in the logo which is what most companies will be looking for anyway. Those colors don’t always have to be black and white though. Giving a client a black and white logo is as good as giving them a logo with two arbitrary colors that don’t even exist because when they go to print their t-shirts, or business cards, or put together their website they can get it printed in any color they want. But many people already knew all that.

The reason I like designing in black and white is that you have so much freedom with color choice afterwards when you’re actually putting the t-shirt design together or the website. This logo for nfocus creations is one that I did for a local photography studio. And then I decided to colorize it. There’s so much you can do without going over the top.

Colorized version of the nFocus Logo

New WilmotHighSchool.com

By —

Well, the new WilmotHighSchool.com website is in the last stages of development and it shouldn’t be too much longer before it goes live. I’ve got the design all setup and now the web design class is just going to have to move all the old pages over to the new template. Here I just wanted to talk a little bit about what went into the redesign and how we’re planning to transition to the new site.

The Problem

Even though the current website has served the school well for the past year-and-a-half, they wanted a refresh on the website. This also gave me a chance to fix some of the things that have bothered me with the old site.

The header on the homepage was a little large and some of the drop down menus had to open up because of that. A user would have to scroll down just to see the content on the homepage if they were on a smaller monitor.

The flash slideshow was also a bit of a problem. It was the standard Dreamweaver slideshow player and therefore looked very standard. It had the standard looking control buttons, which took up too much extra room on the page. It also had functionality problems. When it would loop back to the begninning of the slideshow, it would always skip the first slide for some reason. In firefox it would load the images at half the size that they should be about half the time, making them unreadable.

The last thing is that the alumni website, powered by High School Reunion, didn’t have the same layout as the rest of the site. Creating a theme for HSR is easy once you have something like a main site template done in Dreamweaver and makes it clear that it’s all the same website.

Layout

For the new layout I decided to solve the number one complaint by putting the navigation up against the top of the page. I also made the rest of the header much smaller by removing the flickr images and placing them in the sidebar under the search and weather.

I’m also a big fan of the new slideshow player. I found the basic code on flashotaku.com, but modified it greatly. The buttons are now on top of the slideshow player, but are only visible when you need them — when you mouse over the slideshow. It starts automatically, and when it loops back to the beginning it show the first slide again! The thing that I like most about it is the fact that it is no bigger than the images that it displays so there is no wasted space.

Photoshop

After I drew up some rough sketches of the layout of the site, I jumped into photoshop to draw it all up. I reserved the top 50 pixels for navigation and the next 100ish for the title. Everything after that is all content. I threw a shadow on the the outsides of the content. I put a red gradient for the navigation bar, with a darker layer over it for the over states.

The biggest thing was the drop shadows. Everything has a drop shadow: the layout as a whole, the title, the nav bar, the nav bar over states, etc. I like how the site has a little bit of dimension. The last site had a “flat” look. With the new site the buttons actually looked pressed-down when you hover over them.

After I had the mockup done in photoshop I got the slice tool and made slices of everything that I couldn’t reproduce with CSS.

Dreamweaver

In Dreamweaver I started the same way I start every site: setup the main divs. A holder, to hold the whole site and make it possible to center it. I had the put in a nav div above everything else, since the nav for this site is the first thing you see. Header, content, and footer divs are self explanatory. On the homepage I had to create a left-column and right-column so I could put in a sidebar on the homepage and on the alumni website.

I put the shadow background image on the holder, put the red gradient on the nav div, and put together a nav bar with Dreamweaver’s built in navbar function with all the up and over states. I defined a title and content section for the template and I was pretty much done.

Finishing Touches

I added the drop down menus and breadcrumb links and I was done. We just had to move the old website over to the new template, which would be done mostly by the web design class at school.

There are a few features that we’re working on now and some last minute changes. I really want to get everything just right and make the transition go as smooth and cleanly as possible.