What is responsive web design? (+12 point checklist for your WordPress website)

What is responsive web design? (+12 point checklist for your WordPress website)

responsive web design

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

why-responsive-web-design

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.

responsive-design-checklist-1

    1. 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.
    2. Revise device/browser mix every few months.
      Based on newly collected data, retire old combinations and make space for new ones.
    3. Test important content.
      Ensure that page content that is important appears on all devices. Other supporting content can be hidden on smaller devices.
    4. Test for content order based on importance.
      Ensure important content appears before other supporting content on smaller devices.
    5. 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.
    6. 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.
    7. Test website typography.
      Ensure that all text content is readable across devices. Make sure that font, style, and colors are consistent.
    8. 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.
    9. 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.
    10. Test website popups.
      Ensure the popups on your website are responsive too. These include both inline and browser window popups.
    11. 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.
    12. 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.

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:

Google’s Mobile-Friendly Test Tool

google-mobile-friendly-test

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.

Am I Responsive?

am-i-responsive

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.

Responsive Design Checker

responsive-design-checker

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.

DropBox

dropbox-responsive-web-design-example

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.

Treehouse

treehouse-responsive-web-design-example

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

dribble-responsive-web-design-example

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

responsive-pro

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

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

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.

Conclusion

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.

About

Susmita is an engineer, a writer and a dancer - not necessarily in that order ! Ever since she discovered WordPress, she has not ceased to be amazed by how this community-driven platform brings people together - in more ways than one. And yes, she loves binge-watching movies !

23 comments on “What is responsive web design? (+12 point checklist for your WordPress website)
  1. You have made good efforts to explain the tips to be kept in mind while making a responsive website. Thanks for providing RESPONSIVE THEMES also.

  2. Thank you for all these great tips for website design. i think it’s a great idea to optimize your site for mobile searches. I use my phone for a lot of the stuff I do during the day, and it is pretty inconvenient if the website doesn’t fit.

  3. glenrown says:

    The first site to feature a layout that adapts to browser viewport width was Audi.com launched in late 2001,[40] created by a team at razorfish consisting of Jürgen Spangl and Jim Kalbach (information architecture), Ken Olling (design), and Jan Hoffmann (interface development).

  4. WeCodeArt says:

    Chrome has a feature when using right click and view page source. You can check site responsiveness to various devices screens using this. On bottom left corner you can find it. I think is the best.

  5. Nathan says:

    Amazing.. Your Article was simply Good.. Great Research for sure and you have a awesome resource Page

  6. Thanks alot. For designing new websites, using templates is the best ideas.

  7. Matt says:

    some nice tips here and I love the infographic

  8. The infographic is very good! you make it look so easy to understand.

    thank you

  9. Thanks for the very useful infographic on responsive web design. Today’s website themes have to be responsive in order to provide a better viewer’s experience.

  10. Amy says:

    awesome article, and some really good info. it is shocking a number of big brand websites that still aren’t responsive – they include a large amount of SEO and web design companies that should know better!

  11. Shariff says:

    Awesome post, though Responsive design has been made mandatory, and there are many css frame works which help building responsive and very attractive website fast and easy. However I will be including this article in next website resources.

    Keep the good work. Thanks

  12. I think it is very important to accommodate multiple device sizes on the web. People tend to use their phones for much of their web browsing. I agree with you that mobile web design has come a long way since it first began. Creating a responsive design can help viewers have a better experience with your website.

  13. Thanks for these great tips. Responsive web design is really necessary to improve business. Most people use their phone for a lot of the stuff during the day, and it is pretty inconvenient if the website doesn’t fit.

  14. Nice Blog. I think responsive sites and adaptive sites are the same in that they both change appearance based on the browser environment they are being viewed on (the most common thing: the browser’s width).

  15. Michael says:

    Creating a mobile friendly site, became a ranking factor for Google in 2015, which made the need for responsive websites even more pressing. Nice post.

  16. Great tips. Infographic is really good to follow for designing a responsive website.

  17. Thank you for the great Tipps! The infographic really helped!

  18. varun says:

    Amazing information and easy to understand. great tips about responsive webdesign.

  19. Lovely piece of writing. Keep up the good work. I think the combination of Great Content+Responsive Web Design is the key to success in today’s scenario

  20. It is very useful responsive website design testing tool and an informative checklist.

  21. Nicola Yap says:

    I love your infographic, it’s absolutely beautiful. Really well done. You’ve reminded me of how I used to see big brands creating a mobile-version of their website. But I think that practice is dying down in lieu of RWD.

  22. Nagaraj says:

    Good Reading, thanks for sharing your such good websites to test online.

Leave a Reply

Your email address will not be published. Required fields are marked *

*