We Love The Web - Blogorhea

If you aren’t a full-time web designer, there are a few design constraints that may surprise you when designing for the web because it’s not the same as print. In print, you can place everything pixel perfect because you know that there is a single output: ink on paper.

It's. Just. Not. Like. That. Online.

Your design has to work on any computer, anywhere in the world. Mac, PC, Netbook, iPhone running any one of: Firefox, Safari, Internet Explorer, Chrome…
...and the list just keeps getting longer. 

Good news: we’re here to help.

We’ve compiled all the problems that we see again and again into handy do’s and don’ts that will save you a bucket-load of time and frustration. You can get all the materials, templates, pre-flght checklists and other bits 'n' bobs described below by clicking this link:
download our handy digital artworking kit (zip)

Page Size

Artworking for print isn't easy, but at least you know what size of paper you are working to. Online it has to look good on everything from a 2-inch iPhone to a 24-inch screen.

So: how on earth do you work with that?

Use our Photoshop template to help you. Different layers have different screen size, including common laptop, desktop and big-screen setups. If it looks good in all three: you've cracked it!
(if the others are right, then the iPhone will take care of itself)

Do:

• Design to 1024x768. Then put a ‘surround’ around it for other screen sizes.
• Use our template (included in this kit).
• Think about what happens when the page extends vertically: make sure you've considered that.

Don't:

• Design fixed-height websites: they rarely look good.

Don’t forget:

• 1024x768 is the total screen size. You are actually designing for about 960x560(ish): toolbars and menubars take up space. Simplest way: just use our template.

Fonts

Web pages don't usually embed fonts, so you have to use the fonts installed on the user's computer. That does impose restrictions since it means you have to use fonts installed on everyone's computer.

Do:

• Use any font you want for headlines and display text. We have techniques to display small amounts of text in any font, but the more we use, the longer it takes for the web page to display, so we use them sparingly.
• Use system fonts for body text and navigation.
  These are: 
Times, Arial, Courier, Verdana, Georgia, Trebuchet, Tahoma, Lucida

Don’t forget:

• People can (and do) change the text size in their browser, old and partially sighted people especially. Typeset things so that it doesn't matter if text boxes get bigger or smaller. Test any text boxes you design by making the text 4 points larger in Photoshop/Illustrator and seeing if it still fits.
• Oh, and don’t use comic sans. Not ever.

Layout

Do:

• Design the navigation and background etc. in one layer set, then each page layout in another. That way, if the 'surround' changes, you don't have to re-work 20-30 pages: just the one. This can save you hours and hours.

Don’t:

• Chain text-boxes in HTML like you do in Quark and InDesign. HTML doesn’t do that, so avoid multi-column 'newspaper' layouts.
• You cannot flow text around a curve or get it to 'wrap around' an image the way you can in print. HTML works in square/oblong grids. HTML does not understand curves.

File Formats

Do:

• Give us layered Photoshop or Illustrator files.
• Include fonts with your artwork (if appropriately licensed).
• Supply artwork with fonts outlined if fonts aren’t appropriately licensed.

Don’t:

• Give us PDF, InDesign or Quark files. These are primarily intended for print and can be problematic.
• Give us Jpegs and tiffs – they are ‘flattened down’ and aren't suitable.

Resolution and Colours

Print runs at 300dpi in CMYK colour.

Web runs at 72dpi in RGB colour.

Do:

• Supply artwork at 72dpi in RGB.

Don’t:

• Supply artwork in CMYK as we can't guarantee accurate colour reproduction. Sorry, not our fault: conversion between CMYK and RGB can significantly change the on-screen colours when you show them side-by-side.

Copy

• Copy always changes throughout the build process. If the copy is in the artwork, it's hard to amend and keep track of what has changed. We've had to completely re-implement every piece of copy on a site before because 10% of the copy had changed but no-one was sure exactly what was new. That pushes up our prices as we have to price in the risk of having to re-work all those pages 'just in case' we miss something.

Do:

• Supply copy separately from artwork, in a Word document.
• Use 'Track Changes' in Word.  You can then see what’s changed.
• Use our sample copy document, also in this kit (unbranded so you can share it with clients).

Don’t:

• Supply final copy inside artwork.

Colour Gradients and Drop-Shadows

This gets less of an issue every day, but the problem is this: Internet Explorer version 6, which still runs about 5% of the worlds browsers, can't do transparency very well. In about a year's time, we're hoping to be able to drop support for this ancient and crufty web browser completely, but at the moment, we sometimes still need sites to work on it.

Do:

• Use grads. with sparingly.

Don’t:

• Put images with curved outlines on a gradient background.
• Overlap two or more colour gradients. HTML can be funny when it comes to transparency.
• Overlap drop-shadows and gradients or drop-shadows and other drop-shadows

