Category Archives: Web design

Screen Sizes and Image Sizes

With the domination of the phablet, smartphone screen sizes continue to get bigger and bigger. The 16:9 aspect ratio remains king and is here to stay, but the pixel count grows and grows:

  • 1136px by 640px (iPhone 5S)
  • 1280px by 720px (Samsung S3)
  • 1920px by 1080px (Samsung S5)
  • 2560px by 1440px (Samsung Note 4 – rumoured)

Image sizes

This blog displays images up to 600 pixels in width. That is only half the width of the newest phones in portrait mode; less than a quarter of the width in landscape mode. The only way to avoid ugly pixellation is to use larger imagery that can scale down for the desktop and be used in its original form for mobile.

That leaves you in what would once seemed to be a bizarre position of increasing your image sizes so that they look good on the smallest screens.

On cycleireland.ie, I use 1200px wide images, which are reasonably future-proofed (at least for the next couple of years).

You should look at that as a minimum size for your images, depending on where they are most likely to be used and how central they are to your content.

How Content Processes Affect Site Design

Too often a website is designed by marketing/business development people and only then is handed over to a content manager around the time of the launch. The content manager is then left to develop content processes to fit around the site that has been designed, compounding any errors made in the site design.

Building a site for web content

Building a site for web content

Continue reading

How to label a Buy button

I have been working on a retail site and the issue of how to label the Buy button cam e up. Different possibilities have different connotations:

  • Buy – blunt
  • Add to cart – impersonal
  • Purchase – too formal
  • Buy now – too bossy

To complicate matters the site is not traditional in that it sells high-ticket items that people are unlikely to buy more than one of.  That makes the concept of a virtual shopping basket less appropriate than it might be on other sites.

I wanted to check out the labelling that big retailers use to get a pointer on this.

  • Wiggle – add to basket
  • Asos – add to bag
  • Amazon – add to basket
  • Fashionphile – add to bag
  • Chain reaction Cycles – add to basket
  • Yoogis closet – add to shopping bag
  • Harvey Norman – add to cart
  • Pixmania – add to basket

We have 4 “Add to basket”, 2 “Add to bag”, 1 “Ad to cart” and 1 “Add to shopping bag”.

I want my terminology to be consistent with what people are use to, so I will use the phrase “Add to…” on the button. But add to what? I don’t want to use “bag,” as handbags are what the site primarily sells. If they were one of twenty product types it would be ok, but they are the primary one. So that’s out. That leaves “basket”or “cart”.

I think “basket” is the less harsh and more modern of the two, so that’s the one to go for.  We can test it at a later point if we don’t like the conversion rates.

 

Website footer – less is more

In recent times there has been an increase in website footers that are packed with links that take you all over the site. They have so many links that it becomes very difficult to actually find the one that you want.

You can have 40, 50 links or even more across several columns. Some people don’t recognize when they reach the point of diminishing returns. The footer is not a dump. It is a place to show miscellaneous but necessary links. The exact links to show will depend on the type of site that you run.

As a rule, if the link would only be required by a specific type of user (as opposed to general users), it is a good candidate for the footer.

Keep it simple. Combine pages where it makes sense. If you do have a lot of links, keep the names of them as short as possible to save your users’ time while they scan the footer looking for the one that they want.

 

You should never use sliders in web content

“But I’m a photographer/artist/retailer” – It doesn’t matter. You should never use sliders according to this fascinating post on sliders on Yoast.com.

It is very easy to think that there are exceptions, but if you truly believe that, you should test out your beliefs. I like the points made in the post about sliders diluting the focus of a site.

Read the post in the link. If you couldn’t have a slider, what would you replace it with? Why?

Then why not test that out and see where you get?

 

 

Orchard CMS – first look

Orchard CMS was recommended to me as a fast-improving alternative to WordPress. I approached it with trepidation. I have some knowledge of PHP, which is important to understanding WordPress whenever you need to look under the hood, but none whatsoever of .NET. Also, it has a reputation for being less user-friendly than rival CMS systems.

