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.
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.
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.
Sometimes you want a super quick way to both identify core dimensions on your open web browser and, especially for mobile devices, what critical dimensions like device width, height, and pixel ratio should be. That’s exactly what this web site does; bookmark it and keep it for reference later.
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.
Author David Bushell’s work tutorial here for Smashing Magazine is notable, not for hitting the usual responsive design notes but his restraint. There’s a legitimate smaller scope with his example: the emphasis is on progressive enhancement and heavy lifting on CSS3 where possible, not flashy jQuery plugins. That’s a good thing.
Web developer John Albin Wilkins on rounding errors in fluid grids:
I put errors in quotes, because the issue actually has to do with the CSS spec. It doesn’t specify how browser vendors should deal with percentages that contain decimal place precision. For example, with a 6 column grid, each column is 100% ÷ 6 = 16.666667% wide. On a 1000 pixel wide viewport (which I’ve conveniently picked to make our math easier), that calculates to 166.66667 pixels per column. Since the spec gives no guidelines, browser vendors are free to make their own rules.
I’ve learned this problem the hard way several times. It’s a frustrating problem, but John goes on to list several great remedies: adaptive (break point)based design, the CSS border-box element and container-relative floats.
There are several bookmarklets out there that can do a simple change of your viewport to match the size of common mobile devices, but I’ve never seen it in as slick a package as what Viewport Resizer offers. You can customize the bookmarket to only include the viewport sizes you chose and jump between portrait and landscape views with a single click. It works great on local development files and, while I haven’t directly tested it, is touch friendly as well.
Developer Tyson Matanich breaks down how the newly proposed picture element was integrated into Microsoft’s new redesign. Turns out they rolled with a forked version of Scott Jehl’s picturefill JavaScript plugin. Links to it and the original are available on the post.