To Be or Not to Be – Responsive

Let’s start this article by asking yourself these questions:

• How do I feel about the overall look of my mattress website?
• Does it stand out from my competitors, or does it simply blend in?
• Does it look amazing across all forms of devices, such as desktops, mobiles, and tablets?
• Are my analytics telling me anything I should be paying attention to?

These are important questions for this New Year.

Did you know that you literally have 3-5 seconds to impress a visitor? Statistics show us that today’s consumer demands we move forward with what was labeled as “responsive web design.” And from experience, having this technological versatility brings increased engagement, conversion, and ultimately higher ROI.

Your hard work and investment can in fact be distilled into a single glance which determines whether or not a visitor will consider your website worth their time.

Did you know… Over 75% of your visitors will never return to your website after visiting the first time. (source BloggingWizard.com)

And… 27% of consumers will leave a site if it is not mobile-optimized. (ExactTarget, 2014 Mobile Behavior Report)

So What Does Responsive Design Even Mean?

Wiki defines it this way:

“Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience — easy reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices (from desktop computer monitors to mobile phones).”

Here’s Three Key Elements To Good Responsive Design

I’m sure you’ve heard this saying before, “Don’t sweat the small stuff.” Well, as it pertains to responsive website design, this is far from the truth.

From overall load time to the size of your images, what matters is that mobile users deserve the same browsing experience as any other visitor.

The days of having a separate mobile site are over. You can now have a responsive design where the same message, offer, and experience is carried across to every type of user.

1) BREAKING POINTS: When designing a responsive website for multiple screens, pay attention to your breakpoints. This is basically how your website and the contents within it to best fit the users viewing device. Commons points include:

• <480px for smaller smartphones
• <768px for larger smartphones and smaller tablets
• >768px for larger tablets and desktop screens
• >1024px for wide desktop screens

Also, when laying out your content, remember that a four-column layout on a desktop screen will scale down to two and then single columns across devices. So positioning matters.

2) IMAGES: Make all your images – including sliders, headers, products, etc. – flexible and workable. Pay attention to load speeds when designing for responsive. Sizes and dimensions to keep in mind are:

• 30kb (480px x 271px) for smaller smartphones
• 70kb (768px 443px) for larger smartphones and smaller tablets
• 100kb (992px x 559px) for larger tablets and desktop screens
• 200kb (1382px x 778px) for wide desktop screens

3) LESS IS MORE: In keeping with consumer demand and technology, less is always more. A well-organized website that gets visitors from Point A to Point B, in fewer clicks, will increase conversions and keep audiences engaged. Some key points to consider:

• Get rid of all non-essential content when considering your mobile formats. Not everything works well across mobile so make sure you have the end-user in mind.
• Simplify your navigation by having a custom navigation for mobile vs desktop users. Streamline mobile navigation to provide easy access to your offers, phone number, and locations.
• The faster the load, the better the experience. Again, Less is more.

Don’t Forget Analytics!

Measurable results – that’s what you need!

If you have Google Analytics, or an equivalent program, configured on your website (and I hope you do), having goals to go after month after month should be a centerpiece of your online marketing strategy.

• Your Audience: How many visitors are they new or returning, what state are they from, what browser are they using, etc. Bottom line, you want to see who is visiting your website (Question to ask – does our website fit the profile of the bread-and-butter customers we wish to serve?)
• Audience Behavior: Where did visitors land on your website (home, services, blog, etc), how long did they stay, which pages were most popular and where did they leave. (Question to ask: is my website optimized for optimal conversion?)
• Campaign Data: What marketing campaigns drove them to your site, what domains referred the traffic, and what keywords did they use to find you in search (Question to ask – is my marketing campaign trackable and able to show ROI?)

In short, knowing your audiences, their behavior and whether or not your marketing dollars are working will help you consider the investment into building a new responsive design.

Last Few Points and Takeaways

• While responsive design is critical for 2015, let’s not forget that even font choice, colors and having the right logo have some level of impact on user experience.
• Responsive design also works very well for ecommerce so make sure you apply what these basic principles accordingly.
• Engaging is all about storytelling and building trust. You may have heard the infamous Zig Ziglar quote that goes, “People don’t care how much you know until they know how much you care.”
• Test, test and then test some more. Cross-browser test, proof all copy, test all buttons and downloads, complete all forms – you name it. Make a list and check it twice! Sites like Browserstack.com are great for live, web-based browser testing.

Are you looking to dive deeper into the world of responsive website design? Learn about our all-inclusive inbound marketing system to see how an engaging online experience is only the first step!