What is responsive web design? (+12 point checklist for your WordPress website)
Chances are you’re reading this on your smartphone.
The way mobile devices have become a part of our daily lives, it wouldn’t be a surprise.
According to Google, more than 50 percent of search queries worldwide now come from mobile devices. Looking at this trend, Google rolled out the Mobile Page Speed Update in July 2018. With this update, page speed is now a ranking factor for mobile search results.
This means, if you haven’t optimized your website for mobile, you should do it now. Or risk losing over half of your audience.
A responsively design website is what will save you from losing your audience and your business.
In this post, I’ll share what responsive web design is and why it’s important. I’ll share a few examples of responsive web design. Plus a 12 point checklist to make sure your WordPress website is responsive.
What is responsive web design?
We live in a world full of smart devices. These smart devices come in all shapes and screen sizes. From smart watches the size of your wrist to large screen smart TVs.
People use all these devices to browse and interact with web pages across the internet. This means your website needs to look good and be easy to use, regardless of the device.
This is where responsive web design comes to the rescue.
Responsive web design makes your website look good and function well across devices. Depending on the device, this design approach hides, shows, shrinks, enlarges or moves content to make it look good on any device.
Responsive web design is also called mobile-friendly design or mobile first design.
Mobile-friendly design is critical for your website
Think about it. Your audience has already embraced responsive design.
Today, 80 percent internet users own a smartphone. These users spend on average 69 percent of their media time on smartphones (comScore).
Businesses without a mobile-friendly website risk turning away customers. According to socPub, a whopping 57 percent users say they won’t recommend a business with a poorly designed mobile site.
Your competition, on the other hand, is laying out the red carpet for your customers.
According to MarketingLand, 72 percent of US digital ad budget will be spent on Mobile advertisement. And 68 percent of businesses have integrated mobile marketing into their overall marketing strategy according to SalesForce.
The verdict is clear. Go responsive or go bust.
12 point responsive design website checklist
If you redesigned (or got a new website) in the last few years, chances are it’s already responsive. Since responsiveness is no longer an add-on, most web design companies offer responsive design as a standard.
All of CyberChimps free and premium WordPress themes are fully responsive.
But making sure your website is mobile device friendly is not a one-time task. You need to periodically test and update your website for responsiveness.
Here’s a handy checklist to help you test your WordPress website.
- Test across devices & browsers.
Collect data mobile and web traffic data from Google Analytics. This data includes the mobile devices and browsers used to access your website.
- Revise device/browser mix every few months.
Based on newly collected data, retire old combinations and make space for new ones.
- Test important content.
Ensure that page content that is important appears on all devices. Other supporting content can be hidden on smaller devices.
- Test for content order based on importance.
Ensure important content appears before other supporting content on smaller devices.
- Test for performance.
Measure how long your website takes to render across browsers, devices and internet speeds. Compress large resources and use caching to improve website performance.
- Test the website visually.
Ensure that text, images and controls are aligned. And do not run or overflow edges of the screen. Make sure the content scrolls and displays properly across devices.
- Test website typography.
Ensure that all text content is readable across devices. Make sure that font, style, and colors are consistent.
- Test device fonts.
When using device fonts, ensure that you consider fonts across devices and operating systems. Make sure you specify device-default fonts in the font-family of your website’s stylesheet.
- Test for smooth navigation.
Ensure that navigation elements do not run or overflow edges of the screen. Use hidden navigation using the hamburger menu icon on smaller devices. Make sure the user can navigate using swipe gestures.
- Test website popups.
Ensure the popups on your website are responsive too. These include both inline and browser window popups.
- Test for interactivity.
People use various devices to interact with devices. Keyboards, mice, styluses and of course fingertips. Ensure that your controls are tap-friendly and big enough for finger taps.
- Optimize for mobile first.
When re-designing a section (or entire website) stick to the mobile first design approach. Adapt your design to smaller mobile devices first. Then build for larger screens.
- Test across devices & browsers.
Tools for testing website responsiveness
There’re a ton of tools available to test if your website is responsive. We’ve shortlisted the top three for you:
Enter a page URL and this tool will tell you if the page is mobile friendly. You can also use this tool to get a sitewide analysis report for responsiveness.
Being a Google tool, these recommendations are also good for search engine optimization.
Use this tool if you want to quickly check how your website looks on common devices.
Again, enter your page URL and Am I Responsive will show how your website looks on a desktop, laptop, tablet, and a mobile phone.
On the other hand, if you want to test your webpage across a range of devices, use Responsive Design Checker.
While this tool works similar to Am I Responsive, it gives you a lot more screen resolution options. In addition to standard devices, you can also test your page on specific devices like Amazon Kindle and Google Pixel phones.
Responsive web design examples
No, that you know why responsive design is critical to your website, let’s look at three examples that showcase responsive design best practices.
The DropBox hero area and the call to action adapt beautifully depending on the screen size.
Notice how the signup form appears on larger screens. Also, notice the arrow on a larger screen below the hero area. This arrow is absent on smaller screen devices, where users tend to naturally scroll down.
The Treehouse website navigation menu showcases responsive navigation design at it’s best.
Notice how the number of navigation menu items reduce as the screen gets smaller. The absent navigation menu items are hidden behind the hamburger icon button in the top-left corner of the website’s header.
Dribble’s content adapts depending on the user’s screen size.
Notice how the number of columns in the design items grid decrease as the screen size gets smaller.
Looking for a responsive WordPress theme?
Look no further.
All our free and premium WordPress themes look beautiful and work really well across devices. Take a look at some of our responsive WordPress themes.
Responsive Pro and it’s free version are among the very first responsive WordPress themes. With over 100,000 websites actively using it, this theme is still going strong. The theme supports the Gutenberg editor and comes with 12 predefined color schemes.
If you’re looking for a reliable mobile friendly theme, Responsive Pro is your solution.
Get Responsive Pro here.
Response Premium and it’s free version are the modern siblings of Responsive Pro theme.
Not only are these themes responsive, but also built according to the 2019 WordPress standards, Gutenberg Editor support,
Elementor page builder support and 3 custom homepage templates.
While primarily a blog theme, Response can also be used by small businesses and solopreneurs.
Get Response here.
Kobashop is a premium WooCommerce WordPress theme.
This responsive theme comes with a custom homepage to showcase your featured & latest products, categories, and product reviews.
Get Kobashop here.
With over 8.5 billion active mobile devices across the world, your website must ensure a mobile-friendly experience.
However, responsive web design is not a one-time activity. New devices, operating systems, and browsers come out every day. You need to periodically refresh the list of devices and browsers your website supports and test against those.
If you’re building a new website, there are good examples of responsive design across the web. Get inspired by a theme or start with our responsive WordPress themes.
Is your website mobile friendly? How do you test it for responsiveness?
Let us know in the comments below.