Responsive Design Weekly Newsletter #18

Responsive Architecture is where the idea of responsive design started. This is an example of the such a concept.

Welcome to the Responsive Design Weekly! We’ve been going for 18 weeks now which seems crazy to me, but thanks to the ever rising subscriber list and the feedback I get from you we’re going to keep on for a hell of a lot longer.

This week I’ve had a few distractions around the office with a visit from John Allsoppto my sleepy ol’ town. We don’t get a lot of world class speakers come through here very often so it was an awesome opportunity to hear Johns thoughts and ideas and I’m now looking forward to the Web Directions Conference in Sydney even more.

One of the points that John made was the use of the web around the world. He showed a picture of people sleeping on a train and explained how the web exists outside of the browser, his point being that we could set up an alarm clock that was based on proximity rather than time that would use geolocation to alert the sleeping passenger that they were near home.  His comment on the slide was “…responsive web design won’t help these people right now”.

It was a really good point.

Sometimes as web designers we get caught up in the awesomeness of what we can do and might forget the real reason we’re designing and building websites. Essentially we are trying to solve problems and make life easier through the medium of the web, and while responsive design allows us to provide these solutions it isn’t in fact the solution itself and more of a means to an end (a pretty awesome end though, right).

Might seem a strange thing for the RWD newsletter to point out, but remember we’re building solutions to problems not responsive designs.
Enough of my ramblings though, you’re probably starved of responsive design links.  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

SXSW PanelPicker

Brad Frost is putting up his hand for the SXSW

Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. “Look! The site is squishy!” 

While creating flexible layouts is important, there’s a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web’s ubiquity and move it in a future-friendly direction.

Go over and vote for him to be included!  AND while you’ve got your voting shoes on for Brad I’d also like to suggest you vote for Paul and Andy.

The top responsive web design problems … and how to avoid them!

Are you having problems with your responsive design? if you filled out a survey we posted earlier you might just see some of your issues and the possible solutions in this .net article.

Beyond Media Queries: Anatomy of an Adaptive Web Design

It’s been a few weeks since Brad posted his newsletter and it’s no wonder, he’s been spending all his time preparing for this presentation. He focuses on switching the focus from responsive design and look at an adaptive web design… outside of the fluid grid, media queries and flexible media.


Articles

Mobile Web in Higher Ed
As if the guys over at breaking development don’t do enough for us, they’re starting a podcast. The first week takes a look at mobile web in higher education focussing on the responsive champions Nortre Dame.

Master Responsive Web Design With Gridset
I’m a big fan of the work that Mark Boulton does around Grids and his work with Gridset is on the way to something special. It’s great to get you going for a prototype but when it comes to production I think you’re going to want to code it up from scratch.

Navicon 
Jeremy points out that the three lines are now being used more and more often to denote a menu item in responsive design. If you can also fit the word menu, why be cryptic?

Draft Episode 01: Responsive Web Design
Responsive Web Design: How has responsive web design changed things for web design shops? This is a 15 minute podcast talking about the new challenges in RWD with clients that don’t understand.

Responsive Line Breaks
In this article Dan Mall suggests that responsive design shouldn’t conflict with traditional graphic design principles and explains how it can certainly support the tenets of good design when implemented thoughtfully and thoroughly.

Creating Great Mobile User Experiences
Mobile and responsive content contexts are very closely matched. That is why we’ve added this great podcast from Rachel Hinman. She believes that it takes some “unlearning” to position yourself in the mobile context. Embracing the constraints of mobile and taking full advantage of capabilities such as voice and built in cameras are key. This allows you to leave the desktop mindset and design for the context.


Tutorials, Testing & Resources

Responsive Typography and Systematic Breakpoints
Oliver Ash takes us through how to keep your content readable with golden ratio based typography. He goes on to provide some mixins to help recalculate these sizes based on the sites breakpoints. Very cool.

Responsive, Retinafied Google Map Images 
How’s that for a keyword-packed title? Let’s take a look at Google Maps – more specifically, an alternative way to include them in your websites. We’ll be working responsively (of course) and we’ll take a look at a media query which will help us out with Retina displays too.

This is a technique which might ring a bell if you’ve ever applied border-radius to an image (before it was actually possible to apply border-radius to an image). It also takes into account some of the recent discussion about sprites and retina displays.

Bigger, Stronger, New Accessible Foundation Icon Fonts by ZURB 
Zurb have included a whole new accessibility icon set for you to use! To go along with this new accessibility icon set they’ve also made the markup more semantic, the CSS cleaner and included SCSS for those that love Sass. SASSY!

Responsive Web Design and Joomla
If there is anyone out there that uses Joomla then this article will be on interest. Check out some of the available templates and extensions that can help you get started with rwd.


New sites & Inspiration

Pelicanfly
This web development blog uses SVG for their logo and a few case statements in js to handle some breakpoints.  A lovely example of multiple columns on higher resolution devices.

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…

Breaking Development is running a conference in Dallas thanks to the super powers of Tim Kadlek (not just an awesome author). You only have to  glance on this page to see the pure awesomeness.
Don’t forget to use ‘RWDWEEKLY‘ when signing up for the first annual online live responsive design conference, only 11 days to go!

If anyone has any links they want to share be sure to post them in the comments onthe blog.

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>