Top 50 Blog Posts on Usability, Web Design & Development Resources & Cheat Sheets of 2008

Posted Wednesday, 11 February 2009 by Sverre Sjøthun in Design, Inspiration, Technology, Trends, Photoshop
Designing a website is so much more than just making it look pretty. The bigger the site, the more complex the task grows, and it compasses so many disciplines you'll need a team of specialists for the really big projects. Even if you're working on a small business website, there are still a number of areas to cover – here are some of the best articles from 2008 to help you on your way.

HTML & CSS

12 Principles For Keeping Your Code Clean

Our friends over at Smashing Magazine created a list with 12 solid principles for keeping your code clean: "A house is only as strong as its foundation, right? The advantages of clean, semantic HTML are many, yet so many websites suffer from poorly written markup."

How HTML 5 Is Already Changing the Web

HTML 5 represents the biggest leap forward in web standards in almost a decade. Unlike the specifications that came before it, HTML 5 is not merely intended to present content to a web browser. Its goal is to bring the web into maturity as a full-fledged application platform — a level playing field where video, sound, images, animations, and full interactivity with your computer are all standardized.

23 Cheat Sheets for Front-end Web Developers

Cheat sheets are helpful to have around because they allow you to quickly remember code syntax and see related concepts visually. Additionally, they’re nice decorative pieces for your office.

30 Exceptional CSS Techniques and Examples

In this article, I’ve pieced together 30 excellent CSS techniques and examples that showcases the capabilities and robustness of CSS. You’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more - all using only CSS and HTML.

Build custom templates for your data-driven Web sites

Most developers dread dealing with HTML tables and cells to build their Web sites. For one thing, tables make it difficult to modify the site later or to change its appearance. Discover some basic techniques for writing Web sites that you can later re-skin by using templates during the site's initial creation. Also, learn why you should use data-driven techniques for your own Web sites.

Resetting Your Styles with CSS Reset

This is the first part of a series of articles that will discuss a particular CSS best practice or tip. I’ll be covering a mixture of topics that deals with CSS best practices, performance optimization, and tips and tricks to improve your workflow.

21 ways to streamline your CSS

These days, CSS development is a complex process. You may be working on sites with large CSS files, multiple developers, and long development timelines. The more complex your CSS files become, the more difficult it is to work with them. This article will present some tips and tricks for keeping your CSS files organized and easy to work with.

Are You Making These 10 CSS Mistakes?

Working with CSS can seem like a constant battle. Browsers are always changing they way they read the code, and it seems that there are lots of tiny little CSS "gotchas". While it's an incredibly powerful language, it can easily be used incorrectly, which will doom your development to a lifetime of imperfections.

Using CSS to Fix Anything: 20+ Common Bugs and Fixes

Without a doubt, a logical and structured layout is the best way to go. Not only because your layout varies between browsers, but also because CSS has a lot of ways to position every element you have. Today we wanted to share with you some quick tips on how to avoid easy pitfalls when creating your CSS layout.

Andy Budd's list of Well Designed CSS Sites

Just a very long list of well crafted sites, compiled by one of the driving forces in contemporary standards based web design, with minimal comments to indicate why Andy thought they deserved a mention. Get a cup of tea and start at the top...

<Homer>Mmm...CSS....</Homer>

How could we possibly resist - Here's Román Cortés' Homer, animated to show the structure. if this doesn't look right for you, it may be that you are on Linux and don't have the Verdana font. You can install it from the msttcorefonts package.

UI Design & Usability

I simply cannot stress too much how important good usability is. Though I find it very narrow minded of certain Usability/UX specialists to discount SEO, if you’re trying to sell a product or a service on your website, there is absolutely no point in tons of traffic from SEO or any other form of internet marketing if this traffic doesn’t convert into customers at some point.

You need a website that is able to guide your visitors to where you want them to go, and do what you want them to do. To do that, you need a website that is exceptionally easy to understand for your potential customers. So here we go:

10 Principles Of Effective Web Design

Smashing Magazine does it again with this article summarizing the basics of great (smart) web design. Always good to remember the basics for the pros out there and a great intro for everyone else.

9 Essential Principles for Good Web Design

Web design can be deceptively difficult, as it involves achieving a design that is both usable and pleasing, delivers information and builds brand, is technically sound and visually coherent.

The ultimate guide to testing your website

Perhaps "ultimate" is a rather bold statement from the authors side, but there are definitely a few good tips in this article about reviewing your websites usability. After so many shoddy sites, pop-up windows and forced registrations, the truth is that if people don't find your website easy to use, they won't come back. Worse, they'll tell their friends just how clueless you are.

Cognitive Performance Modeling - The CogTool Project

CogTool is a prototyping tool with a difference. Quickly mock-up designs in a storyboard, then demonstrate how to do tasks and CogTool runs an underlying cognitive engine to make predictions of task performance time for a skilled user. Use CogTool to benchmark competitors' products, or your own earlier versions, to be sure that your design will be more efficient for skilled users (one measure of value to your users). CogTool does not replace user testing, but it brings a complementary analytic technique to the UI design toolbox.

