Why Responsive Web Design Is Here to Stay

Web design techniques come and go like fads. Remember Asynchronous JavaScript and XML? For several months in 2006 and 2007, Ajax was all the rage. Now, not so much. A sea change in the way people use technologies has seen one Web development paradigm rise up over the past few months, this time with staying power: Responsive Web design.

The principle of responsive web design and development ensures a website can be viewed from any device, with any size screen, with an experience that gracefully moves from step-down to step-up. It's about respecting the fact that users want to consume website experiences on their 4-inch mobile smartphone screen, their 7-inch mini tablet screen, their full-size 10-inch tablet device, their laptop screen and even their big-screen 4H HDTV. The design is responsive because it constantly takes into account the properties of the device and the browser on which the user consumes the content.

Responsive Web design judiciously uses grids, which let developers define how an experience will scale, as well as flexible images, formats and containers. It also represents a change of mindset for the developer, since he or she now prescribes relative sizes, such as 2.5 units wide, instead of definitive, specific measurements, such as 202 pixels, when placing and sizing elements of a page.

By using relative and not definitive measurements for elements on a page and their containers, the basic design and usability of a page can be maintained while scaling up and down on different browser sizes - that is, the site can be responsive to these changes -. Pages can gracefully eliminate elements that don't fit in a smaller window, too, and gain them back when the browser is later enlarged or un-zoomed.

Related: 10 Mobile Marketing Tips for Small BusinessesWhile You're At It: 6 Ways to Add Social Media to Your Web Design

If you haven't already heard about responsive Web design, you're certainly destined to be exposed to it. Even Google, arguably one of the gatekeepers of the Web industry, since designers build websites essentially to attract and retain the Google crawler and convince it to rank their sites highly in users' search engine queries, has embraced responsive Web design.

"Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device," the search giant says in its Google webmasters guide.

Here's what you need to know about responsive Web design and how it coalesces with our current environment.

Users Demand First-class Mobile Browsing Experiences

PCs are becoming passé. An increasing portion of your target audience uses devices that don't support the traditional width resolutions in the browser. They demand a first-class experience on their phones first and their desktops a distant second.

An informal moniker for responsive Web design and its attendant development is " mobile first," which recognizes that a significant portion of website traffic these days comes from portable devices of all sizes and form factors.

From smartphones to mini-tablets to regular-size tablets, a significant and growing portion of Web consumption is happening on devices on the go. You and your developers can no longer assume that your sites are being used on a full-screen desktop PC and develop mobile sites as an afterthought.

Frankly, the state of the mobile website market today is pretty dismal. Have you ever visited an airline website on your phone, for example? That was most likely a frustrating experience. Picture a dumbed-down site that lets you do one or two things - check flight statuses and maybe, just maybe check in for your flight - but kicks you back to the full site for tasks such as booking tickets or checking your frequent flyer mileage balance. The full site takes 45 seconds or more to load, mind you.

Looking Ahead: CIOs Must Move From 'Mobile First' to 'Mobile Only'

That's certainly not a mobile first experience. Indeed, wouldn't an airline website be the perfect site for a mobile first design? You have a phone in your pocket or bag most of the time at an airport; you're not carrying your powered-on, logged-on laptop everywhere. Why shouldn't you grab a boarding pass, rebook a flight, view yourself on standby or upgrade lists by default on mobile sites? A customer at an airport is a valuable asset, but airline websites are often designed for the person at home. Under a responsive Web design paradigm, that would change.

Users Want Content Right This Second

More websites are being accessed on the go, over cellular connections, so it's important to design pages that respond well and are usable over slower and/or higher latency connections as soon as possible, even before the page is finished loading. This often involves creating server-side components that detect what sort of device a user is consuming content on, then accessing a comprehensive database of device differences to serve the right content and client-side controls (such as JavaScript) so pages load faster than they otherwise would on any given device.

With responsive Web design, media queries are used to send the properties of the device a user is using - in particular, the width of the browser - and the server serves up different CSS style rules that end up letting the user have the best version of the site experience possible.

However, this can quickly balloon into an expensive approach. For one, that device database will always be changing, and it will essentially be a big list of quirks - for this phone, load this version of the code and send this version of the CSS, but for this tablet, send this particular version of the code, and so on. Creating and maintaining this database will be-time consuming and require many man-hours of expertise.

