Nói về Rresponsive design là gì

When your window on the web is small, the web feels pretty unfriendly.

Last fall and winter, the web got very small for me. From early November until late February, nearly all of my internet access was via my iPhone 4S. (I was away from the office dealing with an urgent family health matter.)

Having to view the web world through the smartphone screen was an eye-opening experience. Or should I say eye-straining experience? A vast percentage of the websites I visited — many of them major, quite popular sites — were either essentially unusable, or completely inaccessible, on my iPhone.

• Pop-up ads filled the screen, with either no clear way to close them, or with teensy tiny links/icons to do so, preventing me from even viewing the website itself.
• Article text was teensy tiny, too. Even zoomed in, some pages would render in 3pt fonts.
• Layouts would often break in unpredictable ways: sidebars popping in, images extending off screen, widgets jumping around.
• Often the most problematic sites also had pageload issues.
• Excessive JavaScript would bring the poor low-powered mobile processor to a crawl.
• Flash sites (so often owned by restaurants) were just blank, of course.

By contrast, when a site would load a mobile-friendly rendering, be it by dedicated subsite or responsive design, it was a breath of fresh air. My tension would ease.

Ahhhhhhhh.....

"Yeah yeah yeah," I hear you say. "But our audience isn't so tech savvy. They never visit our site using smartphones. Look at the analytics!"

Yes, well....

Site metrics tell us only about the users your site already has.

The real questions to ask yourself are:

• What devices and browsers are your target users using?
• Have they already tried visiting your (non-mobile-friendly) site?
• Could they get what they came for?

If they tried to use your site via a smartphone, and struggled with it, odds are they didn't. An unsuable site is like a magazine with the pages stuck together — people can't read it. And....

People learn.

If they have a bad experience with how the site renders for them, they will tend to go away for a very long time before trying again. Poor usability will depress traffic from what it might be otherwise.

People don't just look at websites, like at newspapers or print magazines. People interact with websites.

And whatever they're after, they expect websites to simply work.

Don't underestimate the unhappiness a site that's inaccessible can trigger in your audience.

When a site doesn't, the visitor feels neglected, ignored, deemed irrelevant, and comes away with a negative impression of the site's brand, its ethos, its relevance.

On the other hand, when a site works on, say, a visitor's smartphone, the visitor is free to engage in the site's experience — get the messaging, achieve the task, value what the site has to offer.

If we look at it from an SEO perspective, targeting only specific devices can diminish potential traffic from people not using those targeted devices.

Not supporting mobile is simply bad SEO.

A recent Comscore study revealed:

• Nearly 50% of all smartphone users are downloading apps and using the web browser.
• Only 32% played games and less than 25% listened to music on their smartphones.

That's right, more people are using their phones to surf the web than people are gaming or listening to music. (NB: The comScore report is well worth a look.)

Can you afford to ignore mobile?

No, there are no guarantees: Just because a site is accessible and appealing on a user's device doesn't mean the site will succeed in its own goals. But inaccessibility or bad UX can easily pre-empt any chance at success.

So what is the most cost-effective solution?

Bottom line: responsive web design.

The responsive design approach allows you to build once to present many different ways, on many different devices. (Screenshots from Science & Diplomacy, with layouts for desktops and smartphones. Designed and developed by PINGV.)

Your alternatives – dedicated iOS and Android apps, and alternative parallel mobile versions of sites – are likely to require more effort in design, development and maintenance.

The now-traditional 100%-width, stacked presentation of content is the easiest (and in many cases the only) layout that the various mobile browsers out there can interpret well. Responsive design lets you present content in a format that has the best chance of presenting a positive user experience for users on those devices, so they stick around and come back.

And this takes us back to creating the ideal user experience. Because...

Context is everything

Why would a user want to visit your site from a smartphone? You have to go back and consider your goals, and your target audience.

• The user is in a store and wants to look up that great product they saw on the site earlier.
• The user in the store wants to compare pricing, or consider simply ordering from the website rather than hassle with waiting in line and filling out delivery paperwork.
• The user in the store may be looking for that original inspiration, because what's in the store is not what she wanted. (Online stores always have greater choice.)
• The user may be elsewhere (e.g., at a family member's or friend's house) wanting to share an idea with someone else (the "what do you think about this?" moment), seeking validation of an intended shopping decision.

Why support mobile? You tell me.