Skip to content

Web Design | Best Practices Checklist

by Alison Ostendorf on
web-design how-to

Some things are standard enough and have been so widely tested by the design community that they can simply be considered “good design” heuristics, and generally don’t need usability testing.

I’ve put these into a checklist. Please tend to these items. Don’t build any more sad websites.

The modern website checklist:

Quality control:

  1. The DOM tree in any code file is properly tabbed, for quick visual scanning of the tree structure (please use tabs, not spaces)
  2. Comments are used in the code to designate the purpose of a code snippet, the author of a particular component, the end of a section, or any other note-worthy pieces of knowledge
  3. Code syntax — Pass the code through a code checker to make sure all anchor tags are closed properly
  4. Input fields are labeled with the data input type that should be accepted into them, such that the appropriate keyboard pops up when on mobile
  5. No hover effects are required in order to properly use a site on a touch-screen device
  6. APIs or integrations work and are showing up properly — both function and design
  7. Navigation items function after being clicked several times in a row. (For reference, I once found an issue with JQuery Turbolinks that conflicted with Rails, allowing a navigation item to only be clicked once per site visit.)
  8. The entire page moves/interacts appropriately with the navigation as the navigation moves
  9. Fade-ins and fade-outs, hovers, delays, and any additional interactions work as desired on all screen sizes and device types
  10. Grammar and language are correctly used — This means that things are spell checked and syntax/grammar is relevant per each situation. (Example: “Your shipment will arrive in 1 days from now” is not relevant, nor is it correct grammar. Use conditionals in sentences that could vary. Bad grammar distracts users from the main point of the website.)
  11. The website’s SSL certificate shows up. Now, every site that wants to be found by Google’s search engine needs to have some sort of SSL certificate.
  12. Any domain forwards are occurring properly

Textual / Technical:

  1. The language tag is included in every html page (don’t default to whatever the browser can figure out). For example, ‘<html lang=“en”>’
  2. The page title is custom per each page
  3. The page title format: “{custom title} | {the brand name}”, for example, “This Medium Article Title | Medium”
  4. A JQuery CDN is included in each html page (assuming you’re using JQuery for help with animation/styling)
  5. The design firm and contact info is listed in stylesheet (the CSS)
  6. The main brand colors are written as a comment into the css stylesheet early on in the file, so that other designers/developers to can reference them quickly and accurately
  7. Conditional statements are used in the code to show only relevant information to the user, depending on their context. For example, if a user is signed in, they don’t also see a link to Sign Up for an account.
  8. The web hosting package is sufficient for the complexity of the site, the size of the files hosted, the way the site is coded, and the volume of traffic expected

UXUI Design:

  1. The brand logo in the main navigation links to the home page
  2. The brand logo in the main navigation is clearly visible from far away
  3. The logo in the footer also links to the home page
  4. All similarly functioning navigation items have the same visual design as each other and across all pages, except for the navigation item representing the page that is currently being viewed. This page should visually stand out as the “active” link
  5. All forms and input fields send the data where it needs to go
  6. After forms are submitted, the user receives a clear indication that the information was successfully sent. This can be a simple (but well styled) flash message, or it can be a redirect to a confirmation page.
  7. All modals/lightboxes work on all devices, and they display the correct info without requiring the user to scroll down at all. Modals are meant to be only short interruptions.
  8. There is a footer on every page. The business’ logo, contact info, hours, social media, newsletter sign up, and common page links are found in the footer or can be found easily by clicking an item in the footer.
  9. All columns in the footer expand and collapse well on any device size, and are left/center/right aligned and titled in a way that maintains the separation of the different types of information
  10. The background color of the site allows the brand to make a design statement, while also allowing all text and images to stand out
  11. If any text lies on top of an image, the text is white and the image below is dark enough to allow the text to stand out clearly
  12. Phone numbers are clickable on mobile AND desktop devices, and they open up the default way to call or text that phone number from that device
  13. Emails are clickable on mobile AND desktop devices, and they open up the default way to email that email address from that device
  14. Responsive design has been completed successfully for very wide screens, for tablets, for very small screen widths (mobile), for touch screens, for non-touch devices. This means: All sections and objects are in their intended display order, are aligned in visually pleasing and informative ways, and their interactivity is with each other and with the viewer is working.
  15. Social media icons are linked to external pages so that they open in additional windows, rather than internal pages. (they should contain a target=”blank” ) We don’t want the user leaving the main website out of convenience.
  16. Social media icons are sized, colored, and shaped in a way that is aligns with the rest of brand visuals
  17. Social media icons link to the correct EXTERNAL pages. Don’t allow social media icons to redirect internally unless you prefer your users to leave the original site in order to view that social media
  18. Buttons have no “visited” outline after they’ve been clicked
  19. Buttons have informative text that describes what action they accomplish. For example, rather than a simple “Submit”, choose “Sign Up”
  20. Buttons show a clear visual difference when they are being hovered over than when they are inactive
  21. The curser changes when hovering over a link, to make it clear to the user that there is a potential action at that location
  22. Any hover transitions are a bit gradual (rather than taking the default of 0.0 seconds)
  23. Print styling (in the stylesheet, “@media print …”) is… at least good enough. This is not where most websites show off their amazing design experiences, but if your users are likely to print or create a PDF of your website, you should make sure that what they print looks good and has the content they are trying to memorialize.
  24. As busier screens load, a preview of the visual structure of information temporarily displays, informing the user that the screen is in the process of loading a certain type of content, and giving them extra time to get emotionally ready for the content about to appear

Business:

  1. Each page has just one very visible, obvious, and convincing call to action; and it is the next most logical action that brings the user down the sales funnel
  2. Business contact info and hours of operation are current
  3. Copy /content is current, relevant, in the tone of the brand, and approved by the brand
  4. Client (if any) has approved the design
  5. The designers/developers/company have been paid, pre-launch of the site

Thanks for reading. I’ll update this every now and then as technology and design standards change, so stay tuned.

I hope this list is helpful for you and/or a website you care about.

Related Articles