Monday, January 30, 2017

Web mistakes not to make or what to look for!

I found the following article interesting:

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
Individually, these issues can have a slight, but cumulative negative impact on the user experience. You can get away with a few, but remember that they add up quickly, leading to shorter time-on-site and higher bounce rates, which means less revenue and diminishing organic ranking.
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
Before declaring “mission complete,” you should test your website in multiple browsers and on multiple devices, including:
  • Google Chrome
  • Firefox
  • Microsoft Edge / Internet Explorer
  • Safari
  • At least one iOS and Android device, but preferably two (A phone and a tablet)
There are tools available for testing in almost every environment imaginable, but web browsers have come a long way over the last decade, so you really don’t need them as long as you can test in the most common browsers on desktop, as well as on one or more iOS and Android devices.
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: