I certainly learnt the hard way – going up countless blind alleys – 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 help me 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. Cool!
I can actually make HTML and CSS changes on the fly so if I want to see what a web page would look like with different colored links I can. These tools will also show me which CSS selectors effect an element and which are overridden.
2. Textpattern as blogging software
Textpattern was first released in June 2004 by Dean Allen and grew out of Textism with versions as early as 2001 so I could not have known about it 10 years ago but I would say discovering Textpattern was one of the best things that happened to me as a web designer. It’s essential, once I had learnt HTML and CSS, to get to grips with a Content Management System (CMS) to organize a website.
3. Hosts
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.
4. Ensure cross browser consistency
Different browsers will apply different default paddings and margins, even to common elements like paragraphs, body and forms. I put a handy bit of code in my CSS as a starter for ensuring the web page will look the same in all browsers.
Making sure I 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 Browser Lab.
5. Test
Whenever a bit of code is changed in a CSS, HTML, JavaScript or PHP file I always test the effected page straight after I’ve done it. It’s a no brainer really but I can’t tell you how many times I’ve made two or more changes to code only to find the web page broken with no idea which change had caused the break.
Obviously, I don’t test on every different browser after every particular change as that would be too tedious. But I do try to check each time in Safari and check Internet Explorer or Firefox after every other change.
6. Validate code
And as the testing proceeds, so does validating the HTML and CSS. It’s easier to sort out validation errors when I’ve just started the first page than when the site is further down the line and has numerous pages. Sorting out validation errors can solve a lot of IE problems also.
7. Use JavaScript not Flash
I am not opposed to Flash, fact is the first time I saw it I remember thinking it was a dream come true – using any font I wanted and it would compress files pretty well as it used vectors That 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. Read Thoughts on Flash by Steve Jobs.
For the sort of user-friendly sites I do I’m much better off using JavaScript, and more specifically jQuery, solutions as they degrade better: if you don’t have JavaScript enabled on your browser (and it usually is) the page still works, whereas if you don’t have the correct version of Flash running, Flash doesn’t.
8. Search Engine Optimisation (SEO)
SEO. The practice of getting a site indexed and high up the search engines’ results pages is something that starts the minute I 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. Usually, the first will ensure the second. However, there are other important things to take into account 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
And, as with SEO, the practice to get you site load as quickly as possible starts right at the beginning. So, combine external CSS and JavaScript files, enable gzip compression and caching server side, optimise the images as much as possible, minimize code and PHP calls.
It’s good for visitors and now Google uses speed in it’s algorithm for calculating a site’s ranking.
10. Choosing colors and adding space
With designing generally it is usually a good idea to choose two colors, a primary and a secondary, to build the 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 my client and the type of site, but it’s important to establish this in the early stages of development.
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.
Extras
Other things that would have made my learning less painful are listed here:
- Sidebar – all website’s need a sidebar – alright that’s a bit of a generalization and not always true but as a designer I will always want things to look clean.
- Put the client’s logo on the top left hand corner and link it to the home page – as I go along there are more and more standards that visitors are coming to expect. It’s usually important not to disappoint or confuse visitors!
- Contact page/details – just as ubiquitous as the Home link is the Contact link/details somewhere on every page.
- Vectors – when designing a site in Photoshop or Fireworks, I use vectors as much as possible so that the continuous re-sizing doesn’t affect the quality of the finished image.
Thanks for listening.
For more information about any of our services please call Andrew Talbot on 0117 927 3300.
