What You Need to Know About Responsive Web Design

Since Apple released the iPhone 3 in 2008, mobile usage has grown at an exponential pace. Almost instantly, mobile apps and sites have become one of the most popular trends on the Internet. Everyone wanted a mobile app or mobile-optimized site until tablets came out the following year. With AirPlay and Smartwatch, there is no limitation for the screen size/device anymore.

And, earlier this year, Leap Motion now converts any surface into a touch screen experience. So, where do you draw the line to determine what’s the optimal screen size for a smartphone, tablet, laptop or desktop computer?

Ethan Marcotte introduced the term Responsive Web Design (RWD), a web design approach that adapts its layout to the viewing environment – across any device or screen size in 2010. Three years later, RWD became something everyone wanted. You see it in website proposals and discussion boards. In fact, some people claim 2013 to be the year of RWD.

What is Responsive Web Design?

So, what exactly is RWD? Why do you want a responsive website and not a mobile site? And, most importantly, how do you make one?

A site designed with RWD uses fluid grids, flexible images, media queries and, sometimes, server-side components to provide the capability to display the website in different layouts. So there is only one website, one data source and one central online hub for your business.

One problem many mobile users encounter is quality search results. Since a mobile site is independent from a full website, the search engine will crawl both sites and return different results. Often, a user clicks on a link that was supposed to go to your detail page, but they end up on your mobile site homepage instead. So, do you need to make sure your site floats nicely on mobile? Or, how do I compress my informative websites into a smaller site?

Responsive Web Design

Start with the RWD is the “Mobile First” concept. Prioritize your content presentation and make sure what information matters is included so you can provide meaningful mobile design and not just a mobile stack. Identify your content and strategy first, then make enhancements as device capabilities improve.

The Needs of Mobile Web Users

Kristofer Layon has applied Maslow’s human needs pyramid theory to the needs of mobile web users. Translating theory into user experience language is as simple as dividing it into four stages: Access, Interact, Perform and Enhance.

Beyond Responsive Design and Mobile First

Access

Foremost, users need to access the content. With more people relying on their mobile devices to access the web, achieving content parity and giving users access to a full experience regardless of their device or configuration are more important than ever.

It’s a myth that mobile users don’t want access to all of the information and functionality available to desktop users. A common problem with mobile site is the URL management. However, having all content under same roof and URL will definitely make it easier to give visitor access to the content they are looking for.

Interact

Once people land on your site, they need to be able to interact with the content and move around the website. There are different approaches and tips to tackle the navigation menu on mobile site, from a fixed bottom menu, to footer anchors, over canvas menus and toggle menu. Review your content strategy and audience and select the one that works best with your audience.

Performance

Performance is one thing that often gets overlooked. Fact is, mobile users will abandon a slow-loading website just as quickly as desktop users. Image optimization, client-side enhancement and server-side enhancements are all tools available to improve website performance on mobile devices.

Enhance

Many mobile devices and browsers can do things that desktops cannot. The very same thing applies with the desktop browsers. Making the most of these wonderful features will take the mobile experience to the next level.

There’s no excuse not to have a site that displays across multiple devices.

Why Responsive Web Design is a Must

Almost two-thirds of Americans use their mobile phones to go online and 34 percent ONLY or MOSTLY use the Internet on mobile. No website is too big or too small to be responsive if you prioritize, plan and design.

We are not saying native apps will disappear or decrease. In fact, they are steadily growing more popular. But we can’t neglect the mobile experience of regular browser users either.

Responsive Website Design will continue to be the hot trend in 2014, only with more tools and methods coming to the fore to improve the performance and flexibility.

Here’s one last thing to think about: How does the website look like in Microsoft Internet Explorer 7, where there is no media query support? The future for web design is not only forward-compatible, but backward-compatible too.

If your brand needs helps with creating a responsive website, we are here to help.

Tags: ,

Written by Judy Tsai

Judy Tsai leads the digital development projects for national and Texas-based clients, overseeing all aspects of the agency’s and clients’ software systems, server operations, app and website development, and data mining and analysis. An information technology master, she builds large, complex interactive products that deliver ease, usability and functionality of a simple web interface. Read more.

esd newsletter

esd social

esdresults 05/24/17
A special thank you to @KABBFOX29 for having our client, #ADA on Focus on South Texas to share information about th… https://t.co/QDWbvYGHTk
esd & associates 05/24/17

A special thank you to KABB FOX 29 News, San Antonio for having our client, American Diabetes Association on Focus on South Texas to share information about the 2017 Camp Power Up!!
esd & associates 05/23/17

Happy Birthday to our Account Planner Johanna Salazar. She’d like to say THANK YOU to our amazing clients at Community First Health Plans for the treats!
esd & associates 05/20/17

It’s game day and we’re showing our team spirit at esd! #GoSpursGo! #raceforseis
esd & associates 05/04/17

Euly the rescue dog is all business at #biggive2017 this morning! San Antonio Pets Alive is topping the leaderboard with $27k in donations! Don't forget to donate at www.thebiggivesa.org

Your Digital Marketing Source

Introducing the esd Media Library

At esd, we write white papers on a broad variety of digital media topics, from lead nurturing and email marketing to search engine optimization and B2B buyer personas. Consult our media library for in-depth answers to all your digital media questions.