Pondering Responsive web design


Mashable graphicI’ve been building websites since the early 1990s, and have had my own websites continually since 1995. For a few years, I did website design and analysis for commercial clients – mostly small local businesses. I even taught web design at a local adult learning centre for a couple of years. Way back when the Net was relatively new, I even did some pages for local events. Although I do less coding today, mostly for my own use, I still have an interest in the developments in web technology and layout.

I taught myself the basics of HTML back when it was version 1.0, 20 years ago – not all that difficult if you were schooled in using the old word processors like Perfect Writer and Wordstar. The first word processors used similar markup styles. Some even required users to compile the text in transient files, in order to see the formatting results, because they couldn’t be shown onscreen at the same time as the markup. That’s because these programs were small, tight and efficient enough to fit in the limited physical computer memory – 16 to 64KB in the early days of computing – but not very feature rich. Ah, the good old days of the Z80 and 6502 processors.

HTML was fairly easy (for me), but clumsy. It was a flat, 2D system and building some elements – tables in particular – was awkward and time-consuming. HTML tried – with limited success – to mix design with structure in one all-encompassing language. It was predicated on the printed page – basically replicating it onscreen. The initial versions of HTML were a desktop-publishing-like environment for the screen.

But the old ways are not always suited for the new devices. Page designs and layouts done even five years ago may be outdated and ill-suited for mobile devices (as I have found from my own work). New design paradigms are needed to stay current with the ebb and flow of technologies.

John Alsop wrote, in 2000,

When a new medium borrows from an existing one, some of what it borrows makes sense, but much of the borrowing is thoughtless, “ritual”, and often constrains the new medium. Over time, the new medium develops its own conventions, throwing off existing conventions that don’t make sense.

In order to overcome HTML’s limitations, coding platforms evolved – Flash, Java, Javascript among them – to give designers more flexibility and artistic freedom. While I tinkered with these, I never delved very deep into them. I did quite a bit of computer programming back in the 1980s, but it takes a lot more time and focus than I had to put into it in the past decade. (Which reminds me: I’m long overdue to update some of my older web pages… seems every time I start, i get distracted by something else – blogging, writing, playing ukulele, reading, politics…) Still, I did learn to incorporate open source scripts within websites, even if I couldn’t write them from scratch.

CSS – Cascading Style Sheets – came into use in the late 1990s, separating formatting and layout from structure – or at least a good portion of it. CSS also introduced a 3D layering that opened up web pages for some spectacular layouts and added new levels of complexity (and challenge) to design.

I loved working in CSS – I still do, although my skill at it today is only modest. But I look at the work of others with great interest, and often download templates and CSS files to experiment with, offline, looking for some elements I can apply in my own sites, deconstructing the author’s code and his or her intent.

With CSS , typographers and graphic/layout artists could finally contribute significantly and creatively to web design.

The latest trend is responsive web design – RWD – which Kayla Knight describes as:

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

In other words, using a flexible design – mostly based on CSS – that presents the web page to the viewer according to the parameters of the device used to view it. In light of the accelerating growth in mobile device usage and ownership, it makes perfect sense. And a responsive design simplifies the layout process: only one site layout need be used, not three or more, each formatted for a different device, as was done in the past.

In an article explaining what key focal points have to be considered and used in creating RWD, Ethan Marcotte explained:

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

An article on Mashable noted:

In simple terms, a responsive web design uses “media queries” to figure out what resolution of device it’s being served on. Flexible images and fluid grids then size correctly to fit the screen. If you’re viewing this article on a desktop browser, for example, try making your browser window smaller. The images and content column will shrink, then the sidebar will disappear altogether. On our homepage, you’ll see the layout shrink from three columns, to two columns, to a singular column of content.

This isn’t as difficult to achieve as it is tricky, because you have to code numerous elements for the sort of awareness required for resizing and optimal display.

It’s not just for aesthetic reasons that RWD is the way to go. Over at Business2community.com, George Glover recently wrote:

Google has advocated for responsive web design and recommends it for mobile configuration with its application (app). The company further states that responsive web design is in fact the industry best practice.
So why does Google advocate so insistently for responsive web design? It’s because these types of sites have only one URL and the same HTML, neither of which change regardless of the device being used. This makes Google’s job much easier as it crawls, indexes and organises information and content. If sites have different URLs and HTML coding for browsers and apps, Google has to crawl and index these as separate versions, though they’re all still the same site.

Fortunately (for me), I can download any number of free or shareware templates that already have the essential coding, and can be adapted and personalized – made easier of course by having a basic understanding of CSS and HTML coding. Which is what I’m doing now: preparing a new design and look for some of my older pages, preparing to migrate my sites over to RWD platforms, and working on a new website for my 2014 municipal election campaign.

And, of course, I’m reading everything I can get my hands on about RWD to make sure I understand and apply it properly.