Making sure your website looks good on all devices with this Website Responsive Review Checklist
Just in case you are in a hurry, and want to skip reading the blog for now, here is a quick link to the checklist. [thrive_link color=”dark” link=”https://www.webdesignsbyteresa.com/wp-content/uploads/2020/01/Responsive-Design-Visual-Checklist-2.pdf” target=”_blank” size=”medium” align=”alignright”]Responsive Design Visual Checklist [/thrive_link]
Responsive web designs is a common place today. In fact, while non-responsive designs are still out there, they are much harder to come by. This ensures that whatever ever you use to design your website, it is mostly like going to adjust formatting to fit every device from large computers to small handhelds.
But just because a design is created to be responsive doesn’t mean it actually looks gorgeous, or even good on every device. There is a lot more to formatting than screen size, and taking the time to review your website is an investment in time worth making.
Find at least two other devices to review your website on.
This could be a laptop smartphone, tablet, kindle or iPad. Just make sure it is something different than what you typically work with. Many web design platforms have built in reviewing tools for smart phone, tablet and computers. These are helpful tools, especially during the design phase but they aren’t always 100% accurate. I have had designs in the past that look great through these viewing tools, but not so fabulous when viewing them on an actual device of the same size.
Make sure your text is legible
Using extra large fonts can help make an impact, but they may not resize well, especially if using a specialty font that doesn’t necessarily work on all browsers. Words can be cut off at odd points, making key points difficult to read and understand. It also takes away from the professionalism of your brand and has your website visitors thinking more about errors that how you can help them.
Another design feature that can cause issues with legibility is having image and colored backgrounds. Having different backgrounds on your website adds depth and design. It makes the website more visually appealing and helps to break up sections for clarity. But it can also cause issues when viewed on other devices. Text covering an image with the same color background is a common issue, and one that can have your website visitors clicking back to Google in a hurry. Especially if they are unable to read what you have to say.
Go through each page and make sure the text on each page is still legible with the background images you have in place. It is not uncommon to have white text over an image that looks great on the computer, but difficult or impossible to read on a smart phone.
Take a look at these examples of text/image issues.
Review for background issues.
You will also want to make sure images look good and add to the design. When images resize it’s possible that they will stretch and distort making them unappealing and ugly. Keeping your image sizes within appropriate limits can help. Sizing images to 1500 and 2500 pixels is a good rule of thumb. Anything less can cause images to be pixellated when sized to larger screens, and anything more can slow down your website and generate unappealing images on smaller devices.
Take a look at these examples of image sizing issues.
Your Website Responsive Review Checklist:
With a little time and effort you can find these issues before your customers do and correct them. And to help make this easy download this your free Responsive Design Visual Checklist to develop.
[thrive_link color=”dark” link=”https://www.webdesignsbyteresa.com/wp-content/uploads/2020/01/Responsive-Design-Visual-Checklist-2.pdf” target=”_blank” size=”medium” align=”alignright”]Responsive Design Visual Checklist [/thrive_link]