Buttons, Links & Forms

Do:

• Links: include a rollover state: you don’t need to artwork every instance, just so long as we can see what you want.
• Buttons: include a rollover state. Here, we do need every instance artworked. Include them on a separate layer so you/we can switch between them easily.

Don’t:

• Scroll bars: don't restyle these, you can't make that happen consistently between browsers in HTML.

Don’t forget:

• Error messages and required fields: when you submit a form, the server checks that you've filled it in correctly. If you've missed something, you get an error message. We need to know how that should look.
What we usually do is put a generic error message at the top of the form like 'Sorry, we've spotted some problems with the information you've supplied, please review this form for more guidance'. Thereafter we put specific feedback next to the form field that is wrong e.g. 'Required' or 'That doesn't appear to be a valid email address' etc.
• Thank you pages: after your user has completed the form, it's nice to say Thanks. Please include copy/artwork for that.

Pre-flight checklist

We've put together a pre-flight checklist and you can find that in the downloadable kit. You don't have to use this, but it's what we will run through upon receipt of artwork anyway, so it may save you time to look it over before sending.

In the next 'How-to': Artworking for Content Managed Sites and eCommerce.

Coming soo: Artworking for Flash, Artworking for HTML email

As ever, if you have any questions about any of this stuff or have a topic that you'd like us to cover, get in touch in the usual way: make.it.work@welovetheweb.com

Loading mentions Retweet

If you aren't a techie, the myriad detail of web stuff can be intimidating.  So we're putting together a series of 'bitesize' how-to's explaining things that we find are puzzling our clients. This is the first.

Keywords and metatags
Clients have started to give us keywords these days to help with search engine positioning, but what we're seeing is that most don't understand the best way to do this: so here's the 2 minute guide to the subject.

Typically, our clients have been sending us keywords as a big block of words, separated by commas, to do with the client's business. That's a great start, but it's only about half the story.

On most web pages, there's a bit you can't see that is used by search engines to help work out what that page is about. This stuff is called 'Metadata' (which means 'information about information' or just 'summary' in plain English). There are two common 'tags' for Metadata on most web pages:

• Keywords: 35 words or short phrases summarising the page (up to 255 characters to be precise). For the We Love The Web home page for example, that might be 'We Love The Web, bespoke web development, eCommerce websites, Content Management System' etc.
• Description: A short paragraph summarising the page

So: how do you get maximum value from metatags?
Keywords are really about the page, not the website. A list of generally relevant keywords about the business is likely to be generally helpful in search-engine terms, mainly because your pages are likely to contain those words in the bits of text that you can see. It's not getting you maximum value in search engine terms though.

When writing copy for the site, bear in mind what you want the site to be found for, then include an extra couple of para's per page: one for keywords, one for description. Decide which are the most important words from that page and summarise the page into keywords and description. Make sure that the keywords and description tags both contain the most important phrases from that page: the ones you would like to float to the top in search-engine terms. It only takes 10 minutes a page and can really help your search engine rankings.

As ever though, if you are confused, then call us: happy to help.
Alternatively, if you have a topic you'd like to see us cover, then ask away.

Loading mentions Retweet

You know when a piece of technology surprises you in a good way?

It does happen. 

When you get better at computers they don't necessarily get more explicable, you just learn better ways of coping with the problem. Software is sold on bling and features, but it happens with irritating frequency that the basics are neglected. The thing it absolutely definitely has to do is left half-finished.

So when a piece of software does something basic really, really well, it's worth noting.

This month, I finally had it with CDs. It was the kids. The rate of attrition was just too high. So, have been ripping my music to stick on an MP3 player. Yes, yes, I know that there's no fair use clause in UK copyright law and ripping your own CDs to put onto your own MP3 player is illegal. Somebody sue me. It would be an interesting case.

Anyway, sorry, where was I? oh yes. Basic things done well.

About ten percent of these CDs are in a very sorry state. Pitted and scarred by the elements: scored by the grit of ages: the very reflective foil rotting away in some cases.

There has not been a single one that iTunes couldn't rip. Not one. Some CDs took several hours to rip, but it just wouldn't give up, the CD drive grunting away like crazy, reading a few bytes at a time. Yet the resulting rips are almost perfect. There's the occasional  glitch, but it would be churlish for me to deny the generally amazing performance of the error correction algorithms in play. These are CDs that won't play in a AA class Technics CD player with dedicated hardware error correction.

Good show.

Now, if only they hadn't thought that administering your mobile phone through your MP3 player was a good idea I'd be almost completely happy....

Loading mentions Retweet

