Designer Chris Armstrong writing for A List Apart:
When we construct a grid, we’re creating layout boundaries: known relationships and constraints that define an environment wherein an appropriate solution can occur. But when we construct an infinite grid, we’re not just setting the boundaries for a layout, but a layout system, with too many variables for us to nail everything down. If we define the important relationships, the blanks will fill in themselves.
Really interesting read, and something that I heard several times in the UI17 conference I attended last week. In short, don’t design break points and your site’s responsiveness based on current mobile constraints, instead design based on site content.
For the last three days I’ve been at User Interface 17, a web design conference in Boston (it’s also why posts here have been sparse recently.) Overall I had a really good experience, one of the highlights being Luke Wroblewski’s extended workshop on multi-device design. In addition to Luke being an excellent speaker, he’s also a prolific writer and he wrote up some notes from some o the other talks at the conference.
I’ve linked here to Aaron Gustafson’s talk about progressive enhancement, but there’s more if you check out Luke’s writing section.
One of my favorite and most heavily used apps iA Writer just got a big update with its 1.4 version release today:
Inspired by our deep experience designing for the web, we’ve given Writer for Mac a responsive design, changing the font size based on window width. This maintains the text’s typographic proportions, zooming in and out without reflowing the text. I don’t know why it took us so long to find this obvious solution. However, given that no one else has done it, the simplicity of this solution is perhaps not as obvious as it seems in hindsight.
After playing around with the update for a few minutes I can’t find an immediate need for the three different breakpoints iA Writer offers; 95% of my time I feel like the largest font size/width is optimal. We’ll see how that evolves over time.
We’re going to see a big change in a certain type of iOS app—the one designed for the device….In a sense, this could be a good thing—freeing up iOS from the constraints of specific screen shapes opens up developers to whatever Apple throws at them next and should also make apps simpler to port to competing platforms. But it also impacts heavily on those tightly crafted experiences that were designed just for your iPad or just for your iPhone.
With web having been down this road for a while, it will be interesting to see native apps designed in a more responsive direction.
Really enjoyable read here on how Microsoft’s web design jumped into such a modern, approachable design. Pay special attention to author Nishant’s “four tenets” web design presentation at the beginning; I like his emphasis on responsive design.
Upstatement is a small web firm that assisted with the massive Boston Globe switch to a fully responsive design. In this blog post they go through some of their choices made: workflow, tools, break point decisions and more.
Biggest surprise for me came with their primary design program: InDesign. Not Photoshop or Illustrator? Strange at first, but their reasoning appears pretty sound.
Smashing Magazine contrasts the mobile strategy by both candidates in this year’s presidential election. Mitt Romney’s camp goes with a separate optimized mobile only site, while Obama leans on responsive design. Which is better, and why? I liked the level of detail author Brad Frost brings to this piece, a regular highlight of Smashing Mag articles.
I’ve lately been catching up with this news summary site each evening after work. It’s a quick summary of the big stories and uses excellent typography and a responsive design. I shouldn’t be surprised given the work is by Mule Design. It was mocked up and launched within a week.
Nice article over at Webdesigner Depot that presents the a common design debate for a potential client: do you go with an entirely separate mobile and desktop site or a responsive design with a single combined view?
I enjoy the style used here: lots of mini interviews with developers across multi web agencies across the country. There’s not a clear consensus among those interviewed, and I tend to agree. You can’t be black and white about responsive design, much as there’s no silver bullet design solution for any one client.
I propose a fifth option [to handle responsive images.]
Use a progressive image format and HTTP range requests. Ideally the image metadata at the start of the file would include some hints about how many bytes to download to get an exact image size. The browser can then download the smallest size equal to or greater than the dimensions it needs based on the layout’s width as specified in CSS. If the user zooms or resizes the window, the browser can request more bytes as needed.
One image, one file, one URL, one resource.
Ballsy. Yet even as the author points out, there are significant legacy browser compatibility issues.