📚 Racing Against Time: A Checklist for Developers Auditing Websites Before Launch

🕛 Zeit seit Veröffentlichung: 410 Tage, 7 Stunden 1 Minuten
📆 Veröffentlicht am: 13.03.2023 um 14:38 Uhr
💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

This checklist is for developers who are working against the clock. It's assumed that the website is being audited just a few days before its launch. The developer must quickly identify the most significant issues before hand-off to the Quality Assurance (QA) engineer. The aim is to catch as many problems as possible before QA begins their work while giving them enough time to do their job well.

Assuming your tooling game is on point, this guide is a Mac-exclusive ticket to quickly identify bugs. I apologize to Windows users who may not find this guide applicable. Additionally, the information presented in this guide is designed to be concise, which may make it difficult for novice developers to fully grasp. I'll do my best to provide additional resources for those who need a more in-depth understanding.

With so little time available, being selective about which problems to address is essential. Remember, there will only be time to fix some things, so make every decision count. It is worth noting that this article is about auditing a website before launch, not lunch. Good luck!

To make this article more accessible to developers of all levels, please share any tutorials or videos you've created on installing axe DevTools, Xcode, or any technologies discussed in the article in the comments section.

Table of contents

• Step 1: Cache
• Step 2: Chrome
• Step 3: Safari
• Step 4: Firefox
• Step 5: iOS Simulator
• Step 6: Android Simulator
• Step 7: Windows
• Step 8: Real devices
• Step 9: Everything else
• Wrapping up

😈 Were you aware that a documentary about gremlins was released in 1984? Before its release, many Americans were oblivious to the terrors in the small town of Kingston Falls. Outrage from the populace prompted the government to intervene. In 1986, DARPA funded Energizer to create an LED flashlight that could temporarily disorient the creatures. This enabled the government to apprehend all the gremlins and cage them in a secure facility, or so they thought. Unfortunately, in 1989, the Super Soaker was invented, and history repeated itself. By the time the second documentary was released in 1990, the story had already become well-known throughout the country, resulting in disappointing box-office sales. A new documentary is scheduled for release in late 2023, pending the government's declassification of the latest incident.

What does this have to do with auditing a website? Well, you may have been working on this project for months, and auditing can be, well, frankly, tedious. But fear not, my friend! Let's spice things up a bit. Imagine you're a mischievous little gremlin, and Stripe (the arch-nemesis of Gizmo, not the payment service) has given you orders to wreak havoc in the most efficient way possible. Avoid getting caught in a blender, or you'll get blended. Focus on the central issues and work fast to impress Stripe, or you know what will happen.

Step 1: Cache

• [ ] Disable cache.
  • Turn off any feature or service on your website that caches assets. When caching is disabled, the website is forced to load all content and resources from scratch, giving you a more accurate picture of how the website is functioning in real-time. By disabling caching, you can avoid the hassle of troubleshooting issues from an outdated version of your website.

Step 2: Chrome

Leveraging your preferred browser can improve your ability to uncover issues efficiently since you are familiar with its tools and capabilities. I'll emphasize Chrome's features and capabilities since it's the browser I'm most familiar with. Let’s jump right in.

• [ ] Resize the browser by 50-pixel increments and test how the website responds. Test vertically and horizontally to ensure the website looks good in all orientations.
  • Fun fact: Chrome utilizes the Blink layout engine, which means that during your initial audit, you can save time by holding off testing Edge, Samsung, and Brave.
  • Tip: If you want to streamline the process of testing the responsiveness across various browser widths, consider exploring tools like Sizzy or Polypane. These tools also use the Blink engine.
  • A percentage of the site’s traffic will have 'Display Zoom' enabled on their devices. These users may have large smartphones, but struggle with poor eyesight. To guarantee a positive user experience for this audience, it is advisable to test the website's responsiveness at a width of 320px.
