Category / Musings

by Ashley Mann

QR codes

People in the UK seem to be getting more and more excited about QR codes. When I say ‘people’ I really mean ‘companies and brands’, I’m convinced that for ‘people’ the use of QR codes at present is either baffling, goes unnoticed or is mildly irritating.

If you do want to mess around with QR codes a really (REALLY) easy way to generate them for specific urls can be found by simply following this url: http://chart.apis.google.com/chart?chs=200×200&cht=qr&chl=XXXX where I’ve put the XXXX you simply need to type the url you want to create a QR code for.

Anyway, back to why I’m unconvinced by the way QR codes are currently used.

History

To start, here is a brief (probably inaccurate) history of the QR code, they were first used widely in Japan in the early 90’s where I’m lead to believe that they are now fairly ubiquitous and widely used in campaigns, they spread to South Korea and (apparently) the only inroads they’ve made into Europe has been in the Netherlands. QR (Quick Response) codes are basically a form of barcode, capable of representing up to 4,000(ish) alphanumeric characters or about 3,000(ish) bytes of binary data. Typically the information represented will be a specific URL or small pieces of information – a message or similar.

Apparently they were first used to track parts in vehicle manufacture (thanks Wikipedia!).

When done well, they work

When they’re used creatively they can be an interesting and engaging way to connect physical materials with a digital facet of a campaign, e.g. http://mashable.com/2011/07/23/creative-qr-codes/ but more often than not they are simply plonked on a brochure or leaflet instead of an explicit url. When used in this way I can see absolutely no reason for using QR codes instead of a url. QR codes are not human-readable, urls are.

Seb Chan demonstrated a number of properly integrated ways of using QR codes in his keynote at the AMA Conference last week, specifically use in exhibitions as a way to access more, related content to extend the museum experience. He showed that when the displaying of QR codes is considered as a part of the exhibition design then the codes can fit in without looking like weird, ugly stickers. He also emphasised that they did have to explicitly say how to engage with the codes.

When done badly, they suck…a lot

However, the application of QR codes in this sort of careful, considered and integrated way is rare (in my experience). Too often you see a code incongruously placed at the bottom of an advert or on a billboard with absolutely no explanation as to how to use the code or what it’s going to show you. Although this technology is commonplace in some parts of the world in the UK most people have absolutely no idea what they are or how to use them. They aren’t going to automatically understand that they need to scan the code and they will then be shown something relevant or interesting on the device they’ve scanned the code with, in fact most of them probably don’t even know that they can scan the codes with their phone.

And that brings me onto another point, phones. The vast, vast majority of people who do scan your QR codes will do so via a mobile device (i.e. their phone), have you considered that when designing where the code will take them or what it’ll show them? Are you trying to take them to a the url of a page that hasn’t been designed with mobiles in mind or are you trying to show them some content that just isn’t suitable to be delivered to a phone?

Be careful and considerate and it might just work

However, although as ever I’m sure I sound slightly grumpy about the whole thing, I do think that QR codes can be useful. If you consider how and where you’re going to display them, how you are going to encourage people to engage with them (and explain what they are) and carefully consider how and why you’re using QR codes to connect the audience with a specific part of your digital activity then I think that they are probably the best tool for the job.

Where can I see them being used effectively? Programmes/brochures/exhibitions – any situation when you can sensibly enhance the users experience by connecting them to the digital world – if it isn’t going to benefit the user then don’t do it, if it’s just going to link them from an advert to yet more advertising then forget it, you’re not doing anyone any favours.

Tips

If you want your QR code to be as readable as possible for a specific url then use a url shortener (e.g. bit.ly or tinyurl.com) as this will result less characters to represent which equals bigger ‘blocks’ in the code which means that whatever reader you’re using will ‘lock’ to the code more quickly. Also in print the code needs to be a certain size to be readable, below about 15mmx15mm some readers have trouble ‘locking on’ to a code, on posters the code needs to be much larger than this (hopefully this is obvious!). I’d recommend you test, test and test again.

