Mistake 2: Not thoroughly testing all design elements
I can’t tell you how many times I’ve seen a website that is gorgeous when viewed on a desktop, but degrades into a steaming pile of poo when viewed on a mobile device.When we design a website, we should be testing it several times in multiple browsers and screen sizes so we don’t encounter any surprises at the end. But we also need to test everything again on a staging server once it’s completed. It should also be tested yet again after it’s launched and made publicly available.
This may seem like overkill, but it’s easy to make a small CSS fix that ends up creating even more problems. It happens all of the time, even to me.
If you don’t take the time to review the entire website after completion, you may miss serious issues because you’ve “already checked that part.”
Minor issues to check for include:
- Margin and/or padding issues
- Font sizes causing odd line breaks
- Element sizes at certain screen sizes
- Improperly sized images
- Color or transparency issues
Some of the more serious issues that could render your website completely unusable include:
- Positioning issues (absolute, relative, and fixed)
- Float issues
- Z-index issues
- Unclosed curly braces in CSS
- JavaScript errors
- Google Chrome
- Firefox
- Microsoft Edge / Internet Explorer
- Safari
- At least one iOS and Android device, but preferably two (A phone and a tablet)
You should also use Google’s Mobile Friendly Test because it can identify specific criteria Google is looking for, including tap target size, touch element proximity, and viewport size. You don’t necessarily need to run all of your pages through it, but you should run at least on of each page that has unique design elements.
No comments:
Post a Comment