Responsive Design

15 years of pixel pushing in the web design/development business has gone quickly, but in that time I’ve seen a few changes in the way things are done.

Back in the early days of the World Wide Web, we brave pioneers of web design suffered unmentionably at the hands of the two main browser manufacturers; Netscape and Microsoft. Every now and then, Netscape would release an updated version of its Navigator browser with exciting new features (yes, I remember the launch of JavaScript…) which would really push the envelope and allow people to try out new ideas. Then, when Microsoft realised that they were about to miss the boat, they leapt aboard with version 3 of Internet Explorer, started the first browser war, and gave birth to something which has caused countless sleep-deprived nights for front-end developers everywhere – ‘Browser Compatibility’.

Netscape Navigator LogoSubsequent releases of Internet Explorer introduced more and more incompatibility issues, culminating in the release of IE6, and at that point front-end developers faced compatibility problems in IE5 and 6 that were so severe and challenging to their budgets that they couldn’t spend the time to make things work perfectly in IE any more. IE7 wasn’t much better than its predecessor, but thankfully IE8 and subsequent releases have addressed many of the issues and are much easier to work with, though in my opinion, advancement in web technologies and web development methods would have happened at a faster pace if it wasn’t for Microsoft constantly throwing a spanner in the works.

The front-end development methods we used back then would strike horror into the heart of any semantically correct developer of today. There was no such thing as CSS, so the main methods for laying out pages were tables, spacer images, and frames. Tables were used to create areas of a fixed size on-screen, which would then be filled with text or images. If we needed to create white-space anywhere we would use a 1 pixel square, invisible image (usually known as a ‘spacer.gif’), which was then resized to create the space we needed, and if we wanted content to load independently in parts of the browser window we would frequently resort to the use of ‘frames’ (another Netscape invention), which allowed the browser window to be divided into rows and/or columns, each containing its own web page.

Those three methods were the predecessors of today’s block-level elements and CSS, and they were used on virtually every website that was built. Frames, in the form of the iFrame, are still valid in HTML5, and are still widely used, and to this day I still occasionally use my trusty old spacer.gif, although these days its use is limited to bug fixing (mostly for Internet Explorer unsurprisingly).

But the times they are a-changin’

Fast forward to today and what we see is a myriad of different platforms for viewing web content, which, at first glance, would seem to be a front-end developer’s worst nightmare, but the increase in platforms has brought about changes in the way we approach design, and changes in the way we build for the web. One of the most significant of these changes is the wide scale adoption of ‘responsive design’.

Responsive Design

It’s something of an over-simplification, but responsive design can be described as a web page development methodology which, when implemented, will cause a page to restructure its layout to suit the device it’s being viewed on. Take the page you’re looking at now as an example; if you resize your browser window you will notice that the layout of the page changes as the window becomes narrower.

What’s happening here is the underlying CSS code is set to change the layout of the page at certain ‘breakpoints’. These breakpoints are defined by the widths of various device displays. For example; the breakpoint for smartphones in portrait mode is set to 320 pixels, so resizing the window to anything below 320 pixels wide will cause the layout to change to suit a smartphone. A small tablet display is typically 800 pixels wide in landscape mode, so then widening the window to 800 pixels will cause the layout to change to suit a small tablet etc.

In an ideal world all web pages would be responsive, but the main problem in developing a bespoke site using responsive design methods is the extra time it takes. More development time leads to additional costs which can be prohibitive, but if you’re planning a new website or an update to your existing website it’s important to consider how your site will be viewed.

So remember to ask your designer/developer about responsive design and how they plan to make your site work on smartphones and tablets as well as desktop screens. And, in the unlikely event that you’ve never heard Bob Dylan’s ‘The Times They Are A-Changin‘, well, it has nothing to do with responsive design but I can highly recommend it 😉

Comments are closed.

Older Posts

November 2013
« Oct