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
Checklist for Responsive Design
- 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
- 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 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 II
Has a new Mobile First design and grid and HTML5 support
Drag and Drop Page Elements, and a Responsive Design that responds automatically to mobile devices such as the iPhone, iPad, and Android.
Use Parallax scrolling for beautiful background images. Lets you customize the appearance and have each page that is bespoke
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.