We Love The Web - Blogorhea

Without doubt, this is toughest online design discipline, bar none.

For a print designer, it's like playing 3D chess. It's hard because the pages change, depending on how they're used. Forget your A4 piece of paper with a set amount of space. No, you have a page of indefinite length filled with elements of varying height and/or width. To add to the fun: you'll have bits of the screen that reconfigure themselves depending on the time of day, what the user is doing, whether there's a video or not or any of a hundred other variables.

We can't make it simple, but we can help you avoid the pitfalls.

Basic approach: content led design

You are designing a set of templates that other people will use to make pages of their own. This means relinquishing a lot of control over how it's used to a content-monkey who understands little about design. The templates have to be flexible and robust so they always look good despite the evil works of design-illiterate website admins.

Do:

• Stress-test your design once the basic layout is one you are happy with.
  • Does this design still work if the headline is twice as long? 
  • What if the images are half the size (see images stuff, below)? 
  • How does it look when there are 10 items on the page? When there is one item on the page?
  • What if the one column has a lot of content? Does it push everything else out and make the rest of the page look ridiculous?
• Content builds up over time. Think about how a page element might look when there are 3, 12 or 100 items to list. 
• Have a read of this article here: http://www.onextrapixel.com/2010/11/03/15-ui-design-patterns-web-designers-should-keep-handy.
• Use a column-based grid layout: make it one that cascades down the page, so that big content lumps can push others down the page without breaking.

Don't:

• Make something that requires lots minor variations of the same template.
• You won't necessarily know what you can and can't do, but we are happy to give feedback. if we say 'this won't work' then it's because we are trying to help you achieve a good, workable design and genuinely not that we are trying to be unhelpful.

Images

Most modern Content Management Systems scale images to the right size for the site automagically, but there are limits to this: the machine is fairly 'dumb' and cannot intelligently crop an image.
We can scale it to size in one of three ways.

1. Squish it to fit into a defined size. This will distort any image uploaded that doesn't fit into a given size. You can't force a rectangle into a square hole without breaking it.
2. Scale to a set width and then set the height in proportion.
3. Scale to a set heigh and then set the width in proportion.

Don't worry, we know that's tough to visualise, so here's an illustration.

In this screengrab, all the image widths have been made the same. Some of these items are landscape, some are portrait, but they look OK because the template has been designed with this in mind. For horizontal layouts, we can set the height and allow the width to vary.

Do:

• Visualise your templates with a series of landscape and portait images. Make sure you are happy that these will display correctly.
• Remember that finding appropriate images can be hard, so some items may not have an image. Visualise your templates so that some items have images and some don't.
• Remember that some images may be used in more than one place. The classic mistake here is to put an image thumbnail on the news homepage that appears again in a completely different aspect ratio on the news story page. They can be scaled to different sizes, but we can't shape-shift them!

Don't:

• Flow text around a curve or image cut-out. It can't be done.
• Flow text around a rectangular image. Well, you can if you want but bear in mind that line-heights are fixed - site administrators may get orphans and widows because the image is just 3 pixels higher than the line wrap.

In this example, you can see a line-wrap orphan due to an awkward image height. Our experience is that you can tell some site admins to check for this until you are blue in the face, but if they aren't design literate then you face a steep uphill battle to make them care! It's best to avoid the situation really. 

 

Text

When we get artwork for a CMS website from a designer, the same chunk of Lorem Ipsum usually fits very neatly into exactly a space provided, kerning and leading adjusted to make it fit.
Real life isn't like that - you have a harrassed PR guy trying to push the latest press release online in about 10 minutes flat. The truth is they will never respect or follow any visual rules that you try to impose. The only solution is to make it sufficiently flexible to accommodate this variability and look good.

Product names are the classic case. To choose two items from Amazon:
'iPad (16Gb)' vs. 'Panasonic KX-TG8422EB Colour DECT Twin Phone With Answer Machine - Black'
Both have to fit into the headline slot. Both have to look good.

Here's an example. In this pic, the text has been neatly fitted to the available space.

This doesn't help you understand it how it will look in real life. Here's how it might be actually used:

Still OK? Well, that line-wrap looks a bit wrong. The boxes look all irregular too. It's not as good-looking as the first piece of artwork, certainly. If you don't try out the variations, then your design will fail in real life use.

Do:

• Make the text line-wrap over several lines as well as showing it fitting neatly into a single line for headlines, sub-headlines and body text.
• Make your design rubbery. It has to look good with one line of text in the headline or three.
• Allow each element to stretch and contract. When designing: visualise every element with twice and much and half as much text.

Don't:

• Fit everything neatly into a space allocated.
• Use comic sans. Black polo-neck clad typography ninjas will pad silently into your stylesheets and do unspeakable things under the cover of darkness.

Site functions

When designing, make sure you understand the types of content that go in the site and what the restrictions are.

Anyone can draw a picture of a moon rocket but it doesn't mean we can provide you with a vehicle capable of interplanetary travel!

