Our inability to live without constant updates from social media is cretinizing us. Joe Kraus identifies the problem.
We’re radically over-developing the parts of quick thinking, distractable brain and letting the long-form-thinking, creative, contemplative, solitude-seeking, thought-consolidating pieces of our brain atrophy by not using them.
The theory of responsive web design is that by using fluid grids, flexible images, and media queries you can deliver people a great experience no matter what device they are using. This sounds convincing, but then a lot of theory does. It is only when you put theory into practice that you really understand of what’s going on. This post is a case study of how I made the SPT site responsive. In particular, it is about my experience of creating a responsive layout from a pre-existing design.
The business case for going responsive is clear: 20% of our visitors are using a mobile device. We could have created a stripped down mobile site or built an app, but both options are much more expensive. The former means maintaining a separate codebase and the latter involves difficult choices about what devices to support and how much time to devote to maintenance.
Luke Wrobleski has argued that responsive designs should be built mobile first. By starting from the smallest canvas, you are forced to focus on the what message you want each page to get across. You design for users rather than the space. Mobile users are treated more respectfully: their time and bandwidth is precious. By starting with mobile, you put user experience at the core of your design.
Unlike most people who undertake responsive redesigns, I didn’t start with a blank canvas. Before I was hired, SPT had commissioned wireframes, mockups, and HTML from D8, a really great design consultancy in Glasgow. My role was odd one, consisting of guiding D8, writing the content for the site, and building the CMS. I was, however, happy to get the desktop site finished before beginning the responsive version, if only as a point of reference.
Despite having pre-existing CSS to work with, my first action in making the site responsive was to comment out all the old CSS and create a LESS file. (If you want to get started with LESS, I recommend using Andy Clarke’s 320andup framework, which includes some really useful mixins). Don’t worry about breaking anything. Indeed, it is good to break things to understand that they do. For instance, D8 used the Meyer reset, I replaced this with Nicholas Gallagher’s normalize.css and some things broke but overall it reduced the amount of CSS I had to write.
My process from here was to get get the main page elements working — container, header, navigation, main section, sidebar, footer — using a semantic grid system to take care of the percentages for the columns. Everywhere D8 had used ‘width’, I replaced it with ‘max-width’, meaning that the site looked virtually identical to the desktop version in no time, especially once I started reintroducing styles that I had commented out, rewriting them for efficiency and sustainability.
Using display:none is bad in theory, as it means you are reducing the experience of the mobile user. As a pragmatist, I am happy to use it on secondary content until I have got the main functionality of the site working. It is a question of resources and using display:none can really help in the early stages.
When it comes to main content you can’t use display:none. The things that broke most egregiously at 320 pixels were tables and tabs. For wide tables (e.g. Bus timetables), I used Chris Coyier’s excellent CSS for converting table cells to block elements. For tabs, I shrunk the text size and padding, ensuring that they were still clickable with even the fattest of fingers.
Jamie Boyd, the front end developer who wrote the HTML/CSS for Macdonald Hotel site, recommends presenting a static site to those using IE8 and below, but I ran into no problems using polyfills.
I debugged the site completely at 320 pixels, then at 480, then at 600, then at 768, then finally at 1024. This mobile first process of debugging, checking at all the breakpoints and fixing as issues as appropriate was much quicker than I expected it to be.
Responsive web design is not the only solution to the problem of multiple devices in a world where technology is constantly changing, but it’s the best we have at the moment.
Our inability to live without constant updates from social media is cretinizing us. Joe Kraus identifies the problem.
We’re radically over-developing the parts of quick thinking, distractable brain and letting the long-form-thinking, creative, contemplative, solitude-seeking, thought-consolidating pieces of our brain atrophy by not using them.