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.
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. 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:
*{margin:0;padding:0}
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.
5. Test
Whenever you change a bit of code in a CSS, HTML, JavaScript or PHP file always be sure to test the effected page straight after you’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, 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.
6. Validate
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.
7. Use JavaScript not Flash
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.
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 the jQuery device can still work, whereas if you don’t have the correct version of Flash running, Flash doesn’t.
8. SEO
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
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 your images as much as possible (even sacrifice quality a little bit), minimize code and PHP calls.
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.
Extras
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?
Hi Rob
Are incoming links the same as back links?
Might sound a stupid question but I cant see the difference
All the best Grant
Hi Grantly, yes, by incoming links I meant the same thing as back links or inbound links. Cheers.
When I first got into web design, I was a twelve-year-old obsessed with fan fiction and anime. I wanted to make my own fan fiction site, so I started off by using other people’s free templates and tweaking them for my own needs. I didn’t know a thing about code and would play around with it in Microsoft Notepad, using Google — or probably AOL Search back then, actually — to find what I needed to know.
I basically taught myself everything, going to college just so I could have that official looking piece of paper. When I got my first real job as a web designer, I didn’t know CSS. Within six months, though, I had learned a lot and was designing and developing websites with relative ease. However, I wish I’d known about
display: block;
width: 800px;
margin-left: auto;
margin-right: auto;
a few years ago. Up until about a year ago, I would center websites with careful math and lots of headaches when Firefox’s MeasureIt told me the right side was a little wider. I also wish I’d known many years ago that this would be such a rewarding and fun career. Some days it’s tough, but I wouldn’t trade it for anything!
It’s funny, Elizabeth, looking back, there were so many CSS nightmares I had that could have been avoided but then it wouldn’t have been so much fun. Remember ill-fated attempts to get a div to center with text-align before discovering the delights of margin: 0 auto;! Our introduction to website creation and CSS has been very similar. And I agree with you that it is fun and rewarding. In fact I would say that I get a bit obsessive about websites, actually. I think the instant feedback from visitor numbers etc. is almost addictive!
Yes! Without those CSS disasters, I wouldn’t know what I know now. I’m sure they’ll be more, too. For me, solving the problem is what’s addictive.
I agree. More disasters, please!
Firebug sounds awesome. I have downloaded it now and am hoping that it will lead to a greater understanding of CSS!
When I discovered jQuery as an amazing tool for front-end development, I felt the urge learn some javascript first. To debug my javascript (with jQuery code) I always use this: http://www.jslint.com/ That’s a great help!
Neil, Firebug is awesome. Another thing you can do is uncheck certain styles to disable them. It’s a great way of finding out other people’s CSS tricks!
Esger, thank you, I’ll certainly be using that.
@Rob, Thanks for the tip – more things to play with 🙂
I’m not sure I understand your comment that jQuery works when JavaScript is disabled, as it doesn’t. Do you mean that the page still works?
Yes, Michael, I mean with JavaScript disabled the HTML elements on the page that were affected by the jQuery can still function. Without Flash installed however, Flash features won’t work at all. Sorry for the confusion.
Yes, number 7 it’s a hate thing 🙂
I like wordpress and I also use and love working on Drupal, Joomla and Dotnetnuke cms’s. The one thing I would say about WordPress and the like is that they are NOT silver bullets…. In other words, you need to spend time and get familiar with wordpress (or any other cms) before simply assuming it is the answer to all your prayers.
Haha, Juan, surely not!
Noz, you are absolutely right. I realize that WordPress is right for me but that doesn’t mean it’s right for everyone. I make a lot of niche websites for which WordPress is ideally suited. Drupal, Joomla, Dotnetnuke and EE are better for other types of sites.
Some very good lessons here. After I discovered WordPress my online presence exploded.
I have since discovered Googlw Webmaster tools, site maps, compression, and SEO.
However still having problems with hosting. My only tip here is to have your hosting physically located in your country of residence.
Thanks Sparrow, I can recommend some good hosts in the States, UK and Europe but I don’t know any Australian ones.
Hi Rob and other contributors, I have just joined the Linked In group for website developers because I don’t know anything about website development, yet am very keen to learn and apply my newfound knowledge to build a website for myself. Rob, you and other contributors speak of WordPress positively. What do you think of Weebly? Also, what do you think of DevHub? What other free WCMS are there out in CyberLand? Which is best for an absolute beginner, in your opinion? Thank you for any information you can share with me. I greatly appreciate it.
Hello, Caitlin, there are many reasons why I like WordPress but no one has the ability or time to test the plethora of free CMSs out there and I have to say that 90% of my CMS experience has been with WordPress. The difference of a self-hosted WordPress.org site over Weebly or DevHub is that WordPress is housed on your own server giving you total control over the site. I have never used Weebly or DevHub but I think they host your site and, as a result, you won’t be in complete control. They also seem to hit web marketing pretty hard – I just stumbled over a blogger eulogizing over how amazing DevHub was … written on his WordPress blog!
The other CMSs I have slight experience of are SilverStripe, Drupal, Joomla and Expression Engine, the last one being proprietary. These also require you to set up a server to run them.
Which is best for an absolute beginner? Well I would say WordPress. But by all means try out the free products first – WordPress.com being one of them. HTH.
This list is the best. I sually don’t validate my website, i don’t know why.
Cheers, Afam, you should try to reduce validation errors as much as possible as it will help you’re website in a number of ways!
Good article. I’d switch out point 4 for reset.CSS. Irons out a whole load of cross browser problems in one easy piece of code.
I’d also include blueprint.CSS. It just makes designing and building a website on a grid system so easy. Essential for quick turnaround. Get some background on grids by looking for Khoi Vinh’s work.
Thanks Simon, I’ll check them out.