Wednesday, 21 November 2012

What Does A Web Designer Do? Five Things They Should Know

I often get into conversations with people who want me to think of them as designers who need a bit of help to get their websites to work the way they want them to. However, it often transpires that they knows very little about what's involved in actually building a website. Hint: it's not about making a pretty page on the internet.

So without any further ado let me tell you what anyone who wants to be a web designer ought to know:

  1. How the internet works

  2. How websites work

  3. How to best present your content

  4. How to build for mobile

  5. Best practice principles

Trust me on this: if you don't know this, you're not a web designer because you're not able to do what is required of a properly functioning website.

1. How the internet works

The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (often called TCP/IP, although not all applications use TCP) to serve billions of users worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies. The Internet carries an extensive range of information resources and services, such as the inter-linked hypertext documents of the World Wide Web (WWW) and the infrastructure to support email. ~ Wikipedia

The world wide web works by connecting sites via links. You're going to need to put content on your website for people to link to. This means that your content needs to be accessible and visible. SEO depends on it. Now there are black hat tricks you can employ but if your visitor arrives at your artificially-popular website and finds nothing of interest there, he or she will click off and go elsewhere.

2. How websites work

A website, also written as Web site,[1] web site, or simply site,[2] is a set of related web pages containing content such as text, images, video, audio, etc. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet address known as a Uniform Resource Locator. All publicly accessible websites collectively constitute the World Wide Web. ~ Wikipedia

Websites require content. You don't need reams of it but you do need to let people know what you've got to offer them, who you are, and how to get hold of you. If you don't provide a justification for clicking that link, you're letting your reader down. Ask anyone to tell you about their favourite website, then ask them to give you some reasons for why they like it. At the very least, they'll indicate in some way, shape or form that it's the content, first and foremost, then the colours, etc. The websites I use the most are Google Search, then Google Plus, then YouTube. Why? Best search engine, best social media site for in-depth discussion, best video site. Your website needs to be the best for what you're doing or you're going to fall behind the ones that are.

3. How to best present your content

Trust me on this: no one in the history of the internet ever went to a website because it was pretty. Not one individual. People go to websites that have the things they want on them. When I go to the sites I mentioned earlier, it's to find items on the internet, to chat about nerd stuff, or to watch pop or cat videos (I've got a big weakness for Eighties music and lolcats).

I don't use Google Search because it's got a clean white interface, I use it because it pulls up the items I search for. I don't use Google Plus because of all the whitespace, the three column layout or the pretty features, I use it to have nerd chats on nerd posts. I don't use YouTube because it's got a three column layout, navigation on top, on the left, and in the footer, and cute thumbnails, I use it to play my favourite videos. Understand that and you'll understand the purpose of design in website building.

The role of design

The role of design in website building is to present your content to its best advantage, to showcase your message in a way that grabs the viewer's attention and makes them want to find out more. If they're bouncing off the page it's because you promised them a service that you failed to deliver when they got there or they missed it because they didn't scroll down to find it. Take a look at this dummy site I ran up for one of my clients.

Since this is all she's got, I chose a layout that would put all the available or most important content front and centre so people could see at a glance what she's about. She wanted to avoid cheesy Halloween references and have a lot of whitespace, which I've provided. The images at the bottom can easily be replaced with other content. Now see it as a standard blog layout. Is that any better? Well, no. The video is buried and depending on how many toolbars you've got up, you may not notice it's there at first. The sidebar information could be anything but it's detracting from the overall message and makes the site look like I've not put much effort into it. The concept at work here is the hierarchy of information; you have to decide what's most important, what the reader needs to see right now. When you can't decide between one thing and another, use a layout that provides both.

Here's one I used because the client added far too many links to the menu bar because he wanted all his pages where people could see them.

The point is, you build from the content out. Fail to understand that and you fail at design. You might be a bit artistic and you might be practical and able to code, but if you want to be a web designer you need to understand information hierarchy before you get onto SEO (search engine optimisation), accessibility, and user experience (UX).

4. How to build for mobile

There are many ways to build for mobile, but if you use WordPress you can simply upload and install a responsive or mobile theme. There are loads of those, and many are free. Personally I prefer the responsive ones because they adapt well for screens of different sizes and many of them have sliders and other features that adapt according to the size of the screen.

