Responsive Design Weekly #60

.net Side Project of the Year

Hey there and welcome to another edition of responsive design weekly.  This week we’ve got some amazing news! But first the introduction:
Today we feature some great articles.  One of them is about taking responsive design the next step and providing contextual/responsive information to the user, for example based on the time of day. People are quick to dismiss this because we don’t have a full grasp as to what that particular user is doing at that particular time, so how dare we try and guess and provide content around that scenario.  The fact is, our whole website is one big content guess about what the user is looking for and trying to achieve.

The thing that we need to look out for is keeping our content consistent for returning users, because on returning at another time of day I will expect to find the same information that was there in the morning. If it’s gone then a sensible user journey needs to be available for the user to find that content again.  Food for though though.

Ok, here’s the good news!  As a lot of you were reading last weeks newsletter I was overjoyed to be picking up the .net award for Side Project of the Year for “Am I Responsive”.  It was an honour to be nominated and I had a great afternoon where I was finally able to meet some amazing people, more about that here. A massive thank you to everyone who voted, it means a lot.

Meeting everyone on the day gave me a new lease of life on building things that will benefit the wider community, so this week I spent more time together content for a responsive resource site. It is going to contain lots of these kind of resources, but focus more around the core concepts that you will want to understand when approaching a website build.

Alrighty then, lets get going…

Headline

Designing for Breakpoints

When thinking about major breakpoints, remember to think about device classes. If you’re thinking about smartphones, tablets, laptops/desktops, TVs, and game consoles, for example, you’re heading in the right direction.


Our Sponsor

Time is running out!  Move Beyond the Desktop Today and Save $100!

Join 200 other mobile website designers and developers at BDConf in San Diego for two days of mobile inspiration and a day of optional workshops. Speakers include Luke Wroblewski, Ilya Grigorik, Divya Manian, Jason Grigsby, Eric Bidelman & more!
Use discount code SD13RDW & save $100 — Register today! Breaking Development Conference


Articles

The development of responsive design

Taking a look at how to bring context into responsive design 2.0, displaying content to a user based on what they most likely are to be looking to find.

Publishers are charging forward with responsive design – now it’s time for advertisers to catch up

The advertising industry has so far struggled to keep pace with the needs of a responsive Web world. An early stop-gap solution has involved simply switching in ad units of varying sizes depending on where they’re viewed.

You Decide: Whitney’s “Responsive” Logo

Forget breakpoints and viewports for resizing and reflowing content, now we’re looking at responsive logos that change shape depending on the canvas size. There’s some interesting reasoning behind the approach… check it out.

Structuring And Serving Styles For Older Browsers

You’re probably aware that not all browsers support media queries. IE8 and below (plus a few other older browsers) simply can’t see styles that are cloaked in media queries. If we build a responsive site from small size up, these browsers will download all of our styles, but they will only be able to comprehend the stuff outside of media queries. If your project calls for a good experience in these browsers (many projects nowadays still do), this won’t work. You’re going to need a way to serve up these styles in a way that these elderly browsers can digest. The team at See Spark Box put their heads together to come up with a solution.

Response-ish Web Design

Two BBC News codebases are not better than one. But until the responsive site is finished the desktop site can’t be retired. Read on to find out how Responsive Web Design is being used to keep both sites up to date.

Three Reasons We’ve Outgrown Mobile Context

UX matters explain why they have gone away from a mobile site offering a snippet of the information and embraced the RWD solution

On ems and rems

This article is from last year but it somehow slipped through the net. It’s a great counter point on my suggestion last week to move from ems to using rems.


Images

Interchange – Foundation 4

Interchange uses media queries to load the images that are appropriate for a user’s browser, making responsive images a snap. It decreases the load times for mobile users while still serving the bigger content to your visitors with higher screen resolutions.

The Raster Image Paradox

Even at the possible expense of wasted bandwidth and low definition — heck, even up-scaling — this introduces less complexity and concern than any “responsive/adaptive image” technique seen to-date. They’re all hacks. They all break things.

Clown Car Technique: Solving Adaptive Images In Responsive Web Design

By including media queries and image tags within an SVG file you can effectively solve the RWD image issues… but then you’re serving svg images for everything. In this article Estelle Weyl goes deep into the possible solutions.


Inspirational Sites


Thanks everyone for reading this weeks newsletter. See you next week!

As always, if you have any articles that you think should be included make sure you reply to this email or shoot me a tweet and let me know.

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>