The web is embracing the tenants of responsive web design rapidly, but what’s the real economic and analytical impact of all of this? Luke Wroblewski reveals some numbers from Time, O’Neill Clothing and more post their respective responsive designs. It’s still very early days, but it’s encouraging news.
When you’re working on a responsive design and considering smaller, more compact screen sizes, a minimal nav is generally the way to go. Because many sites rely on a top navigation with more than one or two options, dropdowns are often the best choice in this small screen circumstance.
The problem with this dropdown approach is it can introduce some HTML or CSS bloat if you’re not careful. Enter tinynav.js, a really simple jQuery based plugin that auto converts a classic ul based navigation into a dropdown for small screens.
Sacha Grief is already a designer I’ve kept my eye on for a while – prolific on Twitter, creator of the amazing Sidebar – but he’s outdone himself with this very long post on the future of web and app design. Loved this line:
When you have a high-definition display and screen-optimized fonts, you quickly realize you don’t need much else to create beautiful work.
Designer Nathan Ford’s responsive grid workflow can be boiled down to this quote:
You should design a grid based on your content’s constraints, not design your content based on a grid’s constraints.
It’s rather brilliant when you think about it. It’s also one of the most succinct descriptions of a shift in methodology I’ve been after for a while now, having worked for over a year professionally on responsive web designs. I generally lean heavily on the Skeleton grid system, but something about landing on break points for existing iOS hardware just feels wrong. I’ve got to research Gridset more.
As designer Oliver Reichenstein wrote years ago, 95% of web information is text. Text has to look good, and the right font face is a big part of that. But given the virtually infinite set of web fonts to pick from, where do we start? Here’s a few recommendations from what I’ve learned.
I split web typography into three categories: body, headline and accent text (i.e. everything that doesn’t fit neatly into a standard headline plus paragraph flow.) In the early stage of web design one category tends to dominate overall textual content; in almost all cases it’s the body text. Decide the right font face for this category first. This decision makes the rest of your font selections easier; by then you’ve already settled on a font on a your users will interact with the most.
Great web text is aesthetically pleasing and matches the creative style of the site or application behind it. None of that matters if the body font face, the workhorse of web text, is hard to read. Check out body text samples on multiple browsers, multiple devices. How is the font hinting? Be sure to check out samples on IE8 and IE9, where poorly hinted fonts often fall apart. Generally when I’m stuck between two body font faces I’ll go with the more readable option.
There’s a reason many very well designed sites and apps stick with one font; multiple font faces need to contrast against each other to play well. Also every font you add has to match the site’s mood or style. That can generate a lot more research and testing. When in doubt, or if design time is limited, stick with a single font face and play with font weights for proper contrast.
I still see web guides recommending a single font size as a base for body text like 12px or 14px. Times have changed: there’s a huge range (desktop, tablet, phone) in web connected devices, some of which appreciate a slightly bumped up font size. Custom font faces often look best one or two pixels bigger or smaller than you might first expect. Experiment. When debating between several sizes, pick one that fits roughly 45 to 75 characters per line (including spaces) to maximize readability.
I really enjoyed watching Jason’s talk. He starts out illustrating how the right font face matters. Pay special attention to last twenty or so minutes where he runs through a few quick tips on font selection (e.g. when in doubt between two font sizes, bigger is better.)
Paravel founder Trent Walton on the transition to building responsive web sites properly:
I believe this starts with a shift in perception. Whether massive or minute, this shift usually involves letting go of a lot of assumptions that center around desktop-centric browsing.
I found myself nodding a lot to Trent’s post. There’s no one simple solution for implementing responsive web design, but trying to just take an existing desktop workflow (e.g. fixed width psd comps, jamming a few CSS media queries on existing work) won’t do it justice.
Influential designer Andy Clarke gives a great talk, and his slide deck all about responsive web design has a lot of smart ideas I’ve never considered before. Granted it’s not nearly the same as a live talk or full day workshop, but it’s worth a quick scan for almost any web designer or developer who wants to refine their responsive skills.
The new gaming site Polygon made a big splash when it launched late last year, and deservedly so. Not only is the editorial content solid, but its web design is bold and well thought out. This post is a very detailed breakdown of the initial design planning workflow, with initial mood boards, wireframes, and sketches.
A very well put together pdf/iBook download for web designers. Great tips here on basic color settings to ensure your Photoshop and Illustrator work stays color consistent, proper alignment among vector objects, good use of layer effects and much more.