• [ ] Check the functionality of all features, including accordions, carousels, modals, add-to-cart, etc., to ensure they work correctly.
• [ ] To ensure high quality, it's essential to check all states of the application, e.g., customized functionality for logged-in users or how the cart will appear when a promo code is applied.
  • Tip: Applications can have infinite states, so it's essential to implement effective testing processes throughout the development cycle rather than waiting until the end to test.
• [ ] Ensure all links, including those in the main menu, drop-down menu, and hamburger menu, are thoroughly checked.
  • Check the states such as default, visited, hovered, active, and disabled.
  • Mouse over every link and button to detect issues, such as partially clickable buttons.
  • Check the phone number link to verify if it opens FaceTime, and click the email address link to see if it opens an email program.
  • Tip: When auditing your website in pre-production, it's worth considering using Semrush. This tool can help you identify broken links and images, which can be time-consuming if done manually by clicking through every page. Using Semrush to scan your website can make the process more efficient and less labor-intensive. Screaming Frog is an alternative to Semrush.
• [ ] Look at the browser console for any issues.
  • The console reports various issues related to client-side code execution, such as JavaScript errors, network errors, and security issues.
• [ ] Use Lighthouse to surface bugs.
  • Navigate to DevTools and access Lighthouse to analyze the page. Skim through the issues identified, but prioritize addressing the most significant problems rather than attempting to fix every single one. For instance, in a recent case, I uncovered an issue where a video element was not using HTTPS, prompting me to investigate further and discover that the video originated from the staging environment instead of production.
• [ ] Using DevTools, navigate to the CSS Overview section and capture an overview of the page's CSS.
  • Thumb through the findings to identify any possible issues, such as discrepancies in font or color, that do not adhere to the brand guidelines.
• [ ] Run several pages through axe DevTools.
  • Axe DevTools is a browser extension that detects accessibility issues.
• [ ] Adjust the performance settings in DevTools and set CPU to 6x slowdown and Network to Slow 3G, then navigate through several pages to look for any noticeable issues.
  • Simulating slow conditions can reveal areas for improvement as the website loads. During testing, I discovered white text on a white background and addressed the issue by darkening the background color. This change improved the user experience and accommodated users who disable images or may not see them for other reasons.
• [ ] Navigate to DevTools and access the Network tab to skim through the page's network requests, explicitly looking for problems.
  • A 404 appearing in the status column may indicate a missing asset.
  • The scheme column may reveal assets using insecure HTTP protocols.
  • The size column may indicate oversized assets impacting website performance.
  • Analyzing 301 redirects may also reveal issues in how the site's URLs are structured.
• [ ] Navigate to the gear icon in DevTools, disable JavaScript, and refresh the page.
  • This method may not work for all sites, especially those built using JAMstack or animation requiring JavaScript to update the visibility, which may cause a white screen of death. So, take the results with a grain of salt.
• [ ] Test all contact and subscription forms.
  • Verify that all "optional" or "required" fields are behaving as desired.
  • Verify that alphanumeric fields can properly handle a wide range of correct and incorrect data, including empty data, invalid symbols and characters, and numbers that are negative or out of range.
  • Verify that date fields accept proper input, that leap years are properly handled and that any discrepancies between the Gregorian and Julian calendars (if relevant) are correctly resolved.
  • Make sure that extremely long or precise inputs are handled and saved correctly, down to the desired level of accuracy.
  • Confirm that submissions are being successfully processed.
• [ ] Enable an ad blocker, e.g., uBlock Origin or disable it if already in use.
  • By doing so, you can test whether any critical functionality on the site work with or without third-party resources. I recently encountered a menu hiding underneath a header because of an advertisement.

😈 Sometimes, gremlins need a change of scenery to keep the mischief flowing. Switch it up and try a different browser - who knows, you might just discover a whole new world of internet chaos to wreak!

Step 3: Safari

Moving to Safari next is a good idea because it will help address many Safari-related bugs without reaching for an iPhone or iPad. With your improved familiarity with the process, you should be able to complete this round more efficiently

