How branding SHOULD work versus how branding does work

Tweet

When it comes to 'personal brand' there's a lot of fuss in library-land, but the subject of corporate branding is, I hope, relatively uncontroversial. Most companies, organisations, and businesses, whether they're non-profit or profit-chasing, have some kind of branding - a visual style which makes them easily identifiable. We may not want to be corporate, but we do want to be easily recognisable; that's an important part of effective communication.

But often in Libraries I see branding that isn't doing the job branding is supposed to do. What is branding, what's it FOR, really? Well one thing we can be sure it's NOT for is making everything you do look exactly the same. If everything looks the same it just becomes so much white noise.

I read an analogy on the Canva blog which I really liked: "Think of your slides as sisters, not identical twins." They're talking about creating presentations, but really this applies to all branding - it's helpful to think of the visual resources you produce (signage, leaflets, guides, social media presences, the website, merchandise, digital displays, PowerPoints and so on) as being part of the same family, rather than part of a sinister cloning programme... However I'm going to take that analogy and adapt it to be about architectural relationships rather than familial ones.

Because ultimately what branding is for is this: good branding ensures your users understand they're in part of your organisational landscape. It helps people remember you. It helps people recognise when things are connected. It helps people identify something as uniquely yours.

Compare the architectural landscape of the two pictures below:

Click to view a CC version on Flickr

One of the reasons I hate templates in PowerPoint presentations is they make all your slides look the same. They reduce the value and impact of each individual message, and the research shows they actually reduce learning in your audience (as does anything extraneous to that message). The reason organisational templates exist at all is to support branding - they are 'on brand' so the logo, the colours, and often the font, represent the organisation on every slide. But eventually all the slides blend into one - it becomes like looking at the row of London houses above, where they all look the same and you struggle to distinguish what is interesting about each one. So the branding is getting in the way of the message.

Contrast that with the top half of the picture, which shows some lovely Tuscan architecture. All the buildings are different. They aren't identical twins. But they're very recognisably of the same landscape; you could look at one in isolation and recognise that it relates to any of the others. It reinforces the identity of the town, without the white noise of identikit architecture. That's exactly how corporate branding SHOULD work - but often doesn't...

So when it comes to slides, my advice is always to use colour (and font if applicable), rather than your template, to reinforce the brand. Your audience stays within your organisational landscape, but each of your slides have value and unique messages of their own. You don't need the company name and logo on every single slide - no one looks up 40 slides into a 55 slide presentation and goes "Who is this from again? Oh yeah..." - or if they do, they can surely wait for the last slide for confirmation! If necessary use the template on your first and last slides (this makes it easier to ask for forgiveness if anyone pulls you up on it) but not during the content of the presentation. We actually have official permission to do this at York after I made the case to the Comms Team, it's worth seeing you can do the same...

When it comes to wider corporate branding, again what is important is a recognisable style - something which identifies materials across all media as being of your organisation - rather than making everything look the same. Developing a visual 'feel' which is flexible is far better than 'the brand' becoming a millstone around everyone's necks which simply prevents creativity!

[The image above was made using two existing Creative Commons images: Italy by cfwee, and London by A R Driver. The image in the background of the header is of the same Tuscan town - San Gimignano - and is by imagina.]

Squarespace: A comprehensive review of the website building platform

Tweet

If you listen to any podcasts at all, you'll have heard of Squarespace.com - they seem to sponsor every single one. If you don't do podcasts and you're not familiar with them, Squarespace offer a complete website publishing package: you build it using attractive templates, they host it, and you pay them an annual fee.

After mulling it over for ages, and building a mock site using their free-trial, I eventually made the switch from my old wordpress.org site to this new squarespace.com site in August, and overall I'm very glad I did. So, for those I've spoken to online and in person who are wondering about making the switch, here's a (fairly long and comprehensive!) review of Squarespace.

The Design

One of the big reasons I switched to Squarespace was their designs. Their sites are above all clean - I find them engaging to look at and interact with. I spend most of my working life on the internet so I do appreciate when a site looks nice and is easy to use. Squarespace designs make great use of images and the full width of the screen. They allow you to highlight key information - your website may contain a lot but you can still direct people primarily to just a little of it, allowing those who want to go deeper easily to do so.

