06.04.14 |
∞
Jason Rodriguez, writing for A List Apart:
Just like with responsive websites, there are three main components of a responsive email: flexible images, flexible layouts, and media queries.
The only difference between the web and email is in how these three techniques are implemented.
In email design, we have a limited subset of HTML and CSS at our disposal. We can’t rely on properties and values that designers use for responsive sites on the web; margins, floats, and ems don’t work in many email clients. So we have to think of workarounds.
Frankly before this post I considered “responsive” email as something of a lost cause. But there’s a lot of strategic, well explained code examples here that make me want to revisit the emails we regularly send out as part of our day job. At the very least check out Jason’s solution for flexibile images which has a very clean HTML and CSS-based solution.
05.13.14 |
∞
Designer and speaker Stephen Hay:
Emulation is a part of the evolution of design. And the web, for that matter. But design sameness tends to fade when one forgets all of the existing patterns, all of the Bootstraps, all of the preconceived design solutions. Design sameness fades when designers stop focusing on which solutions for their problem are out there and start focusing on the problem at hand.
Solve that problem, and maybe the solution is exactly what your peer implemented, in the exact same way. But maybe not.
01.21.14 |
∞
Responsive image solutions are still clearly a work in progress. The BBC News throws out their suggestion. Not fully crazy about their syntax given how different it is from srcset and src-n but I’m curious to see how it works in action.
12.17.13 |
∞
There’s been countless articles on adapting a responsive design to make web sites mobile friendly. But what about in the opposite direction? What happens when you need to take a traditionally fixed width web site at 960px and make it look great on a 27 inch monitor. Designer Mike Pick goes through a few examples at A List Apart, both good and bad, to see what what works best.
12.10.13 |
∞
I enjoyed reading through this article where The Guardian web developers dive into how RWD can play semi-nice with a browser as old as IE8. Looks like a pretty slick methodology via a Sass mixin to deliver responsive friendly stylesheets to both modern and older browsers (via the Stuff and Nonsense design blog.)
11.15.13 |
∞
We’ve making progress on the responsive image front in modern browsers, but alas, we’re at an impasse. As noted by Opera rep Bruce Lawson:
The outcome of the meeting was that isn’t a viable option. Browser makers don’t like the fact that it’s a new element that does the same as ![]()
(or what ![]()
should do if we were speccing it today), and that it depends on multiple nested children…
…The Paris meetup’s most immediate outcome was agreement that srcset + DPR-switching is the right initial step forward (i.e., the 2x, 3x, etc. syntax).
Bottom line, the consensus is moving toward srcset over a new picture element but no modern browsers are yet shipping with it.
11.12.13 |
∞
Designer Trent Walton is a responsive web design veteran; he’s part of the three man web agency Paravel who’s done many cutting edge responsive projects. That’s exactly why reading this post, highlighting some smart steps to get a team on board with RWD, is so awesome.
(Bonus points for the FF Meta Serif usage, one of my favorite web fonts.)
10.23.13 |
∞
I’m already a huge fan of Scott Jehl’s picturefill responsive images technique. It’s a simple javascript based polyfill that adds the proposed picture element to your site. I’ve used it repeatedly on my professional work and side projects.
But I noticed one important limitation of the base work; because it’s JS powered, there’s a brief moment where the pseudo picture element “pops into” the layout after the initial load. For some pages that effect is acceptable, but for my latest work, I needed more control on when the picturefill effect is activated.
That’s where this fork by developer Tyson Matanich was very helpful. It’s a simple but powerful idea: add an extra method to activate the picture element early before a full DOM load. However I found the rest of the extra options and functionality too much for what my project needed; instead I took the basic gist and forked my own copy of Jehl’s original for actual usage. Works great.
10.16.13 |
∞
I’m a fan of Dan Mall’s design work, but he rarely comments on more tech heavy issues like web performance. Yet that’s exactly his focus on his latest blog post where he talks through the impact of a responsive design refresh. It’s not exactly scientific; Dan mostly is refreshing Firebug a few times to get his numbers, but I appreciated the approach and the thought process. It’s an encouraging read for performance novices.
09.10.13 |
∞
I have read far too many posts in recent months on how to incorporate responsive web design into a design workflow. Most cover what I already know, but leave it to designer Jacey Gulden to shake things up:
By nature, a mobile device is narrow, and it forces the content to be presented in a single column. The linear display caused by this narrowness forces the designer to give priority and hierarchy to certain pieces of content that is much less apparent when a site is viewed on a wider screen.
Because of this, many designers have started experimenting with a new kind of mockup that involves content hierarchy rather than design layout. Designers give numerical values to elements of content that correlate to where those items might appear in a stacked column layout. This way, design is less constrained, but the content is always presented in the best way possible.
I’ve heard the “content hierarchy first” advice before but rarely in such a clear manner.