• [ ] Resize the browser by 50-pixel increments and test how the website responds.
• [ ] Check the functionality of all features, including accordions, carousels, modals, add-to-cart, etc., to ensure they work correctly.
• [ ] It may be unpleasant, but it's necessary to test the forms again.
• [ ] Test keyboard functionality.
  • Aside from ensuring website accessibility for those who cannot use a mouse, it is probable that it will reveal previously unnoticed issues.
    • Tab: Navigate to focusable items such as buttons, links, and contact form inputs.
    • Shift + Tab: The same as above, but in reverse order.
    • Return: Click a link or button.
• [ ] Turn on VoiceOver and navigate the pages.
  • It’s another great way to find issues. I was able to find anchors using tabindex="-1”.
  • You may discover grammar and spelling errors, and dummy content if you listen carefully. Here are a few, of many shortcuts to do a quick one over.
    • VO + Right Arrow: Read next block of copy.
    • VO + Left Arrow: Read the previous block of copy.
    • VO + U: Open rotor.

😈 As a mischievous gremlin, you must assert dominance over blunders that dare come your way. Show them who's boss by shouting expletives and demanding to know why they didn't show up earlier. Once you've put them in their place, take a deep breath and return to the frenzy.

Step 4: Firefox

Firefox uses the Gecko layout engine, which remains significant as some of your traffic is derived from users browsing through this browser. You may not uncover many fresh issues at this stage of the website audit. Hence, some additional measures have been incorporated to aid you in scrutinizing the website from a different viewpoint.

• [ ] Open up Firefox and test the site in private mode.
  • This can help identify any content or pages that may be restricted or hidden from specific users, such as those not logged into the CMS. I discovered a page that didn’t load unless logged into the CMS.
• [ ] Resize the browser by 50-pixel increments and test how the website responds.
• [ ] Check the functionality of all features, including accordions, carousels, modals, add-to-cart, etc., to ensure they work correctly.
• [ ] It may be unpleasant, but it's necessary to test the forms yet again.
• [ ] Is the 404 page working?
• [ ] Is there a Favicon?
• [ ] Copy the source code and paste into the W3C validator.
  • When reviewing the results, be sure to scan for issues such as an anchor nested inside another anchor or anything that could impact the user experience. (Note that browsers will correct the nested anchors, which could cause confusion while styling them.)
• [ ] Same as above, this time copy the DOM from Firefox’s dev tools.
• [ ] Test the RSS feed using the W3C Feed Validation Service.
• [ ] Test Open Graph meta tags.
• [ ] Test structured data.
• [ ] Google site:example.com and it will list out what has been indexed.
  • Check for any apparent oversights or pages that may have been previously overlooked.
• [ ] Scan the XML sitemap for any issues or missing pages.
• [ ] Verify the functionality of social sharing widgets.

😈 Unleash some mischief and madness!

Step 5: iOS Simulator

Reach for the iOS simulator next. It very closely mirrors and iPhone or iPad and has quick access to Safari’s dev tools. Plus, older versions of phones and operating systems are downloadable and ready to go at your finger tips.

It's important to note that any browser installed on an iOS device uses Webkit. This implies that even if Chrome or Facebook is installed, both will still use Webkit instead of Blink or Gecko.

• [ ] Navigate the website using the iOS simulator.
  • Switch between older and newer versions of the phone and tablets and review the responsiveness and functionality.
• [ ] Check the functionality of all features, including accordions, carousels, modals, add-to-cart, etc., to ensure they work correctly.
• [ ] Test the forms again.

😈 Your hard work has finally paid off, as Stripe recognized your efforts and promoted you. However, your ambitions have grown more significant, and you now seek to eliminate Stripe. Your ultimate goal is to dominate all gremlins and become the ruler. Keep going!

Step 6: Android Simulator

By this point, you have extensively tested the website's responsiveness and functionality and feel confident in its quality. However, it's important to remain cautious and not assume that all bugs have been discovered, as using the simulator provided by Android Studio could reveal previously unnoticed issues.