Squarespace uses a template system, but in the best possible use of the word 'template' - loads of different ways to present information which are easy to customise and make your own. At the time of writing there are 32 templates to choose from - here's a selection:

Click the pic to go to Squarespace's templates page

For each template there are a number of example websites (from actual Squarespace users) so you can see how they work in the real world. I chose 'Bedford' for this site because I liked the large image at the top of the page (if you're reading this blogpost on its own direct URL you won't be able to see this - have a look at the blog homepage in a new window, or the Past Talks page for example, to see how the site normally looks with a featured image)  and because I could see examples of the Blogging side of it working well; Squarespace is NOT primarily a blogging platform, so I needed to know I could still have columns, subscription options, and other things which a totally minimalist design might get rid of in the name of style over substance.

Essentially there are templates which allow you to present most types of information engagingly. Some are very commerce orientated, some are detailed, some are extremely sparse, some are designed to work as an online CV or portfolio. They all look lovely (and can all be completely changed as part of the customisation process anyhow) so you can choose one to suit the type of content you wish to have on your site.

There's no comparison between the way my old site looked and the new one looks. One is dated and the other is fresh. In fairness that's partly because I designed my old site myself using my limited html skills - there are plenty of Wordpress themes which look a lot more contemporary and usable (albeit, in my opinion, not on the same level as the Squarespace designs).

Mobile Ready and Responsive

The other key thing about the design is they're all Responsive Design sites. This means they recalibrate their content to suit whatever size of screen you look at them on. This is much, much better than an Adaptive Design site (which basically means having a mobile-friendly version and a desktop friendly version) in a number of ways, but primarily 1) you don't lose any content like you do with Adaptive; it's just rearranged to suit the screen, 2) it looks brilliant and works well on any device and 3) you don't have to limit the width of the screen because it responds to any width of screen, meaning it makes the most of widescreens. (My previous site was 1000px across, meaning anyone looking on a wider screen than that just saw wasted white space either side of the content.)

We all know being mobile-ready is essential these days. So far since August a bit over 3,200 people have visited this site on their mobile devices, which is relatively small as a proportion of the total visitors, but nevertheless I'm glad each one (hopefully) found it a useable experience.

Building the Site

Building the site is done via Squarespace's drag and drop content system. Once you get the hang of it it is much easier to use than any other system I've come across. I can write code but it takes me ages and I can't do anything flash with it, and Blogger and Wordpress simply don't the flexibility and power of the Squarespace engine.

Here's what this part of the blog post looks like in edit view, when I go to add a new piece of content. The things I use all the time from the Basic section are Text and Image (obviously), and I use Quote on the Training pages. From the More section I use the Code section to embed presentations, Storifys etc (it seems to work better than the Embed tool, for me) and the Spacer tool which basically allows you to arrange elements of your site precisely where you want them, for example by filling up the left hand side of the screen with a Spacer so your content appears on the right. There are more features you can't see in the screengrab, some of which I used in the building of the site but don't have cause to come back to when writing posts like this one. Squarespace provides clear instructions and some nicely illustrative videos that explain how it all works.

As well as types of content and tool, there are overall Page types. Clearly this section is on the 'Blog' type, but I use the regular 'Page' for most of the rest of the site. For the Upcoming Events page I use the 'Events' page type, which is terrifically useful; it makes it very easy to create actually useable events pages which have timings, maps and so on built in. Although I don't have use for the 'Gallery' page type it's also very nice and works really well.

As you can see in the screenshot above, my site is visible in the background in edit mode. This is because there is one interface which does both Content and Style - you edit the site as it appears to viewers rather than in a separate edit view with a preview mode. What You See is very literally What You Get.

The Bottom Line

Squarespace costs money and, as previously discussed in various posts on this site, it is perfectly possible to create an excellent blog or full website for free.

At the time of writing there are three Squarespace plans: Personal, Professional and Business. Rather than list the differences here's a screengrab:

