How To Fix A Broken Web Site

I’ve written a short e-book to help web site owners check their sites for potential problems. Although it’s aimed at owners there’s plenty in there for developers and designers as well.

It presents a series of checkpoints, split into categories, together with short discussion points and solutions. I’ve tried to cover everything from layout to branding to copyright to backups.

It’s completely free. Share it among your friends, business contacts and social networks. Just don’t try and make out it’s not my work and don’t sell it.

Download the free e-book

Why is it free? My hope is that you’ll find the information useful and that it will help you improve your web sites, or if you’re a web designer or developer, those of your clients. Of those who do find the information useful, my guess is that some of you will want to fix the issues you’ve found but will need some help to do so. Of those, my hope is that some of you will turn to me for that help. That’s where the effort I’ve put into it pays off and that’s why it’s free.

This is by no means a finished work, there will always be something new to add so if you want to be notified of updates when they happen just give me a shout and I’ll send you updates as soon as they happen.

In the mean time download the book, brew a nice cup of tea, grab some choccy biccies and start working through it. Additions and comments are, of course, most welcome via comments here or directly to me.

Quotation Marks

In web design, the little things make the difference. Computers have historically used ' and " (the so-called ambidextrous quotation marks) at both the beginning and end of a quotation like so,

"A quotation using 'ambidextrous' quotation marks."

This was because of limitations in the space on typewriter keyboards and the limit of 128 characters available to ASCII. These days we’re a little more sophisticated and we can take advantage of Unicode to give us proper curly quotes, just like the ones typesetters used to use back in the day,

“A quotation using ‘book quote’ quotation marks.”

Of course, this is a tiny detail and most people won’t be conscious of it. That’s why most web designers don’t worry about things like this. Nobody ever complains about the look of quotation marks. Even if somebody did, would anyone really take such a complaint seriously? There are phrases for people who complain about this kind of thing.

However, even though these little things are too small to tickle the conscious mind, they are big enough to irritate that part of the subconscious that decides where people are going to spend their money. They contribute to the feel of a site and that’s why smart people pay other people to create web sites. We’re the people who are obsessive enough to make sure your quotation marks set you apart from the ordinary web sites out there.

Proper Small Caps

Genuine small caps aren’t just scaled versions of normal caps, they’re completely different glyphs. Here’s a black uppercase ‘M’ in Arno Pro overlaid with a semi-transparent blue small-caps ‘M’. The blue letter has been scaled up (keeping the width and height ratio constant) so its height matches the conventional uppercase black glyph. You can see that small caps are wider and have thicker strokes and more sturdy serifs.

In CSS we can supposedly achieve this by setting font-variant: small-caps; but browser support is limited: all you’ll get are small versions of the uppercase glyphs. Instead I prefer to use font-feature-settings:'smcp'; Here’s a quick demo. The blue letters are, again, lowercase characters rendered as small caps and scaled to match the height of the conventional uppercase black glyph.

Webkit Prefixes

Remember when web sites used to show phrases like “Best viewed in Netscape 3.0”? Web browsers used to be riddled with inconsistencies, bugs and proprietary features, thanks in large part to the so-called browser wars. Today we’ve largely solved these problems and as long as you’re using a reasonably up to date browser you, and more importantly your customers, should have pretty much the same experience of any web site in whatever browser you prefer.

There is one fly in the ointment though. It takes the W3C (essentially the internet’s powers that be) quite a long time to ratify new features. Consequently browser manufacturers, the likes of Mozilla, Google and Microsoft, have been allowed to use a feature called experimental vendor specific prefixes. Essentially they’re a way for browsers to temporarily provide features (things like drop shadows and rounded corners) before they’re completely defined by the W3C. The key word here is ‘temporarily’; they’re intended as a stop gap until the real features are fully supported.

Unfortunately, some web developers have been designing web sites on the assumption that these prefixes will be available for all eternity and that’s led to a potential problem. Some of these prefixes have become so ubiquitous that some browser manufacturers are considering implementing prefixes from other vendors in their own browsers; thus breaking both the ‘vendor specific’ and ‘experimental’ aspects.

