Responsive Design Weekly Newsletter #16

Printers are devices too!

Welcome to week #16

This weekly update is hitting your inboxes a little later than normal thanks to many late nights up in front of the telly watching our beloved Australian athletes pick up more seconds and fourths then I’ve seen at an Olympics. The Olympics always seem to be an exhausting time for fans in another hemisphere and this year is no exception. Fortunately if there are any events that I just can’t stay up for there is a BADA55 responsively designed Olympic site from MSN, but more about that in the headlines.

Speaking of the MSN site, they didn’t have all good reviews. This weeks sketch is something that is going along with an article I’m writing that is focusing on how even though we’re developing sites for multiple devices a lot of the time we are failing to take the print device into consideration. Print styles have been around for a lot longer than our RWD media queries so why are we still ignoring this?

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

Responsive design for mobile intranets? 

http://www.steptwo.com.au
A lot of focus is placed on our public facing websites but not much has been written about Intranet responsive design. With an intranet you have a better idea about the context in which your users are accessing the content so you can make a few more assumptions with your design.

Maintaining Image Hierarchy And Aspect Ratio In Responsive Design

http://www.vanseodesign.com
Steven has been writing a few articles around responsive design lately and this time he covers of image hierarchy. When it comes to responsive images we are pretty much setting img {max-width:100%; } and not giving it too much more thought. Some of us are looking at serving up smaller images as well, but Steven’s point is around the images losing their natural hierarchy when the site is served in a linear viewport.

The difficult questions about responsive design 

http://jordanm.co.uk
Jordan has come up with some pretty cool responsive design posts and demos and is now looking for a bit of help. Take 15 minutes out of your day and answer his rwd survey because you can be sure you’re going to get something pretty cool back with the feedback he collections.

How we built MSN UK’s responsive Olympics site

http://www.netmagazine.com
This is my new favourite site at the moment thanks to my love of sport and the Olympics being in another hemisphere. Matt Clark talks us through the build process for the MSN UK’s responsive website. The article takes you along the process from the brief to delivering the final product and covers breakpoints, wireframe layouts, navigation, media layout and performance of the site.


Articles

Why I Stopped Using 8 Decimal Point Widths and You Should Too
weedygarden.net
Last week we saw an article about RWD’s dirty little secret… although not that secret. Erik explains why he’s also not worrying about all those decimal points. He see’s the only reason for extensive decimal places is to try and be pixel perfect for a photoshop design, but that surely is defeating the responsive process.

HTML5 adaptive images: end of round one
http://html5doctor.com
This is an older article but the comments are still gold. A possible CSS solution was included for responsive images (see example http://jsfiddle.net/Tq7Nd/1/) however Bruce points out that this would mean that browsers would begin to prefetch the images rendering the implementation useless.

Better grids for a responsive world
http://product.voxmedia.com
Scott Kellum has created a new responsive grid system using Sass and Compass called Singularity. This article takes you through his inspiration for the creation as well as how to use it in your next project.

Adaptive images: solving the responsive image problem
http://www.webdesignerdepot.com
Take a closer look at the Adaptive Images technique developed by Matt Wilcox

Responsive Design for SharePoint Websites
http://www.cmswire.com
The title of this article got me very excited. I work with a lot of government agencies that are being lead towards the sharepoint route, and while it can do some great things front end public facing websites are not one of the strong points. Unfortunately with this article you could pretty much substitute any CMS in the title and keep the same content. So why is it in this weeks newsletter? A fair question. Well I’m asking you if you have any examples or experience with RWD in Sharepoint….


Tutorials, Testing, Templates & Resources

JimBobSquarePants/srcset-polyfill
https://github.com
There’s a few polyfills for the preferred <picture> method of responsive images and now someone has written one for the WHATWG favoured srcset rwd image solution.

JA Elastica – A Free Responsive Template for Joomla!
http://kenchernoff.com

Test responsive design
responsivedesigntest.net
Responsive Design Test shows your site on a single linear page across 240, 320, 480, 768 and 1024px.

30 Useful Responsive Web Design Tutorials
hongkiat.com
Keep busy this weekend with 30 responsive design tutorials.

How to Build a Responsive Thumbnail Gallery
designshack.net
Building a responsive thumbnail gallery. What this doesn’t get into is the ways in which you can present your images by loading the smallest version first and following it up with a larger image.


Presentations

Responsive Web Design (RWD) with Sass+Compass
slideshare.net
Check out @snugugs presentation on using Sass and Compass to create your responsive designs

Content with Kristina Halvorson
5by5.tv


Workshops

Free Seminar | Responsive Web Design 
nobledesktop.com
If you’re in New York on the 15th August make your way down to this free seminar.


New sites & Inspiration

Web & Application Design & Development | Chester, Cheshire UK | Informatics Centre 
informaticscentre.co.uk
Alex Jones from the University of Chester has recently designed and built a new site for the Informatics Centre.

The main objectives were to design for mobile first and device independence in the hope that the site would be future proofed and I tried extremely hard to keep the page size down (the homepage is about 130kb). As the site adjusts to suit it’s screen size the design changes and Alex found it difficult to keep a consistency and maintain proportions, but I think he’s done a really good job.

ITN News
itn.co.uk

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…

The Olympics were not the only thing keeping me awake all hours this week.  I was fortunate enough to be invited to take part in a podcast by the British Tech Network along with @paulwheatley@decadecity@mrjoe@maniacyak and@craigmcpheat focusing on Responsive Design. The trouble with these cross hemisphere skype sessions is that it was at 8pm for the UK folk and 4:00am for me in Australia. The worse thing is they followed up the chat with a few beers while I had wheatbix… with beer of course ;) The episode should be up on iTunes this sunday so keep a look out.

Don’t forget to use ‘RWDWEEKLY‘ when signing up for the first annual online live responsive design conference. Book early to avoid disappointment.

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

Until next week, you stay responsive planet Earth.

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>