14 free tools that reveal why people abandon your website

Here’s a big problem with web design: If you want to make your website better at turning visitors into customers (or subscribers), you need to understand why most of your visitors are leaving! Here are 14 free tools that show you the when, where, why and how.

Userfly: Usability From Your Actual Users

Chris Estreich, a senior engineer at classifieds site Oodle today soft-launched a new site aimed at web developers called Userfly. Using JavaScript, Userfly captures and records browsing data from your visitors and lets you plat it back as a movie later. The site is really rough — this is a very beta release — and probably isn’t quite ready for any press coverage, but I was so impressed by the demo (and had a lot of fun playing with it), that I couldn’t resist.

10 Useful Techniques To Improve Your User Interface Designs

With usability, it is frequently the little details that let down an otherwise flawlessly constructed site. This article focusses on how attention to attention to button design and wording, contrast, color and spacing can help you craft such details to perfection.

Let your hyperlinks shine

Hyperlinks are what holds the web together. Without links, the web would not be a web. An important part of good web site design is the visual treatment of your hyperlinks. You’ll be doing your users a favour by making your hyperlinks instantly noticeable.

10 Usability Tips for Web Designers

A common misconception about usability amongst web companies is that usability is expensive. Yes, there are multi-national companies that spend thousands of dollars on usability tests and research, but for an everyday company usability is achievable without the knowledge of usability experts or without expensive equipment for testing.

5 Ways to Get Usability Testing on the Cheap

Usability testing is a good idea for any new web site. Increasing the usability of your web site is a good idea because it will increase visitor satisfaction, which in turn increases sales and user loyalty. On the business savings side, usability testing can also save you money in development, maintenance, and support costs. Unfortunately, traditional usability tests is pricey — it can cost up to tens of thousands of dollars to run a usability test.

Silverback

Highly anticipated usability testing suite 'for the rest of us' by the Clearleft team, launched in July '08. The beauty of Silverback is that it is conceived to be ready to use straight out of the box and thus radically lower the threshold for anyone who's been putting off usability testing because of cost or complexity.

Web Design

Goals of the Re-Design Process

Re-designing a website is more than just giving it an improved new look. The successes and shortcomings of the existing site are invaluable in knowing how to truly improve the site and make the re-design worth the time, effort, and cost.

2008 Web 2.0 Awards

After scouring the web for Web 2.0 sites both new and old, we developed a "short list" of over three-hundred sites in forty-one categories. From there, we had some of the web's best bloggers, entrepreneurs and business people vote on winners, narrowing the field to 174 place-getters and Honorable Mentions.

Ranking 80 of the Top CSS Galleries

Web design and CSS galleries are a great source of inspiration for designers, and they are also an outstanding resource for designers to get exposure for their work. Getting a site featured in some of the most popular galleries can bring thousands of visitors and some valuable inbound links.

50 Beautifully Dark Web Designs

Selecting colors for a site is one of the most crucial parts of web design. The color palette can evoke certain types of emotions in a user and sets the tone for the user’s experience while perusing the site. Websites with dark colors can represent "non-mainstream", "elite", and "unconventional".  In this collection, you’ll find some of the best dark-themed web designs.

Basecamp Changed My Design Process

The last few months I have been experimenting with Basecamp Project Management and how it can help with my work flow, my findings; its changed my design process forever, improving communication with my clients and allowing me more easily run multiple design projects.

25 Exciting Redesigned Logos of 2008

Like every year, 2008 also witnessed redesigned versions of many company logos; some were for the better while some turned out to be hopeless. Here are some of the major re-designs of the year and remember I do not claim them to be the best redesigns, so watch them carefully and feel free to give your word. Let’s get started…

45 Photoshop Tutorial Sites

Adobe Photoshop is the most popular program, when it comes to graphic design. Great tutorials always become handy - You can look how other designers get his job done, and there are tons of different ways how to do the same job.

100 Ajax Tutorials and Resources

Ajax techniques have revolutionised the way websites look and behave. Here's a comprehensive roundup of the best Ajax Tutorials, libraries and resources.

80+ AJAX-Solutions For Professional Coding

A list of over 90 useful AJAX-based techniques you should always have ready to hand developing AJAX-based web-applications. Auto-completion, instant field editing, menus, calendars, interactive elements, visual effects, animation, basic javascripts, as well as an extensive developer’s suite should give you a useful and powerful toolbox you can use every day, without a need to go through hundreds of AJAX-related bookmarks.

48+ Greatest Adobe Photoshop Keyboard Shortcuts

Using keyboard shortcuts in your workflow really helps to build up working speed. There are lots of keyboard shortcuts in Photoshop and no way you can remember them all, but this list includes those that you would like to use time and time again.

50 Stunning Examples of a great redesign: My Top Picks

A redesign can be worth its weight in gold if you get it right. There is a thin line between freshening up your design, and taking a step backwards with a redesign. Sometimes a redesign can be subtle and simple, and other times it can be a huge re-vamp of a company and it’s goals. Here’s a look at some of my favourite re-designs in no particular order.

