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

esd & associates 03/24/17

Never underestimate a strong Powerpoint game. #teamgaston
esd & associates 03/23/17

Happy National Puppy Day! Goose is working hard with us today at ESD! #nationalpuppyday #dogsoffacebook #SAPets
esd & associates 03/21/17

Live from San Antonio! It's nonprofit Saturday Night!
esd & associates 03/17/17

Don’t miss your chance to LOL for a good cause! The Big Gig is a fun, silly, rowdy live comedy show put on by the Nonprofit Council each year to raise money for their mission of supporting area nonprofits. This year’s theme is “Nonprofit Saturday Night Live!” So come to the Playhouse (800 W Ashby Place, San Antonio, TX 78212) March 25! Cocktails start at 7 p.m. and the show kicks off at 8! Hope to see you there!

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.