Think about where you’re sending them (I can’t stress this enough) – e.g. if you’re sending the user to a video, is it accessible to devices that don’t support Flash, is it HD video – if so then most people probably won’t thank you for using their entire month’s worth of data allowance. If you’re sending them to a site then how does this look/work on a mobile device? What’s the user experience like?

Also, last but by no means least – think about when people will be seeing the QR code. On the tube? Yeah, they will have no signal then. On a plane? Yep, no phones will be turned on there either.

As always it’d be great to hear your thoughts, do you love/hate QR codes, have you seen any amazing/awful examples of their use? I’m really interested in how people respond to them, the vast majority of my (fairly tech-literate) friends either hate them or don’t understand them.

by Ashley Mann

AMA Conference and “the digital question” (part 1 of ?)

I’ve been working at Opera North since November 2011. My job, Digital Communications Manager, is a new role within the company which means there is a hell of a lot to do but also that I am allowed to have mildly ridiculous ideas on a semi-regular basis and attempt to see them through.

I am a techie, or a developer, or maybe a ‘digital creative’ (hideous term) albeit with a fair amount of ‘traditional’ marketing experience. I am not, I wouldn’t say, an ‘arts marketer’. However, I gladly ignored this fact and made my way up to Glasgow for the Arts Marketing Association (AMA) Conference this week.

I like conferences, the breakout sessions are usually crap and the keynotes are complete bullshit peddlers but it’s always good to get away from the daily grind and talk to other people similarly revelling in being away from the daily grind in whatever industry it is you’re in (plus there is usually at least 1 good speaker that makes your brain think new things). Also it’s a good chance to see new places, e.g. I’d never been to Glasgow before, now I have.

I didn’t have huge hopes that my breakout experience was going to be hugely challenged, I’d only got at all excited by one session (from a list of about 30) – on Open Data – and the prospect of one of the keynotes talking about ‘digital success’ made my heart sink. Now would probably be a good point to try and excuse, or at least explain, my cynicism. I don’t come from an arts background (lots of my immediate family do, but that’s another story), I have worked for agencies, as a freelancer and for a university in recent years so moving into the arts sector has been a bit of a weird and wonderful experience. I love the atmosphere in arts organisations, the people are great and there is always something interesting or odd going on, however I despair whenever I am dragged into a conversation with anyone with what I’ve come to recognise as ‘digital pretensions (or,often, more accurately, delusions)’.

The arts sector (and I’ve mentioned this before) is almost scarily lagging behind ‘the curve’ when it comes to embracing digital developments (which in this context usually means “stuff that’s happening with the internet”), I think this is relatively easily explained when you look at the problem. Who would be best placed to recognise, understand, explain and apply the latest technological advancements? Technologists, developers etc…essentially digital people. These people are almost entirely absent from the arts sector. They simply don’t exist in a sector that has never really needed them before. Most arts and cultural organisations’ dealings with this type of people are through short-term, project-specific agency relationships where, more often than not, the arts organisation tries to explain what they want (or think they want), hands over some money and sometime later receives what they paid for. These relationships were never intended to build understanding, capacity, knowledge or any of those other intangible but essential and sustainable things – why would they be? The agencies were never going to want to put themselves out of business and the arts organisations really didn’t have the time, money or inclination to even think about things in these terms.

BUT, then digital became important, it became fundamental to the way that people communicate, understand, consume and create. So the arts organisations suddenly had to understand, or at least seem like they were trying to understand. The way in which this process took place to me seems incredibly strange. It seems (and I have only my own perceptions to go on for this, as I say I have no history of working in the arts sector until last year so have very little in the way of facts to go on) that instead of going and trying to find people with the skills to help them make the huge leaps required in the ways that organisations understood, used and worked with technology (and really, change the way that these organisations worked in a fundamental way) they instead established a list of arbitrary ‘must-haves’ (e.g. a website, an e-newsletter, some sort of social media presence, maybe some multimedia content – essentially marketing assets in digital form) – found a bunch of people already working in the arts sector and put them in charge of making these things happen. As a result the management of digital strategy, digital activity and digital development in the arts has been driven and carried out by a group of people who, whilst incredibly enthusiastic, don’t have the fundamental understanding of what they’re doing or the technology they’re working with. For me, and I may be in a minority of 1 on this, to properly use something you simply have to understand it, ESPECIALLY with a vast, unwieldy and complicated field of development such as web-based technological developments (wow, that’s a clunky way of describing things).