Seriously, a designer recently added 'last time you were here you visited the following pages:' throughout the artwork for a site, then showed it to the customer, who loved the idea and signed it off. The first we knew about it was after the sign-off. We said: 'Great idea. It's not in the budget mind. We'll happily do it, it's an extra day or two at our normal rates.' Cue much muttering, but it's really not our fault.. We'd rather have happy customers, but we can't extra work for free. We will supply wireframes or a spec. showing what each part of the site will do. Please follow this, or discuss it with us if you are unsure it will meet the client's needs. It may be an extra, or it may be that we can do something similar within budget, but it's handled properly and not adding to anyone's stress levels.

Do:

• Work from the wireframes and spec. documents. If you don't understand them, we are happy to support, explain and illustrate, more than once if necessary.
• Show us artwork early and often. We can identify potential issues before they turn into problems.

Don't:

• Design something in isolation, sell the client on it and then show it to us. It's bad for everyone's blood pressure. Please don't think we're being unwilling: if we're shown designs that can't be achieved, then we have to say no!

Navigation

Do:

• Visualise a navigation item text wrapping over two lines. It will happen, so be ready for it!

Don't:

• Put content-managed navigation across the top without thinking long and hard about what may happen next year. Your client may want to add a new site section called 'Insert very long name here'. Is there enough space for that?

Integration with outside systems

We do a lot of integrations with stock control or warehousing systems run into issues when the designer has included a whole number of fields that don't exist. There was a recent example where stock management software is supplying the core information for each product in a large 'brochure' site. Their software contained no pricing information, but the design called for four different price points to be displayed on each of the 20,000 different products (price breaks by how many you buy). Assumptions collided with reality in a design presentation when the client pointed out the lack of pricing information and how many person weeks it would take to create that info if they added 100 products a day. The design was changed.

Do:

• Check what information an outside system will be supplying (we'll help with that: we'll usually supply a list of available fields).

Don't:

• Assume that any missing information can be created by the client. They may not be happy about that.

A special note on eCommerce

Do:

• Think like a customer: what would I look for when deciding whether or not to buy? We've not bought a computer because the spec. was vague and the image of the back of the machine was too small and we couldn't see what type of video card it had in it. A £400 sale lost because the photo was too small. People have very little emotional commitment to one shop over another, so your product pages should be very carefully considered.
• Think about how people will use the site, whether it all makes sense and whether you'd buy based on the information you can see on the page.

Don't:

• Use lorem Ipsum. Use an actual product that you would want to buy and make sure it includes the information you need to make a buying decision. If it doesn't, discuss with us to see if that information can be created. 

We've only scratched the surface really, but there's so much to cover....

If you'd like any further help or advice, please feel to drop us a line at make.it.work@welovetheweb.com

(Warning, technical post)

We've used Tim Geyssen's very good mail package on one of our recent projects

It's the one that was originally posted here.

We had problems with it timing out, and so took a look at the source code to see if it could be toughened up a bit. We made the loop that emails each member run in a background process.
 
We've patched Tim's original code, found here:

http://www.nibble.be/temp/MailEngine.zip
With a patch that you can download here:
http://www.welovetheweb.com/documents/MailEnginePatch.zip

e.g.

cd MailEngine
patch -p1 < ..\MailEngine.patch

It's now running 10,000 mail sends without issues.

In April, Warp Films will launch DRM-free film download sales from its online store at www.warpfilmstore.com. Warp will start with a small selection of films that includes the Artic Monkeys - Live at the Apollo, the film of All Tomorrow's Parties and Le Donk and Scor-Zay-Zee directed by Shane Meadows and starring Paddy Considine. The list of films will grow over time to include future releases such as Chris Morris' Four Lions and most of Warp films' back catalogue.

We Love The Web ltd. worked with Warp Films to design and build the site.

It¹s a shame that this is in any way newsworthy. DRM is the copy protection stuff that¹s been so successful in keeping the Internet free of music and film piracy*, whilst giving customers who support artists and film-makers a worse experience than you get by pirating the film. Films bought by download are usually locked to a single computer and iPod**: so you if you want to watch that film at a mate's house, you'll have to take your computer with you. Using the files on your next computer may not work either.

There was real debate throughout the site¹s development about whether to go for copy protection or not. The decider was that we were able to find copies of Le Donk and Scor-Zay-Zee on Pirate Bay, Rapidshare and myriad bit torrent sites within 30 seconds of looking: this was weeks before the DVD was released. We¹ve been lucky in working with Warp. The 'Bleep' music store www.bleep.net run by Warp Records led the way in 2006 by in selling legal MP3s without copy restrictions. They've built a good business doing so.

We respect Warp Films for having the guts to trust its customers. Piracy is a major problem, but punishing the people who have chosen to support you seems contrary at best. Copy protection doesn't prevent piracy. Most major releases are on Rapidshare or Pirate Bay before they are even available to buy, so it's evidently not working. We understand how scary it is for film-makers to release this stuff, but it's the right thing to do. Surrendering the illusion of control is hard, but deliberately crippling your product only makes paying customers cross.

* the 'Sarcasm' warning flag is raised.
** iPod or other digital media player.