Introduction
Welcome back again with lucky Number 7…
First off I wanted to let everyone know about the Breaking Development Conference being held in Minneapolis, 4th June. Today (Friday 1st June) is the lastday that you can register for the conference. Speakers include Tim Kadlek, Mat Marquis, Dave Rupert and Kristopher Layon; and the sessions include Responsive Workshop, Next Steps for Responsive Design, The Minimal Viable Web and Creating Responsive Experiences. If you are near Minneapolis then do yourself and favour and check this conference out, you will not be disappointed.
Right, now lets get down to this week in the world of responsive design.
The past week has continued to see activity around the Responsive Images saga. Last night we presented a talk that included a few responsive image demos to a few designers & public service web masters. To my amazement there was not a single person in the room that was concerned with changing their current practice of loading a single high quality image. I swear, not a single one. Instead they were concerned that a decision could be made and implemented within the specification that would then require them to retro-fit hundreds of thousands of pages with a new image element because the current implementation was not backwards compatible. The concerns they showed should be a user case that we keep in mind when debating the issue on responsive images as it is a view point that many of us dismiss in the same way they dismiss the responsive images debate. For what it is worth though, the favourite implemenation of responsive images that night is awarded to Adaptive Images. Kudos to Matt Wilcox!
This week there have been two other areas of responsive design popularity. Typography and the Responsive Project Workflow.
So without much further ado, let’s check them out.
Headlines
Typography
The restriction of Type
David Bushell puts Elliot J Socks, Zeldman and Information Architects into his crosshairs and disects how they appear on a mobile device. Strangely that although all three have amazing sites and are themselves amazing designers they still haven’t quite got every breakpoint on each device perfect. Dave is quick to point out his own flaws though, and explains that he’s not targeting these guys on purpose (there’s many more a site much worse than these).
Responsive Typography
I love the guys at IA and spend quite a bit of time with Writer on the mac. In this article Oliver looks at the number of screen sizes and pixel densities and calls for a responsive typeface. He takes a good look at how certain typefaces are affected (for example Georgia above 16px is terrible), and explains that they have created their own responsive typeface, iABC, that adapts to different resolutions.
Responsive Design Workflow
Responsive Process
This site is from Steve Fisher and the guys at Yellow Pencil and was one of the first looks at the responsive design process I came across. They take you though 18 steps on getting the process sorted with your client.
In Responsive Design Workflow
Stephen Hay presented this at the last Breaking Development Conference and it has sparked quite a few discussions on the topic.
Responsive Workflow
Viljami Salminen comes up with something along the lines of an interative process: Sketch → prototype → design → test → discuss until it works. It’s well worth checking out the full article if for nothing else than his wonderful illustrations.
Design Process in the responsive age - The guys from Spark Box, who brought us this great bookmarklet, have dipped in with a guest spot on Smashing Magazine and cover off the basics of the RWD workflow and give you just enough of a taster to want to embark on their two day course aptly named buildresponsively.comwhere you build the dressresponsively.com site.
Responsive Design Project Process - Full disclosure here this is something that I came up with last month while working back in London at my old job. It was written specifically for internal consumption and was very specific to the company, their exisiting processes and dealing with the existing designers and management so take it with a grain of salt. With that in mind, it’s probably an accurate portrail of an internal process for the majority of web/design studios.
Tutorials
Responsive Page Layout inspired by Flipboard
Tympanus tried to re-create that effect using CSS 3D transforms and JavaScript, making a layout that is “flippable” and responsive. While the swiping makes sense for touch devices, dragging will do for normal browsers.
Create a responsive mobile first menu
All aboard the Stu Robson fan club… or at least that’s the way I’m feeling with yet another link from Stu. If he keeps knocking out good content I’m afraid I’m going to have to keep listing him here.
A Simple, Responsive, Mobile First Navigation
Another one different from Stu’s and from Tutsplus.
Anatomy of a Mobile First Responsive Design
Brad Frost takes a detailed look at the site he put together for the HTML5Rocks tutorial and why it was constructed.
Prototypes, Frameworks & jQuery plugins
Plugins
Creating Optimised Mobile sites in WordPress
A series of templates and plugins to turn your existing site into a mobile masterpiece.
jQuery
js-media-queries
A way to fire media queries through JS on GitHub
Fit-Text
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
Slab Text
The script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size. The script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.
Frameworks
Gumby Framework
The NEW Responsive 960 Grid CSS Framework That You’re Already Familiar With.
Fluid Baseline Grid
The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. We used this as the template (trying something other than Foundation) to put together the responsive images demo.
Articles
Website Design for Tablets and Mobile
Sitepoint guest writer takes a look at redesigning a site after reviewing the mobile and tablet traffic. The review looks at native application, separate mobile design, responsive web design, and a hybrid approach.
Principles of responsive web design
Sam Richards talks about his experiencs with responsive design. A great read… but you might need to back away from the screen a little.
CSS 4 Media Queries
The new specification look to be taking Touch based devices into the media queries to allow us to rid ourselves of javascript detection methods.
Call for resonsive image format
While this would be an interesting option I don’t see it being taken serious. Still, would be keen to hear your thoughts.
Desiging for Multiple Mobile Densities
In the same way Oliver looked at type in our above feature on responsive typography, Travis Hines provides a look at the areas you need to be aware of when dealing with different device densities. Travis also includes a little calculator to work out all your density needs across the four current models.
Responsive Web Design Presentation at STC Summit
Download the slides from Zoe Mickley Gillenwates presentation on CSS3, Media Queries, and Responsive Web Design for the STC Summit 2012. Zoe also includes a ton of links to related resources on media queries and responsive web design techniques, tools, and inspiration.
Responsive Design is more than a than a mobile optimisation strategy
Mobile-optimized sites may be the appropriate solution in some circumstances, but there is a fundamental issue with the presentation of a different subset of URLs to mobile devices versus the rest of the world
And finally…
WebDesignTuts+ have put together a brief questionnaire on Responsive Web Design. I’m happy to report that we nailed a perfect score (I would question the usefullness of this update if we didn’t) and we’re keen to hear how you did on your score. Also a big round of applause for Hendrix (not the guitarist) University on their recent responsive design launce.
Last but not least, we have a very special give away opportunity next week for all of you that like to sketch your responsive designs. Be sure to tell your friends to subscribe, follow us on Twitter and keep an eye out on Facebook.
No related posts.
2 Responses to “Edition #7”