There's nothing more deflating to a digital development team than launching a website and finding a typo, broken image or a
404 error. Project managers scratch their heads thinking "How did that slip by?"
A website project contains a multitude of activity from asset handoffs and copy deck development to programming revisions and browser compatibility checks; an error is bound to happen. Ensuring a successful website launch requires an established quality check in the workflow process, before pointing the DNS to the live environment.
Including a beta checklist in the development process is more than catching typos; it's a quality assurance check for the entire development team (including the client, if not built in-house). Teams can be as small as two and as large as 100, including but not limited to project managers, creative directors, copywriters, interactive designers, UI/UX specialists, front end/back end developers, sales team members, beta testers and proof readers. A checklist sets the precedent for accountability within the team ensuring all are equally invested to meet the website's objective(s) and provide the most optimized user experience. Moreover, the documentation provides history so if the same issue(s) arise in the future; there is a reference point to possibly alleviate unnecessary work.
A beta checklist template includes all possible website elements and actions including an area for screenshot examples and additional commentary from team members. For each website project, manipulate the template to the project's specifications. Below are five beta checklist basics to increase your chance for a pitch-perfect launch.
1. Creative
Page layouts on paper can appear very differently on screen. Ensure that the creative elements depicted in the conceptual phase were carried over during programming. There are instances when certain creative embellishments must be forgone due to compatibility issues. However, beta testers need to make certain that the vision as depicted in the approved wireframes has been established.
Place substantial focus on imagery and media, especially for mobile-optimized websites. Confirm the use of 72-DPI quality for images and proper specifications for video panels. Pay close attention to color use and intended translation to RGB.
The design and development teams should document all the web safe fonts used throughout the website. Is the website ADA compliant? Confirm font sizes are accurate and any magnification features have been included.
2. Copy
Often copy is drafted outside of the design files in the early stages of development, in a Word document, and flowed into the website during programming. This juncture lends to misplacement and copy errors i.e. missing periods, sentence cut-offs.
Confirm the keywords, image and meta tags have been reviewed and embedded by the programmers. This exercise can be simple or extremely tedious depending on the type of website being developed.
Don't forget the navigation, those items need proofing too! The main, footer and sub navigation can easily be overlooked. Engaging two to three proofreaders is a good idea to confirm grammar, context, tone and overall consistency throughout the website.
3. Compatibility
Any developer will tell you that there is an intricate balance when programming across browsers. What looks perfect in Firefox can look terrible in Internet Explorer. Browser testing is laborious but a checklist must. Intended functionality can be drastically different from one browser to the next and coding may need to be revisited effecting the go-live date. Review the site on the latest versions of the browsers most used by the intended audience. If typical browser use is unknown, validate by analyzing user data.
For good measure, test on the four main browsers; Internet Explorer, Chrome, Firefox and Safari.
Versioning within browsers is another main aspect of compatibility testing, specifically Internet Explorer. Many corporations still use Internet Explorer 8 globally even if their customers are using 11. For some websites, development for legacy browsers such as Internet Explorer 8 is part of scope simply because the corporation developing needs to be able to view. Beta testers should have or download any specific browser versions for accurate testing.
4. Usability + Performance
Forgetting all things technical and creative for a moment, does the site feel good? Engage beta testers not close to the project that will provide an outside-in view of the website. These testers can often identify obvious issues (not so obvious to the development team). Deliverables for this component include observing load times, ease of log-in and form submissions, overall movement from page to page, and legibility to name a few.
Shareability is part of this exercise, specifically for social engagement. Testers should click all the way through the social accounts to ascertain a consistent user experience.
5. Cross-screen
This is an intricate part of the checklist that requires attention to detail. Whether adaptive or responsive, it is critical that all website components convert across screen as intended. More importantly, if the website is adaptive the content can be dramatically different. Be sure to beta test across all potential screens. Furthermore, review on multiple versions of a similar device. For example, assess how the copy renders on a 17" desktop monitor and a 13". You may find awkward line breaks or unwieldy scrolling occurrences.
When testing on mobile devices, note the fluidity and ease of movement. Does any content need to be zoomed? Are images taking too long to load? Can links be easily tapped? Can form fields be filled with ease? Are the click behaviors intuitive? The mobile experience should be just as easy as the desktop experience, possibly more fun!
In spite of all the thought, work and time that go into the creation of a great website, it only takes one minor mistake going overlooked to spoil the launch. By taking the necessary steps with a proper beta test, you can avoid these mistakes and deliver the website exactly as you envisioned.
