Responsive Design Newsletter #13
Welcome to week #13
This week there’s been a rise in discussion around contextual content and responsive design. It’s a really interesting debate and is questioning not how we migrate content from current fixed width sites into the many breakpoints of responsive design but instead is looking at whether the content is even suitable for small devices… and if not suitable for the small device is it really suitable for the desktop? Alright, you’re probably more confused now then before you read that sentance but check out the headlines for a much better overview.
Before we get into the juicy links I wanted to share some more exciting news with you. The first annual online live repsonsive design conference is upon us and with speakers the likes of Trent Walton, Dave Rupert, Ben Callahan, Christopher Schmitt and Chris Coyier you would be mad not to grab a ticket.
Speaking of tickets… if you use the promotional code ‘RWDWEEKLY‘ you will save yourself 20% off the regular ticket price. Can I get a WHA WHA?
Our image this week comes from @bevan7 as he was getting started with a responsive design project. Thanks Bevan!
If you want to skip straight to anything in particular here are this weeks headings, but we suggest taking a look at everything because it’s AWESOME.
Headlines
The case for responsive web content: it’s all about the users
Ever since Ethan Marcotte introduced the concept of responsive web design, many of us have been anxious about all the possibilities it offers. But we have also learned two things: there is no mobile web, and there is no mobile context… or is there?
BBC – BBC Internet Blog: Olympics: User Experience and Design
Nick Haley, the Head of User Experience and Design for Sport & London 2012 at BBC Future Media, has written an awesome article detailing the process for designing the BBC London Olympics website. A must must must read.
ReadWriteWeb chooses responsive design over a native iPhone app
ReadWriteWeb have jumped off the mobile app bandwagon and are running towards RWD. What seems strange is that they’ve pulled the app well before the redesign of the site has been completed.
Responsive Content
Great Works of Fiction Presents: The Mobile Context
Stephen Hay writes a really good follow up to Christians article above. While I don’t agree with his point at every point, he does make some great points.
Users are ultimately the experts in deciding what they want to do on your site. Make it possible, make it easy, then get out of the way and let them fill in the blanks. They’ll attribute the good experience to you.
Mobile > Local
Just because someone is doing a search from a mobile device doesn’t make it a local search. And just because someone is looking for local content doesn’t imply they’re using a mobile device. Just because many local searches are from mobile devices does not imply that most mobile searches are for local information. Karen McGrane gets all up in yo’ face about mobile content.
We’ll tell you what you really want: Mobile context, top tasks, and organization-centric thinking
After Stephens and Karens follow ups Sara Wachter-Boettcher weighed in with her own thoughts
There’s been a lot of talk lately about how we plan and deliver content for people using mobile devices: Do we make a mobile site? An app? Go responsive? Does our content get cut down? Rewritten? Reprioritized? Hidden?
Excuse me but I signed up for technical stuff, not this content malarky…
Well then luckily for you we have covered some code based articles below, but try and remember that the content that is put into the sites you build is usually more important than the technique being used to display it. Even if you’re a a strict HTML & CSS person, knowing more about the problems that content presents will probably help you to provide technical content solutions… after all it’s difficult to find a solution if you don’t know what the problem is.
Articles
Mobile Web in High Resolution
But when we use CSS styles like borders and shadows, 1px really ends up becoming 2px (at least on the retina display). So in order to create a higher resolution experience we need a way to set less than 1px borders.
Mobile Websites vs Responsive Design: What’s the right solution for your business?
Google are pushing their GoMo campaign at the moment. I suppose that’s just because it’s hard to get a catchy RWD slogan. Maybe indeed-rwd’d. The article itself isn’t breaking any new ground but for those of you looking to make the choice between the two there’s nifty star rating table comparing the situations when it’s best to go either way.
Proportional Grids | built by Boon
Boon uses the box-sizing method to create a nice grid framework.
I’ve been working with responsive design for a year or two now, and one thing that has always been a bit of an issue is flexible grids. It’s obvious that as screen size gets larger, layout must change. How do you best handle that?
The Responsive Process
I noticed this article this week after coming across Josh’s article on SVG and thought that he provided a pretty good overview of the Responsive Process.
Responsive Design vs Mobile Apps
The biggest reason that Responsive Design is sticking with us is the mobile web, and how it is expanding rapidly. In the last few years, mobile web growth on phones has outstripped all other aspects of internet traffic growth, and this year it’s continued onto the tablet form factor with the iPad and Android Tablets like the Fire, and presumably the new Nexus 7, giving consumers a great experience with the web.
Twitter Blog: Overhauling mobile.twitter.com from the ground up
This week we found out that RWW took down their app in favour of an unfinished responsive design. On the flip side of the coin twitter has just finished a complete overhaul of their mobile specific website.
So why did they go with a mobile specific over responsive design? Because they have buckets of cash & resources and…. well because they can. Although we LOVEresponsive web design it is fit for purpose, and while that purpose is quite broad a specific mobile app still has a very strong purpose as well.
Tutorials
Media Queries, Sass 3.2, and CodeKit
Media queries are already awesome. Media queries in Sass are already awesome. Media queries in Sass 3.2 are going to be really awesome. This is how you can get CodeKit to start using it.
Create a Mobile First Responsive Design
In this tutorial Brad Frost takes you through everything you need to know about building a responsive design, and he even gives you a working finished product to see how it turns out.
Responsive 3D Panel Layout
While this is kind of impressive it does lose a bit of it’s wow on the smaller screens. Still, amazing stuff!
Pull Down Navigation
Mobile screen real estate is at a premium and one of the biggest problems to solve is how to display navigation when screen widths become quite narrow so Tom Kenny decided to have a look and see what he could come up with using some nifty CSS and a touch of jQuery.
ClearNav, a responsive navigation boilerplate
A nice easy way to include navigation at the top of the small device widths. The lovely paperfold transition makes it feel like more of a native app than a web page.
The @LukeW Corner
Yes that’s right we’ve got a new section in this weeks newsletter. Why? Oh I don’t know, maybe because Luke won’t stop posting awesome stuff for us to use. Seriously though, does anyone know someone else that puts out this much awesome content? Anyway that’s enough smoke for Luke, lets see what he had to say this week.
An Event Apart: Bringing a Knife to a Gun Fight
At An Event Apart in Austin 2012, Andy Clarke talked about the changing processes in web design and shared a number of tools and techniques that can help designers make transition to a more modern workflow. Here’s my notes from his talk:
An Event Apart: Responsive Design Workflow
In her presentation at An Event Apart in Austin, TX 2012 Sarah Parmenter talked about the changes responsive Web design requires of Web designers. Here’s my notes from her talk on Responsive Design Workflow:
An Event Apart: Rolling Up Our Responsive Sleeves
In his Rolling Up Our Responsive Sleeves talk at An Event Apart in Austin, TX 2012 Ethan Marcotte walked through ways to tackle thorny issues in responsive design layouts, media, advertising, and more. Here are my notes from his talk:
Stupidly there’s even more content on his site but it seems pointless for me to keep listing it. Go see yourself.
New sites & Inspiration
Grolsch has a beautifully laid out grid based design that is a pleasure to navigate across all devices. The home page has a touch enabled slider and the navigation tucks nicely away in the header on smaller devices. It’s not ground breaking, but it is very nice to use.
2012 Responsive Web Design Summit – you can’t put on a summit about RWD without at least knowing al ittle bit about how to build a responsive site.
Australian Government Department of Human Services
The Australian Governement is getting in on the act to show off their RWD skills. This site maintains a desktop, pad and mobile based media queries.
Google Brazillian Sandbox – Google do most things well, this is no exception
The next two, while they are responsive we’re picked due to the quality of the content over the implemenation.
The Pastry Box Project is a website of 30 amazing people bringing you a thought every day. Sometimes long sometimes short. You might recognise some of the names: Ethan Marcotte, John Allsopp, Andy Clarke, Elliot Jay Stocks… it’s not a bad bunch is it.
One Two One Two Microphone Check is about finding people who make things happen in various cultural fields; aims at overlapping those various cultural fields and mixing them all together to serve them fresh to you.
If you’ve just launched a site or are getting ready for a launch then send us a link to the site with a bit of information about the choices you made in the build and we’ll feature you in this section.
Wrapping up…
Don’t forget to use ‘RWDWEEKLY‘ when signing up for the first annual online live repsonsive design conference. Book early to avoid disappointment.
Until next week, you stay responsive San Diego.
