10 years ago I had a big problem. I was a print designer but I loved the web and desperately wanted to work with it.
I wanted a software package that would let me mess around with drag-and-drop functionality and when I was ready I could click “GO” and miraculously produce perfect code. I was probably using Internet Explorer as my web browser and used Dreamweaver as a design tool to churn out horrendous tabled mark up.
I gradually came around to seeing that web design was about standards, SEO, speed, aesthetics – and … horror of horrors … that I was going to have to learn code.
I certainly learnt the hard way – going up countless blind alleys that turned out to be cul-de-sacs – in my path to creating websites. Here are some of the most useful things I have learnt in the last few years:
1. Web developer tools and Firebug
One of the most useful previewing techniques that will help you learn CSS is viewing the Developer Tools in Chrome or Internet Explorer and in Firefox the Firebug extension. While using these tools, cursor (it can be an arrow or a magnifying glass) click on an element and the styles and style sheet that is affecting it will show up in the Developer Tools or Firebug panel.
You can actually make HTML and CSS changes on the fly so if you want to see what a web page would look like with different colored links you can. These tools will also show you which CSS selectors effect an element and which are overrided.
2. WordPress.org as blogging software
WordPress was first released in May 2003 by Matt Mullenweg as a fork of b2/cafelog so I couldn’t have known about it 10 years ago but I would say discovering WordPress was one of the best things that happened to me as a web designer. It’s essential, once you’ve learnt HTML and CSS, to get to grips with a CMS (Content Management System) to organize your website.
Not all hosts are created equal. It is incredibly important to spend a bit of time on forums and social networking sites asking people with similar sites their experiences with hosts. Here are the results of surveys I did to find the best shared hosts and VPS hosts for WordPress.
4. Ensure cross browser consistency
Different browsers will apply different default paddings and margins, even to common elements like paragraphs, body and forms. Put this handy bit of code in your CSS as a starter for ensuring your web page will look the same in all browsers:
Make sure you have a local version of all the major browsers Chrome, Opera, Safari, Internet Explorer and Firefox – as well as the ability to view the browsers on the Mac and Windows operating systems. The best online browser rendering service is Adobe’s BrowserLab.
Obviously, you don’t want to test on every different browser after every particular change as that would drive you potty. But try to check each time in Firefox and check Internet Explorer or Chrome every other change as well.
And as you go along testing, so should you go along validating the HTML and CSS. It’s easier to sort out validation errors when you’ve just started the first page than when the site is further down the line and has several pages. Sorting out validation errors can solve a lot of IE problems as well.
I’ve got nothing against Flash, in fact the first time I saw it I remember thinking it was the answer to all my prayers – you could use any font you wanted and it would compress files pretty well as it used vectors I was used to in print design. However, it was never well crawled by the search engine bots, it made designers “over-design” and now it’s not even supported by certain devices.
The practice of getting your site indexed and high up the search engines’ results pages is something that starts the first second you work on it. The HTML should be as clean and as sparse as possible, marked up to leave the search engines in no doubt as to the contents and hierarchy of the pages.
The most important factors for good search engine rankings are firstly good content and secondly good incoming links and, usually, the first will ensure the second. However, there are other important things to learn and implement on the site such as XML sitemap, robots.txt, .htaccess and Google Webmaster Tools to check broken links, etc.
9. Speed and compression
It’s good for your visitors and now Google uses speed in it’s algorithm for calculating a site’s ranking.
10. Picking colors and adding space
With designing generally it is usually a good idea to choose two colors, a primary and a secondary, to build your color scheme around. The tendency, particularly with webpages, is to have just one color for links and then use different tints of that color for backgrounds etc. But this leads to a very monochromatic look. So it helps to choose at least one other color other than the main color. Of course, the choice of colors depends on the client and the type of site, but it’s something you need to get right and to get right early.
The amount of web page real estate with nothing in it is almost as important as the pixels that contain information. Spacing out the design will make it easier for the visitors to digest the information. You will not only have to learn how to do this; you will also have to learn how to persuade the client that this is necessary – as with many of the above.
Other things that would have made my learning less painful are listed here:
- Sidebar – all website’s need a sidebar – OK that’s a bit of a generalization and not always true but a designer will always want things to look clean and so many times I have tried to get the page contents to stretch right across the full width of the browser. Ouch, no, big mistake!
- Put the client’s logo on the top left hand corner and link it to the home page – as you go along there are more and more standards that visitors are coming to expect. It’s usually important not to disappoint or confuse your visitors!
- Contact page – just as ubiquitous as the Home link is the Contact link somewhere on every page.
- Vectors – when designing your site in Photoshop or Fireworks, use vectors as much as possible so that the continuous re-sizing doesn’t affect the quality of the finished image.
And what about you?
What would you have loved to have known about web design when you were starting out?