Responsive Design Weekly #28

3 Pillars of Responsive Web Design

Hello everyone and welcome to another responsive design weekly newsletter.

This week the big news has got to be all about the launch of the responsive TIME website.  It all started with the Boston Globe, then BBC, and now we see the Guardian getting involved.  But what does this mean for us? Directly the launch won’t affect many of us (apart from the new improved reading experience), but it will cause a few more organisations to take a serious look at redesigning their own site, or retrofitting the existing site so they don’t get left behind.

Okay lets get going!


Headlines

The New TIME.com: A Responsive Global News Site
Catherine Sharick annouces “TIME.com becomes the first global news site to roll out a fully responsive redesign optimized for mobile and tablet browsing” in an article you can tell is just brimming with delight.

They don’t really go into the details of things though. If you want details you need to read the case study by appendTo who were responsible for the front end part of the work.

Adaptive content management
I was fortunate enough last week to sit and chat with Mark about this blog post during Web Directions last week. He breaks down RWD beyond the design and media queries and looks at the tools that are available to serve the content.  Responsive design isn’t just for the front end groupies, we need to re-evaluate our content management systems and perhaps define new content distributions systems.

Obtaining sign off with responsive mockups
This article was out before our last email but it took me a while to get through the RSS feed to find it.  Matt Griffin from Bearded explains their responsive design process and how they’ve moved away from the fixed and static wireframes.  It’s a compelling approach and I think everyone would love to try it out on their next project (whether or not it fits with your client is a whole other story).


Articles

The Infinite Grid
Another one from last week on ALA that I missed. Chris looks at structuring your grid on the content and looks at things in terms of hierarchy, density, interaction and width. It’s a great companion piece to Matts article above.

Don’t Overthink It Grids
If reading isn’t your thing…. well first of all you’re doing it wrong by subscribing to a weekly newsletter containing nothing but links that take you to more articles which you have to read, but anyway….. then you’re in luck because Chris Coyier has set about this topic on video as well.

How Should We Write Media Queries?
Ben takes a really close look at the uses of the media TYPES when it comes to writing your media queries. Print, Braille, Projector, Handheld…. there’s lots more of them but when do they become important?

Should Mobile Design Principles Be Applied to the Desktop?
The peachpit get Jakob Nielsen to weigh in on the debate about designing the interface for desktop to match that of the mobile. An example of this was done with the newly launched http://www.polygon.com/ webiste with the menu on desktop also being the three lines

How to Get IE 10 Playing Nice With Responsive Websites
It’s time to welcome another browser into the mix….. well almost. With the arrival of IE 10 we are going to have an issue with tablets running in snapped mode where it ignores the meta viewport tag for any viewport below 400px. If only there were a fix for this….. read on.

IE10 Snap Mode and Responsive Design
A great tip from Tim Kadlec on adding @viewport to your CSS to ensure that your designs render correctly on Microsoft 8.

Debugging CSS Media Queries Johan Brook 
Fluidity and adaptive behavior is a hot subject nowadays, and it’s perfectly justified when looking at today’s mobile browser landscape. We achieve this with CSS’s Media Queries. But sometimes it can be messy – I’m gonna share a quick tip for indicating (with pure CSS) which media query that has actually kicked in.

BBC News on your mobile
BBC explain their journey over the past 6 months attempting to combine their m. news with their desktop content through responsive design

Responsive design at the Guardian: an introduction
A quick overview from the Guardian about how they’ve gone about the approach to responsive web design.

Time Moves to Responsive Design


Presentations, Tools & Tutorials

PRESENTATIONS

Karen McGrane – Adapting Ourselves to Adaptive Content, BDConf
This has been around for a few months now and the talk was way back in April, but it doesn’t make Karen’s talk any less relevant.

The Responsive Designer
A blog article overview of the the talk from Simon Foster at Web Expo Guilford on “The Responsive Designer”.

The Future of CSS Layout presentation at Future of Web Design conference 

TOOLS

Responsive design with paper
Wireframing with paper is a great way to quickly move the elements around the page. We tackled a responsive retrofit project and used this technique to work the exisiting design into an adaptive responsive model.

Proto: Rapid Prototyping for Responsive Web Design 
Proto helps you knock up quick responsive layout concepts by providing a set of predefined CSS classes. All that’s needed to get going is the proto.scss file and some basic HTML.

Responsive Sketchsheets
Zurb have come up with a few nifty sketch sheets that you can print off and start your responsive projects. It’s an important step in the responsive workflow and should happen early on in the process (right after you get an idea of the content)

Responsive-content
Responsive Content is used to load content that is appropriate to the current device’s screen size. It is typically used alongside Responsive Design techniques. Note however that Responsive Design and Responsive Content act on different levels: given a particular screen width, the former applies a particular styling to the same content – whereas the latter actually loads different content.  Confused? So was I until I read the whole Readme.md.

WordPress Responsive Video Plugin

CSS3 Media Queries Test on your browser

TUTORIALS

Zen Grids: A Responsive Grid System Built on Sass
Another option for a SASS based responsive design technique.

Responsive Accordian to Accordian · CodePen
We missed one of Stu’s Code Pens last week so we’ve got a double dose this week. I encourage everyone to test different implementations and share them through code pen, the more we can build the faster we can move towards best practices

A responsive ‘accordian to tabs’ pattern
Double (Stu) Rainbow!

Looking Beyond Common Media Query Breakpoints
Drew Thomas tries to get us to think past the mobile/tablet/desktop mindset and focus on the content.
Adaptive Web Design
Last week we featured some readlists by Jeremy Keith. This week we turn our attention to Aarom Gustafson.


New sites & Inspiration

The big site for this week is of course Time.com, but there were a few others which are worth a mention.

http://www.polygon.com – This is an example where the usage patterns extend from mobile into the desktop through the use of the three lines as the menu section.

From the readers:

  • Aaron Barker got in touch with us to show off his Responsive Design Retrofit. He got the idea after Ben Callahans talk at the RWD Summit.

Just launched a site? Getting ready for a launch? Well 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…

Well that’s all for this week. I’d like to send a shout out to Mighty Deals for joining up as our first advertisers through the website. We’re going to keep the newsletter ad free but I’ve taken on website ads to cover the monthly costs from Mailchimp.  An added bonus is that I’m also working with responsiveads.com to serve the ads so I’m keen to see how we can work with multiple creatives and ad sizes within the site…. watch out for a feature on that!

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>