“Our website works fine and looks good–why do we need to redesign it to be responsive?”
Great question. We hear things like this all the time from the many small business owners we work with. The truth is; there isn’t anything wrong with thinking this way. But the same cannot be said for those who actively use your site.
In 2015, for the first time, mobile web usage surpassed desktop at a total of 51% of all web traffic. Statistics have shown that 88% of those who access a company through a mobile device will contact or visit the company within 24 hours.
Without a responsive web design, your web traffic may be forced to pinch and zoom into the content. So no matter how good it looks, if it has poor user experience- visitors may take their business elsewhere.
So moving forward, what are the leading practices you should keep in mind in your responsive web design? Here are our top 5 tips on utilizing responsive web design:
1. Know Your Anatomy
The structure or anatomy of a responsive web design is crucial. Since you are building to suit multiple devices and screen sizes, having a design that will make for an engaging user experience is key.
Essential parts of responsive web design anatomy:
- Fluid grids: Percentage-based site responsive web design that ensures your content adapts to screen size correctly. We utilize the Bootstrap framework for most of our sites, ensuring great responsive sites.
- Flexible images: Images chosen and sized at different intervals to prevent them from displaying outside their containers. One handy tool for this is Adaptive Images. The latest version of WordPress has continued to make even greater advancements towards more mobile and tablet friendly images.
- Performance: Mobile users on average give a website only 5 seconds to load. Be sure to have small image sizes and avoid having an overabundance of multimedia content. If your website uses background images, you should look to see if those are necessary to load on mobile devices and take them out where you are able to.
2. Bare Essentials and Content Parity
It’s imperative to narrow down information to only what your current and prospective customers need to know to feel comfortable contacting you.
Think of it as a reversed funnel. At the top is the most important information (e.g. who we are, what we do, our team, etc.) and at the bottom is the most detailed information (e.g. your process, blogs, etc.).
Responsive web design best practices demonstrate this funnel in critical assets:
- Top of the funnel
- Masthead – can contain your what, who and why
- Image gallery
- Call-To-Action
- Middle of the funnel
- Product descriptions
- Testimonials
- Auxiliary information
- Bottom of the funnel
- Blogs
- White papers
- Case studies
Content parity is also something to keep in mind because we will never truly be able to predict how someone will visit our site. It’s important that content is equal no matter the device.
3. Build Around the Buyer’s Journey
Understanding how your customers buy from you is also essential. What information do they always need to know? What is your bread and butter? Having your responsive web design catered to how customers need to engage with you will improve their user experience and could steer them away from the competition.
For example, if your clients are often in need of a quote or customer support, that information should be seen immediately upon entering the website rather than an ‘About Us’ video. On the other hand, maybe you have a business that is all about building relationships and trust, and then an ‘About Us’ video would be critical. Responsive web design is all about prioritizing your website layout specific to your customer’s needs.
4. Optimize UX (User Experience) for More Intuitive Mobile / Tablet Use
On desktops, we can get away with enlarging images, drop down menus or complex site designs. Mobiles and tablets have features mostly unavailable on the desktop, like tapping, swiping and other gestures. Long scrolling image galleries instead of ‘click to enlarge’, buttons instead of drop downs and hovers, and simple grid-based designs instead of complicated tables.
Considering this in your responsive web design is crucial. Keep in mind your site should work for both mobile, tablet and desktop. Remember we should avoid content (and experience) disparity.
5. Media Queries Are Your Best Friend
Media queries are the ways to apply CSS code to respond to whatever device the person is using. By using media queries you can ensure the design is friendly and equal to all devices. Media queries became a W3C (World Wide Web Consortium) recommended standard in June 2012.
Things to keep in mind:
- Use min-width over min-device-width to enable broad experience.
- Enable relative sizes for elements to avoid breaking outside design layout.
- Each device is different, so know your dimensions.
But we must disclaim, media queries aren’t simple, as it requires a very in-depth knowledge of CSS to handle them.
As a small business owner, the last thing you need is one more thing on your plate – we’re here to answer questions or assist with your website design.