Click to go to Squarespace's Pricing page

I've got the Professional package - the dollar per month pricing works out as about £120 per year (billed annually), although I got 10% off by using an offer code from a podcast. Listen to any episode of Football Weekly, WTF, This American Life, I'd Hit That (for the drummers!), Freakonomics, Serial - basically any popular podcast - and you'll hear an ad with an offer code you can use to get the saving.

The reason I went for this plan rather than Personal is the unlimited bandwidth. Bandwidth stresses me out because you can't really control how much of it you use - there are things you can do to influence it but ultimately it comes down to how many people visit your site. Every time someone views a webpage it uses up bandwidth. I've had to spend extra money before to get extra bandwidth allowance on the old site, so I wanted an entirely hassle-free experience where I know I'll never need to change my current package - 500gig may well have been enough, but I prefer not having to think about it. (More on understand bandwidth requirements here.)

So £108 each year with the discount, or £55ish if you go for the Personal spec. Is it worth spending that kind of money on a website? Clearly the answer will vary depending on what you use your website for and how important it is to what you do.

I used to spend around £60 per year on hosting for my wordpress.org website, so Squarespace is more of a cost - I decided it was worth the extra cost for me because of the simplicity of the way it works, and the ease of maintenance / lack of upkeep, and because it looks a lot better. I also, quite honestly, wanted an excuse and the motivation to completely redo my website - next year I'm part-time in my main job so I can do more training for organisations, so as this website acts as a sort of HQ for my freelance work I figured it was worth the investment.

The other reason I think it's worth the money to me is that I think it's extraordinary that you can have a fully hosted, fully responsive to mobiles, fully SEO optimised, contemporary looking website for this amount of money. The amount of time it would take me to make something like this from scratch I can't even imagine - weeks and weeks. I think for what it is, it represents great value. Imagine how much you'd have to spend to build, or have built for you, a website like a Squarespace site even just two years ago! An absolute fortune by comparison. A feel bad for web developers.

Finally, a brief summary of the good and the bad of the platform.

Cons

So what are the downsides of Squarespace? Here's my take:

• It's a relatively new company, so who knows what its long term future is? (Squarespace has actually been around since 2004, but only in its current form and with its current high level of popularity and use since 2012.) Wordpress, which I used previously, had been around for a long term and was sustained by input from the developer community as well as its own employees. It's free and open-source. There's every reason to expect it to be here and usable for a long time. We just don't know enough about Squarespace to be able to say it'll be around for a long time - and it's a for-profit company which means it could go bankrupt. So there's a risk.
• It's a relatively new company so they change stuff all the time - features you like may disappear. In the short time I've been using it they migrated to Squarespace 7, an all new version which, as described in the Building the Site part above, essentially allows you to design your site without using a separate edit interface. This is great for site design but once your site is up and running and you're no longer tweaking it, I actually find it gets in the way somewhat. Also since I've been using it they've got rid of the option to add an image via a Flickr URL - you now have to save the image to your PC and upload it. It's a minor inconvenience but it's a feature I used to use but can't anymore - there may be more of those to come...
• It represents great value for money - for now. By which I mean, if Squarespace turn around and hike my yearly payment by 100% next time around, what do I do? I can export all my data of course, and build a new site on another platform using all the words and images from this one, but that would be a LOT of hassle. So I'm relying on them not getting evil and greedy.
• It's not a blogging platform. Blogging still a central part of what my site is for but it's not the be all and end all like it used to be, so this isn't so much of an issue for me. But not being a dedicated blogging platform, Squarespace does lack features which wordpress.org had that made life easier - more details statistics, useful plugins and so on.

