Bloggers, Get Ready for “Responsive Web Designs”

With more peo­ple access­ing blogs and web­sites from smart­phones, con­tent own­ers need to check out their exist­ing page designs to ensure they are “smart­phone friendly” — opti­mized for mobile usage. By that I mean: usable on a smart­phone with­out requir­ing a mag­ni­fy­ing glass to read or nav­i­gate them. Blogs and web­sites that aren’t just a “min­i­mized ver­sion” of the orig­i­nal content.

Yes, peo­ple can use pinch­ing or other fin­ger­tip ges­tures to con­trol scrolling or mag­ni­fi­ca­tion on their phones, but this is less than ideal. Problems abound.

Some nav­i­ga­tion schemes work poorly or not at all for peo­ple with fat fin­gers. People with bifo­cals or those over 40 may have trou­ble read­ing tiny type…

Photos or videos intended for view­ing on a lap­top or desk­top PC may down­load slowly, or be dif­fi­cult to see if not opti­mized for mobile viewing.

How Best to Optimize Mobile Content?

If you’re a busi­ness or con­tent owner like me, you will need a way to adapt to a grow­ing array of devices with diver­gent require­ments — with­out increas­ing the time you must devote to your blog or web­site. This may not be a press­ing prob­lem today, but when mobile access starts to exceed 50% of your audi­ence, the prob­lem will become urgent.

(If you earn your liv­ing design­ing and devel­op­ing blogs or web­sites for oth­ers, Halleluja! You’ve just stum­bled on a new rev­enue stream.)

It’s imprac­ti­cal tackle these mobile opti­miza­tion require­ments on a post-by-post or page-by-page basis. Instead con­tent own­ers need a smarter, more mod­ern tech­ni­cal plat­form to han­dle this for the blog or web­site as a whole. The smart way to tackle web + mobile opti­miza­tion is by using a design strat­egy called “respon­sive web designs.”

Assuming you’re not a web devel­oper by trade, you also want a plat­form that han­dles the heavy-lifting for you, with­out requir­ing you to make exten­sive use of hand-coded scripts…

WordPress Users, Rejoice

If you use WordPress to man­age your blog or web­site, there’s a new tool in the off­ing that can sim­plify your adop­tion of a respon­sive web design strat­egy. Check out Headway Themes. (Pricing ranges from $68 to $378, depend­ing on the options.)

Their upcom­ing release, Headway 3.0.5, aims to tackle some of the core lay­out chal­lenges: enabling the designer or tech­ni­cally savvy blog­ger to turn fixed-layout designs into flex­i­ble or “respon­sive web lay­outs.” (Read the book Responsive Web Design if you want a deeper under­stand­ing of this topic as a whole.)

Headway experts dis­cuss the new func­tions in a screen­cast here; note that the respon­sive web demo takes place at about the 8-minute mark… (Caution: this video and dis­cus­sion are intended for peo­ple already famil­iar with Headway.)

How Headway (or WordPress, for that mat­ter) will sim­plify the task of serv­ing up the opti­mal media for each device is still unclear to me at this point, beyond the fact that it will involve the use of “media queries.”

A Good First Step

Whether or not Headway has the per­fect solu­tion in Q1 2012, I’m relieved that the WordPress devel­oper com­mu­nity has begun to tackle some of the chal­lenges pre­sented by rapid adop­tion of mobile web access. Their efforts should even­tu­ally make it eas­ier for con­tent own­ers to adapt con­tent for opti­mal view­ing across a broad gamut of devices.

At present <5% of my blog vis­i­tors arrive here via a smart­phone. This gives me time to exper­i­ment with WordPress and Headway (or oth­ers), try dif­fer­ent approaches using an exper­i­men­tal site, and be ready with a solid solu­tion once mobile traf­fic becomes significant.

In the mean­time I look for­ward to some hands-on test­ing to see what’s involved in opti­miz­ing for mobile web visitors.