Image may be NSFW.
Clik here to view.
The tech world declared 2013 as the year of responsive web design for a very good reason: websites now need to adapt to a wide variety of devices as more and more people become engaged with the mobile web.
Let’s face it, we’re nearing a Post-PC era as consumers ditch their desktop computers in favour of more portable and hassle-free devices like smartphones and tablets. Consequently, a huge chunk of Internet traffic comes from mobile devices, and in the future that’s likely to overshadow traditional PCs.
It is through this magical thing called responsive web design (RWD) that we’re able to seamlessly view and navigate websites whether we’re using a smartphone, a tablet, a laptop, or even a PC. Whatever the screen size and resolution, RWD makes sure a website displays properly so it doesn’t just look aesthetically pleasing, it’s also accessible and user-friendly.
Google in fact recommends responsive design, calling it the industry best practice.
Responsive Web Design is Invisible
I’ll be honest: I still cling to my iPhone 4S smartphone with its 3.5-inch display. I don’t mind the tiny screen real estate at all. Amid a sea of phablets and their humongous displays, my smartphone is proudly out of place and decidedly uncool, which is fine by me. Thankfully, because of responsive web design, the 3.5-inch display doesn’t seem inadequate at all. Images automatically adjust to fill up the screen, and the text is always readable. Once in a while I crave for a bigger screen, but for now this is enough for me since responsive design takes care of everything.
Sometimes though, I would still come across a few websites that’s clearly not optimized for my miniature phone screen—text is tiny, images are out of proportion, and lots of finger-work is required just to scroll back and forth. The result, needless to say, is not a happy experience.
There’s none of that hassle with responsive web design. Everything runs smoothly, and this fluid effect is actually invisible. After all, it’s only when something isn’t right that we notice it. Good design, however, is subtle and effectively invisible.
IT Consultis’ recent project for instance involved a design overhaul for ESSCA’s website, one of France’s prominent business schools. Whether you’re viewing ESSCA’s website via a desktop PC, a tablet, or a smartphone, the online experience is smooth. Images display correctly, information flows properly, the main and aside sections, navigation bars and footers are placed strategically. The result is elegantly professional (minimalist with red and gray accents), unobtrusively functional, and ultimately user-friendly.
I should know: on my 3.5-inch phone, the website functions perfectly.
How It Works
Responsive web design uses media queries to detect your device’s resolution and adapts the website to it. Fluid grid concepts and flexible images ensure the displayed images fit properly, maximizing whatever screen real estate your device has. Media queries also let the page decide the best CSS style rules to use for each device.
We’ve seen phone and tablet manufacturers come out with various display sizes to suit everyone’s taste, down to the last quarter inch. There’s 4.3, 4.4, 4.5 up to 6.7 and beyond (Yes, my 3.5-inch phone is terribly obsolete now). It’s the same thing with tablets, ultrabooks, laptops, desktops, etc. Responsive design recognizes the fact that people will be using different devices, and those people will appreciate it if their favorite websites were optimized for their device of choice.
With RWD, you only have to build or overhaul a website once, and automatically it translates to numerous screen sizes everywhere. Check this out for more info on responsive web design.
So, Is Responsive Web Design For You?
Even as Google endorsed responsive web design, it’s not always for everyone. Business Insider did a study to find out the pros and cons of RWD, and whether it’s better to build a dedicated mobile website instead. One thing is for sure, though: users will increasingly depend on their mobile devices to access the web.
Businesses who want to establish and maintain and their online presence should take advantage of responsive design. Having a mobile-optimized user-friendly site sends a professional message to customers that this company is serious about doing business.
That part about being user-friendly is perhaps the most important. Today’s media consumers are easily distracted and don’t have lots of patience. When confronted with a website that’s confusing to navigate, their tendency is to leave at once and look elsewhere.
For online businesses, that can be a fatal thing—their competitor who wisely shifted to a more responsive web design months ago gains the marketshare.