Web Site Design

Naturally design is subjective and a matter of personal preference. Look around at different sites, see what you like and dislike and then go your own way. There are however two very important things to consider. First, accessibility, if you do this right then it works for everyone and most people won't notice your hard work, however those that do will really appreciate it. Secondly, you need to support multiple screen sizes, from small phones to large monitors and everything in between.


There is some great advice on accessibility at Dos and don'ts on designing for accessibility | Accessibility. In addition Microsoft Design is well worth looking at.

One point the Microsoft Toolkit makes clear is that abilities can be limited for a number of reasons, they might be permanent, temporary or situational. For example, a person may be deaf (permanent), they may have an ear infection (temporary) or may work behind a noisy bar (situational). This is very insightful and well worth thinking about.

Cross Browser Testing

It is increasingly important to test websites on different platforms and with different browsers but once you start looking at specific devices then the permutations are huge. So use resources like Cross browser testing - Learn web development | MDN for help you and learn more. In addition Mozilla have been highlighting Free Firefox Testing on Real Devices recently (Feb 2017).

Site Performance Testing

It is useful to get independent and repeatable timings of your web site's performance. There are of course many ways to do this and sites to help. However it is often helpful to get detailed feedback on what to change, and so here are a couple of useful sites:

Feature Selection

One important issue with building web sites is what browsers support which features, this is where Can I use... Support tables for HTML5, CSS3, etc really helps. It uses MDN Web Docs data as well as its own.


It is always nice if you website icon appears on your browser tab and when pinned in the operating system. So check out Favicon Generator for all platforms: iOS, Android, PC/Mac... for help building icons and HTML to support this.


The use of colour and getting the right combinations or palette of colours is not easy, so it is worth spending some time considering this and using tools to help. See Accelerating GitHub theme creation with color tooling | The GitHub Blog for some help and examples.


This is a huge area to consider when building websites, there is a lot to understand. I would suggest the most important thing and the starting point is to use HTTPS. You would do well to start with free certificates from Let's Encrypt - Free SSL/TLS Certificates and these can be automatically renewed to make life easy, hopefully your hosting account will sort this for you.

The next step is probably Content Security Policy (CSP) and for this I would suggest starting with Content Security Policy - An Introduction and then checking out Scott's CSP Cheat Sheet. You can also find a good introduction at Hardening Content Security Policy (CSP). One challenge of course is adding CSP to an existing site, for this Laboratory (Content Security Policy / CSP Toolkit) – Extension for Firefox is a great utility, however I do recommend watching the video, or at least the first part of it.

Handy Links

HTTP Observatory (Beta) - Mozilla Header checking
Analyse your HTTP response headers - HTTP Header Scanner
WebAIM: Alternative Text
Make the Web Work For Everyone ★ Mozilla Hacks – the Web developer blog