How to be a Better Web Designer
Posted in Articles, Web Design by Nick on August 12th, 2008
Being a web designer in 2008 is a lot different than it was 10 years ago. Before, you could just use some crap program to make all the code for you, and call it a day. Everything’s changed now that CSS, AJAX and mainly just simplicity have taken over. I’ve gathered all of the things I’ve been using and doing to make myself a better designer and talked about them here.
Use multiple operating systems
You might wonder why this is “essential”. Well, to me, going to a website in Ubuntu on Opera is different than going to a website in Vista on Opera, simply because of the environment. It’s good to get a feel for different surroundings and then see how your site design looks with it all. Most of the time your code will render the same as it did on each OS, but occassionally you’ll find small bugs. When I went to my site on Opera in Ubuntu, my RSS feed icon at the top was not pushed all the way to the right as it should be, but worked fine in Firefox, as well as all browsers on Windows. (No I haven’t made a fix yet, I’m lazy).
If you’re like me and not rich, you can simply go to a computer store and visit your site on multiple operating systems. I went to the Apple store and got on a Macbook Air, and was suprised to notice some real ugly things about my site that didn’t show up on any other browser/OS (even Safari for PC).
Use multiple browsers
I have IE, Firefox, Opera, Chrome and Safari all ready for quick-access at the bottom of my taskbar. I also have something called IE Tester which emulates IE 5.5, 6, 7 and even 8 BETA. Another good tool is Browsershots.org, but the only thing that is bad about that site is you have to wait a while to get results, and isn’t efficient when you’re trying to narrow down several issues (resubmitting a page over and over and waiting is not fun).
Use good tools
I use something called Programmer’s Notepad to do all of my coding. It’s free, it recognizes multiple different languages within the same document and loads fast. I don’t believe this program works in Linux or OSX (haven’t tried Wine with it on Linux), but there are several other programs that may be as good as this if you just look.
Of course, I use Photoshop for all my graphic design, but I’ve just began using Gimp to see what I can do. Gimp works in most operating systems and is free.
Research. A lot.
If you can’t figure something out, Google it. Seriously. It doesn’t make you stupid. In fact, it makes you smarter. I’ve found MANY great sites just by googling simple problems I was having with CSS.
Read many tutorials
But don’t only read them, try to do most of them. You’ll learn cool new techniques, and eventually adapt your own style when you combine everything you’ve learned with your own ways of doing things. A few good tutorial sites are PSDTuts, Good-Tutorials and of course Pixel2Life.
Bookmark, bookmark bookmark!
If you looked at how many bookmarks I have relating to web design, you’d probably wonder if I actually even visit the sites again (the answer is yes by the way). If you find a site with a really good design, bookmark it! If you find something that makes your jaw drop, bookmark it. That way, whenever you’re making a new design, you can ALWAYS have a big list of sites that have cool/interesting/useful features that you could be inspired from.
Don’t make your site work on only one browser
I’ve seen this too many times, and it makes no sense. A lot of people who are caught up in the “anti-IE” campaign have gone too far by making their sites only work correctly in Firefox/Opera/etc. This goes against everything “web 2.0″ is supposed to be. All sites should be designed to work in any browser, without descrimination. I found a site which explains this better, and I actually link to it at the bottom of my page. I highly suggest you read it – AnyBrowser.org.
Don’t use too many CSS/script hacks, most of the time it’s an IE-only problem!
A lot of times I’ll encounter a problem where IE (what else) won’t do something right, but works in every other browser. People will come up with a lot of silly over-the-top hacks to get it to do the same thing in IE, but to me it seems like too much work. If you’re still using IE5, you need to understand that it is outdated and unsecure. I have a transparent PNG of me on the top of my site, but in IE 5 and 6, IE doesn’t understand transparency in PNG images and shows a huge white box around the image. I found a few hacks, but then I asked myself, “is it better to make a hack so people on older browsers can see this, but then have my code possibly not be valid XHTML, or should I just remove it?”. Since that image is not an essential part of my design (purely asthetic), I opted to remove it only for IE 5 and 6. How? Simple.
There’s a special code you can use that will only work on a Windows machine, and it must be placed in the page itself, not the CSS file, and should be inside the <head> </head> tags. The code is as follows:
<!–[if IE 5]> <style type=”text/css”> #nick_top { display: none; } </style> <![endif]–>
Of course you can change the version of IE to whatever you want. All this does is see that the user is on IE 5, and hides the entire nick_top division.
I hope this helps my fellow web designers! Part 2 is coming in the next few weeks.
genzoeri
August 12th, 2008
“There’s a special code you can use that will only work on a Windows machine, and it must be placed in the page itself, not the CSS file. The code is as follows:”,
where do you put the code ??
Nick
August 12th, 2008
Hi!
I updated the post to tell you where the CSS should go, but it needs to be in between the tags.
cryo
August 21st, 2008
screw trans png. i have firefox and it works great, but a simple table would suffice just fine.
nick
August 22nd, 2008
What do you mean by using a table?
I actually had it use a GIF if it was an older IE but then decided to just take it away because I think GIF’s look terrible for headers. For little buttons and such they’re fine, but not headers.
Tabris Chen
September 2nd, 2008
Great post! Although your last two points seem to contradict each other, but I understand what you mean. Web design is a lot harder these days, but also more exciting, because there are so many good designers and excellent resources.