12 Point Checklist For Responsive Web Design

If you haven’t been living under a rock these past few years, you know what responsive design is.
Responsive Web Design (also referred to as Mobile First or Mobile Friendly Design) is what is used to loosely describe a design that flexibly adapts to all types of devices – desktops, tablets, smartphones. You can find out more about what is responsive design and how important it is. In this post, I’ve come up with a simple 12-point checklist for responsive web design.

Mobile web design has come a long way since the early years when developers used to struggle with modifying their websites so that they look pretty on mobile phones. A responsive website needs to be designed with the result in mind.

Instead of sensing the device type, the website adapts itself to the device’s screen size. Downloads for mobile websites are faster as they are designed with mobile standards in mind. A site that adapts itself perfectly on a desktop may be full of bugs on a cellphone or a tablet. Hence thorough testing based on individual device’s features is necessary.

While we have a fair idea of what responsiveness means – you may have a niggling doubt whether your site is truly responsive. So, here’s a quick checklist I put together for you. It lists the do’s and don’ts while creating a responsive website and tells you about stuff you should test later on.

Checklist for Responsive Web Design

Responsive Web Design Checklist

Checklist for Responsive Design

 

Before Designing

  • 1. Back to Basics – Boil down the website to display vital content prominently.
  • 2. Decide Navigation Route – Long Scroll or not
  • 3. Consider all the current and potential input modalities – touch interfaces, tap friendly menu, inputs from various keyboards, mice, styluses and of course fingers

Don’t Do This

  • 4. Assuming it’s all about layout
  • 5. Designing for the desktop in first place
  • 6. Creating separate URL for mobile devices
  • 7. Displaying too much content at once

After Designing

  • 8. Position CTA buttons to be touch friendly on any device
  • 9. Navigation should have cross-browser compatibility
  • 10. Images and content should be condensed to make downloading mobile-friendly
  • 11. Typography should be easy to read
  • 12. Site should be optimized for mobile searches

Some Useful Responsive Web Design Testing Tools

The internet is flooded with tools for testing responsive design. From merely resizing your browser, to testing from scratch while creating a fluid layout; you can check if your site is truly mobile ready.

A Google tool that analyzes a URL for mobile-friendly design.

Tool to check whether a site has responsive design. It is browser-based.

A tool that simplifies the design of fluid grids and RWD.

Popular Free Responsive WordPress Themes

  • Responsive ThemeResponsive Free Theme

    1.5 million downloads are a testimony to the fact that this theme has helped in launching the best-in-class websites that are truly responsive

  • Responsive IIResponsive II Free Theme

    Has a new Mobile First design and grid and HTML5 support

  • EclipseEclipse Free Responsive Theme

    Drag and Drop Page Elements, and a Responsive Design that responds automatically to mobile devices such as the iPhone, iPad, and Android.

  • ParallaxParallax Free Responsive Theme

Use Parallax scrolling for beautiful background images. Lets you customize the appearance and have each page that is bespoke

    • iFeatureiFeature Free Responsive Theme

       

      Per-page basis options, translation ready, slick, professional theme

        These were a few tips on designing and a checklist for responsive web design along with the free themes and testing tools available. Anything you want to share with us? Please drop a line in the comments section below.

About the Author

Neha came aboard the CyberChimps team recently. She’s the one who keeps you updated with all the happenings at CyberChimps. She responds to your queries and is the go-to person if you have any out-of-the-box ideas.

22 Comments
  • Jessica Watson /June 7, 2016 at 11:43 pm

    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.

  • Gregory Willard /July 21, 2016 at 6:11 am

    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.

  • glenrown /July 24, 2016 at 3:36 am

    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).

    • WeCodeArt /July 30, 2016 at 7:09 am

      The first site was actually the first website created because it was made only on text and links. So we can say it was responsive :)

  • WeCodeArt /July 30, 2016 at 7:07 am

    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.

  • Nathan /September 13, 2016 at 10:47 am

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

  • Subash Sarkar /September 14, 2016 at 2:23 am

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

  • Matt /October 9, 2016 at 3:46 am

    some nice tips here and I love the infographic

  • Ameisenhaufen /November 4, 2016 at 4:39 am

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

    thank you

  • David Porter /January 9, 2017 at 8:14 pm

    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.

  • Amy /February 1, 2017 at 2:01 pm

    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!

  • Shariff /February 1, 2017 at 9:18 pm

    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

  • Bernard Clyde /February 13, 2017 at 9:39 am

    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.

  • Amber Moore /February 26, 2017 at 11:56 pm

    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.

  • Pearl Fleetwood /March 25, 2017 at 7:12 am

    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).

  • Michael /May 11, 2017 at 1:06 am

    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.

  • Balamurugan D /August 19, 2017 at 4:08 am

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

  • IT's SIMPLE /October 1, 2017 at 3:39 am

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

  • varun /November 10, 2017 at 6:44 am

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

  • Chandra Brijesh /November 13, 2017 at 7:02 am

    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

  • Balamurugan D /November 15, 2017 at 4:56 am

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

  • Nicola Yap /March 9, 2018 at 1:44 pm

    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.

Leave a Reply

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