The top statistics are from Squarespace (which sadly doesn't provide 'All Time' stats so this is just for the last month); as you can see, search engines not nearly as important as they were in the Wordpress days, which are the lower stats.

One final thing is that I was unable to switch over without losing some SEO. This almost certainly isn't Squarespace's fault (it is, after all, 'SEO optmized'), but rather due to changing my site's URL to something brand new at the same time. I used to get at least 300 people a day finding my site via Google etc even if I didn't post anything - that no longer happens, and I effectively have to generate traffic myself via Twitter or it's a much smaller figure. (I am trying not to be sad about this! Changing to a proper URL was still worth it, I think.) I've put redirects on but that doesn't seem to have counted for that much - however as I say I think it's probably something which would have happened whether I'd switched to Squarespace or not. I just can't be 100% sure because I don't know enough about this sort of thing.

Weirdly the number 1 source of traffic for the new site is 'Direct' which presumably means people typing the URL directly into thier browsers - I'm baffled by this and can't help thinking something has got lost in translation between what's actually happening and how Squarespace is rendering the statistics.

Pros

• Everything is included. For me the main pro is that using Squarespace makes things simple and unambiguous. I have the editor, the published site, the custom URL, the hosting, the unlimited bandwidth (and also unlimited storage and unlimited pages) and the ability to do other stuff I don't currently need to like add Podcasting or Commerce options - this is all in the same package, with no ambiguity or add-ons. I like this a lot.
• It looks great: contemporary and nice to use. The interface is easy to work with and I love the way the website looks on all devices. The content is engaging and usable. Should I tire of this design I can just choose one of the other 32 templates and it'll completely rejig my site in one fell swoop.
• It is amazing value for money. As I mentioned above, the idea a few years ago that you could get basically any kind of website you wanted, beautifully rendered, for just over a hundred quid a year, would have been bonkers.
• The Support is very good. Squarespace are based on New York and Dublin and that's where their support teams are too. They get back to request for help within a couple of hours, they know what they're doing, they speak perfect English... All that stuff helps. Also the developer community are great - they helped me with the fact that wordpress.org uses a different style of URL to Squarespace, so all my URLs have to be redone individually for the old thewikiman links to work, and they wrote some easily editable java script which allows me to have the feature images take up the exact proportion of the screen I want them to (by default in this template they took up too much of the vertical space, and when I tested my proto-site on my wife she said people might not even realise you can scroll down to find more content) - whatever you need to do the chances are someone on there knows how to do it...
• It's constantly evolving: I mentioned this as a con above, but it can be a pro too - they've added loads of new templates just in the time I've been using Squarespace, so you can always stay ahead of the web-design curve.

So that's the end of a pretty epic-length post by my standards. If you have experience with Squarespace (good or bad!) or have any questions about it from a user's point of view please leave a comment. If you fancy trying it out, sign up for the free trial and play around - it's not one of those free trials where you give your credit card details and it automatically starts unless you cancel it, so there's no harm in giving it a look. And if you build your own Squarespace site, let me know!

A handy guide for when to save images as JPEGs, PNGs or GIFs

Tweet

Thanks to David Green for flagging up this whoishostingthis.com infographic on Twitter - I found it useful because I tend to use a mixture of JPEG and PNG with saving images, with not much understanding of why I'm choosing what I'm choosing...

JPEGs reduce the size of an image by compressing it - making the image less detailed and so the file-size smaller, but effectively doing so in a way which the human notices least. This is important for web-use as everything each viewer of your website has to download - which is to say, have appear on their screen, rather than save to their computer - takes up bandwidth, and bandwidth costs money. One of the reasons I switched over to Squarespace from Wordpress.org is the unlimited bandwidth meaning I don't have to worry about upgrading my package to accommodate more.

PNG files can be transparent - they don't have to have a white (or black, or any other colour) background. This is truly useful because they can 'sit' on top of any background - so for organisatinal logos for example, it's essential to be able to drop them in over any kind of poster or slides or publicity materials, without an ugly white background delineating the logo from the rest of the content. PNG files generally take up more space than JPEGs but keep their quality better by not compressing the file in a lossy way. This is useful for something like uploading an image to Twitter; Twitter compresses the image, so an already compressed image can start to look really quite rough by the time it a Twitter user sees it.

GIFs I use a lot but never really have cause to make. They generally take up the least space and work better for created graphics rather than photographs.

After the recent posts on which format to choose when saving presentations, and which sizes to use when saving social media images, it seems only right to complete the set with one on how to save pictures too! So courtesy of whoishostingthis.com, here we are:

5 fun things to do with Flickr

Tweet

We all love Flickr, and one of the great things about it is its extensive API is open to programmers who create new ways of interacting with the site. Here are five examples I like of using flickr in creative ways, but not directly via flickr itself.

Write words with Flickr

The Spell with Flickr site (metaatem.net/words/) allows you to input text and get your words or sentence back written in pictures of letters. So for the image below I typed in 'hello flickr fans' and it came up with this:

Click the pic to open Spell with Flickr in a new window

What's nice about the site is you can click on any letter and it will replace it with another example, so you play with the aesthetic until it suits what you need. When I've used this (on the front of this slide deck for example) I've taken a print screen and chopped the words up into separate images, so I could arrange them in a way that suited me rather than as the site provides them.

 

Find only the outstanding images on Flickr

Lurvely (www.lurvely.com) works by choosing only pictures from Flickr's 'interesting' streams, which have been favourited by lots of other flickr users. You're left with some pretty outstanding photograpy.

Click the pic to open Lurvely in a new window

Search Flickr by colour

I've mentioned the Multicolr Search Engine (labs.tineye.com/multicolr/) on this blog before - I absolutely love it. Put up to five colours into the engine and it brings back an extraordinary amount of Creative Commons pictures which match those colours. You can then move the sliders around to reduce or increase the amount of each colour in the pictures it finds. Hours of fun!

Click the pic to open the Multicolr Search Engine in a new window

Use a sketch or image to find similarly constructed images on Flickr

An odd one, this; retrievr (labs.systemone.at/retrievr) allows you to upload your own image - or, more intriguingly, make a sketch there and then using your mouse - and then it finds images of a similar construction. With, it must be said, varying degrees of success! I put in the lightbulb logo from this site's homepage, and here's what it found. Needless to say my favourite is the dog on the top row:

Click the pic to open Retrievr in a new window

Make a jigsaw out of a Flickr pic

And finally... If you have a super unexciting picture or screengrab, perhaps it would be livened up by being jigsawified? Maybe..?

Click the pic to open the Jigsaw creator in a new window

If you know of any other interesting or fun flickr tools, let me know in a comment.

(The picture in the header is a Creative Commons flickr image by Zanthia.)

Size matters: Cheat Sheets for Optimal Image Sizing and Update Length on Social Media

Tweet

This posts features two massive infographics: thanks to Darren Jones and Claire Dolan who I saw tweeting about these a while back.

First of all we have the Social Media Design Sizing Cheat Sheet

The Omnicoreagency.com cheat sheet below shows you exactly how big (to the pixel) the images for each element of your social media profile need to be. This is genuinely useful for organisations on social media, as you can get a huge amount of customer interaction via Twitter and Facebook; the wrong sized image will either be distorted to auto-cropped in your profile or header pics, which undermines how professional you appear. Consistency is important on social media for organisations, but you can't literally use the same image in all circumstances because the dimensions won't be appropriate.

So for Facebook, Twitter, LinkedIn, Pinterest, Instagram and (both) Google+ users, here's all the info on image sizing you'll ever need...

(Scroll waaaay down to below the infographic to find a tool which will resize your images for you!)

Second of all we have the Social Image Resizer Tool

So perhaps you're convinced that size matters when it comes to social media images - but wouldn't it be nice if you didn't have to actually crop your images yourself? All that faffing about and resizing to the exact pixel.

Well step forward the Social Image Resizer Tool - give it your image, then choose from various Twitter, Facebook, LinkedIn, Instagram, Pinterest, Google and YouTube image sizes and it'll crop your image down to the right proportions.

Click to go to open the Image Resizer Tool in a new window

Finally we have the Optimal Length of (almost) Everything Online Cheat Sheet

This one from Buffer is less definitively useful, but interesting all the same. Which length of Tweet, hashtag, Facebook update, blog headline, email subject line etc gets the most engagement? Glad you asked, right this way: