Good things are afoot in the world of web programming around here. So that I can improve the efficiency of our processes in the day job, I’ve taken to learning some new ways of programming and designing websites. The main drive has been to turn designs into working HTML pages quicker, and to make the process of making websites “responsive” a lot more easily.
“Responsive web design” is a popular term which describes a technique which has taken off massively over the past year or so. Put simply, it means that the view you see when you load a website on an iPad or a smartphone is optimized automatically for that screen size. No more minute text and massively heavy images to download over a dodgy connection, but a layout which shows you what’s most important – the text, images and video – without you having to faff around with zooming the page in and out.
Is that important? Yep; more people bought internet-capable phones or “tablet” devices (iPad, Android device etc) last year than bought regular computers, so the number of people coming to websites using these devices will increase rapidly over the coming couple of years. (Update: Luke’s statistics show that nearly as many people worldwide use Android or iOS-driven mobile devices as use Windows-driven computers. Near enough 1 billion users from a total 2.2 billion, to be precise.)
The biggest new techniques I’ve learned recently are how to base templates and designs around the Bootstrap framework, and how to use the LESS CSS framework to create CSS files much more quickly and efficiently. (If you’re still writing CSS manually, then check out LESS and save yourself a truly HUGE amount of effort. Really.) I’ve merged the two techniques to create the first set of customizable templates for work, and using this base, I’ve started work on a completely new technical infrastructure for this website.
It’s annoyed me that the HTML5 structure I set out during the previous improvements doesn’t provide mobile and tablet visitors with a better experience, and the layout of the subpages – in particular, the layout of the Portfolio pages – has left much room for improvement for a while now. So the first task is to re-code the templates to make the whole site (with its current design) work better on mobile devices, so that I can use that base and improve the layout of pages where a more image-heavy layout is required.