Checklist

Here's a checklist of tips for building better websites. There are more to come. The checkboxes are here for your convienience—this is not a form that will be remembered when you come back to this page later.

1. Images are one of the primary contributors to website bloat. Resize images to desired sizes—at least two sizes—one for desktop-size screens and one for mobile devices. You can use Imagemagick for this. Then use media queries to load the appropriate image based on browser screen size.
2. Use lighter-weight compressed image formats such as Google's WebP format. You get the same quality at smaller file sizes. You can use Imagemagick to do the conversion to WebP.
3. Become familiar with the HTML5 <picture> tag. It has built-in media queries for individual images, thus making “mobile-first” design a bit easier.
4. You can use <picture> inside of the HTML <figure> construct. This makes photos/graphics with captions adapt to a wide variety of screen sizes.
5. We've gone through a few “generations” of page layout. We used tables in the early days, graduated to floats, then got flex, and now grid. Each new generation does not necessarily make the earlier one obsolete (except for tables). Use what works for your needs and don't be embarrased by your choice if your reasons are sound.
6. Use semantic HTML markup whenever possible. Avoid using <div>s when a semantic tag is available.
7. Make the <title> in the HTML header short if you want the user to know what the page is by looking at the browser tab. Put the most distinctive words first. You can leave out unnecessary words. Remember that you can put a fuller description in the META description.
8. Place a favicon.ico file in the root of the website filesystem (document directory). It's typical to have image sizes of 16x16, 32x32, and 64x64 pixels included in the favicon.ico file. You can include a 128x128 pixel image but the size of the .ico file increases substantially. You can use Imagemagick to create the ico files.
9. Place a apple-touch-icon in the root of the website filesystem. It's what iPhones and other mobile devices use. It's image size is 180x180 pixels. You can create this with Imagemagick as well.
10. Learn about canonical links and use them wherever appropriate so search engines do the correct thing with duplicate content.
11. Performance is improved when you minimize the number of separate resources a browser must load.
12. Consider putting the core CSS—the styling used on most or all pages—in your HTML file instead of another file.
13. Consider using SVG images (instead of PNG, JPG, WEBP, etc.) and placing them in your HTML file instead of loading them with an <img> tag.
14. For the CSS styling that applies to few pages on the site, either place them in a separate file (not the main CSS file) or include the rare styles in the HTML files that use them.
15. When you've completed your website design, go back and refactor the CSS. Most designers have issues and inefficiencies in their CSS. Remember the cascading nature of Cascading Style Sheets and design accordingly.
16. Sometimes you'll need to add !important to styles to get them to work. This is either because of mistakes you've made or because you want to change browser behavior. If it's a mistake, fix it. If it's a browser thing, see if there's another way.
17. If you're using "style=" in your HTML tags instead of “class=” or “id=”, you're making things more difficult to maintain. Put those styles in the style sheet where they belong. Unless it is truly a unique thing that'll never be used anywhere else.
18. Tables should never be used for page layout in these modern times. Never. But sometimes you're on a deadline and need a quick fix. If you give in to this temptation, go back and fix it afterward when you have the time.
19. Use tables when you're actually displaying tabular data. Symbols and small graphical icons are allowed in tables when they represent a data item that's related to the items in the table. Its not cheating just because the table doesn't contain all text.
20. Don't use Javascript when a HTML/CSS solution exists. Your goal should be to maximize the number of people who can support the site when you're not available. Javascript hacks reduce the number of people who can support the site.
21. Test your pages frequently with the HTML Validator extension to the Chrome browser. Periodically, check them with the W3C Markup Validation Service and the W3C CSS Validation Service.
22. Learning the features of the Chrome Developer Tools is very much worth the effort.
23. Use the Lighthouse extension to the Chrome browser to give you an indication of the quality of your pages but don't do silly things just to keep your Lighthouse scores high.
24. As web browsers advance and new HTML/CSS features mature, go back and refactor your old work from time to time.
25. The Mobile Simulator extension for the Chrome browser is useful when designing webpages for mobile devices but it's best to spot check with a real phone or tablet from time to time.
26. When you want to display an image that's stored on a server that's not yours, you can link to it with a <img> tag. However, the administrator of that server may not want you using his/her bandwidth and may block browsers from fetching the image (This is done via the referer header.) It's safest to keep the image on a server that's under your control or on a Content Delivery Network (CDN).
27. Most HTML elements may have a title, so the title string pops-up (This is often called a tool tip.) when your mouse hovers over it. It's another way to signal the user what to expect but it only works with devices capable of hover.
28. Become aware of accessibility issues and make them part of your website design from the outset. Install a screen reader on your computer to hear the audio cues. You'll have a new respect for the <alt> tag for images. You'll want to consider these audio cues when you add links.
29. Some things can be handled using text processing tools and cron jobs, assuming the server runs Linux. Suppose you have a copyright notice on every page, which needs to change at the start of the new year. You can set a cron job to run at midnight of the new year to automatically change the year on all pages in seconds. You'd use a script that gets the current year from the date command and uses find/exec to replace the old year in all pages. You'd surround the year with <span class="year">2021</span> on all your pages to give your command an easy target.
30. You don't need to bring in an entire Javascript library, such as j-query, if you want to do something simple. For example, if you want accordian panels on your page, you can bring in jquery-1.12.4.js (293 KB) and jquery-ui.js (521 KB) that bring in 814 Kilobytes of code or you can write the accordian in Javascript in under 1 kilobyte.
31. Every navigation control you place on the screen and expect the user to click should display the URL (URI) of the new location the browser is going to. On Chrome, for example, the URL normally appears in the lower-left of the browser window. This is important because we train users to be careful of what they're doing when they browse websites they may not trust. For example, if your navigation control is a button, this is better:
    
    <a href="URL"><button>Special Pricing</button></a>
    
    than this:
    
    <button onclick="window.location.href='URL'">Special Pricing</button>