Go ahead and bookmark this page right now because below you’ll find the most used resources of a web design extraordinaire.
A note from Lauren: Several of you have been asking for more articles and information on web design. I don’t have a whole lot of experience in that area, though it interests me; my expertise lies in the print side of design. But you probably all know by now that my husband , Jerrol, knows a ton about web design! I talk about him all the time in the comments! I asked him if he would share some of his favorite resources that he use on a regular basis for website design and development. They cover the most important aspects of web design, from CSS to SEO to analytics.
CSS/Front End Programming Tools and Resources
Web Developer Toolbar is a Firefox plug-in that gives the front end programmer an enormous amount of tools and resources useful to building, testing, and troubleshooting web pages. You can live edit HTML/CSS, outline, display or breakdown layout elements; validate doc types, and much much more.
Another Firefox plug-in, IE Tab lets you use an IE browser window in a Firefox tabbed window. Makes capability testing infinitely easier for every designer’s least favorite browser (except for maybe Netscape).
CSS Play is an excellent website dedicated to all things CSS. This is a great place to learn what CSS is capable of and to find ideas and solutions to all kinds of CSS design considerations and problems. Subjects include: CSS layouts, flyout menus, cool layout hacks and tricks, compatibility solutions for different browsers, etc.
Smashing Magazine: 53 CSS-Techniques You Couldn’t Live Without deals with cool design elements using CSS. Some of the things you can learn are: how to develop CSS only menus, CSS drop shadows and rounded corners, preloading images using CSS and more. There are so many great ideas here that I access this article frequently.
Smashing Magazine: 70 Expert Ideas For Better CSS Coding covers a wide range of CSS tips and techniques to help you code faster and more efficiently. This article contains everything from how to organize and set up your document, default styling examples for layout and typography, best practices for using CSS, etc. This article will save you an enormous amount of time.
Watchfire Accessibility Tool will scan a URL you enter and report on how well it complies to AAA/WCAG/501 accessibility guidelines. This is a great and easy way to learn how to make your site more accessible to those with disabilities. Extra tip: search engines see your websites in almost the same way a screen reader would, so accessibility and search engine optimization go hand in hand (this is always how I sell the importance of accessibility to my clients).
SEO
15 Minute SEO List is the ultimate SEO resource for everyone, those who know everything there is to know about SEO and for those who don’t know anything at all. This page has a detailed and comprehensive list of the factors that search engines look for in easy to understand language. Definitely worth your 15 minutes.
Google Keyword Tool lets you see what people are actually searching for and the popularity of keywords and phrase. Invaluable for researching SEO terms before you develop a webpage. Extra tip: Doing a little keyword research before you develop a webpage or blog post can mean all the difference between a page that drives a lot of traffic to your website and one that doesn’t drive any. Make sure you align your page’s content(such as page title and header tags) to what terms and phrases people are actually searching for.
Google webmaster tools gives a webmaster an enormous amount of information and feedback about their website as seen by the great search engine itself. Items such as: Delisting/penalties/duplicate content notifications, top search ranking terms, crawling errors, number of backlinks, crawl frequency, and more.
Analytics
If there’s a reason Google has 65% market share and climbing, it’s because they’re always providing awesome tools to web masters at no cost.
Google Analytics is a FREE analytics package. Simply place a piece of code on each page of your website and voila! Now you can see comprehensive information about your website (a quick note from Lauren: for you bloggers, this code is best place in the footer—probably called footer.php—so that it will show up on all your pages). How many visitors, how long people stay, your top ranking keyword terms, what sites people are coming to your site from and your most popular content are just a few of the things you’ll learn. On the commercial side, analytics is invaluable for testing and improving your website.
Nifty Trick: Be sure to check out the Content > ‘Site Overlay’ tab, which will show you a live view of your website with analytics data overlaid on top. Incredibly useful for analyzing traffic patterns (from Lauren: also be sure to filter out your own traffic to the site by blocking your IP. You can find out your IP at whatismyip.com).
Usability
Jakob Nielsen pretty much wrote the book on usability, and his site, Alertbox, is absolutely jam packed with valuable information about how to make your site easier and more intuitive for users.
For those not familiar with the field, this site will completely rewire your approach to web design (it certainly did for me). For those who are running commercial sites that either generate sales or leads, this site is a mint with which you can immediately start printing money. I was able to make some basic usability enhancements to my companies’ website which resulted in a 50% conversion rate increase literally overnight (worth potentially millions of dollars in sales).
What nifty tools and resources do you use to help you build websites? Are any of these new to you?
Like what you’ve read? Want more tools and resource lists like this? Subscribe to Creative Curio and never miss another article! You can subscribe via email, too.
Man, this is awesome. Sure, I know some of them but there also are a lot I will be using next time.
I personally can’t handle Jacob Nielsen, perhaps he was a guru in the 90’s, but today he has lost he’s grip. Every time he says something, I usually like to the opposite. I don’t look at web design much differently from any other design subject. Typography and whitespace are the two key most important aspects and haven’t changed alot since Gutenberg. I really do hate when some people try to tell me that web is a different media and shouldn’t be compared to books or magazines.
I know that you Lauren use Windows, but for Mac users I gotta drop some goodies, since Safari/webkit outperform Firefox on most aspects and Firefox should only be a test browser or used for some handy plugins.
For a Javascript debugger, Firefox got “firebug”, which is essential as far as I have heard from JS developer.
http://pimpmysafari.com/bookmarklets/
http://www.macosxhints.com/article.php?story=2007061303320554
Bookmarklets is very clever, as you soon find out and the second link, opens a web inspector, which have a few bugs, but otherwise quit usefull.
Usability is just another tool to in a web designer’s arsenal. While I mostly agree with Nielson’s approach to interface design, he tends to downplay the importance of the visual component which I disagree with: both should be equally as important.
I do disagree with the statement that web design is the same as other design mediums. While the vast majority of design principles apply, user behavior adds an entirely different dimension to web design work. I’ve seen and conducted too many user test sessions of beautifully designed websites where the user simply can’t figure out how to use critical or even basic elements of a website due to usability errors.
Kent,
So glad you found these tools useful! Make sure to bookmark the page for future reference
Esben,
Drop away! Obviously I’m no expert in Mac tools, so I appreciate you adding some stuff for our Mac cult friends out there
I think Nielsen is nothing short of extremely opinionated, but that’s what makes him sensational. He does have the usability part right, but the fact that he downplays the esthetic aspect of interface design is extremely misled. It’s wonderful that someone can use a website with ease, but are they going to remember it if the graphics are ugly, or worse, non-existent?
I think the basic design principles you mentioned (space, typography) are definitely keys to good design in any medium, but there are other aspects of user interaction, like Jerrol said, that must be taken into account if the application or website is going to serve its purpose effectively. Perhaps this side of usability is so second nature to you that you don’t notice how well you use it? :)
Lauren/Esben, I have a second thoughts re the usability vs esthetic interface design. Look at Scobleizer’s this post, which makes a lot sense in a total different way. I do agree this, one of things that will make your site success is doing it with either a very esthentic look or a very ugly face.
However, personally, I just turn around and never come back if the site is belong to the latter, no matter how good the usability is.
Great list of resources. I love finding new places to look for information and new tools to help me out.
One tool that I think deserves mentioning is the text editor Notepad++. I’ve tried using Dreamweaver and a few other programs that are geared towards designing pages, but I always go back to Notepad++ because of its simplicity and tabbed viewing.
Kent,
Thanks for that article. Just read it. This is turning into quite a design vs. usability issue isn’t it! I think that design and usability have to be on the same team for anything to be successful, though.
So your last comment there, “turn around and never come back if the site is belonging to the later” you mean that you don’t like ugly interfaces?
Jacob,
Haha, Notepad++. Love the name! Thanks for the new resource!
Did you bookmark this list?
Lauren
Yes, I don’t like the ugly design. I may be doing it in purpose for some of the sites but no I don’t buy ugly design and can’t really stand for it.
And it is also why I subscribed your feed right after I came by your site the other day. :)
I thought about posting several hundred more resources here, but that might not be the best use of anyone’s time. So here are a few links that I find most helpful:
http://www.reinvigorate.net/
Reinvigorate: A non-Google option for page analytics. I use it on my own site and really like it. (It’s free, but in Beta.)
http://www.aptana.com/studio
Aptana Studio: Basically a web-developer’s text editor. There’s a free community edition. It’s a little bloated, but packed full of features. (For a light-weight, slick, non-free editor: http://www.e-texteditor.com/. $35.)
http://www.oswd.org/
Open source web designs. A great starting point for inspiration and code-borrowing.
http://www.alistapart.com/
A List Apart: The latest and greatest semantically sound web practices.
http://developer.yahoo.com/yui/
Yahoo User Interface Library: free, open source javascript widgets.
http://www.opensourcecms.com/
Open source Content Management Systems. For me, the web is now as much about managing content as it is about presenting it. This site has demos and info about most of the open source CMSs out there.
http://www.loc.gov/rr/print/catalog.html
U.S. Library of Congress Prints and Photographs Online Catalog. Tons of old and interesting photos for use!
http://www.designfloat.com/
Design Float: A cool Digg-type news site for designers.
Kent,
Yes, as much as people may want to be in the Usability Rules! camp, it just doesn’t work that way in the real world (and neither does the Design Only! side). I hope you mean you subscribed because you like the way my redesign is heading!
Alec,
Wow, these are very cool, I especially like the U.S. Library of Congress photo catalog. I’m a sucker for vintage stuff like that! We should add snipplr, too! Wasn’t it you who told me about that? And A List Apart! How could we forget. Thanks :D
While I appreciate your extensive list, Askismet didn’t like it very much
Great list Alec, the Library of Congress is a real winner. Here are some of my favorite places to go for inspiration:
http://www.designmeltdown.com
Huge library of great website designs
http://www.smashingmagazine.com/
They compile the best of the web in a variety of subjects. See the 2 articles I referenced in the blog post for examples of the great stuff they crank out.
http://www.csszengarden.com/
The site that helped kick off the CSS revolution. Some amazing displays of both creative and technical skill.
Ditto on http://alistapart.com/, great articles even though they only post once a month
Jacob Nielsen is dead! ohh now im ranting!
Design a webpage is alot like making a book!
A book is judge by its content and not the front cover. Content is everything, otherwise Lauren wouldn’t have any visitors (sorry Lauren, Im cheering for a new design) and the same would go for wikipedia, which have a interface created in Gods wrath. But that doesn’t reflect on the content or the users, to such extent that it doesn’t get visted.
Content is everything, but presentation helps your users and thats it.
I always says to my clients, that its not about the colour for your websites or even photos, that makes it sell. If you don’t have anything on your mind, then it doesn’t matter, something I often see in personalized flash based webpages.
I always look at newspapers, magazines and books for inspiration for layout and the color ‘white’ (everything is about white, really)
@Jacob Carter
What do you do with DreamWeaver? I mean shouldn’t Adobe squeezed that app a long time ago?
sorry for all my weird spelling
@Lauren
I have a mental note to bookmark as soon as I get to my personal computer!
@Esben
For some reason I know alot of people who design their websites using DreamWeaver. I completely agree that the program should have been squashed a while back, but it seems to be pretty popular in college. I even had a class where they wanted us to learn the program (I was stubborn and just used Notepad++). The only good thing that I can see coming out of DreamWeaver is the organization aspect o f it. And this is only a plus if you have alot of issues with organizing your website.
@Jacob Carter
Ohh, well yeah I do understand, but it is not surprising that educational sites use DW.. some design schools in Denmark use Ps for everything.
I always associate Dw with “wannabe” web designer, because its build around a UI they already are familiar with.
I only use CMS so a simpel texteditor with snippets is enough for me. I can see that Notepad ++ is a win thingy, but its open source, so I’ll take your word on it :-)
Great article!
You missed one of the best ones though! I found out about Firebug from a friend not that long ago. I haven’t used it to its full extent yet, but I definitely love what I’ve used so far.
Great list, Jerrol and Lauren. Although I kept waiting for the Firebug to show up on this list and can’t believe you’ve missed to mention it. Don’t you use it on a daily basis, Jerrol, when designing web sites? I even prefer it to Web developers toolbar, though I have both installed and use the toolbar frequently, but not as much as Firebug.
Alec, I was about to mention OpenCMS site, but you beat me on that
As for the Nielsen debate: I do agree that not everything that he writes about is valid for the today’s state of Web. I tend to take some of his suggestions with a grain of salt, and keep waiting for him to keep up with the Web of the 21st century and finally spruce up his site a bit, though I doubt it’ll ever happen. ;-)
This is one of those great posts that should be referenced in an article about why you can’t buy a website for peanuts.
There’s so much involved in a web project, sometimes it can be overwhelming. One step at a time, that’s what I tell myself.
Great list!
Two other useful links:
http://www.forwebdesigners.com/
Lists of different resources: free photos, icons, fonts, various tutorials.
http://cloford.com/resources/colours/500col.htm
500 colours with rgb and hexadecimal values.
We use a proprietary CMS at my work for static sites and I have developers to do dynamic sites for me in .net; but I do develop the base templates in Dreamweaver. While I agree with all of DW’s limitations and frustrations, snippet editors simply can’t provide the level of project management and code diversity that DW does, especially when you get into finicky web projects like email newsletters, managing large numbers of websites and projects that require multiple designers to be working simultaneously. Now that Adobe is working on it, I have high hopes for the next release.
…Just installed Firebug and it looks pretty neat. I’m currently building a big website so I’m sure I’ll be able to put it through its paces over the next few weeks. Interestingly, I find I need debugging tools less and less as I master the irritations of CSS based design.
@David
Totally agree, I’m sure everyone has some great stories. I love it when clients want a beautifully designed top ranking high performing cms driven website for cheap. This has also gotten particularly irritating now that I’ve started to move into SEO. If I have to hear, “Why aren’t we #1 for -insert phase-” one more time…
Jerrol,
I think the comments are starting to get more valuable than the article! Maybe you can write another article about debugging software later on? Firebug vs. Web Dev or something?
I like Design Meltdown, too. Thanks for adding to the list
Esben,
You don’t like Nielsen, yet it sounds like you agree with all his principles! Did I miss something? hehe, no offense about the current theme; I’ve kept it longer than I intended.
Jacob,
I like the color coding in Dreamweaver, but obviously the WYSIWYG editor is worthless with CSS based layout (which everyone should be using by now). Hopefully the next version will get it right.
Nick,
Firebug, yes, I know that one and have it installed. And now Jerrol does, too! Thanks for the reminder.
Vivien (ib),
I think his most recent stuff is valid. Of course his articles from 1996 are more than out of date, but he does know what he’s talking about for today’s web. I think many people (myself included until I talked with Jerrol about it last night) think that because Nielsen doesn’t address design very much that he is against it. I don’t think that’s true, he just doesn’t talk about the graphics very much unless they are bad. But yes, take what he says with a grain of salt and remember that he’s being controversial to gain attention, just like most “experts.”
David,
Hehe, you’re welcome to refer clients over here! It can be overwhelming sometimes, I definitely agree. That’s why I network as much as possible with other web designers and especially developers (since they know many things I don’t).
Barbara,
Thanks for those links!
Great links. Love the site. Nice work by both you and your husband.
I’m new to graphic design, I’m a programmer really, but I do like to draw so I’ve been dabbling in photoshop playing with the features and following tutorials. Sites like yours are great help.
Thanks,
JW