Want to keep the TNW Conference vibe going?? Tickets for TNW2022 are available now >>

The heart of tech

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
    Joel Falconer
    Story by

    Joel Falconer

    Joel Falconer is the Features Editor at TNW. He lives on the Gold Coast, Australia with his wife and three kids and can sometimes be found g Joel Falconer is the Features Editor at TNW. He lives on the Gold Coast, Australia with his wife and three kids and can sometimes be found gaming or consulting. Follow Joel on Twitter.

    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.