Early bird prices are coming to an end soon... ⏰ Grab your tickets before January 17

This article was published on April 19, 2011

320 and Up has you design for mobile first


320 and Up has you design for mobile first

320 and Up is a HTML5 Boilerplate extension that gets you to design for the mobile first to prevent the long loading times that come with most responsive design efforts.

Responsive web designs using Media Queries have become popular since browsers started adopting the CSS3 media queries specification, but the popular approach begins with designing for the desktop and then adding styles for smaller viewports.

What this means is that every time you load a site designed in this way on a mobile device — probably on a slower 3G connection — assets used only in desktop versions of the site are unnecessarily downloaded.

By beginning with a stylesheet for smaller screens and using media queries to style upwards in size, rather than down, this problem becomes ancient history.

320 and Up is a great kit for getting started with this approach to web design, but it’s also an important philosphy to keep in mind whether you use the resource itself or not. 320 and Up can be used as an extension to the popular HTML5 Boilerplate, or on its own.

Get the TNW newsletter

Get the most important tech news in your inbox each week.