I’ve written enough responsive navigations in the last few months to be skeptical when I see a simple Javascript-based plugin solution. But probing further, the developer is Viljami Salminen, and the guy’s talented. It’s also library agnostic – no awkward jQuery dependency required. Worth taking a look at for your next responsive project.
The legendary Jeremy Keith, talking about best practices for responsive web design:
And here’s the key: try to come up with as few major breakpoints as possible. That might sound crazy, since we’re talking about responsive design. After all, we have media queries, so let’s use about 12 of them, right? No! If a linear layout works for every screen and is appropriate for your particular concept, then there’s no need for different layouts.
I’ve learned this the hard way in my early responsive work; you find writing more and more media queries easy, and next thing you know your responsive code gets out of control. Follow Keith’s advice here; simpler is generally better.
Given the stellar quality of Zurb’s web framework Foundation, I’m going to try this “responsive image solution” out on some side project, just to see how the internals come together. But the syntax is a bit worrisome, a bit like the srcset attribute, but not all close to the picture element, which I’m currently favoring. I’ll still keep an eye on this one.
An excellent deep dive by developer/designer Paul Stamatiou regarding his approach to handle images that looks great on both normal and HDPI (a.k.a. ‘retina’) devices. Pay special attention to his work on how to effectively cut 1x and 2x sprites, he includes useful screenshots.
It’s very exciting to see The New York Times redesign their (now pretty dated) web design. Looking at this official blog post I’m tentatively encouraged; it’s got a much cleaner implementation along with that very hot ‘off canvas’ side navigation. Overall, it seems far more content focused and responsive friendly.
Designer Cennydd Bowles poses a really interesting and shrewd method to determine whether when drafting up a game plan for a web site, if it makes sense to go with a responsive or separate mobile and desktop design route. A key takeaway is both responsive web design and a separate mobile site approach can’t be labeled as the exclusive best choice for all web platforms. Instead you have to step back and ask what your site’s feature set is along with the focus of your different audiences and how they overlap.
Designer Viljami Salminen:
As I earlier in that article wrote, typography for the Web is really hard to design anywhere else than inside the browser. This is today even more true than it was a year ago. Typography prototype tries to solve this by doing the hard choices before jumping to other design tools like Photoshop.
Viljami really has a great point here. I’ve seen way too many projects backpedal when a font was decided on that looks awesome in Photoshop, only to fall apart in actual browser usage in the middle of a development cycle. But it’s more than face selection, it’s also issues of size and scale, also briefly touched on in this post.
I really liked this short post by director/designer Nathan Ford on the advantages of custom cut web grid systems. Here’s the money quote:
Nathan Smith built 960.gs a few years back and it went a long way to popularize the application of grid-based layout on the web. This was a leap forward in bringing grid-based thinking to the web, but 12 columns at 960px wide has become so ubiquitous now that it limits our progress into more considered and complex grid design. 960.gs – and most frameworks – invert a key aspect of grid theory:
You should design a grid based on your content’s constraints, not design your content based on a grid’s constraints.
Designer Elliot Jay Stocks on responsive web design (RWD):
RWD is about making your site adaptable to any scenario, without worrying about specific devices and their proprietary dimensions.
RWD doesn’t need to take more time and therefore doesn’t need to cost your clients more money. At least not after you’ve rethought your approach to web design, anyway.
His argument isn’t perfect – I think Elliot underrates costs overall, but it’s still very strong.
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.