Whilst this is nothing like as severe as the old browser wars scenario it does have significant implications for the future of stable, simple, cross browser support and may well lead us back into a world where developers have to spend their valuable time, and your valuable cash, hacking together awkward and complex code just to get things to work right.

So, what are the real-world implications for you when you’re looking for someone to produce and maintain your web presence? In short, there are two things you need to consider:

  • Make sure your developer is committed to producing high quality, standards compliant code. Unless you’re an expert yourself, this can be difficult to ascertain but simply asking the question is a great first step and it’s certainly something that should come up in your initial negotiations if not as an explicit statement on their web site.
  • This is just one more reason why it’s important to consider your web site as an ongoing project rather than a fire and forget commission. Make sure you build a solid, long-term relationship with your developer and be prepared to invest at least some minor future effort on web site maintenance and upgrades.

Multitasking

What is multitasking?

According to Edward Hallowell multitasking is the

mythical activity in which people believe they can perform two or more tasks simultaneously as effectively as one

Very often that’s not what we’re really doing though. Often we’re just engaging in high frequency context switching – a rapid toggling among tasks rather than simultaneous processing. In other words we’re shifting our attention from one task to another and back again. Each context switch consists of two stages, “goal shifting”, which is where we decide what to do next, and “role activation”, where we switch to the set of rules required for the new task. We’re

compelled to restart and refocus

Of particular relevance today is what Linda Stone calls Continual Partial Attention. This is the phenomenon of handling multiple information sources by skimming the surface of the incoming data, picking out the relevant details, and moving on to the next stream. The number of sources we interact with is increasing and these sources are increasingly being used concurrently. According to the Kaiser Family Foundation the amount of time spent using different media concurrently almost doubled from 1999 to 2005.

Can we truly multitask?

It is possible to do more than one task at once but the tasks have to be simple and familiar, and there can’t be too many of them. For example, if you’re driving, it is possible to hold a conversation with your passenger at the same time. However, changing gear is a complex operation involving the intricate coordination of two feet and a hand, and when you’re first learning to drive you won’t be chatting whilst you’re doing it. Eventually, though, it becomes a familiar task which is performed subconsciously. Facebook and a movie though, is more complex. It’s not really Facebook and a movie at all; it’s more like Facebook then movie, then Facebook then movie, then Facebook then movie.

Certainly, most things that are unfamiliar, or that we deem creative or worthwhile, or that we call work in the post-industrial age, will suffer or become impossible when we try to include them as part of a multitasking activity. It’s also true that many simple or familiar things can be performed better when focus is applied. While it’s true that driving can easily be combined with listening to your passenger or the radio, proper, high quality driving is an active, participatory process. If you’ve ever had a track day or driven on blue lights or better yet, listened to commentary whilst being driven on blue lights, you’ll be aware of the focus, attention to detail and information processing that’s required. And yet most of us, most of the time, drive from A to B in a blur, with little to no recollection of the driving process. It works well enough; usually. Driving is one of those activities for which “good enough” is usually good enough.

What’s the problem then?

The fact remains though that sometimes sometimes “good enough” turns out not to be. You’re four times more likely to crash if you’re using your phone and interestingly experienced drivers are, in general, slower to react to brake lights and traffic lights.

So, multitasking makes us error-prone. This often manifests itself as a reduction in quality rather than discrete or complete failure. Equally important, we’re less efficient when we multitask. We lose significant amounts of time when we switch between multiple tasks and we lose even more time if the tasks are complex, often suffering up to a 40% loss in productivity.

It is certainly difficult, and possibly impossible to learn new information while engaging in multitasking. Students who engaged in more multitasking reported more problems with their academic work. We also tend to lose our ability to spot things in our periphery and it has even been shown that multitasking is accompanied by a rise in stress hormones. It seems clear then, that multitasking impairs many of our cognitive abilities.

How Is the Brain Affected?

According to Pashler multitasking causes dual-task interference through three possible mechanisms:

  1. Capacity sharing. This is when a multitude of complex tasks consume too much of a mental resource to allow other tasks to continue.
  2. Bottlenecking. This is when a single, discrete mental resource is available for use by only one process at a time.
  3. Cross-talk. This is when similar sensor inputs route simultaneous and conflicting signals to the brain. Alternatively, it’s when outputs confuse the processing of other tasks.

