Responsive Design Weekly #11

Responsive Layout Sketches from the Smashing Magazine article

There are two fairly major announcements this week in the responsive design world. One of the leading frameworks, and one of my personal favourites, Zurb’s Foundation is turning 3 today. Actually to be a little more accurate it’s turning 3.0. We’ve covered what they’ve packed in to the release below.

The second big thing to happen is the responsive image proposal submitted by Mat Marquis, chair of the responsive images community group. While I think it covers pretty much every consideration brought forward by the community it will be interesting to see how this is weighted up against the srcset proposal.

Enough talk though, lets check out this weeks links…

Headlines

Picture Element Proposal – Responsive Images Community Group

This proposal has been submitted to the HTML WG for consideration as part of HTML.next and the WHATWG for their ongoing consideration.
This proposal addresses the need to optimize the users’ experience of images across an increasingly diverse range of displays. It addresses this issue through a markup-based means of delivering alternate content image sources, based on device capabilities.
This proposal is based on Florian Rivoal’s original proposal to the WHATWG.

Foundation 3.0 released today

Today is the day that Zurb Foundation 3.0 is released. Hoorah!
As part of the new release we will see: responsive tables, off-canvas layouts, typographic modular scale and more PLUS if you’re already using foundation 2.x they’ve even provided a handy migration guide. FTW.

How Much Does a Responsive Web Design Cost?

One of the subjects that hasn’t had too much focus in the blogs is the real cost of responsive design. While everyone is busy with the new techniques and best practices there are agencies and clients scratching theirs heads wondering what they should charge/pay for a responsive design. Brad Frost takes a closer look at some of the hidden costs you haven’t thought about. Brad also writes another weekly newsletter which I highly recommend subscribing.

The industry and responsive design

Sarah Parmenter is trying to understand how responsive design is fitting into every day business. Help her, and the industry, by filling out the short survey

Responsive web design – problems from the coalface

Following up from Sazzy’s survey the guys over at @welcomebrand have looked into issues that we might have run into during our responsive design projects. This article explores the responses that have come back so far around issues with RWD, budget/quoting, mobile specific vs responsive only designs plus more.
We encourage you to contribute to the survey.


Articles

Does Google’s Mobile SEO Preference Change Mobile SEO Best Practices?
By now you’re probably aware that Google recommends responsive design as it’s preferred option for tackling multiple devices, but it’s not the only thing they recommend. Bryson looks at the press release in more detail.

Using media queries to hide CSS3 from older browsers
I had to re-read the title of this blog post twice. Using media queries to hide css3? I won’t spoil the technique in the email, click through and check it out for yourself.

Why Responsive Design Actually Begins on the Server
This is not a tutorial as such (as suggested by the URL), but it’s a good presentation by one of the smartest couples in web development.

Issue #1099: meta “viewport” doesn’t act right · h5bp/html5-boilerplate
I’ve noticed that a lot of people have issues with the page being zoomed when changing orientation on the iOS devices. This can be fixed by including “, initial-scale=1, maximum-scale=1″ to your <meta name=”viewport” content=”width=device-width”> however it means the user can no longer zoom your page. While that shouldn’t be an issue if you’ve implemented your RWD properly it’s an accessibility feature you shouldn’t be taking from your audience. Good news is that it’s a bug that is fixed in iOS6.

Data Monday: Are Tablets Mobile Devices? 
Luke Wroblewdki takes a look at the Mobile computing and asks the question whether the tablet device should be included into this category, or re-categorised as “mobile in the home”. Another great instalment from Data Monday.

Optimizing vs. Adapting for Devices 
Luke has provided a lot for these newsletters, and when he’s not writing awesome articles he’s suggesting them. Here Luke backs up his previous article about multi-device optimisation with two supporting articles, Anatomy of a mobile web experience: google.com and Responsive questions.

24 ways: Conditional Loading for Responsive Designs
This is a blast from the 24ways past, where Jeremy Keith talks about lazy loading content elements on a page to aid a fast loading mobile first site.
Responsive Web Design just got Easier with the Responsive Grid System
Responsive Grid system probably shouldn’t be under this heading, but I don’t know where else it could have gone. Graham says “The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.” Sounds good to me, has any one tried it out?


Presentations

The Mobile Difference In Numbers
We all know Mobile is different, but by how much? This presentation by@guypod attempts to quantify the difference between mobile and non-mobile, focusing on CPU, network and browser differences.

Responsive Web Design for Libraries: Get Beyond the Myth of the Mobile Web
An introduction to Responsive Web Design with a basic code walkthrough to get you started making your library website responsive.

Performance Implications of Responsive Design
Performance is unfortunately one of the often overlooked elements of responsive design. I’ve seen a few examples that “work” on a mobile device but still have a page weight that would make an elephant blush.

