Responsive Design Weekly #94

MediaTemple goes responsive

Hello and welcome to edition #94 of Responsive Design Weekly! This week I won’t go in to too much before the links because I’ve had a bit more to say about a few of the links this week.

The feature site this week comes once again from the good work from the BBC. I especially love the use of responsive images. Rather then just being squishy, the images change to a tube of content version on smaller viewports (as seen in the day in the trenches image preview above).

Headlines

CSS Regions Matter

There’s been a whole heap of hot drama (*thanks shoptalk) around the CSS Regions. First A List Apart produced an article by Håkon Wium Lie that wasn’t really received well by the community and was then followed up by Sara Soueidan who produced this alternative view of the future (inspired by Håkon’s original article). After both these were written news unveiled that Google were going to pull regions out of Blink development citing performance reasons behind the decision.

This raises a larger question about how the future of the web will evolve. I’m all for a faster more performant web, but should we eliminate things like CSS Regions from the browsers and therefore take the choice away from designers/developers and users?

We should be looking to improve our flexibility in creating a more varied web and leave it up to the creators/contributors/consumers to decide if they want to utilise it. Surely in Blinks approach — and I put a strong caveat on this as I’m not a browser developer — it could be included as a flag that can be switched on and not affect the performance for those that do not enable the flag. This would no doubt require additional development work or may not be possible, however it is important that solutions like this should be considered (I’m not saying that Google haven’t made these considerations, just that they should always be made).

*hops off high horse and back into the newsletter* 

Using CSS Regions in Responsive Designs

Brian Rinaldi has also jumped on CSS Regions this week, and it is his article that pushed me towards including all the drama in this weeks newsletter. He shows how CSS Regions could be used in responsive design and it’s something that I’ll be exploring a little further in the next few weeks.

Moboom’s Responsive Web Trend2 Conference: February 12th in San Francisco

Join industry influencers, designers, and developers for a day of in-depth discussions and workshops, including:

  • Jason Grigsby on how developers can adapt to different forms of input
  • Ben Callahan on design approval in the context of the responsive process
  • Greg Nudelman leading a Lean Mobile-first UX workshop

Register for this free event here.

Articles

Why Codesign Tools are the Future of Web Design

While dreamweaver has gone by the wayside there has been a resurgence of web design tools that provide you with a design platform backed by actual HTML and CSS. These tools include Webflow, Froont, Macaw (which we have some exciting news about next month) and are gaining some traction in the web world. This article takes a look at why they might just be the future for web design

Nine Things to Expect from HTTP/2

You should look at number 2 on this list and rejoice. It won’t shave weight off your pages (that’s your responsibility) but it does look like http requests won’t be such the huge performance issue they are today. Also mobile get a win from header compression (although I’m not sure how much smaller you can make headers).

We spent a week making Trello boards load extremely fast. Here’s how we did it.

This was one that I missed from last week, but definitely worth a read. The post takes you through a week working towards improving the the trello web app response times. Why is this important? Well aside from that performance is key the Trello App is responsive and works a treat from desktop to a new developer test Blackberry device I’ve got on loan.

Working with quota on mobile browsers: A research report on browser storage

Because I talked about Trello before having the same interface across all devices I wanted to include this article featured in WDW (http://web-design-weekly.com/) this week. HTML5Rocks looks at how much data can be stored in the browser across different vendors.

6 secrets of creating the best responsive content

A focus on 6 content strategy suggestions for responsive design. Erik Boman shares a couple image tips and a few content specific guides.

New BBC interactive guides: responsive, dynamic and accessible web design

Econsultancy take a look at iWonder, BBC’s new content format for interactive guides. I was so impressed that it had to be included as our feature site this week. The navigation touches are great.

As CNN mobile traffic hits 40%, editor calls web vs. apps debate ‘red herring’

It will always be a this or that debate for web vs apps. At the end of the day you should be doing whatever your customers want and what you can afford within your budget. If you can, do both!

The mobile inevitability: How CNN is prepping for the majority-mobile audience coming in 2014

Tutorial

Making Foundation 5 framework No Conflict in WordPress

If you’re using foundation with a WordPress site you might want to check this out. It shows how to set up your site so that you don’t run into any conflict issues when adding in additional plugins.

Prevent Yahoo! Mail from rendering your media queries

Plugins / Tools

Bootstrap Accessibility Plugin: Making the Popular Web Development Framework Better

Accessibility is for everyone, and PayPal have helped one of the most popular responsive frameworks — Bootstrap — become more accessible.

Merkle-XD/srcn-Polyfill 

Barry Latimer wrote to us to let us know that he’s created a srcn PolyFill based off Shawn Jansepar picturefill code. This is based on the Tab Atkins srcN spec (http://tabatkins.github.io/specs/respimg/Overview.html)

Image Lightbox, Responsive and Touch‑friendly

A small lightweight (although requires jquery) responsive lightbox solution.

mydevice.io

A common list of smartphones and tablets devices values. As with all these kinds of tools remember you don’t /have/ to target specific devices, let your content and design dictate where the breakpoints are needed.

You Might Not Need jQuery

Although jQuery is small, widely available on CDN’s, is already cached a lot of the time, *add more arguments for*… it is still a bit of a drain on performance and battery life for mobiles. This site provides a side-by-side list of most of the common uses for jQuery and provides the javascript alternative (*note that these JS methods will only work on IE8+ or IE9+ depending on the requirement).

CSS3 Media Queries

I’m surprised this hasn’t been featured before. A site that shows which media queries are fired when you visit the home page, plus an overview of media queries and a real time testing page. They also provide a series of target devices, snippets and instructions on Responsive Adsense.


TIP OF THE WEEK: Use box-sizing: border-box

If you’re rolling your own CSS and markup for your next website then do yourself and favour and use * { box-sizing: border-box;}

This sets the box model the way it should be.  Before box-sizing if you set a three column grid to have widths of 25%, 60% and 15% and then needed to add some padding you would have to calculate how much padding was needed and remove that from the width of the container you were applying the padding against… who needs that?!?! With this tip the padding you apply will be taken from the contents of the column itself, rather then being adding to it’s overall size.  Just like it should be.

Paul Irish wrote an article about it that I refer to about once a week.

It’s supported from IE8+, and if you have to support IE6 and IE7 then you can use this polyfill.


That’s all for this week. I hope all of my Australian readers had a Happy Australia Day last weekend and a relaxing Monday off work.

Until next week!

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>