Website building resources

Think of the “W3C” as the good spider at the centre of the web. This is the behind-the-scenes organisation that consults, establishes working parties, holds conferences and thrashes out the technical standards on which the whole show runs.

Their website is not for the faint-hearted, being in the main academic. It is the place to go to to pin-point the exact definition or the current status of any xyz of websites that you can think of. But it also gives shelter to an array of extremely useful resources that most website builders can use and even play with and it would be difficult to mention them (see below) without mentioning the sky under which they get their shelter.

The W3C (see above) provides some invaluable on-line tools. A couple of these I have probably used on every website I have ever built. The most notable of these are their Markup Validator and their Nu Html Checker. The former deals with HTML and XHTML and the latter is an evolving checker of HTML5. Both reveal glitches in my code and help me see where polish needs applying.

They also offer a CSS validator (which I regard as being for purists, but which is nevertheless extremely helpful) and a Mobile Checker (which at the time of writing is in suspended animation). My advice is to use these on-line validators with care. You do need to understand what they tell you. Don’t dismiss the cause of the red flags that they wave if you can actually remove them from your code.

Billed as “The World’s Largest Web Developer Site”, W3Schools gets prime listing by Google whenever I need to remind myself about HTML or CSS. Their extensive site lists almost everything you’d need to know about different web technologies and extends outwards the deeper in one goes. Everything is explained with commendable clarity and simplicity, with minimal or no verbosity. Best of all, they have a Try it Yourself widget for nearly everything where you can go code-fiddling and get immediate feed-back.

I have a shelf-full of books on the correct syntax for this stuff but, with changing specifications, this site has the up-to-date version. I know that I should know all of this by now but because I don’t, this site helps me blow the dust off and get an easily-available reminder.

The site is not related to the W3C in any way but name.

Because the internet is an environment of ever-changing technologies, being able to track some of these changes is what this site offers. This is where I can read that right now Drupal powers 2.2% of the world’s websites, whereas WordPress powers 27.8%. (Mmm, quantity isn’t everything!) PHP drives 82.7% of the world’s websites, whereas ASP.NET runs 15.1%. 51.8% of all websites are in English. 47.8% of all websites are .com domains, whereas 1.2% of all websites are .fr domains.

Granted, this is all very nerdy, but there are occasions where some of this detail needs to be on my desk right now!

This website has a simple function: to give me free low-down on the domain registration of an individual website. It’s good for satisfying idle curiosity because it can report on site ownership and server location. It can also give some very basic information about missing image tags. But its chief value is in tracking the progress of IP address propagation when I move a site from one host to another. (Just before you enter the domain to be checked on, don’t miss their nifty cursor-tracking animation of network nodes: this always compensates for the dry results screen that I know is on its way!)

Domain Tools, the company behind this site, offers a range of paid-for services in the realm of site security and their reputation is excellent.

The strapline for A List Apart is “For people who build websites”, which does the job nicely. This is where I head when I want the long view, when I want to hear respected speakers, authors and designers placing a slant on a topic that they make interesting, and when I want to get inspiration. This is a blog site with guest contributors, founded by Jeffrey Zeldman, web standards guru and all-round inspiration.

This is a sister site of A Book Apart whose strapline, not surprisingly is “Brief books for people who make websites”, the publisher of books that I find some difficulty in not buying! I regard both outfits as being at the centre of contemporary web design, web standards and best practice. Visiting this website makes me feel as if I have come up from the engine room and entered the wheelhouse. It helps me put down the spanners and spread out some charts.

This website delivers two almighty OMG reactions. The first one is the discovery of just how many pitfalls await the unwary website builder by virtue of the fact that different browsers support different technology features, erm, well, differently. What a minefield! This site addresses that by providing an array of browser support tables for the latest web technology features. Want to know which browser - and this site tracks all version numbers of 17 different browsers - supports the latest CSS Grid Layout system, for example? The answer is there – in authoritative, colour-coded, tabbed and animated detail.