Demographically speaking, contrary to popular belief, there’s very little evidence of any gender differences in multitasking ability. There’s also little evidence that younger people are better at it, although they do seem to be better at filtering out which information is worthy of their attention.

So why do we bother?


If we aren’t very good at multitasking, why do we bother? The fact is, even though we can’t do it, we want to do it, we think we can do it, and we can’t resist trying to do it. Multitasking makes us look busy and capable and efficient; in short, it makes us look good. Consequently it can be difficult to admit that we’re not very good at it, or that it doesn’t work. This is compounded by the fact that it’s easy to convince ourselves that rapid context switching is in fact true multitasking. In fact, the people who multitask the most are actually the least able multitaskers. Perhaps the most dangerous aspect of multitasking is that maintaining focus is hard; multitasking gives us a great excuse to procrastinate by dealing with urgent but unimportant alternative tasks. It’s often an excuse to pursue a more interesting or fun activity.

Is There a Solution?

Whilst it is true that the brain is incapable of performing multiple complex tasks at one time, even after extensive training, it is also true that people can be trained to switch tasks more efficiently.

The most important realisation is that your ‘to-do list’ is really a tree. You have long-term life goals, which require the completion of complex projects composed of smaller sub-projects which in turn are composed of individual actionable tasks. You can’t “build an ice-cream business” but you can “Google pistachio suppliers in Wakefield”. It’s these leaf nodes, the small, independent actionable tasks, which you need to add to your attention queue. Note that these things can be placed into a queue and don’t need to be in a tree. Once they’re in a queue you can deal with them one at a time, in some kind of order. Viewing your to-do list in its original tree form makes this very difficult.

Picking the appropriate granularity for your tasks is the next step. Get a feel for how long your optimal focused time is and try to split your projects into tasks of about this length. This allows you to focus on one task to completion before switching to another or taking a break. If you want to train up your focus, you can use a timer to steadily increase the time you focus on a task before taking a break.

Building strategies for handling distractions is the final component. Always have a ‘catch’ with you, whether it be a paper notebook, a phone app or a plain text document open on your computer. Use it to catch any incoming distractions that you don’t absolutely have to deal with right now. Catch it and forget it until your next break. Your strategy should be to recognise distractions for what they are, eliminate them where possible and schedule dealing with them where you can’t eliminate them. Your last resort should be an immediate response to a distraction. Included in distractions are things like email and Facebook. Schedule time slots to handle these things and make sure you turn off notifications.

William James described the youthful mind as having

an extreme mobility of the attention [that] makes the child seem to belong less to himself than to every object which happens to catch his notice.

For some people, James noted, this challenge is never overcome; such people only get their work done

in the interstices of their mind-wandering

It turns out that the quickest way to do many things is to do only one thing at a time.

Drupal Multi Site Installations – The Magic Secret Bits

The objective of this article is to provide the missing background information that most Drupal multi-site tutorials miss out. It’s these nuggets of wisdom that make the difference between a multi-site installation that works and one that’s a right royal PITA to set up and get going. The article supplies the tricks and tips needed whether you’re:

  • On Windows or Linux
  • Using Drupal 6.x or Drupal 7.x
  • Wanting development and production setups
  • Using a shared database or individual ones

Before we discuss the advanced tweaks you might want to do, it’s worth taking a minute to understand how a basic Drupal multi-site installation works. Most of the confusion I’ve seen seems to stem from not really grokking what’s going on during the install. So, we’ll do a quick walkthrough of the major conceptual points of a simple two-site setup.

Supporting Multiple Sites

When you unpack the Drupal code you end up with a two major conceptual components; the Drupal codebase itself and a subfolder (and its children) called sites which is used to store the settings for your individual Drupal sites.

Although all your sites will use the same codebase, Drupal decides which of your sites to show based on the HTTP request that you give it through your browser. So, if you enter http://site1.com in your browser, Drupal will look for a folder called site1.com in its sites sub-folder and display the content as dictated by the contents of that folder. Likewise, if you have a folder within sites called site2.com and you enter http://site2.com in your browser, then Drupal will show the content for site2.com. In summary, create a folder for each site within the sites sub-folder of your Drupal installation. This is the basic mechanism by which multi sites are supported in Drupal but it can be tweaked in a number of ways.

