Its launch day. You have been working for the past 5 months on a new website for your client. Thousands of man hours have gone into user interface (UI) design, art, copy, and custom code that will, in your opinion, create the greatest Web 2.0 site ever made.
You have been promoting the site on social media for weeks in anticipation of this very moment. You hold your breath as you publish the site, checking the URL to make sure the name server is working appropriately and let out a sigh of relief when you see your site live on the web for the first time.
Months of hard work is now done and you can’t wait to see how much traffic you get and where you rank in the search engines. But, just when you thought you could break out the champagne…Jim from accounting calls up and says the image gallery is completely broken. You run over to Jim’s desk to see that he is using Explorer 8 and that the gallery is a complete mess. Now you have to find a fix—fast.
This is a situation that happens far too often in web design and could be easily remedied if the designer took time for testing. In today’s world with responsive web design, HTML 5, CSS 3, smartphones, tablets, and a range of monitor size for desktops testing is more critical than ever.
Top tips for testing websites
1. Use the web developer add-on.
The web developer add on is a Firefox and Chrome extension and one of the best tools in a web designer’s arsenal. It has an incredible amount of features, most of which I won’t get into today, but the main one for testing is the “resize” tool. I work on a 1920×1080 resolution monitor which is about the largest size needed for testing. For smaller screens though the resize tool is very handy. I make certain presets:
-
iPhone: 480×320
-
iPad: 1024×768
-
13” laptop screen: 1200×800
Using these presets you can quickly emulate smaller screen sizes to quickly test pages and features at different resolutions.
2. Check your site on iOS, Android, and Windows 7 Phones
Phones tend to render CSS differently than desktop browsers. They want to make sure that everything is able to be displayed so they tend to skimp on margins and padding. No matter how valid your CSS is, its imperative to grab a few different models of smartphones to view the site on. Phones also tend to execute javascript poorly and HTML5 code so it’s important to check things like lightboxes, contact forms, maps, and animations to make sure that they are being displayed properly. Most phones support CSS 3 and one of the best things to come from that is the @ media screen command. With this code you can adjust element styling based on the screen size that its being viewed on. For more info visit: http://www.danstorm.com/dan-storm-article-css-15.html
3. Use Internet Explorer
Please put down the pitchforks, I know web designers hate Internet Explorer but the fact is that a good percentage of the world still uses it as their main browser. Fortunately for web designers, and unfortunately for Microsoft, Explorer’s market share is down to about 16% so while it’s not as big of an issue as it used to be they still have a sizeable portion of users. A lot of web designers, myself included, use Macs so it’s good practice to have a PC around just to check out sites with Explorer. If not, find a coworker’s Microsoft PC and spend some time viewing your site.
4. Validate your HTML and CSS
The W3C has really useful tool to make sure your code is standards compliant. You can find it at http://www.validator.w3.org. Validation is important because HTML can be a very complicated language and a misplaced angle bracket can completely break a site in certain browsers. You also want to make sure your code is valid, because people with disabilities use screen readers which will often not work correctly with broken code. On the other hand you have to take the results with a grain of salt. Having a 100% error free site is great but it’s not the end of the world if there are a few errors. A lot of the errors that it will display are not really issues and you need to use your experience as a web designer to know which ones can slide and which ones need fixed. Even Google’s home page doesn’t 100% validate! Seriously go look, I didn’t believe it either.
5. Use a beta site
Building a beta site is a great way to test out features and do a soft launch before you replace your existing site. If possible create the site on a subdirectory on your server. For example if your site is a www.mysite.com then make the beta directory at www.beta.mysite.com. That way when its time to go live the migration is relatively easy. This is especially true if you are running a news/magazine or e-commerce site. Being able to make changes and adjust features without interrupting your regular viewers is a fantastic feature.
Bugs will always slip through
While testing is critical its important to remember that you can’t catch every bug in a site. When your site goes live and pages break you have to be ready. You need to have the skills and experience to be able to swiftly identify the cause of the error and correct it with as few people noticing as possible. Unfortunately the only way to do this is to know HTML and CSS inside and out and know each browser’s rendering quirks. These skills only come with years of experience in web-design and development. It’s why I highly recommend an experienced web design team to work on your redesign if your site has any amount of regular traffic.