Faster websites, better photography, a better browser, great conferences and a better life (#MKGN)

Last night was the fourth of the tremendously successful MK Geek Nights (MKGN), organised by David Hughes (@DavidHughes) and Richard Wiggins (@RichardWiggins).

And what a night it was.  Interesting and inspiring talks from great speakers, as usual – and I promised I’d write a summary blog post so here it is, albeit a little longer and a little later than planned…

Adventures with Google PageSpeed

Kier Whitaker (@kierwhitaker) kicked off the evening, with a few tips for speeding up websites:

  1. Make fewer HTTP requests:
    • Each JS or CSS file and every image is a round trip across the network. The fewer trips made across a congested network, the faster the page loads.
  2. Use Minify to compress and concatenate CSS and JS files :
    • Codekit is one option for embedding Minify in your workflow; there are command line tools too.
    • Consider using a master file with imports and then minify to compress the output (might not be so useful as an approach when working in teams).
  3. Optimise your images:
    • ImageOptim is one option – and even that 50-60-70% the images can still look great.
    • Apparently, Photoshop’s Export to Web functionality is not so good [damn!].
  4. Only use what you need:
    • When working with libraries, you don’t have to use all of Modernizr, jQuery, etc. – maybe just include the parts that you need (e.g. AJAX and not the whole library).
  5. CSS at the top, JS at the bottom:
    • This is a simplistic rule and you might need to break it sometimes (e.g. to stop a flash of unstyled type when using Typekit).
    • It’s about percieved speed rather than actual page loads [but perception is reality].
  6. HTTP compression:
    • Use GZIP compression on the server. On Apache this can be configured using .htaccess or in httpd.conf.
  7. Browser caching:
    • Make the browser keep a copy of the file – if only a page is only updated infrequently, you can cache for longer. Images, etc. can have long expiry but it’s not so great on dynamic sites!
    • Have a look at the HTML5boilerplate .htaccess file for inspiration – and read up on “cache busting”.
  8. Enable HTTP keep-alive:
    • By keep the connection open for a few more seconds, you can lose the overhead of additional requests.
  9. Cache dynamic content:
    • WordPress is quite heavy and can have 15-16 database queries on a simple home page. If you can cache the output then serve a flat file, this can save time.
    • Rails and many PHP frameworks have similar concepts.
  10. Use a content delivery network:
  11. Beware of boilerplates:
    • Boilerplates can leave behind a lot of unnecessary resources (e.g. favicons) – and these might even be downloading your 404 page if they are not present!
    • Check to see that all the assets you reference actually exist…
  12. Test widely:
    • Try a few sites to help optimise your code (e.g. Google PageSpeed; Yahoo Yslow;
    • Kier likes the detail with and it provides two views – one for a fresh request and another to see how effective caching is.
    • Beware that the sites might contradict each other.
    • Also use developer tools in browsers, like the Google Chrome Inspector – look at the network tab and see when resources are loaded from cache, etc. (examine the headers too).

Once you’ve implemented a few tweaks, you might find that the last few percent to get to perfect are difficult – there are some things that you just can’t control. But, on a big website, incremental changes add up to big improvements – you might want a strategy to tray and work things out.

My site scores 84/100 on Google PageSpeed so it looks like I have some work to do…

Better photography by design

I’ve been taking photos for nearly 35 years and I’m still rubbish at it. Well, maybe not rubbish but I maintain there’s two sides to photography: anyone can learn the technical stuff; but, to create great images, you need to have a creative eye…

Al Power (@alpower) gave a great 5 minute talk on taking better pictures – not rocket science but some simple steps that everyone can take to get much better results.

“So, what makes a good photo?” asked Al:

  • Is it camera gear?
    • Not really, you can probably push your existing one. It’s often said that the best camera is the one you have with you… whether that’s a smartphone or a DSLR.
  • Composition plays a big part and Al showed four examples:
    • A skater: moving from left to right, gives a sense of motion. Leave some negative space for the skater to move into. And their legs and arms form triangles.
    • A spiral staircase: the shape and lines of the staircase lead the viewer into the picture. Repeated shapes and patterns work well.
    • A jetty: lead-in lines capture attention and bring the viewer into the image.
    • A beach: using the rule of thirds to divide the image into nine segments, and to place things on grid lines/intersections.
  • Try a different perspective:
    • Take the same shot from different angles, maybe three or four times. High or low, zoomed in or out – see what works.
  • Use the light:
    • Light is probably the most important control for a picture.
    • You can take great pictures in any conditions – but direct sunshine is not always good: perhaps place a subject under a tree in direct shade and use even, reflected light; on cloudy days sky is huge lightbox; the time of day makes a difference too
  • Learn how to process your pictures:
    • With a DSLR – raw images are amazingly powerful.
    • Use Snapseed on iOS and Android.
    • On a PC or Mac, use iPhoto, Picassa, Lightroom or Aperture.
    • Attend a workshop, watch some of Adobe’s videos, or a find a good YouTube channel.
  • Practice and look for inspiration:
    • Henri Cartier-Bresson was quoted as “your first 10,000 photos are your worst”.
    • No-one was born an amazing photographer and we’re on a journey – “give yourself permission to suck”, says Al – and practice.
    • Work out what tricks are employed by those that inspire you – break them down and apply them to your own images.

A web developers guide to Windows 8

Martin Beeby kicked off with a self-deprecating video, for all of us Internet Exploder lovers:

Then he moved on to tell us about – a website to help developers design for Internet Explorer 10 and see if and where the might be problems, if they are using out of date libraries, or vendor prefixes that are no longer required. One example of the tips included is this code to ensure that a responsive site really is responsive, making sure that it displays properly when running on the side of a Windows 8 display:

@-ms-viewport{width: device-width;}

There’s also advice on creating icons that will look good on a Windows 8 desktop – and a 3 month subscription to BrowserStack for cross-browser testing.

Moving past, Martin explained that Windows 8 can run HTML and JavaScript apps locally – so web developers can be app developers too – and, of course, because this is Windows 8, we were encouraged to embrace touch…

I only wish that the video Martin wrapped up his talk with was available on the web (I’m told it will be soon)… if I ever see it again, I’ll tweet the link…

The value of conferences

I had high hopes for this talk – I need to convince my new boss’ boss that there is value in conferences. And there is – but Craig Lockwood (@CraigInWales)’s talk started out by talking about the costs…

  • The costs to the organiser: a venue; speakers (fees and expenses); marketing (lanyards, programs, promo codes for discounts, etc.); insurance (weather, speaker sickness, etc.); judgement (you can’t please everyone – someone will be unhappy); refreshments; and time.
  • The costs to the speaker(s): time (to write a talk); judgement (what might others say they think of you?)
  • The costs to the attendee: ticket costs; travel; accommodation; and time

So what does this mean? Why do we need conferences? After all, Craig exclaimed, plumbers don’t get together to discuss latest pipe techniques! Our techniques and even the canvas we work on changes too regularly to keep up so we share information. Freelancing can be a lonely job – so meetups are great to build relationships and share knowledge.

Twitter, suggests Craig, has become the watercooler and conferences are the parties. Of course, some idiots still spoil things and some conferences find that they now need codes of conduct! So be respectful – it’s fine to disagree (respectfully) – but we should air our grievances personally and not publicly [Hmm… I once blogged about a pretty awful vendor event… think I might be guilty there].

But think about this quote too, attributed to Ling Valentine (@LINGsCARS):

“If nobody hates your website, chances are nobody loves it either.”

“I have no idea what I’m doing”

The final talk was from Simon Collison (@colly) and I just can’t do it justice in written form. Listen to the audio and then think about your own life and what you’re doing right now:

This hit home for me: I’m just starting a new job; it’s going to be a challenge – but that’s exactly what I need. As for keeping up with blogs, tweets, magazines, books – I’m drowning. And don’t get me started on the systems I use at work (admittedly not quite as chaotic as the setup Simon describes at Fictive Kin…)

So when does this happen again?

The next MKGN is on 13 June and all 200 tickets “sold out” in just 2 hours (can a free event sell out?!). There’s a waitlist in operation and it’s definitely worth signing up if you’re in the area and you are interested in webby-creative-designer-digital-makery-slightly-geeky-stuff, washed down with a beer or two and followed by pizza! I’ve even met some people there in real life that I only knew on Twitter before…

Short takes: Amazon Web Services 101, Adobe Marketing Cloud and Milton Keynes Geek Night (#MKGN)

What a crazy week. On top of a busy work schedule, I’ve also found myself at some tech events that really deserve a full write-up but, for now, will have to make do with a summary…

Amazon Web Services 101

One of the events I attended this week was a “lunch and learn” session to give an introduction/overview of Amazon Web Services – kind of like a breakfast briefing, but at a more sociable hour of the day!

I already blogged about Amazon’s reference architecture for utility computing but I wanted to mention Ryan Shuttleworth’s (@RyanAWS) explaination of how Amazon Web Services (AWS) came about.

Contrary to popular belief, AWS didn’t grow out of spare capacity in the retail business but in building a service-oriented infrastructure for a scalable development environment to initially provide development services to internal teams and then to expose the amazon catalogue as a web service. Over time, Amazon found that developers were hungry for more and they moved towards the AWS mission to:

“Enable business and developers to use web services* to build scalable, sophisticated applications”

*What people now call “the cloud”

In fact, far from being the catalyst for AWS, Amazon’s retail business is just another AWS customer.

Adobe Marketing Cloud

Most people will be familiar with Adobe for their design and print products, whether that’s Photoshop, Lightroom, or a humble PDF reader.  I was invited to attend an event earlier this week to hear about the Adobe Marketing Cloud, which aims to become for marketers what the Creative Suite has for design professionals.  Whilst the use of “cloud” grates with me as a blatant abuse of a buzzword (if I’m generous, I suppose it is a SaaS suite of products…), Adobe has been acquiring companies (I think I heard $3bn mentioned as the total cost) and integrating technology to create a set of analytics, social, advertising, targeting and web experience management solutions and a real-time dashboard.

Milton Keynes Geek Night

MK Geek Night #mkgn

The third event I attended this week was the quarterly Milton Keynes Geek Night (this was the third one) – and this did not disappoint – it was well up to the standard I’ve come to expect from David Hughes (@DavidHughes) and Richard Wiggins (@RichardWiggins).

The evening kicked off with Dave Addey (@DaveAddey) of UK Train Times app fame, talking about what makes a good mobile app. Starting out from a 2010 Sunday Times article about the app gold rush, Dave explained why few people become smartphone app millionaires, but how to see if your idea is:

  • Is your mobile app idea really a good idea? (i.e. is it universal, is it international, and does it have lasting appeal – or, put bluntly, will you sell enough copies to make it worthwhile?)
  • Is it suitable to become a mobile app? (will it fill “dead time”, does it know where you go and use that to add value, is it “always there”, does it have ongoing use)
  • And how should you make it? (cross platform framework, native app, HTML, or hybrid?)

Dave’s talk warrants a blog post of it’s own – and hopefully I’ll return to the subject one day – but, for now, that’s the highlights.

Next up were the 5 minute talks, with Matt Clements (@MattClementsUK) talking about empowering business with APIs to:

  1. Increase sales by driving traffic.
  2. Improve your brand awareness by working with others.
  3. Increase innovation, by allowing others to interface with your platform.
  4. Create partnerships, with symbiotic relationships to develop complimentary products.
  5. Create satisfied customers – by focusing on the part you’re good at, and let others build on it with their expertise.

Then Adam Onishi (@OnishiWeb) gave a personal, and honest, talk about burnout, it’s effects, recognising the problem, and learning to deal with it.

And Jo Lankester (@JoSnow) talked about real-world responsive design and the lessons she has learned:

  1. Improve the process – collaborate from the outset.
  2. Don’t forget who you’re designing for – consider the users, in which context they will use a feature, and how they will use it.
  3. Learn to let go – not everything can be perfect.

Then, there were the usual one-minute slots from sponsors and others with a quick message, before the second keynote – from Aral Balkan (@Aral), talking about the high cost of free.

In an entertaining talk, loaded with sarcasm, profanity (used to good effect) but, most of all, intelligent insight, Aral explained the various business models we follow in the world of consumer technology:

  • Free – with consequential loss of privacy.
  • Paid – with consequential loss of audience (i.e. niche) and user experience.
  • Open – with consequential loss of good user experience, and a propensity to allow OEMs and operators to mess things up.

This was another talk that warrants a blog post of its own (although I’m told the session audio was recorded – so hopefully I’ll be able to put up a link soon) but Aral moved on to talk about a real alternative with mainstream consumer appeal that happens to be open. To achieve this, Aral says we need a revolution in open source culture in that open source and great user experience do not have to be mutually exclusive. We must bring design thinking to open source. Design-led open source.  Without this, Aral says, we don’t have an alternative to Twitter, Facebook, whatever-the-next-big-platform-is doing what they want to with our data. And that alternative needs to be open. Because if it’s just free, the cost is too high.

The next MK Geek Night will be on 21 March, and the date is already in my diary (just waiting for the Eventbrite notice!)

Photo credit: David Hughes, on Flickr. Used with permission.

Reducing website errors with HTTP 301 redirects

A couple of weeks ago, I wrote about a WordPress plugin called Redirection. I mentioned that I’ve been using this to highlight HTTP 404 errors on my site but I’ve also been using the crawl errors logged by Google’s Webmaster Tools to track down a number of issues resulting from the various changes that have been made to the site over the  years, then creating HTTP 301 redirects to patch them.

Redirections as a result of other people’s mistakes

One thing that struck me was how other people’s content can affect my site – for example, many forums seem to abbreviate long URLs with … in the middle. That’s fine until the HTML anchor gets lost (e.g. in a cut/paste operation) and so I was seeing 404 errors from incomplete URLs like…-file-systems.htm. These were relatively easy for me to track down and create a redirect to the correct target.

Unfortunately, there is still one inbound link that includes an errant apostrophe that I’ve not been able to trap – even using %27 in the redirect rule seems to fail. I guess that one will just have to remain.

Locating Post IDs

Some 404s needed a little more detective work – for example is a post where I forgot to add a title before publishing and, even though I updated the WordPress slug afterwards, someone is linking to the old URL.  I used PHPMyAdmin to search for post ID 3899 in the wp_content table of the database, from which I could identify the post and  create a redirect.

Pattern matching with regular expressions

Many of the 404s were being generated based on old URL structures from either the Blogger version of this site (which I left behind several years ago) or changes in the WordPress configuration (mostly after last year’s website crash). For these I needed to do some pattern matching, which meant an encounter with regular expressions, which I find immensely powerful, fascinating and intimidating all at once.

Many of my tags were invalid as, at some point I obviously changed the tags from /blog/tags/tagname to /blog/tag/tagname but I also had a hierarchy of tags in the past (possibly when I was still mis-using categories) which was creating some invalid URLs (like  The hierachy had to be dealt with on a case by case basis, but the RegEx for dealing with the change in URL for the tags was fairly simple:

  • Source RegEx: (\/tags\/)
  • Target RegEx: (\/tag\/)

Using the Rubular Ruby RegEx Editor (thanks to Kristian Brimble for the suggestion – there were other tools suggested but this was one I could actually understand), I was able to test the RegEx on an example URL and, once I was happy with it, that was another redirection created.  Similarly, I redirected (\/category\/) to (\/topic\/).

I also created a redirection for legacy .html extensions, rewriting them to .htm:

  • Source RegEx: (.*).html
  • Target  RegEx: $1.htm

Unfortunately, my use of a “greedy” wildcard meant this also sustituted html in the middle of a URL (e.g. became , so I edited the source RegEx to (.*).html$.

More complex regular expressions

The trickiest pattern I needed to match was for archive pages using the old Blogger structure.  For this, I needed some help, so I reached out to Twitter:

Any RegEx gurus out there who fancy a challenge, please can you help me convert /blog/archive/yyyy_mm_01_archive.htm to /blog/yyyy/mm ?
Mark Wilson

and was very grateful to receive some responses, including one from Dan Delaney that let me to create this rule:

Source RegEx: /blog\/([a-zA-Z\/]+)([\d]+)(\D)(\d+)(\w.+)
Target RegEx: /blog/$2/$4/

Dan’s example helped me to understand a bit more about how match groups are used, taking the second and fourth matches here to use in the target, but I later found a tutorial that might help (most RegEx tuturials are quite difficult to follow but this one is very well illustrated).

A never-ending task

It’s an ongoing task – the presensce of failing inbound links due to incorrect URLs means that I’ll have to keep an eye on Google’s crawl errors but, over time, I should see the number of 404s drop on my site. That in itself won’t improve my search placement but it will help to signpost users who would otherwise have been turned away – and every little bit of traffic helps.

Creating a dashboard using a SharePoint list (part 4): bringing it all together

This week has been a bit of a SharePoint-fest as I’ve walked through the stages of creating my SharePoint dashboard. For obvious reasons, I can’t share the version I use at work, so I’ve created a mockup using the SharePoint site that comes with my Office 365 subscription. Feel free to take a look…

The three posts that explain how I built this dashboard can be found below:

As the code examples I gave use quite a lot of SharePoint formulas for calculated values, I thought it might also help to link to Microsoft’s formulas and functions documentation as well as their examples of common SharePoint formulas.

Right, that’s enough SharePoint for now… next week will be back to the usual mix of tech, marketing, photography and whatever else I stumble across…

Creating a dashboard using a SharePoint list (part 3): indicating several states of progress

Yesterday’s post looked at using ticks/crosses on my SharePoint dashboard to track progress on activities. I was quite happy with this, but my manager wanted to show progress, rather than a simple binary done/not done – and I wanted it to be visual, not text-based.

We settled on a system using a series of circles with various stages of “filling-in” (none, quarter, half, three-quarters, full) to show how far an activity had progressed, and I amended the code that I used for the ticks and crosses.

Using the same principle as with the ticks and crosses, this time the font changed from Wingdings to Arial Unicode MS, which includes the appropriate shapes under the block elements and geometric shapes subrange:

First of all, I changed my column to indicate progress from a Yes/No to a Choice with radio buttons for Not Started; Started; Additional Information Required; Almost Complete; Complete and Not Applicable.

Next I needed to adapt the formula used to calculate the correct HTML code for the display column by nesting repeated iterations of

IF([Task Progress]=”Started”,”


Eventually this ended up as:

=IF([Task Progress]=”Complete”,”

“,IF([Task Progress]=”Started”,”
“,IF([Task Progress]=”Additional Information Required”,”
“,IF([Task Progress]=”Almost Complete”,”
“,IF([Task Progress]=”Not Applicable”,”

The code is not pretty, but it seems to work, and the result is something like this:

Creating a dashboard using a SharePoint list (part 2): tick/cross status indicators

In my last post, I wrote about how I used a script I found on the Internet and a couple of calculated columns to show a Red/Amber/Green (RAG) status on a list in SharePoint. I also wanted to clearly indicate which items in my list were complete, and which were still ongoing.

My inspiration for this came from Chris Bell’s posts on displaying tick marks in HTML, combined with the same code that converts my text RAG Status to HTML.

This time, I converted a Yes/No Checkbox (actually, it’s TRUE/FALSE) to HTML code for a tick or a cross in another column, using the following formula:

=IF([Task Completed]=TRUE,”


The end result is something like this:

It needs the Wingdings font to be installed, but everyone who needs to access this list is using a Windows PC – feels like a bit of a fudge but it works for now… and can always be replaced with a graphic (as I did for the KPI indicators on the RAG status).

Creating a dashboard using a SharePoint list (part 1): colour coded status indicators

I’ve been having some fun over the last couple of weeks, developing a dashboard in SharePoint to track a number of activities that I’m co-ordinating.

Within our company there are some people who criticise SharePoint as a platform, largely because of some of the confusing messaging around some of the collaboration features and the way in which it gets mis-used as a document store (complete with folders!) but, whilst it can certainly be infuriating at times, I have worked on quite a few sites over the years where it’s struck me just how powerful the concept of a list is (I should know that really – I remember spending quite a bit of time discussing linked lists in my Computer Studies degree, but that was 20 years ago…).

I wanted to create a list with a red/amber/green status for each item – but I didn’t just want the words – I wanted colour to jump out of the page and say – this is the stuff that’s on track… and this isn’t…

Some calculated values and a script to generate HTML from text

A bit of digging around on the ‘net turned up a method that works for me – and the details are in Anjali Bharadwa’s post on colour coding custom lists and tasks:

Firstly, I  interrogate the contents of my text column (in my case this is called RAG Status, with pre-defined choices or Red, Amber and Green) and convert that to an HTML colour code in another column (called Color). The formula is  as follows:

=IF([RAG Status]=”Red”,”red”,IF([RAG Status]=”Amber”,”orange”,”green”))

I created a page that includes a Web Part that displays a view on my list and used a hidden Content Editor Web Part below this, containing Anjali’s script (there’s an alternative script available from Christophe Humbert at PathToSharePoint but the download link wasn’t working on the day I needed it…), to read this and to generate HTML in another column with a calculated value (called RAG).  For SharePoint 2007, the script can be included within the HTML source for the webpart but, for SharePoint 2010, it’s necessary to link to a separate file (Adam Preston explains how to do this in his post on inserting JavaScript into a Content editor Web Part) in the This time, the formula is:



Using a particular font is risky (how do you know that everyone has it?) but in this case I could be sure that all of my audience would be running our corporate build with Windows and Internet Explorer. I later changed the formula to use a different symbol:



Sorting the RAG status

One annoyance with this approach was that the list was sorted based on my RAG Status column, but I wanted Red-Amber-Green and the alphabetical order was Amber-Green-Red. My fix for this was to change the RAG Status choices to include a number so they become: (1) Red; (2) Amber; and (3) Green.

I also tweaked the calculated value for the Color column:

=IF([RAG Status]=”(1) Red”,”red”,IF([RAG Status]=”(2) Amber”,”orange”,”green”))

With this change in place, my column ordering works – and it gave me the opportunity to change the way I represent the status too…

Alternative visualisations

Path to SharePoint has some ideas for alternative visualisations for colour-coding (and a follow-up post). I particularly like the KPI indicator version, which is based on some of SharePoint’s standard images:


To use these, I changed the formula for my RAG column to:


This change also means that the Color column is redundant, although I’ve left it in place in case I want to go back to it later.

What next

So that’s my RAG status sorted. In the next post, I’ll explain how I used this method to show ticks and crosses to indicate activity completeness.

Half-baked cookies…

I don’t know if this website uses cookies. I think it probably does beacuse I have Google Adsense code and Google Analytics code in place. It wouldn’t surprise me if WordPress uses some cookies too but, like many bloggers, I use off-the-shelf software and, as long as it works, I don’t worry too much about how things happen.

Unfortunately, some half-baked EU directive about privacy and cookies (half-baked – get it…) takes effect this month after even the UK government needed a year to get its act together (the Information Comissionners Office, which is responsible for enforcing the associated UK legislation, only removed its last cookie in March).

What’s worse is that the ICO’s guidance for website owners is really difficult to follow. Peter Bryant (@PJBryant) pointed me at an article in PC Pro magazine that suggests I should be OK without doing anything, meanwhile Kuan Hon (@Kuan0) from the Cloud Legal Project at Queen Mary University suggested a few weeks ago that we all need to be looking carefully at our sites if we want to avoid a fine…

I’m no lawyer and I can’t afford to be paying fines so I checked out some WordPress plugins that might help me. Some were linked to websites that should check my site for cookies… except they didn’t seem to work – and, anyway, I don’t really want to be making a big deal about cookies (they are, mostly, harmless).

I selected a very simple plug-in called Cookie Warning that presents a message (importantly, not a pop-up) to first time site visitors. The message is customisable (although changing the size of the text on the buttons will involve me editing the plugin) and it seems to be enough for me to gain consent from users. Importantly, it doesn’t seem to impact the way in which search engines see the site.

Only time will tell if this change negatively impacts my traffic – I’d like to think that most of my visitors understand enough about cookies to realise that this is not really such a big deal – but it will be interesting to see how this pans out over the next few months as companies big and small update their sites to comply with the legislation.

Enabling website compression to reduce bandwidth use

After years of steady growth, has seen a small drop in the number of blog subscribers in recent months.  To me this means one of two things:

  • Perhaps RSS is no longer the most useful way to consume blog content (for example, I rarely read RSS feeds these days and rely instead on what friends, peers and industry contacts “talk” about on Twitter to understand what’s worth reading.  I know that many of my readers follow me on Twitter @markwilsonit too).
  • People don’t like my posts.

If I’m brutally honest with myself, it’s most likely to be the latter – after years of blogging furiously, I have seriously scaled back – partly (mostly) due to a lack of time – and so I guess some people have assumed that I’m no longer blogging (or at least not blogging enough that’s interesting enough to keep in their feed reader).  That’s a shame – and it’s not really something that I want to see becoming a continuing trend.

Graph showing bandwidth growing and exceeding quotaStrangely though, as my blog output has dropped significantly, and my subscribers have dropped (ever so slightly), my bandwidth usage has continued to rise – to the point that my hosting provider actually dropped the site returning a “bandwidth exceeded” message to readers recently (thankfully, this was resolved within a very short time of me noticing and bringing it to their attention).  When I started to look into this, I found that the biggest jump in bandwidth usage related to my upgrade from WordPress 2.2 to 2.9 in January.  I couldn’t understand why the same database, same theme, etc. running on a new version of WordPress would result in a significant increase in bandwidth usage until I saw that WordPress no longer contains an option to compress content for clients that support it, or, in WordPress parlance: “WordPress now leaves compression as a decision for the server”.

There are loads of plugins out there to enable GZIP compression on WordPress 2.5 and later; however I found that the WordPress guys are right – the simplest way is often to let the web server handle the compression – after all, I’d like to compress content (and save bandwidth) for all of my content, regardless of whether it’s served from WordPress.

I found the answer in Ryan Williamscomment on a post at Il Filosofo – by adding a few lines to my .htaccess file (after checking that my host has the deflate module enabled in Apache), I saw a 72% reduction in the bandwidth required to serve my home page.  This is the code I added:

AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json application/x-httpd-php application/x-httpd-fastphp application/rss+xml application/atom_xml application/x-httpd-eruby
Header append Vary Accept-Encoding

In a nutshell, this tells the server to deflate various text-based document types.  Job done.  There are various tools available on the ‘net to see if a site has compression enabled (such as GIDZipTest) but my favourite is Is My Blog Working because it also tells me about some other items that I might like to look into to potentially improve the efficiency of the site.  Hopefully now I’ll see my bandwidth fall back within my quota – which should also please my hosting provider.

Don’t write off Internet Explorer just yet (and how to make sure your website renders correctly with Internet Explorer 8)

Microsoft Windows Internet Explorer 8 logoI’ve had a few communications from Microsoft this week attempting to hammer home the point that Internet Explorer (IE) 8 was released last week. My personal view is that many technical users switched to alternative browsers during the time when “Internet Exploder” was, frankly, not that great (a deliberate understatement) and that it will take a long time for them to return (if, indeed, they ever do); however the majority of consumers and enterprises are still using IE for two reasons:

  • It ships with Windows.
  • They see no need to upgrade/switch browsers (unless Windows Update does it for them).

There are of course those who will highlight IE’s problems (for example, that it accounts for a significant number of the security updates produced for Windows) but, in fairness, competing products have similar issues and in some ways I’d rather be running a popular browser that others will find the holes in and the vendor will (hopefully) fix (of course, the same argument is often levied as a reason to run open source applications).

I would like to point out though that Internet Explorer 8 is a huge step forward for Microsoft – both in terms of standards compliance and when looking at its feature set and these days I rarely run anything other than a native browser (IE on Windows, Safari on Mac) because the return of the browser wars has really helped operating systems to raise their game when it comes to browser functionality. IE8 works for me – and whilst there may be tons of add-ins for Firefox, it’s those add-ins that can make the browser unstable too. Similarly, Google Chrome is great for running Google Apps as though they were desktop applications but I fall back to IE when a website fails to render in an alternative browser. And Opera (one of the competitors currently winding up the European Union to drag Microsoft through the courts again in a battle which does little-or-nothing for end users and costs us all a load of money) – they are little more than a distraction, as can be seen in my webstats for March:

Browser Percentage of traffic
Microsoft Internet Explorer 47.26%
Mozilla Firefox 39.24%
Apple Safari 6.33%
Google Chrome 3.91%
Opera 1.90%

If I look at the IE versions in use though, almost 70% are on IE7, around 10% are on IE8, and 21% of my IE visitors (so around 10% of my overall traffic) are still running IE6. My stats are probably skewed due to the number of technical readers (who often run the latest and greatest or the more obscure technologies) but it seems that IE6 is finally becoming a minority browser (and I had just 9 visits from other versions of IE last month).

It seems to me that, for most web developers, there really is little reason not to adhere to web standards and those IE hacks to sort out transparent PNGs, rendering issues and a miscellany of other “quirks” will soon become a thing of the past. Even so, there are still a significant volume of users running older browsers, so we can’t cut loose entirely (IE6 users accounted for over 12% of this site’s revenue last month… that might not be a lot of money but there is a saying that “if you look after the pennies, the pounds will look after themselves“) and, if redeveloping your site to tell it not to run loads of IE hacks is too big a project (or if you still want to direct IE8 to view your site in a particular manner), I saw a document today that details the metatags that can be used:

Internet Explorer 8 ships with multiple rendering modes that may be set by using the X-UA-Compatible header. Web developers can use the ‘meta tag’ to instruct Internet Explorer 8 to render content using a specific mode – to ensure legacy code and applications work properly. The ‘meta tag’ can be included as an HTTP response header for a server-wide solution or on a page by page basis. At the page level instructing the browser to render using the IE7 mode, the ‘meta tag’ would look like:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

More than just IE7 mode
The following chart lists the available modes and values for the ‘meta tag’:

Compatibility Mode Value Render Behavior
IE=5 “Quirks” mode
IE=7 Internet Explorer 7 Strict mode
IE=EmulateIE7 Use the !DOCTYPE declaration to determine mode:

  • Quirks mode !DOCTYPEs result in Quirks mode
  • Standards mode !DOCTYPEs result in Internet Explorer 7 Strict mode
IE=8 Internet Explorer 8 Standards mode
IE=EmulateIE8 Use the !DOCTYPE declaration to determine mode:

  • Quirks mode !DOCTYPEs result in Quirks mode
  • Standards mode !DOCTYPEs result in Internet Explorer 8 Standards mode
IE=edge Uses latest standards that Internet Explorer 8 and any future versions of the browser support. Not recommended for production sites.

Browser competition is great news – if it hadn’t been for Firefox, Microsoft would not have kick-started Internet Explorer development – but I think that, for the majority of users, Internet Explorer 8 is worth a look. Meanwhile, for many web developers with sites that don’t render correctly in IE8 (like mine!) the chances are that a single line of code in the <head> section of your (X)HTML will fix it – you can find out more (including fully-functioning demonstrations and code samples) at the IE8 developer demonstration website.