21 Factors to Consider Before a Redesign

Redesigning a website can be a very involved process, and it is important to properly plan and consider the necessary factors that will make or break the redesign. Here is a quick look at 21 factors that you should be contemplated

Web Design Strategy Step-by-Step

A Web design strategy pays off for you and your organization. Whether your site is up and running or you are composing the blueprint for a new one – having a design strategy helps you make sure your site tells your story.

Web Trends Map

This third revision of the web trends map by Information Architects Japan has now duly made its round of the blogosphere. The map pins down nearly 300 of the most successful and influential websites to the greater Tokyo area train map. Different train lines correspond to different web trends such as innovation, news, social networks, and so on.

2008 Design Trends

And now, let's remind ourselves of what the web looked like back in '08...

Design Basics & Finishing Touches

960 Grid system

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Using a Background Image Grid to Lay Out Your Web Site

A nifty and incredibly useful trick devised predominantly to aid structuring and aligning elements on your site, but also highly useful for detecting and eliminating variations in browser display.

Thinking Outside the Grid

Thought provoking and informative article about structuring web pages by autor and web standards advocate Molly E. Holzschlag.

Typetester

Typetester is an online application designed for fast and simple test-driving of online typography. Compare, contrast and fine-tune your type without typing a single line of code. Export your final text styles as ready-to-use CSS.

40+ Excellent Freefonts For Professional Design

Another impressive resource from Smashing Magazine, this list presents free fonts that you would actually want to use.

Common fonts to all versions of Windows & Mac equivalents

Despite frequent and significant developments that have changed the face of the web in recent years, the ubiquitous 'safe list' of fonts is still going strong, and paying attention to it is still essential in order to ensure a consistent user experience.

sIFR Lite

If you simply refuse to let the ol' 'safe list' of system fonts cramp your style, it may be time to look at sIRF (Scalable Inman Flash Replacement) techniques. This "lite" version of sIFR is using a more object-oriented approach, making it a bit easier to read, and more intuitive to use.

Font Burner

Font Burner is the easiest way to add great fonts to your website. Just pick one of over 1000 quality fonts, add a chunk of code to your site, then sit back and admire your beautiful typography.

Typeface.js

An alternative to the usual sifr techniques, the typeface.js Javascript library does not rely on images or flash to render custom fonts, but gets away with Javascript only.

Hex Color Chart

Basic, yet oh so useful color chart, giving you the HEX equivalent of any color you want.

Colorlovers

If you need some inspiration to develop a juicy color scheme for your website (or anything else for that matter), you could do worse than making Colorlovers your next port of call. We particularly like the Website Color Trends section, which showcases and predicts the latest color trends from across the web.

Adobe Kuler

With Adobe's flash-driven Kuler application you can experiment quickly with color variations and browse thousands of themes from the Kuler community. Now with flickr and Creative Suite 4 integration.

+3 Bonus: What's Next?

30 Web Trends for 2009 from SEOptimise

Web Trends 2009 from baekdal.com

2009 Web Predictions from ReadWriteWeb



Daily Free Stock Photo The Weekly Free Stock Image
We are giving away a free, high quality photo every week! Get Your Image

Comments:

By Valerie Shipbaugh on Wednesday, 11 February 2009 7:30 PM
A great list and a resource that I can pass on. I like the top CSS galleries.
By Ali on Thursday, 12 February 2009 12:24 PM
oops , a huge list, will definitely require 1 full day to give a glance. thanks for list .
WOW!!
By DanMan on Thursday, 12 February 2009 1:47 PM
Some real nuggets of gold in that list - thanks a LOT!
Great!
By grazia on Sunday, 15 February 2009 7:04 PM
That is a list!
Great resource for my husband website http://networkeritalia.com/
He really thanks you.
Great Stuff
By Sam on Sunday, 22 February 2009 4:22 PM
Great article and very usefull tips!! Thanks so much. Hope it will continue.

you can get interesting post about web usability and technology on my Web Usability Blog.
Web Design & Development Resources
By Anisha on Tuesday, 3 March 2009 12:51 PM
I am a computer engineer, hardware is my thing, i've recently relocated to a developing country and quickly realised that i'll make more money developing web sites for companies and individuals, is it something i can learn by myself using books and resources on the internet or do i need to go back to school. I want to be very good at it and give my customers the best services they can get even if they hired an experienced web developer
By ssjothun on Thursday, 5 March 2009 3:40 PM
Anisha - I'm the internet marketing director here at Crestock, and it was pure coincidence that I started doing what I'm doing to be honest. I did take a 6 moth evening course in ecommerce many years ago, but that's as much education I have on the topic: I've basically learned everything I know by reading blogs and websites.

Yes, it takes some serious effort and discipline, but to me, I have the greatest job in the whole world, and has definitely been worth it.

You can read more about how it all began right here http://www.crestock.com/blog/interviews/meeting-the-staff-sverre-139.aspx
Great web design resources
By wakensys web design chicago on Monday, 23 March 2009 3:16 AM
Really great stuff thanx for sharing...

Add your comment:

Further comments have been disabled on this post.