By 
Jeff Siarto is a User Experience and Web Designer living in Chicago. He is a co-author of Head First Web Design and writes about design and technology at his blog: siarto.com.
1. Simplify Everything
Remove unnecessary and extraneous content
People come to your website to find information. It might be to look at your portfolio, read about a recent vacation or find out how to get in touch with you. Your job as a web designer is to make this information accessible and easy to find. The easiest way to help people find the important content is to get rid of the stuff that seems trivial and non-essential. The next time you make changes to your homepage, try taking things out instead of adding. Maybe that Facebook status widget or your most recent 100 Tweets aren't as essential to the core content of your site as you thought. Think about the main content areas of your site and concentrate on making them better before even thinking about adding more.
Downsize your markup
Just as content can become cluttered and unorganized, so can your site's underlying markup. In a perfect world, the HTML that your site's built on would be an exact semantic representation of your content. Unfortunately, we don't live in a perfect world and HTML (and it's variant XHTML) aren't perfect markup languages. With that in mind, it's important to try and make your markup as lean as possible. Is that extra container <div> really necessary? Do these items need to be in a list, or will a paragraph work just as well? Am I using tables for tabular data and not layout? Go through your markup — and just like you did with your page content — remove anything that isn't essential to the layout and semantics of your site. Organizing that tag soup will not only speed up your site, but also reduce browser inconsistencies and give clearer meaning to your content.
Reduce your site's download footprint
Believe it or not, not everyone is connecting to the Internet over a fast cable modem or DSL line. In areas where broadband is limited, some users still connect with dial-up, slow DSL or even satellite. These users can account for 5 to 15% of your total visitors and their experience on your site is just as important as those connecting from a super-fast campus LAN. Knowing that, files sizes and download times should always be considered when designing new pages or adding content and features to existing ones. Make sure you are using proper image compression for the given image type. Icons, fonts and logos typically perform best as GIFs while photographic images usually look best saved as JPEGs. Adjust the quality of your images to offer the best resolution and detail in the smallest possible file size. If you use Photoshop, the Save for Web feature will tell you how long a particular image will take to download at a given speed. Make note of these speeds so you have an idea of how long the site as a whole will take to download. In addition, using your browsers activity menu or web inspector (Safari/Webkit) can also help glean vital information on download speed and file size — often showing you exactly where you can expect bottle necks. Finally, see #1 and #2 above for ways to make your files smaller and faster.
2. Learn About the People and Robots that Visit Your Pages
Watch someone else use your website
Good websites are designed for their intended audience. Most of the time, this isn't you. So it really doesn't make much sense for you to be the only person that tests the design and layout of your site. Now, it might not be easy to find a person that best exemplifies your intended audience, or you may not even know who your intended audience is. The point is that you need to find someone other than yourself or your mom (she'll be too nice) to give your pages a thorough "click-through" while you observe their actions and behaviors. So, find a friend or neighbor and ask them if you could watch them click around on your site. Give them a few tasks like finding a particular article or locating your contact information and just see what happens. How long does it take them to find the information? Did they get lost? Were they frustrated? You'll be surprised by the results and it will likely make you think differently about the design and content choices you've made. Remember, you built the site and know where everything is located and how to get there. Your users don't have that luxury.
Analytics can tell you more than just page hits
Most people look at programs like Google Analytics, Mint and AWStats as tools for keeping track of how may people visit their site on a daily, weekly, monthly and yearly basis. While this is true, they offer information that is exponentially more useful than how many unique visitors you had last December. When a visitor accesses one of your pages, they leave behind a wealth of information that can help you make their experience more enjoyable. Most analytics programs will track browser versions, screen size, connection speed, time spent on the site, pages clicked to and where they came from. This information is gold. Knowing all these metrics will allow you to make changes to your site that really improve the user experience. For example, if 80% of your visitors have a screen resolution of 800x600 but your site was built using a 1024x768 template — more than 3/4 of your visitors are receiving a sub-par experience. Fixing that issue will not only make users happier with your site, but probably keep them there longer and coming back more in the future.
3. Validate Your Hard Work
Use the W3C Markup Validation tools to check your pages
One of the easiest things you can do to improve your website is to validate your markup and stylesheets. All this means is running your code through a form provided by the W3C that makes sure your HTML and CSS meet the required specification. The validator will automatically look at your DOCTYPE and then generate a report either saying that your code is valid or giving you a list of errors and recommended fixes. This is a great way to catch tags that you may have forgotten to close and also a good way to make sure you are using the elements properly (like not putting an <h1> inside of a <p>). Validating will help make many of the steps above easier and will also help you learn more about HTML and XHMTL along the way.
This is by no means an exhaustive list of ways to improve your website. Great web design is a process that requires skills in many different areas and full books have been written on just small segments of web design. Your best bet is to keep things as simple as possible and really think about the people that are going to be using and interacting with your site. Knowing these two things will make your pages better than 90% of the content on the web and you'll have some of the happiest users around.
Share:
Hi Jeff
I’ve just finished “Head First HTML with CSS & XHTML” a marvelous and easy learning tool. The downloaded lessons gave well structured, easy to read code for me to work with.
I am now studying ‘Head First Web Design” which, so far, has also been a marvelous and easy learning tool. That is, up till chapter three. I opened the downloaded code and found complete garble. Filled with hollow squares. Totally unreadable. I checked other lessons and found the same thing in both HTML and CSS. The book its self shows beautifully structured code that I can read, but the downloaded code is useless to me.
Is there a way to get code I can read, so I can continue on?
Thanks
Benjamin
@Benjamin
This issue was addressed in the Head First forums: http://forums.oreilly.com/content/Head-First-Web-Design/4022/How-To-Ungarbled-The-Style-Sheets/
Basically, you need to get a text editor that's made for writing code--not just a plain text application like Notepad or TextEdit. If you're still experiencing problems, post a comment on the Forum--both Ethan and I check it as often as possible.