In addition to this, you need to set things up so that requests from your browser for http://site1.com and http://site2.com both get routed to the IP address of the machine hosting your Drupal code. You also need to make sure your web server is routing those requests to the right folder. The exact details of how to do this vary wildly depending on your situation but it’s trivially easy to find out how to do this so I won’t repeat it here. Google is your friend.

Finally, you need to create the sites themselves. To do this you need to copy default.settings.php from the sites\default folder into each of your site folders (sites\site1.com and sites\site2.com in our example), rename it to settings.php and make sure both it and the site specific folder are writeable. The last step is to point your browser to http://site1.com to start the site installation. This process will make changes to your site specific settings.php including storing info about which database Drupal should use for storing the bulk of your settings and content. Repeat this for each of your sites. Oh, don’t forget to set the privs on settings.php back to read only.

That’s it. You’re all done. Note that we’re not setting up any themes or custom modules or views etc. This is just a basic bare-bones Drupal installation.

Overall, what’s happened here is that a single codebase is used by Drupal to translate incoming HTTP requests into pointers to the relevant site-specific subfolder of the main sites folder. The installer builds your site by writing the site-specific setup info into the settings.php file in those folders. These settings.php files, in turn, point Drupal to the relevant database when it’s building content for display.

Development and Production Setups

The above scenario assumes you’re installing straight onto a production server. In practice this is a bad idea and you’ll normally want to build your sites on a development server, usually localhost before you deploy to production and go live. How does Drupal support this situation?

When Drupal is looking for the relevant sites sub-folder, it doesn’t simply look for an exact match in the URL. If you take a look at the comments near the top of settings.php you’ll see the search order that Drupal uses to do this. Making use of this search order usually allows you to build a site in development and then send it to production with a minimal amount of changes.

In Drupal 6 this is the only option you’ve got but in Drupal 7 a new file has been introduced to the top level of the sites folder called example.sites.php. Copy this file to sites.php in the same folder and edit it. Down at the bottom are a couple of example site mappings. Edit these to suit your needs. So, in our example, with sites/site1.com and sites/site2.com sub-folders we would use the following:

$sites['site1'] = 'site1.com';
$sites['site1'] = 'site2.com';

Then, if you’re working on your development server you enter http://site1 in the browser (without the .com suffix) and Drupal will use the sites.php file to map this into a request for the folder sites/site1.com. On your production site, accessed through http://site1.com in the browser (with the .com suffix) Drupal will not use these mappings and will just go straight to the sites/site1.com folder automatically.

Sharing Databases

Some hosting services limit the number of databases you can create. Drupal allows you to share a single database between multiple sites.

Before you run the Drupal installer you need to create your database(s) yourself using something like cPanel or phpMyAdmin. If you want to dedicate a database to each Drupal site then just create databases called site1 and site2. If you want to share a single database between all your Drupal sites then create a database called drupal. Finally if you want to share a single database between all your Drupal sites as well as other stuff then just create a database called shared.

If you’re using either the drupal or the shared options then you’ll need to tell Drupal you’re using a shared database. You do this by specifying a table prefix on the Advanced Settings section of the database configuration page which you’ll encounter as part of the installation script. In our example we might use the prefixes site1_ and site2_.

What About sites/all and sites/default?

In addition to the site specific sub folders we created under the Drupal sites sub folder, you’ll probably also notice Drupal has its own sub folders here called sites/default and sites/all. The first of these is used by Drupal to store your site if it can’t fins a site specific folder like the ones we created. The second is used to store modules and themes that will be available to all your Drupal sites.

Further Reading

Chrome Dev Tools Auto Save

Modern browsers now include a set of development tools allowing you to inspect various aspects of your HTML, CSS and scripting from within the browser itself. Nikita Vasilyev has now produced an extension for Chrome which allows changes to CSS and JS, made in the Chrome dev tools environment, to be automatically saved back into the source files. Excellent.