Responsive Principals
In this presentation steven talks about the underlying principles of responsive & fluid design, progressive enhancement, adaptive design, device detection, multi-platform design, cross-platform development processes, and mobile device capabilities.


Tools, Resources & Themes

Responsive Design Drupal Themes
Thanks to Aidan Foster from responsivedesign.ca who has pointed us in the direction of some Responsive Drupal themes. Aidan says that while themes like Zen and Omega are fully functional, they contain a lot of features you might not use and should be removed to keep site weight down. Aidan recommends Boilerplate as the best approach allowing you to build up your requirements.
Using Breakpoint 1.0 in a Responsive Web Design Project
Breakpoint 1.0 is a Sass project created by Mason Wendell that makes it a little easier to keep track of all your media queries.

Detector [BETA] – combined browser- & feature-detection for your app
Detector is a simple, PHP- and JavaScript-based browser- and feature-detection library that can adapt to new devices & browsers on its own without the need to pull from a central database of browser information.

Pageguide by tracelytics 
Pageguide is an interactive visual guide to elements on web pages, and because it targets the element it will still work for Responsive Designs. Unfortunately there are a few styling issues with it out of the box at smaller resolutions, but your talented web folk so there is nothing to stop you making a few tweaks. It could be a handy tool for a recently redesigned site.


Responsive Workflow

How To Create A Responsive, Mobile First WordPress Theme
While the title of the article looks to be a tutorial there the post itself is sans coding but that doesn’t mean it’s not helpful. Ellen talks about the workflow you would go through when creating a responsive design and while the title is geared towards wordpress her process is true across the board. Thanks to Ellen’s illustration which we’ve used for the header image this week.

Responsive web design: a project-management perspective – Dev.Opera 
An older article (from April) where Opera take a look at the workflow around responsive design starting with whether the site needs to be responsive and taking you through what should be the client journey for your agency.


Responsive Typography

How To Maintain Readable Type In Responsive Design
Seeing as you’re reading this newsletter I’m going to assume that you’ve got, or are working on, a site that has a fluid grid. While the text will adjust to fit the container width you should pay attention to the font size, line lengths and line height for any device width. VanSeoDesign provide a good overview of the techniques and tools to get it right.

The Ultimate Guide to Golden Ratio Typography
Trent Walton recently talked about fluid type which eventually led me to this article.  I found it a very interesting read, and even better it lead me to the golden ratio typography calculator. With this calculator rather then leave your line-height at 1.5 through all of the breakpoints it will help you update the line heights based on font size and content width.

On Widows, and How to Tame Them
For about 5 minutes I read this as “Taming Windows” until I realised it was 2am and I should get some rest.  Taming widows (as in dressed in black and mourning at a funeral) is a Javascript plugin created by @Nathan_Ford that automatically fixes typographic widows on your web pages.


New sites & Inspiration

Microsoft
Yes you read correctly, Microsoft are trying out a new responsive home page, and it’s nice!

>a href=”http://moople.co.uk/apple/”>Apple (by moople)
The guys over at Moople have tried their hand at responsifying the Apple home page. With Microsoft testing their page you would think that Apple would already have something in the pipeline.
Have you ever refactored a popular websites page to become responsive as a side project? Tweet us because we’d love to see more examples of the Apple version.

Move The Web Forward | Guide to getting involved with standards and browser development 
This is responsive design… but what is inspirational about this site is what it stands for. Visit the site and help (or get helped) moving the web forward.

From Wichita with Love
This is a lovely little web site, nothing overly

Keynes for Kids
What an amazing example of responsive design. Nothing too difficult within the markup but an awesome design.


Workshops & Training

Pragmatic Web design – 1 day workshop
Pragmatic Web Design is a one-day course hosted by us — Messrs Whitaker and Elliot Jay Stocks — and aims to remove some of the myths surrounding modern web design. The first workshop is on the 6th August and you can register now.


Wrapping up…

We had some issues with our hosting provider getting hacked which took the site down for a day. Fortunately my good friend and super sysadmin @bart613 looked after me with another server. Thanks Bart.

I know a lot of you will be concerned that Stu Robson hasn’t been featured lately after his amazing run (he seems to have been over taken by LukeW). A big thanks to Stu for including us in his email newsletter wrap-up, and a little birdie told me (i.e twitter) he’s working on a responsive series so he’ll be back in abundance soon.

Next week we’ll take a closer look at how responsive design is affecting advertising revenue streams and what the big players are developing to deal with this. In the mean time check out the Microsoft Polymorphic pilot ads.

As always we’re keen to hear your thoughts and suggestions, just email or tweet us. During the week we stay active on twitterFacebook and Google Plus so follow us what ever your poison.

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>