Responsive web design is a top priority for 2017. With the use of mobile devices like smartphones and tablets claiming 65% of digital media use, it’s a mistake to keep hosting a site that isn’t mobile friendly. We’ve put together this quick guide on responsive web design to help make your website relevant and compatible with mobile devices.

What is Responsive Web Design?

If you’re not familiar with web design, the term “Responsive Design” may be new to you. Responsive design gets its name from the concept that web pages should respond to the device dimensions and to a mobile user’s actions.

We have all experienced websites where the images shrink down to a useless size when you view it on your phone; or the text gets so small you have to zoom and scroll to read a single line. These are some of the problems that can be fixed with responsive web design.

While the core of responsive design is in the coding, these five important tips will help you identify the issues and understand what must be done to make your website responsive and mobile friendly.

So what could you miss if you don’t go responsive?

Last year (2016), Americans spent more time on smartphone apps than any other digital media (56%). But comscore.com also points out that desktop and tablet use will remain a critical role in online usage, especially in digital commerce.

70% of shoppers used their phone while shopping in-store, and 80% of online shoppers regularly use their smartphones.  Google even lists responsive design as its top recommended web design, boosting SEO rankings when a site has employed it.

Desktop vs. Mobile

So, it’s not one or the other. Responsive design’s goal is to allow you to target both types of users. If you focus on serving mobile users only, you’ll have a tough time reaching desktop users with this strategy. The mobile site will be lackluster and valuable content when it’s viewed on a desktop.

In the same way, if you develop a site strictly for desktop compatibility, it will not load properly on a smartphone or tablet. The user experience will be very poor and you’ll see an increasing amount of traffic bounce.

In short, hosting a website that was designed only for mobile or for desktop use is a big mistake. You’re pushing half of your market away, and these visitors will likely not return. Your site should immediately detect the type of device, and react accordingly for the absolute best user experience.

Basics of Responsive Design

Screen resolution

Your website needs to look spectacular no matter what new (or old) device your visitors are using. Responsive coding preserves your website design and makes it translate to as many viewing devices as possible. Adjustable images allow the user to view them at their maximum size for each platform that they choose to work on.

Text size and sharpness should be adjusted accordingly, and even the layout may need to be changed. Even if a large paragraph next to two columns of text works well for a desktop screen, those columns should change to full width paragraphs to eliminate the nuisance of needing to scroll across horizontally.

Hiding certain content for design/functionality integrity

In some cases, the simplest fix is to hide certain elements that are not as necessary for mobile users. The hamburger icon is a good example of this. Instead of listing out the menu items across the top, as many sites do, mobile users can click on the hamburger icon to slide out a hidden menu. It makes for less clutter on the small screen.

5 Tips for Responsive Web Design

So, how do you know when your website is a truly responsive design? The ultimate goal is to bring more people to your website and keep them interacting longer. Responsive design is very effective for this. Grab these 5 tips to make sure your website is ready to serve a multitude of mobile visitors and desktop users in 2017.

1. Mobile-first approach

When designing for multiple users and multiple devices, planning your layout and user experience helps eliminate time-wasters down the road. Untangling a design is harder than planning it out to begin with. Here’s the secret: Plan your mobile user’s experience first. Focus on the order of steps and the thought process of the mobile user. Then you can build your desktop version from there.

2. Use a wire framing tool

Wire framing tools are easy to use and are inexpensive- sometimes free! But even a good sketch on grid paper or a whiteboard can help you think in user-experience terms. Ask yourself if your design helps move the reader where you want them to go. Is it confusing, or does it flow down the page to your CTA? Do you have too many images, or could replacing them with a single video simplify the mobile experience?

3. Plan your content, images, branding

Here’s where a lot of designers clash with their marketers and copywriters. If you’ve sketched out your ideas prior to coding, disagreements at this stage will be easier to resolve. Your content should be the primary focus, and your images should be seamlessly transferable between platforms.

Ensure brand-consistency between platforms. If you are an image-heavy brand, allow for this in your mobile design. Consider replacing text with images that link to text to increase speed and provide consistent branding. Have a mobile logo designed- a clean graphic that is low resolution will load lightening-fast, but make sure it’s sharp enough so it looks good.

Clean, intuitive design

Ever been on the go, accessed a favorite site for the first time on mobile, and felt annoyed by the small typeface, the huge images and the frustration of buttons that are too small for your touchscreen?

Always consider the hand-held size of a mobile screen when planning your design. Your site must be clean and neat, and pay special attention to your navigation. Too many times we’ve seen beautifully designed sites implode when accessed via mobile. Pick a clean font, use “max-width:100%”  and “height:auto” coding for images, build-in parallax scrolling. Use your white space wisely.

4. Brand-first approach

Especially with a flexible design approach to your business’ website, brand-authenticity and styling becomes increasingly relevant. Focus on building a consistent identity across platforms, taking special care of your logo and tag line. Many times, these get left behind or morphed into an unrecognizable blob when moving between platforms.

Consider simplifying your logo or text like Facebook did in 2015. The entire impetus behind changing the logo was to be better suited for the growing mobile user. Most Facebook users would never have noticed without being told, because it was so subtle. Facebook kept its branding consistent, but accommodated the direction of its users.

5. Speed

Consider these stats from Search Engine Journal:

• “47% of consumers expect a web page to load in two seconds or less.
• “40% of people abandon a website that takes more than three seconds to load.
• “A one second delay in page response can result in a seven percent reduction in conversions.”

Speed is king for everyone these days, but even more so for mobile users. Although you must prioritize the look and feel of your site even before you start coding, keep the speed factor in mind as you pursue a responsive design.

Google recommends optimizing your page’s speed by:

• Separating your CSS to load “above the fold” first.
• Load content before third-party widgets
• Load your content or article before your sidebar
• Optimize your images and media
• Consider linking out to your larger media

Don’t let responsive web design intimidate you!

If you’re like many other non-technical business owners, responsive design might feel a little intimidating. If you don’t have a highly capable tech team and you don’t have the time to experiment with responsive web design, it’s best to hire a team to handle this for you. The single most important thing you can do for your business website this year is make it mobile friendly with a responsive web design!