I could continue to waffle on about this but I don’t think that’d be very interesting for anyone, I simply wanted to explain why sometimes I seem like a cynical bastard when people in the arts claim to have struck upon some revolutionary digital concept as more often than not when trying to explain themselves they make so many factual errors that it makes the gods of the internet cry big, wet, binary tears of woe. I wanted to get that out there because I think it’s an important bit of context for my views on almost everything to do with the application of ‘digital’ in the arts. Although I do realise that it does make me seem like a bit of a nob (probably).

Oh and I’ll actually write some actual things about the actual conference (and Glasgow, and the weird Dutch, Japanese-concept hotel we stayed in) some time next week.

P.s. I am also aware that I don’t have all the answers, I probably don’t even have one of the answers. I understand that arts organisations are (sometimes) slow, weird, idiosyncratic, stubborn places and that even with the best will in the world perhaps some types of change are almost impossible to accomplish at the pace required, or maybe even at all. I do however think that there are several elephants in the room that need to be roundly pointed at in as loud a way as possible, and that’s what i’m trying, in a small way, to do.

by Ashley Mann

Building digital capacity in the arts

Back in March (I think) I attended the launch of a new Arts Council England/BBC initiative aimed at ‘building digital capacity in the arts’. Now in my (admittedly short) experience this sort of thing can’t happen soon enough, I’ve had so many conversations with people working in the arts and cultural sector who are either clueless about the potential of ‘digital’ or so fixated on how it’ll solve all their cashflow problems that it actually worries me. Unfortunately almost everything I heard from the speakers at this event seemed to reinforce the latter view i.e. that digital is important (agreed), that it is something that we as a sector need to embrace (agreed!) and that if we do so everything will be ok cos we’ll have an app and a website and everything will be fine (oh god NOOO *hangs head*). Not only did the programme seem misguided in its aims but it seemed to be proposing to take place in an incredibly blinkered way, a series of workshops would take place, mostly in London or Manchester – these would be videoed and then people could watch the videos. That was it, that’s the scheme. Some videos about how to make videos and apps.

The problem with digital capacity in the arts sector (in my view) starts with a widespread lack of understanding regarding a)how digital works, b)the potential of technology and c)how to engage with the technology in a meaningful and sustainable way. To ignore these fundamental issues just means it is surely inevitable that any investment now will have a limited short-term impact and almost zero long-term impact as the very specific short-term skills that’re taught (to a small group of people who can actually attend the workshops or can learn by watching a video of a workshop) will be out-dated relatively quickly and there is no widespread ‘bringing up to speed’ regarding ‘digital fundamentals’ that’d underpin any potential long-term impact or the a. Are ACE/BBC simply proposing to run a series of workshops every time a new technology presents itself? It all seemed hopelessly short-sighted and badly thought out.

There was some interesting chatter from a Google chap about the power of ideas or something similar but in reality that isn’t reflected in any aspect of the actual ‘capacity building programme’, which is depressing and will surely lead to a situation where, in 5 years time the arts sector will once again be massively behind the curve and will need a whole new training programme.

The scheme seems less to be about building capacity and more about teaching very-specific, non-transferable skills to a small group of people that’ll have little wider impact. Which is sad.

My proposal would be that the scheme does what ACE keep saying is important and empowers/equips the highly skilled organisations (there are some out there!) to upskill smaller organisations in their locality. This sort of scheme would surely have a wider reach, would get organisations working together and would be more sustainable than simply getting the Beeb to run a limited number of workshops to a limited number of people?

by Ashley Mann

Contracts, admin and all that jazz

I’ve recently been looking at all of the admin side of things, a boring but necessary task.

We have all had those jobs that have started to spiral out of control with new and completely ridiculous demands being placed on you left, right and centre or clients who have taken months and months to pay for work completed.

Good admin makes the fun parts of your job (designing and coding) far more straightforward and effective.

I’ve found a number of great articles that outline things far better than me:

