This is an article in a series called “For Our Clients”. The goal of these articles is to be as transparent as we can with our clients so as to help clarify how we think, what we do and how we do it. We also hope that these articles can become a resource for clients – sort of an FAQ in article form – that will help broaden the understanding of why certain projects have the characteristics they do.
As I talked about in our article The Importance of a Quality Website, having a website is a must for your business. However, having just any website isn’t good enough – I mean, you don’t want your site to end up on the list of The World’s Ugliest Websites, do ya? But, if you’re looking to hire a designer to build your website, you probably have some questions – and you will probably have some more questions later on in the design process. So, with that in mind, I’ve written this article to answer a few common questions clients have – and feel free to use this information for your clients too, fellow designers! I’ve tried to keep this article as jargon-free as I can, so that any and everyone looking into getting a website built will be able to understand it.
Hit the jump for more!
DESIGN PROCESS/WORKFLOW
I won’t go into great detail, as you can read about our general design process/workflow in two of our other articles, For Our Clients: Logos and 5 Ways to be a More Efficient Designer. However, to recap, our design workflow proceeds as follows:
- Initial meeting/discussion/brainstorming
- Completion of design brief by client
- Research
- 3 Drafts/Website Mockups, presented to client
- Client chooses one idea
- Revision round
- Present second draft to client
- Revision round
- Final draft
- Sign off
A good design process keeps the project on task and moving efficiently. Now, on to specific details pertinent to web design!
WEBSITE MOCKUPS
This seems to be where most of the disconnect between clients & web designers begins. A website mockup is a static (ie. non-interactive) version of your website. It is used by the designer to get sign off on aesthetics etc prior to jumping into the time-consuming coding portion of a website build. Nowadays, most website mockups are done in Adobe Photoshop or Illustrator (Paper Leaf’s included), and upon sign off, these mockups are then built using CSS & HTML. However, there are things done in Photoshop & Illustrator that cannot be replicated perfectly in HTML & CSS. It is important for the client to be aware that these are two different programs; however, it is more important that the designer does not show the client anything in a mockup that can’t be replicated with HTML & CSS. I will talk about some of the issues that arise when going from mockup to a website below.
SCREEN RESOLUTION
Screen resolution – the number of pixels displayed on your screen, or alternatively, how big or small things appear on your site – is one of the biggest areas of confusion when it comes to clients & web designers.
The problem is this: not everyone has their screens set to the same resolution. Thus, websites look different from computer to computer. For example, Andy has a 24″ iMac – a big screen with a resolution set at 1920X1200 pixels. I do my work on my Macbook Pro, which has a screen resolution of 1440X900 pixels (smaller than Andy’s). Because my screen resolution is lower (smaller) than Andy’s, I have less room to display a website. On her maximized screen, the (old) Paper Leaf website has a lot of space around the content area (as you can see in the screenshot below).
This isn’t a bad thing. On my screen, there is much less space around the content area as you can see from the following screenshot.
From this, you can see how aware we have to be as web designers to make sure no elements of a website will show up on one screen, but be cut off on the other.
In order to do this, we design to the most common screen resolution. Today, studies show that that resolution is 1024X768 pixels. When we design to this size, we have to be aware of those with larger screen resolutions (like Andy and her sweet iMac… but whatever, I’m not jealous – I SWEAR). So we use background colors, or background images, that can repeat along the X or Y axis of the screen. The reason we do this is so that those with larger screens don’t see the ‘end’ of the background – ie an obvious break where the background changes from, say, a tiled wood pattern to stark white (the default background).
That is why, on your computer, some websites have backgrounds that ‘stretch’ – like the Paper Leaf site. On our site, there is a slight white-to-gray gradient that stretches to accommodate people with large screens. LIKE ANDY. So, when hiring a web designer, be sure they are aware of screen resolution issues and that they design to accommodate all screens. Also remember that your website mockup was probably built with only a bit of the background showing; the background will be more prominent on larger screens than it was in the mockup. And lastly, after you hire your screen-resolution-savvy designer, trust them to make the right decisions to ensure your website works (and looks great!) for the largest audience possible.
BROWSER COMPATIBILITY
Along with various screen resolutions mentioned above, people also use a variety of web browsers (Internet Explorer, Mozilla Firefox, and Safari being the most common). That’s all well and good, except some browsers render code differently. That essentially means that there can be some differences in how a website looks in Safari as opposed to, say, Internet Explorer Version 6 (the bane of the web designer’s existence).
Most, if not all, of these browser issues can be dealt with via proper code. Make sure your web designer designs to the lowest common denominator (IE6… or 7).
FONTS
Continuing the list of aggravations things to be aware of with web design, let’s talk about fonts. Fonts (like Times New Roman, or Arial etc) are specific to each person’s computer. What that means is that if you design a website in Helvetica and my computer doesn’t have Helvetica installed on it, Helvetica won’t show up when I view your site. Instead, my computer would substitute a font in Helvetica’s place. Because fonts have different native sizes, kerning (space between letters) etc, this has the potential to wreak havoc on a design. Thus, when designing for the web, the designer has to use what are called ‘Web Safe Fonts’. These are fonts that come installed on virtually every operating system (Windows XP, Mac OSX, Linux etc), and thus will show up properly on everyone’s computer.
Here is a list of web safe fonts, courtesy of webdesigndev.com. As a client, you don’t need to memorize these fonts or anything. Just be aware that if you are shown a static mockup version of your website with the type set in a non-web safe font, your website will NOT have this font when it goes live. However, a web designer should only show mockups to their client with web safe fonts.
THINGS TO AVOID
Here is a list of general things to avoid with your website.
- Music
- Don’t ever have music automatically start playing on your website. It is aggravating, most people don’t have the exact same taste in music, and most people already have music or TV playing when they visit your site. It is not smart to have your client’s first impression be one of annoyance.
- If you’re a band or something similar, music players are OK (if not needed). However, leave it up to the viewer whether they want to listen or not – let them hit play.
- A non-tileable background image
- most images can be made tileable, but some are better off without it.
- like we talked about in the Screen Resolution section, if your image is not tileable, viewers with big screens/high resolutions will probably see the end of an image, which is ugly & unprofessional.
- Complexity where simplicity will suffice
- don’t make your clients solve a riddle to navigate your site. They just want information – make it easy to obtain.
SEARCH ENGINE OPTIMIZATION
Search engine optimization, aka SEO, is an industry in its own right. Unfortunately, your business’ website will not just jump to the first page of Google the day your website goes live. There are a lot of factors to consider, including
- keywords on your site
- how saturated your industry’s market is
- how long your website has been live
- how clean/readable your website’s code is
And more. We everything we can as Paper Leaf to get your site as Google-friendly as possible – however, some things are out of the control of the designer, like the text on the site. Our code is clean and readable and we use as much Google-friendly code & keywords as possible, but the rest is out of our hands.
That’s it for now! If you’re a client who has any additional questions about web site design, please feel free to contact us or leave a comment below! This post will be living & breathing, and we’ll update it with more FAQ as time goes on.
Hey! Thanks for linking to my ‘Worlds Ugliest Websites’ post
No problem Niki! It’s a great post that should be shared. Thanks for the comment!