Mark Lyn­der­say

If there's a sin­gle buzz word that's been con­sis­tent­ly a part of dis­cus­sions about web de­sign over the last six months or so, it's re­spon­sive de­sign.

Un­like par­al­lax de­sign (an­oth­er pop­u­lar con­cept which can al­so be made re­spon­sive), which puts all the con­tent of a Web site in­to a sin­gle scrolling page de­signed to break like a se­ries of slides, re­spon­sive de­sign de­pends on a lot of be­hind-the-scenes code to do some­thing that seems per­fect­ly nor­mal, re­flow­ing the con­tent of a Web site so that it's op­ti­mised for read­ing on dif­fer­ent de­vices.

That wasn't a prob­lem lo­cal­ly as re­cent­ly as a year ago. Back then, in the dim mists of broad­band his­to­ry, on­ly the fear­less dared to load a Web page us­ing an EDGE da­ta net­work, so see­ing any­thing in a phone's brows­er was some­thing of a mir­a­cle.

More than three-quar­ters of the way through 2013, it's be­com­ing in­creas­ing­ly clear that T&T hand­held de­vice users will be­gin to ac­count for a much larg­er share of Web site vis­i­tors than ever be­fore.

If you of­fer con­tent on the web and want it to be read­able, it's time to make the jump to re­spon­sive de­sign. Chances are if you're serv­ing con­tent reg­u­lar­ly, you are al­ready us­ing a data­base dri­ven so­lu­tion which sep­a­rates con­tent and chrome, nor­mal­ly a de­sign theme you add to the soft­ware.

In nor­mal-speak that means that the words and pic­tures are served by an es­sen­tial­ly in­vis­i­ble data­base en­gine and the way they are pre­sent­ed is gov­erned sep­a­rate­ly by the theme's de­sign code.

The most com­mon and friend­ly way this gets done is with soft­ware by Word­Press, though high-end, con­tent-rich Web sites use more pow­er­ful sys­tems like Joom­la and Dru­pal which op­er­ate on the same prin­ci­ples.

Re­gard­less of the source, how­ev­er, re­spon­sive sites work pret­ty much the same way when they hit a brows­er. First, the code runs a quick test to see where it is, ref­er­enc­ing the user agent code that iden­ti­fies the brows­er type.

Then it as­signs a stylesheet to the con­tent which changes the look and feel of the con­tent quite dra­mat­i­cal­ly, shrink­ing graph­ics and in­creas­ing the size of text.

HTML gu­rus will laugh up­roar­i­ous­ly at this wild over­sim­pli­fi­ca­tion of the code en­gine of re­spon­sive de­sign, but the out­comes are pret­ty sim­i­lar across browsers and view­ing plat­forms.

Re­spon­sive de­sign, as it turns out, is less a has­sle than an op­por­tu­ni­ty, be­cause it's come along at rough­ly the same time that web­fonts have be­gun to find wider ac­cep­tance.

While the re­sults are less pre­cise that most print de­sign­ers might care for, these new de­sign el­e­ments make for more read­able and at­trac­tive text on small screens.

I'd switched my on­line archives for this col­umn to a re­spon­sive lay­out two years ago, but on­ly mi­grat­ed my blogs a month ago.

The rea­son was an all too com­mon­place one. I re­al­ly liked the de­sign of my old theme, but the de­vel­op­er fi­nal­ly de­cid­ed that he wouldn't be up­dat­ing his code, and I had a choice be­tween serv­ing an at­trac­tive page that of­fered the equiv­a­lent of four point type on a mod­ern mo­bile phone's brows­er or switch­ing to a re­spon­sive so­lu­tion.

My fi­nal dri­ver for this ex­haust­ing re­vi­sion of my on­line con­tent was the new lo­cal re­al­i­ty of mo­bile phone con­sump­tion fu­elled by 4G.

I re­view the three sta­tis­ti­cal pack­ages that mon­i­tor my web­site's read­er­ship some­what ad­dic­tive­ly and by screen size, it was clear that con­sump­tion on such de­vices is inch­ing up steadi­ly.

With much of this work be­hind me now, I have to re­port that such ef­forts will not nec­es­sar­i­ly win you new read­ers or am­pli­fy your au­di­ence.

What's at stake here is match­ing your con­tent to the chang­ing con­sump­tion pat­terns of your au­di­ence and en­sur­ing that you don't lose them to sub­stan­dard on­line ren­der­ing of your work.

Read an ex­pand­ed ver­sion of this col­umn on­line here: (http://ow.ly/adAll).

?