I usually take extant themes and make changes to them rather than trying to build from scratch because PHP must be included in the theme to make it work. I had this conversation this morning with a service provider who builds their own themes. I pointed out that it's great that they can build their own themes but since the layouts tend to be similar it's a lot of trouble to go to just to make something that looks like the free ones, except for the colours, etc.

I can also build from scratch using the 960 grid. See the mobile version of this website. Notice how it's adapted for screens of different sizes. I use breakpoints to serve images of different sizes according to the screen size on which they're being viewed. When I'm being lazy I just make all my images 200px wide.

5. Best practice principles

Build from the content out. If you haven't got content, you haven't got a website. Think about it; what is the reader going to see when he or she gets there, and is it going to encourage them to do business with you? Trust me, they're not going to do business with you on the basis that your site is pretty, but because they believe you are trustworthy and will deliver on your promises.

KISS — Keep It Simple, Stupid! Seriously, the amount of convoluted code and layers of content, etc., that end up on some websites is astounding. Don't drown your message in complexity and clever features you don't really need.

Avoid clutter — you need whitespace to separate items, which helps to draw attention to them: If you have too many items of different colours on the page, you will make it unnecessarily complicated and confuse the reader.

Remember that the background colour, fonts, and images as well as your videos and text comprise the message you are sending to your readers. Choose each element carefully. Research the language of colour, use appropriate fonts and images, and include your keywords in your text.

Don't use any element that is either superfluous or detracts from your message. That stock image of the pretty girl with the headphones on is only relevant if you're promising customer services via real people.

Use fancy fonts for headings to accent your content and use the standard Helvetica, Arial, Verdana, or Times for the body text as a rule. Do NOT use Comic Sans, it's old fashioned.

Make your logo or header banner big enough to see but don't make it too big. Viewers haven't come to see your logo or banner, they've come to see your content.

Make sure there's enough contrast between your body text and your content background colour. Pale grey on white doesn't show up too well and remember that contrast settings can differ from screen to screen.

Don't use white text on a black background unless you know what you're doing. It's harsh on the eyes.

Cross-browser compatibility: on WP it's all done for you as a rule, but be sure to check on older browsers to make sure your site can be seen as intended nonetheless.

Don't use tables except to display tabular information, e.g. goods and prices. They don't show up too well on mobiles.

Information hierarchy — decide which information is the most important and put it front and centre. If you can't decide between two or more items, put them all there in a layout that gives them each a spot on the same line. This may mean using a stacked column layout. WordPress themes that provide these and work on mobile are available for free.

Make information accessible — no one should have to dig to find information. Put it up on your menu. Use a dropdown to display all your pages and provide a sitemap and/or extra menus. Check for broken links. Nobody should ever click on a link that leads to nowhere. Provide a search box so your readers can find information on your blog. I actually got advanced code for mine so I could provide the best possible site search experience for my readers on this website.

Keep your images small if you can. If you must display images larger than 200px, have a responsive solution to serve smaller images for smaller screens.

Only use scripts and features you need. If you don't require them to get your message across, you can do without them.

Don't believe the SEO snake oil salesmen. Google is weeding them out and basing its search results on how relevant your content is to what you're doing. The idea is to screen out ad farms and SEO traps with no real content on. Link building, etc., has some value but it's not the be all and end all of search engine rankings. Content is. Keep it relevant and often updated. Use a blog to add more content. That's why I build with WordPress, using Pages for the site information and Posts for the blog.

Keep your design up to date. Website fashions change and that retro thing is getting old because it's overdone. It's best to stick to a timeless theme than go for a fashionable one you'll have to update in a year or so. That's why it's best to start with a simple design in the first place.


Content precedes design. Design in the absence of content is not design, it's decoration.

— Jeffrey Zeldman (@zeldman) May 5, 2008

I've been living and breathing that since I first read it, and the results are websites that are functional first, then pretty. I add elements suggested by clients, working for the client's best interests because my success depends on theirs. This means educating the client on what works best for them in terms of design. Copying the look and feel of other websites is impossible without copying the content; they may find this hard to understand but it's the content that gives the site its look and feel to a greater degree than the backgrounds and banners.

No comments:

Post a Comment