BitDepth#910 - November 05
04/11/13 20:28 Filed in: BitDepth - November 2013
There are lots of gimmicks which get pressed into service to make websites more exciting. Making webpages responsive though just makes sense in a country that's increasingly accessing the web on mobile phones.
Doing the fluid web
My photoblog’s design rendered in Chrome on Android, left and Chrome on the desktop, right, reflects responsive design at work.
If there’s a single buzz word that’s been consistently a part of discussions about web design over the last six months or so, it’s responsive design.
Unlike parallax design (another popular concept which can also be made responsive), which puts all the content of a website into a single scrolling page designed to break like a series of slides, responsive design depends on a lot of behind-the-scenes code to do something that seems perfectly normal, reflowing the content of a website so that it’s optimised for reading on different devices.
That wasn’t a problem locally as recently as a year ago. Back then, in the dim mists of broadband history, only the fearless dared to load a web page using an EDGE data network, so seeing anything in a phone’s browser was something of a miracle.
More than three-quarters of the way through 2013, it’s becoming increasingly clear that T&T handheld device users will begin to account for a much larger share of website visitors than ever before.
Most such users can even choose their own browser for their cellphones, and the range of browsers for mobile devices is growing, even in the closed ecosystem of Apple.
If you offer content on the web and want it to be readable, it’s time to make the jump to responsive design. Chances are if you’re serving content regularly, you are already using a database driven solution which separates content and chrome, normally a design theme you add to the software.
In normal-speak that means that the words and pictures are served by an essentially invisible database engine and the way they are presented is governed separately by the theme’s design code.
The most common and friendly way this gets done is with software by WordPress, though high-end, content-rich websites use more powerful systems like Joomla and Drupal which operate on the same principles.
Regardless of the source, however, responsive sites work pretty much the same way when they hit a browser.
First, the code runs a quick test to see where it is, referencing the user agent code that identifies the browser type.
Then it assigns a stylesheet to the content which changes the look and feel of the content quite dramatically, shrinking graphics and increasing the size of text.
HTML gurus will laugh uproariously at this wild oversimplification of the code engine of responsive design, but the outcomes are pretty similar across browsers and viewing platforms.
Responsive design, as it turns out, is less a hassle than an opportunity, because it’s come along at roughly the same time that webfonts have begun to find wider acceptance.
While the results are less precise that most print designers might care for, these new design elements make for more readable and attractive text on small screens.
I’d switched my online archives for this column to a responsive layout two years ago, but only migrated my blogs a month ago.
The reason was an all too commonplace one. I really liked the design of my old theme, but the developer finally decided that he wouldn’t be updating his code, and I had a choice between serving an attractive page that offered the equivalent of 4 point type on a modern mobile phone’s browser or switching to a responsive solution.
My final driver for this exhausting revision of my online content was the new local reality of mobile phone consumption fuelled by 4G.
I review the three statistical packages that monitor my website’s readership somewhat addictively and by screen size, it was clear that consumption on such devices is inching up steadily.
Most recently, I’ve done a massive revision of my online photographic portfolio to make the images more accessible on mobile, but that’s still underway and testing on phones and tablets continues to suggest better ways to display the work on such devices.
Finally, I’ve created a responsive version of the weekly e-mail newsletter version of this column, partly out of cussedness and partly because content that doesn’t reformat to mobile devices simply stands out more when most of your material does, and not in a good way at all.
With much of this work behind me now, I have to report that such efforts will not necessarily win you new readers or amplify your audience.
What’s at stake here is matching your content to the changing consumption patterns of your audience and ensuring that you don’t lose them to substandard online rendering of your work.
My photoblog’s design rendered in Chrome on Android, left and Chrome on the desktop, right, reflects responsive design at work.
If there’s a single buzz word that’s been consistently a part of discussions about web design over the last six months or so, it’s responsive design.
Unlike parallax design (another popular concept which can also be made responsive), which puts all the content of a website into a single scrolling page designed to break like a series of slides, responsive design depends on a lot of behind-the-scenes code to do something that seems perfectly normal, reflowing the content of a website so that it’s optimised for reading on different devices.
That wasn’t a problem locally as recently as a year ago. Back then, in the dim mists of broadband history, only the fearless dared to load a web page using an EDGE data network, so seeing anything in a phone’s browser was something of a miracle.
More than three-quarters of the way through 2013, it’s becoming increasingly clear that T&T handheld device users will begin to account for a much larger share of website visitors than ever before.
Most such users can even choose their own browser for their cellphones, and the range of browsers for mobile devices is growing, even in the closed ecosystem of Apple.
If you offer content on the web and want it to be readable, it’s time to make the jump to responsive design. Chances are if you’re serving content regularly, you are already using a database driven solution which separates content and chrome, normally a design theme you add to the software.
In normal-speak that means that the words and pictures are served by an essentially invisible database engine and the way they are presented is governed separately by the theme’s design code.
The most common and friendly way this gets done is with software by WordPress, though high-end, content-rich websites use more powerful systems like Joomla and Drupal which operate on the same principles.
Regardless of the source, however, responsive sites work pretty much the same way when they hit a browser.
First, the code runs a quick test to see where it is, referencing the user agent code that identifies the browser type.
Then it assigns a stylesheet to the content which changes the look and feel of the content quite dramatically, shrinking graphics and increasing the size of text.
HTML gurus will laugh uproariously at this wild oversimplification of the code engine of responsive design, but the outcomes are pretty similar across browsers and viewing platforms.
Responsive design, as it turns out, is less a hassle than an opportunity, because it’s come along at roughly the same time that webfonts have begun to find wider acceptance.
While the results are less precise that most print designers might care for, these new design elements make for more readable and attractive text on small screens.
I’d switched my online archives for this column to a responsive layout two years ago, but only migrated my blogs a month ago.
The reason was an all too commonplace one. I really liked the design of my old theme, but the developer finally decided that he wouldn’t be updating his code, and I had a choice between serving an attractive page that offered the equivalent of 4 point type on a modern mobile phone’s browser or switching to a responsive solution.
My final driver for this exhausting revision of my online content was the new local reality of mobile phone consumption fuelled by 4G.
I review the three statistical packages that monitor my website’s readership somewhat addictively and by screen size, it was clear that consumption on such devices is inching up steadily.
Most recently, I’ve done a massive revision of my online photographic portfolio to make the images more accessible on mobile, but that’s still underway and testing on phones and tablets continues to suggest better ways to display the work on such devices.
Finally, I’ve created a responsive version of the weekly e-mail newsletter version of this column, partly out of cussedness and partly because content that doesn’t reformat to mobile devices simply stands out more when most of your material does, and not in a good way at all.
With much of this work behind me now, I have to report that such efforts will not necessarily win you new readers or amplify your audience.
What’s at stake here is matching your content to the changing consumption patterns of your audience and ensuring that you don’t lose them to substandard online rendering of your work.
blog comments powered by Disqus