• [ ] If you're looking for a fresh perspective on a website, try changing your physical surroundings or engaging in a different activity, like reviewing the site while eating a snack in the kitchen. This approach proved helpful for me in recognizing how specific animations can be disruptive. For example, while examining a contact page, I initially thought that only the email and phone numbers were listed because half of the screen was empty. However, as I scrolled down to view the footer, an animation suddenly increased the opacity of the contact form, making it noticeable. This highlights the importance of fine-tuning animations to enhance the user's understanding of the website's available content.

😈 As you continue on your path to gremlin dominance, remember that sometimes the best way to cause chaos is through subtlety. Maybe instead of trying to crash the entire website, you could just swap out all the images with pictures of Gizmo in compromising positions. Don't stop now!

Step 7: Windows

If you own a Parallels license, you can use it to install Windows for free. Microsoft Edge has adopted the same layout engine as Chrome, which will result in minimal discrepancies between the two browsers. Nevertheless, it's prudent to remain vigilant for any unexpected occurrences.

It is feasible to set up older versions of Windows using Parallels, but it might be more practical to procure a BrowserStack subscription. BrowserStack offers an array of browser versions and operating systems for testing purposes.

• [ ] Check website analytics for popular devices and browser versions.
  • When following this extensive checklist, you may have missed a critical step - reviewing the website analytics to determine your users' most commonly used devices and browser versions. To cultivate good habits, log into the websites’ analytics now to identify the popular types of devices and browser versions used by your users.
• [ ] Review the website's functionality and responsiveness on your users' most popular browsers.
• [ ] Further test website accessibility on Windows environment using Narrator, a built-in screen reader. JAWS, a popular screen reader, is also available for free in 45-minute increments.

😈 You began by subtly questioning Stripe's decisions during the gremlin council meetings, planting seeds of doubt in the minds of the other gremlins. Then, you started to spread rumors about him, questioning his competence and loyalty. As you continued undermining his authority, the other gremlins began to turn against him, and he became increasingly isolated.

Step 8: Real devices

This is the ideal moment to retrieve all the devices within your reach. I expect that you have charged them beforehand and are ready to go! If not, it would be unwise to assume that all the valuable insights I provided today are presented solely at the beginning of a tutorial. Tsk tsk.

It's worth noting that if you encounter a bug on a physical device, there's a high probability that you can reproduce it on the iOS or Android simulators, which makes it easier to resolve. Nevertheless, this is an opportunity to assess how your fingers interact with the user interface, how glare from a nearby window affects readability, or how the experience varies after switching WiFi to cell.

• [ ] Disable the WiFi connection and utilize your data plan instead. I once observed that the autoplay feature for videos was not functioning.
• [ ] Activate the power-saving mode to conserve energy. Note that some functions, such as auto-playing video, may not work in this mode.
• [ ] Android app developers can select and customize their preferred layout engine, which may result in the website appearing differently in various in-app browsers, such as Facebook. To ensure consistency, test the website's responsiveness and functionality using an Android device while accessing it through a popular app.

Step 9: Everything else

• [ ] Now is the time to test Edge, Samsung, and Brave.

😈 Finally, the moment arrived when you could strike, and you seized it with ruthless efficiency. Thanks to the lessons you learned from auditing the website, you achieved your goal and became the new leader of the gremlins.

Wrapping up

Completing this checklist requires time and effort, but doing so at different phases of the project can save you time and prevent headaches down the line. By incorporating the checklist into your process, you can catch issues early and avoid a last-minute rush to fix problems before launch.

It's important to remember that your QA engineer may identify many bugs during testing, and they'll need to prioritize which ones to bring to your attention. Reviewing the checklist in advance will give your QA team more time to thoroughly investigate and address the most critical issues. And let's be honest, you enjoy causing chaos too much to let anyone put a stop to your reign of terror, don't you?

I wish you good luck in your testing process and hope this checklist helps you deliver a high-quality product to your users.

...