I hope you found those of use, feel free to post your own suggestions.

by Ashley Mann

Does your site take too long to load? Probably. So, how to speed it up?

“There is more to life than simply increasing its speed” (Gandhi)

Last week I was doing some speed tests on what I was expecting to be a relatively slow-load site that I’m working on, the results, whilst not completely shocking, were still surprising. The site was taking up to 8 seconds to load fully over a decent speed connection (and would’ve been much much longer over dial-up). This had been an issue that had been nagging away at me more generally for a while now so I thought it was probably time to look into how to address it.

“Delays under half a second impact business metrics”

I have been reading up on the tests that Google had conducted to see how long the average user would wait for a site to load before giving up and moving on (Bing also conducted similar tests). Their findings? Simple, if your site takes too long to load then you will lose traffic and damage the user experience. And by ‘too long’ we are talking in terms of milliseconds. When Bing and Google increased a server-side delay from 1000ms to 2000ms there was a 2.2% drop in user satisfaction (not too bad you’d say) but the ‘time to click’ increased from 1900ms to 3100ms. This second stat is probably the most pertinent as it would indicate that a 1000ms slow down in server-response times results in the user becoming disproportionately unengaged with the site.

http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html

I think something else to bear in mind is that if the user does decide to stick with your site, and this level of site-reponse is repeated page after page (or even more slowly) then it would not be too much of a leap to assume that the user satisfaction would start to drop even faster as their frustratingly slow experience exacerbates things.

You’ve lost their attention, how do you get it back?

So, we’ve decided that a slow-loading site is a bad thing? Cool. There seems to be a consensus that the quickest way to get your site to load quicker is to get the file size of the site’s assets down, which may seem obvious but it would seem that not enough people do it, and even those that do (of which I thought I was one) probably aren’t getting things as compressed as they could be.

Efficient (and small) CSS

I’ve never been a huge fan of massively compressing my CSS files. I find the process of stripping out all the white space (line breaks etc) irritating as, in my opinion, it renders my CSS almost unreadable if I ever want to go back and edit it.

To assuage my guilt about never really super-compressing my CSS I read several articles about making my CSS more efficient. It made interesting reading and has changed my coding practices. Perhaps the two most useful things that I learnt about making CSS render efficiently were:

  • CSS reads right-to-left. e.g. with #nav li a – a is the “key selector” i.e. the element being selected, then li, then the id #nav
  • “There are four kinds of key selectors: ID, class, tag, and universal. It is that same order in how efficient they are.”
    • #main-navigation {   }      /* ID (Fastest) */
    • body.home #page-wrap {   }  /* ID */
    • .main-navigation {   }      /* Class */
    • ul li a.current {   }       /* Class *
    • ul {   }                    /* Tag */
    • ul li a {  }                /* Tag */
    • * {   }                     /* Universal (Slowest) */
    • #content [title=’home’]     /* Universal */

There is more on this subject in this excellent article http://css-tricks.com/efficiently-rendering-css/. However I would say that the two points I’ve highlighted above are the basis to making your CSS render as efficiently as possible.

An important point to remember, as the article states, is “So we know that ID’s are the most efficient selectors. If you wanted to make the most efficiently rendering page possible, you would literally give every single element on the page a unique ID, then apply styling with single ID selectors. That would be super fast, and also super ridiculous. It would probably be extremely non-semantic and extremely difficult to maintain. You don’t see this approach even on hardcore performance based sites. I think the lesson here is not to sacrifice semantics or maintainability for efficient CSS.” As with every ‘best practise’ you also have to use a modicom of common sense, there is no point in taking a good way of working and applying it in a ridiculous way (sorry if this seems like stating the obvious but I think it is an important point to remember).

Compress that CSS

Now it is an unanswerable argument that compressed CSS is smaller. I outlined above why I’m not a huge fan of this method but it is unavoidable if you want to seriously address your site’s load time. There are, as always, a huge amount of ways you can go about compressing your CSS.

There are a number of online tools that’ll do it for you:

You can look into gzipping your CSS file:

There is an article here about using gzipping on the whole site to speed things up: http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/