Orchard CMS background

Orchard is open-source software but was initiated primarily by a group of Microsoft employees, and is believed to be well-regarded by the company.  That suggests that there could be significant support if the project continues to grow.

Continue reading

Website redesign: 5 good reasons

So you want to redesign your website. It’s exciting. But before you jump into what could be a gamechanger for your business or a nightmare that sucks time and money out of it, why do you want a new website?

There are good and bad reasons for doing this and it is important to understand which are prompting the change that you are making.

5 good reasons  for a website redesign

You want to change CMS

If you feel that your content management system is not serving your needs as well as another option can, you face a significant job to transfer your site. Redesigning the site can kill two birds with one stone and minimise disruption.

Continue reading

Logo Design Tips

In July of 2012 I got my logo designed for cycleireland.ie. I had put the task off for a while as I was nervous about ending up with something that I didn’t like, and I felt that a bad logo would leave the whole project looking about as attractive as a tramp in a heatwave’s underpants.

#1 Don’t stress over it

That was my first mistake – I attached too much importance to it. Logos can be amended, improved and changed at will. It is not the most important thing in the world. There is a very clear process to follow. If you end up with a bad result just examine what went wrong, change what you need to change and start again. If you don’t have time to do that, review it an appropriate later date and keep that in mind when you are doing any printing work.

#2 Verbalise what you want

Some people have the idea that they don’t want to influence their graphic designer and would prefer that they come up with a blue sky idea. If you are one of those people, you are a designer’s nightmare, and they are only working with you because better people won’t hire them. You don’t want to be in this situation.

Continue reading

Web images – bigger is better

As broadband speeds slowly – painfully slowly – improve in country after country, it’s important to look at how that impacts the web content that we create. Web images are second only to videos in their impact on downloading times for your site.

Web images can now be used more creatively

Optimising your images has long been vital to having efficient sites, but it is time to loosen the restrictions we place on our image sizes, if we haven’t done so already. Web design is trending towards larger and larger imagery, and if yours is any good you should show it off in its most impressive way.

I have just reworked Cycle Ireland to make all of the imagery bigger and more prominent (that’s not a tautology – I placed it higher up in the page so that it is the first thing the user sees on a route page). In optimising images my only priority was how good they looked. File size came a very distant second. That said, all of the images were jpgs, and from my experience you get no discernible benefit with a file size above 80% of the maximum.

Continue reading

Adobe Kuler Colour Cheat Sheet

Have you heard about Adobe Kuler? Have you ever tried to do a simple graphic and have it turn out just plain ugly?

Why did that happen? If it was just fonts and colours, how hard is it to get them looking, at a minimum, alright?

Colours can be difficult to match up. You can spend hours changing shades and never get it right.

Adobe Kuler offers thousands of user generated swatches. Just search for a word and scroll through the options that it returns. I typed the word “freedom” and it returned the following on the first page:

Freedom in Adobe Kuler

Freedom in Adobe Kuler

Each swatch has 5 colours. If you pick one you like you can either screengrab it or download it.

Adobe Kuler fast forwards your creative colour thinking

It is a great tool if you are looking for a couple of matching blues or greens for a banner ad or suchlike. The quality tends to be quite high. Forget about messing about with colour wheels and take the easy option.

There is quite an active community on Adobe Kuler, and you will find colour suggestions for an incredible range of topics. Have you ever wanted to know the colour of a clown stabbing? Or the colour of Love in Tromso? Or why sadness comes in fishes or the imaginary road?

Adding a swatch is easy. You can pick the colours from a wheel, type in the rgb or hex values, or upload an image and use the colour picker on it. Then start editing and amending your swatch until it is perfect – as creations they feel remarkably personal and you won’t want to let shoddy ones get out into the world bearing your name. And coming up with a good title is half the fun.