7Nine (a small print-orientated agency) and We Love The Web have won in a six-way tender for Selby College’s publicity contract: a gig covering all publicity work for the next four years. Most of the contract is for print and broadcast work, but without a coherent digital strategy 7Nine wouldn't even have made the shortlist. We worked with 7Nine to write a tender response covering:

• The website
• Search engine optimization
• Email marketing
• Social media
• Digital direct marketing and Analytics
• Virtual tours

And lots more...

We assembled all the elements into a coherent whole and went to the pitch meetings alongside 7Nine to present what we’d proposed.

“We Love The Web really do give you the edge over your competitors. When it came down to knowledge, understanding and presentation, they played a crucial part in winning the Selby College contract.”
Justin Harpham, MD, 7Nine

7Nine’s experience is increasingly common: clients don’t just need a website, they need a multi-stranded strategy. We're more than happy to help.

Loading mentions Retweet

www.workswithwater.com

A whole new site, up it goes. Another one we've gently ushered onto the Interwebs. That makes nearly 300 now!

Usually, our job to work quietly in the background, unassuming: the unsung heroes who made it all happen and we're cool with that. It's just nice to be able to talk about a site we dun from time to time.

Next up, SEO and Analytics!

Launching a site isn't an event any more. It's a process.

Loading mentions Retweet

If I were the boss of the Bavaria Brewery, I'd be giving my head of marketing a pay rise right now...

http://www.guardian.co.uk/football/2010/jun/16/fifa-world-cup-ambush-marketing

You literally cannot buy that kind of publicity.

Brilliant.

Loading mentions Retweet

CS5 arrived in a box today. Imagine how much we were looking forward to the install process (see previous post).

Set it running. The main bit of CS5 installed without a hitch. Gosh, we thunk. We might have to eat our words about bugginess. Bloat is still true, at 9.1Gb of disk space required, but y'know, hard disks are cheap and the 45 minutes it takes to set itself up is no worse than Visual Studio. 

And then we installed Acrobat.

If it were a one-off, experience, that would be tolerable, but it isn't. The CS3 install was awful too, in fact something goes wrong more often than not. Hell's teeth, installing Acrobat Reader on a Mac last week caused it to fall over so hard that a forced restart was required (holding the power button down for 10 seconds until it's forced to shut down).

Good work fellas!

Loading mentions Retweet

But... it's time for a confession. We've fallen out of love with Adobe. It's horrible to have to admit it. There are people here who were using Photoshop since version 1, when it came on a single floppy. We grew up with Adobe, but the last few years have taken their toll. Each new version gets costlier, buggier, more bloated and more insecure.

It's like seeing a former bodybuilder who has let themselves go. More accurately it's like Microsoft circa 2002. The problem is that Adobe have a monopoly on 'creative industry' software and it shows. We pay more for 2 seats of Adobe software than we do for about 20 seats of Microsoft Windows, Office, Visual Studio, Windows Server, Windows SQL server, Project, Visio, Sharepoint, Expression etc. etc.

Adobe are a monopoly and they are behaving like one. We have literally no choice in whether or not to buy the Adobe product suite, the entire creative industry uses it and there's no alternative: not since Adobe and Macromedia merged a few years ago. We pay the Adobe tax because we have to, not because we are enthused about the great new stuff they are doing.

The comparison with Microsoft is apt since the beast of Redmond isn't exactly known for its touchy-feely communist tendencies. Instead, the rise of alternative desktop and server operating systems in the form of Linux and a resurgent Apple, added to the savaging that Microsoft received over Vista has given it the kick up the bum it needed to start getting its house in order. Even so, they may have left it too late.

How much effect will this minor rant have on Adobe? Probably none at all, but then they have bigger enemies right now. We're not saying 'I agree with Steve': Apple have a terrible record with mucking iPhone developers around. Arbitrary behaviour and hubris are not unique to Adobe, but mr. Jobs does sort have a point.

So, here we are, trapped in an exploitative and loveless marriage. Sort it out Adobe.

Loading mentions Retweet

(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.

Loading mentions Retweet

It raises a smile every time I go to that café, but then I’m easily pleased. I can see the marketing meeting in my mind's eye: brainstorming around the core message that this tea helps create a small piece of the day that's just for you. 15 minutes where the outside world can go hang itself as you detox in herbal-tea-heaven.

The café in question is at the railway station here in Hebden Bridge, so people passing through are likely to be in a hurry. They must have been losing enough in sales to make it worth putting up a sticker to 'augment' the branding. It's a salutary reminder to consider where and how the messages you send might be delivered.

Seriously, however, it hightlights the importance of test-driven design processes. We know that test-driven design is great at picking up unintentional messages that you are sending and feeding those back into the creative process. There's nothing like showing a design to people not involved in the process for highlighting where your assumptions have led you astray.

Loading mentions Retweet