Designer, author and speaker Andy Clarke has released a major update to 320 and Up, his 'tiny screen first' mobile boilerplate. We spoke to Clarke (AC) about the revision, his relatively newfound passion for LESS, and why designers should consider going mobile-first.
.net: What are the benefits for designers when going mobile-first?
AC: For me, mobile- or content-first design is where all web design starts. Think about the elements you see on almost every web page – typography styles for headings, lists, paragraphs and quotations. Boxes, tables, forms and buttons. The look and feel of these elements likely won't change across screen sizes or devices. Only the arrangement of those elements on a grid will.
That's why it makes sense to separate the design process into two stages. The first I call design 'atmosphere' – typography, colour and texture, like border styles, boxes and shapes. The second is designing a grid – or several – and then arranging elements on those grids for different responsive design breakpoints. When I start a design, I focus on this atmosphere and it becomes the baseline for content/mobile-first design. From then up, adding files and styles only when you need them at each breakpoint will make our code more efficient and our pages faster. Everyone wins.
.net: Why did you feel the need to update 320 and Up? What was it not achieving in its original form?
AC: I wrote the original 320 and Up a year ago. Back then we were just getting started with responsive web design and many sites, such as mine and celebrated sites including those of Simon Collison, Jon Hicks and dConstruct 2010, plus frameworks and boilerplates such as HTML5 Boilerplate, structured their CSS3 Media Queries from the desktop down, rather than for small screens up. To put things right, I wrote 320 and Up.
Today, content-first frameworks are the norm. HTML5 Boilerplate and its mobile cousin now structure their stylesheets for small screens up. But Twitter's Bootstrap and countless other frameworks include fluid grids, and so I wondered if 320 and Up was still relevant.
I discovered 320 and Up is still very relevant to a lot of people and especially to me. I've used versions of it on every website I've worked on since I wrote it and it'd grown to include the files and styles I need when I start any new responsive web design project. The public version, now on GitHub, needed updating to include the latest files and styles from HTML5 Boilerplate as well as better integration with Bootstrap. I also wanted to include a few of my favourite responsive testing tools.
.net: What are the big changes in the new version of 320 and Up?
AC: I've simplified almost everything. I've removed files and styles I use only once in a blue moon, and sometimes not at all. That includes Respond.js, a polyfill for enabling CSS3 Media Queries in old versions of Internet Explorer, because these days I serve users of IE7/8 a fixed and centred layout, same as always.
In my work, I'm moving closer to Bootstrap and away from HTML5 Boilerplate, and 320 and Up reflects that. That's why 320 and Up's typography styles, as well as buttons, boxes, forms and tables, all use class attribute values that are compatible with Bootstrap.
I never wanted 320 and Up to become a development framework like Bootstrap or Zurb's Foundation. They're both great, but given my widely known aversion to grid frameworks, there was no way I was going to add grids – responsive or otherwise – to 320 and Up. That said, writing the same code again and again is (I heard) a sign of insanity, and so for the last few months I've been writing 'Upstarts'.
They're responsive design patterns and HTML and CSS for the things I build every day. Upstarts are built using non-specific HTML and CSS and consist of an HTML example page and an upstart.less file. I've included two-, three- and four-column responsive modules and some panels into this release and I'll add new Upstarts as I write them. I really hope other people will do the same by contributing on GitHub so that we can build a really useful pattern library for responsive web design.
.net: You seem to have got really into LESS of late – why do you consider it an important thing for designers to learn and use?
AC: LESS has completely changed the way that I write CSS. I'm not just a convert – I've become a zealot! It's helped to make my stylesheets more modular and better organised. This helps me when I'm picking up a project after a while and when I'm collaborating with other designers and developers on bigger projects.
I built the new 320 and Up on LESS. There's a new variables file that allows people to define a site's 'atmosphere' styles in just one place. Then I collated some fantastically useful CSS3 mix-ins and built the typography, buttons, forms and other LESS files around them. It makes developing CSS incredibly efficient. When it comes to responsive web design breakpoints, the way LESS handles importing styles from one LESS file to another is better than the way plain CSS handles imports. That's the main reason why there's now only a single stylesheet version of 320 and Up.