Tips: 6 Things You Need to Know About jQueryMore: 6 CSS Tools to Help You Build a Better Website

This part of the overall responsive Web design concept may be out of the reach for small and medium-sized businesses, who may prefer to optimize on a standards-based approach and, in essence, hope for the best. Alternatively, those businesses may be able to take advantage of frameworks such as jQuery Mobile that can query devices and make intelligent features about what HTML and CSS features will work. This is, perhaps, the most active area of innovation in the responsive Web design paradigm.

Web Ad Tech Hasn't Kept Up With Responsive Web Design

The most common challenge user-facing website creators have - well, at least user-facing websites funded by advertising dollars - is how to scale the advertising. Banner ads typically have a fixed width and don't scale down or degrade well; they simply work at a certain width and stop functioning when that width decreases.

This obviously affects site operators' revenue. How can they justify monkeying with design and creating mobile-first experiences when those valuable views and clicks aren't monetized? This is an area where pressure from site operators will be the big lever by which advertising companies will be induced to create and provide the technology for advertising to become compatible with responsive Web design techniques.

Whether you lead a team of designers responsible for an internal or external site, or you are a Web developer yourself, you need to know that responsive Web design is here to stay. Become familiar with it, study the techniques and insist that your partners make technology that makes responsive Web design both possible and attractive.

Jonathan Hassell runs 82 Ventures, a consulting firm based out of Charlotte. He's also an editor with Apress Media LLC. Reach him via email and on Twitter. Follow everything from CIO.com on Twitter @CIOonline, Facebook, Google + and LinkedIn.

Read more about consumer in CIO's Consumer Drilldown.

Join the newsletter!

Or

Sign up to gain exclusive access to email subscriptions, event invitations, competitions, giveaways, and much more.

Membership is free, and your security and privacy remain protected. View our privacy policy before signing up.

Error: Please check your email address.
Show Comments

Latest Videos

Launch marketing council Episode 5: Retailer and supplier

In our fifth and final episode, we delve into the relationship between retailer and supplier and how it drives and influences launch marketing strategies and success. To do that, we’re joined by Campbell Davies, group general manager of Associated Retailers Limited, and Kristin Viccars, marketing director A/NZ, Apex Tool Group. Also featured are Five by Five Global managing director, Matt Lawton, and CMO’s Nadia Cameron.

More Videos

Hi,When online retailers establish their multi channel strategy and they are using or will to use live chatbot to support their customers...

Alice Labs Pte. Ltd.

CMO's top 8 martech stories for the week - 6 May 2021

Read more

Thanks for nice information regarding Account-based Marketing. PRO IT MELBOURNE is best SEO Agency in Melbourne have a team of profession...

PRO IT MELBOURNE

Cultivating engaging content in Account-based Marketing (ABM)

Read more

The best part: optimizing your site for SEO enables you to generate high traffic, and hence free B2B lead generation. This is done throug...

Sergiu Alexei

The top 6 content challenges facing B2B firms

Read more

Nowadays, when everything is being done online, it is good to know that someone is trying to make an improvement. As a company, you are o...

Marcus

10 lessons Telstra has learnt through its T22 transformation

Read more

Check out tiny twig for comfy and soft organic baby clothes.

Morgan mendoza

Binge and The Iconic launch Inactivewear clothing line

Read more

Blog Posts

Getting privacy right in a first-party data world

With continued advances in marketing technology, data privacy continues to play catchup in terms of regulation, safety and use. The laws that do exist are open to interpretation and potential misuse and that has led to consumer mistrust and increasing calls for a stronger regulatory framework to protect personal information.

Furqan Wasif

Head of biddable media, Tug

​Beyond greenwashing: Why brands need to get their house in order first

Environmental, Social and (Corporate) Governance is a hot topic for brands right now. But before you start thinking about doing good, Craig Flanders says you best sort out the basics.

Craig Flanders

CEO, Spinach

​The value of collaboration: how to keep it together

Through the ages, from the fields to the factories to the office towers and now to our kitchen tables, collaboration has played a pivotal role in how we live and work. Together. We find partners, live as families, socialise in groups and work as teams. Ultimately, we rely on these collaborative structures to survive and thrive.

Rich Curtis

CEO, FutureBrand A/NZ

Sign in