Installation is straightforward, if a little long-winded. Just follow the instructions. Addy Osmani’s produced a great walkthrough video and accompanying article. There are a few gotchas that might catch out the unwary or the uninitiated though.

  1. Don’t forget to click the ‘Install the Server’ link at the bottomof the ‘How To Install’ section.
  2. If you get errors about npm not being found during the server install (on Windows) then reboot your machine and try again.
  3. Once the server’s installed you need to run ‘autosave’ at a command prompt and this needs to be running whenever you want to autosave from the dev tools. You might want to start this automatically at boot up.
  4. If you’ve got a message in the command prompt after running ‘autosave’ saying something like Dev Tools Autosave 0.3.1 is listening on http://127.0.0.1:9104 then you should be all set.
  5. Note that the extension won’t save changes made to HTML files. So if you’ve got any inline CSS, changes made to it won’t be saved. Your CSS needs to be in an external .css file.
  6. If it seems to be setup OK but it’s still not saving, make sure you’re running the latest version of the extension. Go to chrome://extensions in your browser and check DevTools autosave is running at least version 1.1.1
  7. If you’re using SASS/SCSS/LESS for your CSS then obviously any changes you make to the CSS aren’t going to get ported back into the .sass/.scss/.less files.
  8. Finally, if you’re making quick experimental changes in the browser then keep in the back of your mind that you’re working on your CSS files and you’re busy overwriting their contents. Those quick ‘look-see’ changes you’re making are now persistent so it’s easy to lose stuff if you get too enthusiastic.

Changing The Default WordPress Image Sizes

When you upload an image to a WordPress media library, WordPress will create and store a variety of different sized copies of it, by default these are called thumbnail, medium, large and full size. When inserting an image into a post you can select which size you want to insert:

You can alter these default sizes from the admin panel under Settings; Media like this. However, if you’re developing a theme you might want to do this from within your theme’s code in order to ‘enforce’ specific sizes on your users without requiring them to edit admin settings. For example, suppose you’re wanting to maintain a vertical rhythm in your pages by using a fixed line-height in your CSS (e.g. 18px). In that case you’re likely to want your images to conform to that vertical rhythm as well by setting their height to be a multiple of 18px. You can do this by adding the following code to your functions.php:

update_option('thumbnail_size_w', 144);
update_option('thumbnail_size_h', 144);
update_option('medium_size_w', 288);
update_option('medium_size_h', 216);
update_option('large_size_w', 480);
update_option('large_size_h', 360);

In future, that will result in the following settings when you insert an image:

Note that this will not affect previously uploaded images; they’ll still retain the dimensions they were uploaded with. There are various plugins available to convert them to your new sizes though.

cars.net Logo

Here’s a logo I worked up for cars.net who recently ran a design competition for their new site branding. The brief was to provide a friendly and approachable image, suited to family purchasers. They wanted to use a custom font in black, and the logo was to incorporate an image of a car using a combination of blue and green to provide impact. Unfortunately my design was not chosen (you can see the winning design here) but I wanted to showcase it here for a couple of reasons.

Firstly, my personal view is that I produced a superior logo to the winner. However, that counts for nothing, and quite rightly so. Ultimately, the client makes the choices they want to make. They know their requirements better than their content producers. That’s not to say some clients’ design sensitivities aren’t in need of a little gentle calibration at times, but more often than not disagreements over the ‘correct’ choice are a matter of subjective, personal choice and in this case it’s the role of a designer to defer to the wishes of his client.

Secondly, although I still like the logo I designed, there are a couple of things I’d do to improve it. I’m happy with the cars themselves, but the font would benefit from being a heavier weight but a smaller size, to tie in more with the form of the cars’ tyres. I tried this at the time but didn’t like it then. I also tried to preserve the purity of shape for the letter forms. They’re very strictly cast on a circular geometry and while that works really well for the ‘cars’ part of the text, the ‘net’ section feels unbalanced and the letter ‘t’ appears leaning and crushed. With hindsight, I think I’d sacrifice some of the circularity for a better feel. The point here is that nothing we produce is ever perfect. Both the designer and the client should be prepared to revisit work at a later date as often it’s possible to spot potential improvements only after a period of time has elapsed. But having said that, it’s also important to strike a balance and to recognise when effort, and indeed money, can be best spent elsewhere.