The second OMG reaction (after that complexity one) is: wow, how can such complexity be presented so simply and so beautifully? Every populated data cell in each of these tables provokes a roll-over pop-up with the relevant minutiae. Bravo. Surely a Hall of Fame awardee.

One of Google’s many sub-sites, this one has the strapline “Official news on crawling and indexing sites for the Google index”. That could be replaced with “SEO from the horse’s mouth”. It’s a very big site and its home page is rarely anyone’s entry-point.

At the time of writing, they have a Labels drop-down which lists keywords with which recent posts have been tagged and that’s as good a way as any by which to navigate the mass of posts that this site contains. This site is a huge learning resource which is difficult to get out of!

Before I start to lock-down the design of any website I’m working on, I run it through this on-line utility. It’s a process I repeat, ensuring an iterative removal of as many errors as I’m able to. In outline it spits out a score out of 100 for each of ‘desktop’ and ‘mobile’ functionality. (The latter used to be divided into ‘speed’ and ‘user experience’ but these two have quite rightly been bundled together in the current version.)

Best of all these tests shed light on very specific aspects of individual pages (image optimisation, JavaScript minification, page compression, browser caching, the importance of above-the-fold content, mobile link target sizes, etc.). If I can just work out how to asynchronously load linked JavaScript and CSS, I will have nailed it! That aside, it’s helpful to keep a table of what scores the different sites you work on achieve. There will inevitably be a pattern in those scores that will help you to work improvements earlier into the build.

This is another massively reputable on-line page speed test. This also generates a score for any given page, expressed this time as A–F grades in five or six categories: first byte time, keep-alive enabled, page compression, image compression, static cacheing and, if appropriate, the effective use of a content-delivery network.

In addition, there is a veritable array of millisecond response time data that enables you to judge where a page’s delivery speed to a user’s browser might be compromised. As with the Google test, I maintain a table of comparative speed tests so that what I’m working on is given some context. Some of these details may not be actionable in a shared hosting environment, but there will undoubtedly be some on-page details thrown up by this test that will be in your immediate control.

Typekit is a web font delivery service that enables you to get round the age-old problem of designing only with those fonts that reside on the user’s own machine. Code links your chosen font to Adobe’s network and your site(s) pull(s) the fonts over the internet. The choice of fonts is large and their quality is guaranteed to be high. The link above will take you straight to Adobe’s (arguably) exquisite font-selection interface where you can narrow your search for fonts with specific characteristics. You can then test each font with your own content at any size. Once you have a selection you can build a project-specific kit to link back to.

This is the only resource listed on this page that might have a cost associated with it. I pay for their inexpensive Portfolio plan, but there is a free one which imposes a few constraints. Paid plans give you access to a greater selection of web fonts for use on an unlimited number of websites. The end result is wonderful and the interface that you work with to get there is sublime.

There is a phase in building a site’s design where there is no content. The design and layout alone matter. However, that can’t happen without text, because text is what makes the content wear its crown. It is at this point that Lorem Ipsum rides to the rescue. This site does only one thing and it does it well. It generates paragraphs of lorum ipsum gibberish which can be dropped into an evolving page layout. Because this text is meaningless, there is no distraction. Because it has a “more-or-less normal distribution of letters” it will resemble “readable English”. The infant design can then start to mature before the client’s own, more meaningful content is ready to be put in place.

To help sweeten things, there’s a bouncy history of this dummy text and there are links to browser plugins that do the squirting more directly.

Since posting this article, a number of people have mailed me with a note of thanks and a request that I add something to this page about their own website, business or favoured site-building resource. The flow of requests has sometimes felt like a torrent. No doubt many of these suggestions have merit (although some have been no better than link-exchange requests) but I don’t have the time to verify that fairly. It’s inevitable that there are fine resources out there that I haven’t mentioned here; I am unable to scan the complete horizon. I have therefore declined any and all such requests and will continue to do so. I take the view that the benefit of any list like this is that it is partial and personal. If what you’re looking for isn’t here, you’ll find it elsewhere.