Last but not least there seem to be a few ways to compress your CSS file using PHP:

Images, beautiful but deadly

Images make your site look better right? They allow you to use cool fonts as headers (although there are better ways of doing this, here’s one http://www.font-face.com/), they often form the basis of swanky looking navigation and layout elements and more and more often large imagery is used to provide a visual impact that wouldn’t be achieveable with another type of element (http://webdesignledger.com/tips/web-design-trends-for-2010).

The trouble is, images take up space and they take up even more, unnecessary space if you’re using the wrong file format.

Image file formats. What? Where? When? Why?

The three most commonly used, and widely supported, image file formats on the web are .jpg, .png and .gif. You should be using all 3 of these file formats in your designs, they each have a reason for being there. If you use the right format for the correct purpose then you will have a more efficient site.

  • GIF – 8-bit, lossless but limited to 256 colours so are bad for photos. However they do allow single-bit transparency so you can make 1 of the 256 colours that it does render transparent. GIFs are great for block-colour elements such as logos and navigational elements.
  • JPG – 16-bit, capable of millions of colours and designed specifically for photos. However lacks some of the capabilities of GIFs such as transparency and animation. Can be compressed but the compression is lossy and once over about 50% results in noticeably reduced image quality. Should really only ever be used for photos.
  • PNG – comes in 8-, 24- and 32-bit formats designed with the web in mind. The 8-bit format is very similar to GIF in that it supports 256 colours and 1-bit transparency, in addition file sizes are likely to be slightly smaller than GIF equivalents as PNG saves it’s colour data more efficiently. The 32-bit version (named, unsurprisingly PNG-32) allows a similar range of colours to JPG but also offers alpha-channel transparency. Rather than only being able to specify one colour as transparent or not PNG-32 allows you to specify the transparency of every pixel on a sliding scale (from 0-255)…the only drawback being…IE6 doesn’t support alpha transparency (surprise, surprise). I wouldn’t recommend using PNG for photos as the file size is likely to be fairly huge in comparison with a JPG equaivalent (due to the PNG being 32-bit and being a lossless format).

So, to summarise, what should you be using and when?
JPG – to be used for photos, be aware that if you try to reduce the file size by upping the compression then anything beyond 50% compression results in noticeable reduced image quality.
GIF – can be used for simple elements, logos and navigation – although remember that PNG-8 could be an alternative.
PNG – comes in 8, 24 and 32 bit formats (and the file sizes increase with each). 8-bit could be used as an alternative to GIF. 32-bit offers alpha channel transparency which could be useful for design or navigational elements where more sophisticated transparency is required. However always bear in mind that the 32-bit version is the largest file format mentioned here and consider whether or not a GIF or 8-bit PNG could be used if less sophisticated (e.g. one-colour) transparency is required.

As I mentioned previously these guidelines should be considered as just that, guidelines. Don’t take them as hard and fast rules that should be applied as rote to every situation. However I do think that being aware of what each file format was designed for allows you to make more informed choices.

Image optimisation

My final word on images, if you are using an editing package such as Photoshop or Fireworks, make sure that you always export your images (whatever format they’re in) as optimised for the web. This process strips out all of the completely unnecessary meta-data that these programs include as standard and noticeably reduces your image file size.

HTTP requests, and how to reduce them

Every time you include an element that isn’t hard-coded into your page file (e.g. by linking to include an external file) you are introducing a new http request to your server. Whether this is linking to a css or js file or including an image.

If you are including 5 js files in your file then this is 5 http requests, add into this however many images your file includes, at least 1 css file and you’ve probably got at least 10 http requests per page. Unsurprisingly the more http requests you have, the slower your page will load. So, how do you reduce them? Simple, combine elements. Whether this is combining your multiple css or js files into one master file (and then ensuring that is written efficiently and compressed) or combining your images by using sprites (info on sprites here http://css-tricks.com/css-sprites/ and here http://www.fiftyfoureleven.com/weblog/web-development/css/css-sprites-images-optimization)

And finally

I hope the methods I’ve outlined above prove to be useful to you, if anyone else has any other thoughts on how to optimise your website for faster loading then please comment!

I think that all of the methods outlined here are relatively straight-forward and could be easily incorporated into your processes. Things like writing efficient CSS and javascript and then optimising those files, using the appropriate image formats and reducing http requests are all quite easy things to do and will have a noticeable impact on the file size and speed of your sites.

I am aware there are even more methods that you can utilise to optimise your site, and would be interested to hear if anyone thinks they should’ve been mentioned here. I aimed to provide a good and manageable starting point and I hope I’ve done that.

Thanks to the following articles (all of which are worth a read)

by Ashley Mann

I may be some time…

Next Wednesday I set off in a van on a 5,000 mile round trip to Istanbul to support the Istanbul to Leeds cycle challenge which aims to raise funds for the Jane Tomlinson Appeal. As a result I will be more-or-less out of action from 21st July through until 31st August – I will have some access to emails but will only be able to check and respond on an irregular basis.

Hopefully before then I will finish off sites for Will Soden (plumber), Pickles and Potter (Deli/Cafe) and the Northern Dales Farmers Markets (farmers markets) as well as getting on as much as possible with the new site for Run For All (mass-participation runs). Diverse to say the least!

Oh and as a slight aside I also found something else that results in WordPress’ wonderful white screen of death – messing around too much with the chmod settings of the wp-content folder.

Sharing is caring

by Ashley Mann

So, you think you want a website?

A while ago, on my personal blog, I mused about things you should consider when you have that epiphany…”we need a website”, worth a read I’d say (but then I wrote it, so I would say that wouldn’t I…) http://ashmannblogs.wordpress.com/2010/04/19/so-you-think-you-want-a-website-4-things-to-consider/

by Ashley Mann

WordPress theme development and the white screen of death

I’m currently working on a new site for a client who requires a CMS. After a fair amount of research and based on my own experiences they decided that WordPress fitted the bill. So I needed to develop a bespoke theme for them.

Now I’ve messed around with tweaking wordpress themes before and it is pretty intuative. Unfortunately last night the whole thing came crashing down and I had to battle with the (apparently infamous) ‘white screen of death’ – which usually seems to be caused by a php bug. These bugs can be as simple and innocuous as an additional line break in your code (WordPress doesn’t like space it would seem). I’ve not yet tracked down the source of my ‘white screen’ issues (EDIT – I have since found the source of my bugs, it was caused by such an innocuous thing i still can’t quite get my head around it! basically i needed to remove and all space between each function in my functions.php file – i.e. so there was no space between each closing ?> tag and the following opening <?php for the next function. it’s ridiculous that such a small thing brought everything crashing down, but there you have it…) but if you’re suffering from something similar then there are numerous lists that should help troubleshoot the problem. Here are just a few that I’ve found helpful:

http://wordpress.org/support/topic/405711

http://wordpress.org/support/topic/363816

http://www.amandavandervort.com/blog/2009/12/how-i-solved-my-wordpress-white-screen-of-death/

I’d also add that if you’re considering WordPress theme development then it’s a good idea to have a good read of the documentation first (there are lots of dependancies that it’s useful to be aware of so the whole thing doesn’t come crashing down) http://codex.wordpress.org/

And there are also a number of very good tutorials around WordPress theme development. Again, here are a few I’ve found helpful:

http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/

http://themeshaper.com/wordpress-themes-templates-tutorial/

http://jonathanwold.com/tutorials/wordpress_theme/

http://codex.wordpress.org/Theme_Development

http://codex.wordpress.org/Blog_Design_and_Layout

http://net.tutsplus.com/articles/web-roundups/top-50-wordpress-tutorials/

http://net.tutsplus.com/site-builds/how-to-create-a-wordpress-theme-from-scratch/

Hope that helps!

by Ashley Mann

Back once again with the semi-useful behaviour

Righty, I realise that to date this blog has been a)infrequent and b)fairly boring and useless, I intend to remedy this.

The blogs I find most useful are those that offer advice, tutorials and point you in the direction of useful things. As I spend every day doing web design and development in some shape or form I feel that it is probably this that I can offer something in the way of useful content about.

We’ll see…

Anyway, my plan is to blog at least once a week with something useful.