BolducPress, a web design blog » Design

10 mistakes beginners make when writing HTML

admin — Mon, 08 Feb 2010 04:01:20 +0000

I’ll build it in HTML first, and then design it in Photoshop

Many beginners are so excited about HTML that they completely neglect the design phase and go straight to their text editor. DON’T DO THIS! At least grab a paper and pencil and jot down some rough sketches! If you go straight to HTML you will lose sight of the bigger picture and the overall design will suffer as a result.

I’ll just export it from Photoshop

Photoshop is a great tool for designing interfaces but you should NEVER rely on it to generate your HTML. I don’t care what version of Photoshop you own, it simply can’t create the lean, standards based code that you can by hand.

The only time I would recommend using Photoshop’s HTML feature is if you want to create a semi-usable website for your client as a prototype.

I don’t know how to code, I’ll just use the design view

No no no no no!

There’s no way around it, if you want to produce quality HTML designs you’re going to have to use the code view. In fact, I would just recommend turning off design view entirely because they are notoriously unreliable. Do yourself a favor, code it by hand and use the browser to see your changes.

Tables are great for layouts!

There is no excuse for using tables for your layouts. Let me say that again, there is no excuse for using tables for your layouts!

Tables were the norm about 10 to 12 years ago and even then they were on their way out! I can’t tell you how much it irks me to see “modern” websites using that old method, there’s absolutely no reason for it. Instead, use DIVS and CSS to make your layouts, they download faster and are more accessible.

It looks fine, I don’t need to close that tag.

Sometimes I see people using just one

tag. Though it might look “OK” in your development browser it can cause unpredictable behavior in your website that would be hard to fix if you didn’t know what to look for. Just do yourself a favor and close that damn tag!

Tag attributes are handy!

Tag attributes such as and

used to be the only way to handle fonts and alignment but there are much better ways now and there’s no reason to use those anymore.

DOCTYPE?

Gone are the days where all you had to do was put in the text editor. New browsers are more complicated and can handle more types of information. As a result you need to tell it how you want to display your content. Is it HTML 4? XHTML? strict? transitional? The browser can’t guess for you!

Character what?

Do you know about character encoding? Have you heard of UTF-8 and ISO-8859-1? Do you know what they do?

Tags can go anywhere inside the body tag

Don’t confuse an inline element with a block element! EVER! No that

tag won’t fit nicely in your tag. And don’t cheat by declaring all your span tags a block element in your CSS either.

CSS is a great video game!

There is something wrong (and scary) about this statement. Please please please, don’t confuse Counter Strike Source with Cascading Style Sheets! If you don’t know what CSS is go out and get a book or give up entirely!

The about page in theory

admin — Mon, 14 Dec 2009 04:01:13 +0000

What is the about page?

In essence, the about page needs to accomplish two things

Provide a context
Reinforce your brand

The ways you go about doing this can be varied but it doesn’t just mean slap in a mission statement and a photo. You can’t gain someone’s trust just by promising something.

Provide a context

What do you do?

If the home page doesn’t make it completely clear about what is it is that you do then this is your last chance to get it right. If it’s still not clear to them after having visited your about page then they will leave without thinking twice.

Be sure to explain what you as clear and as visible as possible. Preferably near the top with some supporting graphics.

Who is involved?

Users want to know who is behind the site that they are visiting. They want to know if they are dealing with a large organization or a single individual because then they can begin to form a mental picture of your company. What is another word for the mental picture of your company? Oh yeah! The BRAND!

Put a face to the company, use portraits of some of the of the key players as well as some background information about them.

Provide some background

Provide some background about your company or organization. A little bit of history about the roots of your company will a long way to humanizing your website.

Reinforce your brand

Establish trust

Users will want to know that they can trust you, especially if they’re going to be making their first transaction. If your site lacks credibility they aren’t going to share their precious credit card number with you.

Give examples that demonstrate strong qualities. Favor using concrete examples such as statistics or awards, these will go a lot further than your word alone.

Also provide quotes or testimonials. Ideally, these should be by recognizable companies or brands and at the very least be sure to have a link that goes to their site.

Explain why you’re different from others

You will need to give them compelling reasons to do what you want them to do. It’s quite a commitment for someone to sign up with your site and then place an order. Especially if it’s for the first time. You need to explain why they should sign up by demonstrating that you’re different and that what they get from you is not only different from your competition but superior.

Also give them concrete examples of why you’re different. For example, at Staples, the retail store. They offer 10% back to rewards members who purchase ink, they will also give $3 in rewards for each ink cartridge recycled. Sure, Wal-mart might sell them a little cheaper but Staples will reward customers each time they buy ink plus their ink recycling program shows that they care about the environment. It’s not surprising that they are the leading ink retailer in the United States.

Write it with users in mind

The web is a conversation between you and the user. Avoid using technical terms or legal mumbo jumbo. Save that for the terms of use and privacy policy!

When you speak to your users it should be in a semi-formal tone of voice, as if you’re having an intelligent conversation with another person.

Website templates are bad for everyone

admin — Mon, 21 Sep 2009 04:01:13 +0000

What are website templates?

Website templates are pre-built website systems that designers can use to quickly assemble a website. There are a variety of options, from static html, to complex php frameworks such as Joomla or Drupal.

Templates are undeniably useful, they’re easy to implement and makes websites much cheaper to build. It does come with some disadvantages however, which, in my opinion is enough to avoid using them all together.

They’re bad for clients

They don’t educate clients about the creative process

It’s the designer’s responsibility to educate the client about the creative process, that they are more than just pixel pushers (which a lot of clients first consider them to be). Using web templates gives clients the wrong idea because you don’t talk to them about things like branding, usability, content etc. All of which are instrumental to creating a powerful and useful design. Instead, the work becomes marginalized to simply filling the holes in the design with text and images.

Templates don’t convey a brand

Templates are intentionally meant to be generic, that way they can sell more of them. The problem with this though is that they don’t often capture the look and feel of client’s established brand. Every company has an identity even if it hasn’t been formalized. Therefore it’s very important to understand the company and convey their personality through the website. A template design, no matter how beautiful simply can’t capture their brand.

Templates aren’t built around the content

Templates are image centric, whereas custom designs are content centric. Templates are built to sell themselves, not to communicate the content. Content shouldn’t try to squeeze into a design, instead, the design should be built around the content.

They’re bad for designers.

Templates stunt creative growth

As a designer, I always learn something from each project. This creative process is vital in staying on top of your game. There are a lot of other talented designers out there that you’re competing with. You need to constantly be practicing and thinking about design. Using templates completely deprives you of that learning opportunity and hurts you in the long term.

Templates can’t go in a portfolio

As a creative person I would never put a template design in my portfolio. Even if had purchased the rights to it, it wouldn’t be ethical to put it in my portfolio and claim it as my own work.

On top of that, my reputation would be tarnished if other people learned that I don’t create my own designs. For example, let’s say a client paid me $1,000 to create a website for them. But then they learn that I didn’t actually create the design. . .

Use templates as inspiration

Templates are a great source of inspiration however. Most templates are well made and look visually appealing. So they are a great way to start thinking about design especially if you’re a beginner.

Don’t just limit yourself to templates for inspiration though, also take a look at live websites and even nature for ideas.

The value of Favicons

admin — Mon, 07 Sep 2009 04:01:39 +0000

What the heck is a Favicon?

A favicon (short for Favorites Icon) is that little 16 x 16 pixel image that you see in the address bar, tabs menu, bookmarks menu and a variety of other places.

The Favicon was introduced with Internet Explorer 4

When it came out in 1997, the favicon was only supported by Internet Explorer 4. It was installed by uploading the favicon.ico file to the root directory where it would be seen by the browser and automatically added to the favorites menu.

Improvements were soon introduced that allowed designers to indicate the location of the icon from any given page using the link tag in the HTML.

More modern browsers support other image formats (such as png and gif) but given the prevalence of Internet Explorer 6, .ico still remains the preferred format.

The advantages of the favicon

It improves usability

The favicon makes it much easier for the user to find your website in the bookmarks menu or tabs bar. Instead of reading the text they can use the icon as a clue to help speed up their search.

Compare the bookmarks on the left with the same bookmarks on the right. See how much easier it is with the favicons?

It strengthens the brand and improves user confidence

At it’s core, your favicon should reflect your brand. It should have similar color, shape and contrast to the overall look and feel of your design or brand, in particular your logo. When someone looks at your favicon on the tab bar or bookmarks menu, they immediately start to form a mental picture of your website and what to expect. The longer they are exposed to your brand, the more they will remember it.

Favicons are expected on modern, professional websites. It’s just one extra step you can take to earn your user’s trust and get them to place that order. The absence of a favicon can actually cause people to second-guess their decision. Especially the extra-cautious users.

Designing a Favicon

Use simple, bold shapes

Like in logo design, your favicon should use simple shapes such as rectangles. triangles circles etc. The silhouette should be easily recognizable and internal details should be as simple as possible.

The round shape works but all the details get lost in the resizing. Starbucks could simplify the design and make it sharper.

Targert's favicon matches the company logo, it uses two small shapes which are immediately recognizable.

Use text sparingly

Text should be avoided at all costs. If you find it necessary, try to stick to only one or two letters or numbers. More than that and it won’t be legible.

The staples push button is very recognizable, the text on the otherhand is not

McDonalds uses their iconic M symbol very effectively as their favicon.

Use a limited color palette

Gradients and diverse color choices will not hold up when it’s re-sized down to 16 x 16. You should choose at least two colors and no more than four (four is even pushing it). The colors should also be obvious, don’t use any small lines or shapes within a larger shape. Those will dissapear.

Nike only uses two colors to create their successful favicon.

Use high contrast

Your favicon should have a high contrast between the background and shape. Try to avoid using a lot of white or light grays since most browsers use this as the tab and bookmark background.

High contrast in the shape itself will also help create emphasis and make your icon more clear.

User personas and how they can improve your site

admin — Mon, 27 Jul 2009 04:01:23 +0000

What is a user persona?

A user persona is a fictionalized person who represents a large portion of your audience. A persona can have a name, a photograph, personality traits, values and more.

A user persona is not a site persona

Don’t confuse a user persona with a site persona. The site persona deals specifically with an image your website is trying to convey. A user persona on the other hand deals specifically with your target audience.

Why is a user persona useful?

A user persona makes it easier for you to connect with, and understand your target audience. It puts a face to the statistics.

Gather information about your primary audience

The first thing you need to do is collect information. It can go out and do interviews, or simply just imagine them and jot down notes. Either way, here are some of the things you should consider as you collect information.

Demographics

Collect basic demographic information to start getting a picture of your persona. You demographic information should answer the following information.

How old are they?
Are they male or female?
How much do they make?
Where do they live?

How experienced are they?

Are you targeting people who are professionals or beginners? Their skill level will affect your content. For example, if you’re creating a website for PHP programmers, you will probably be targeting an intermediate to advanced level, as opposed to targeting people learning HTML.

How technologically inclined are they?

How often does your audience use a computer, and more importantly, the internet? A 60 year old woman uses the internet differently than a 20 year old man. You need to keep this in mind as your designing your website. If they aren’t very technolocially inclined, simplicity is going to be even more important.

How will they be feeling when they visit your site?

Users may be feeling emotional as they use it. For example, let’s say a high school athlete has to undergo surgery on his knee and he wants to learn about the procedure. He is going to feel nervous about the operation and wonder if he will ever play football again. Your site will have to be reassuring and comforting to him.

How are they using your site, and where?

Will the user use your site for research or to socialize with friends? Will they be doing this from home or at work or a combination of the two?

If they’re using your site from work, they’re going to be more impatient than they would at home.

On the other-hand, if they’re at home they will be using it more for pleasure and you will need to be more creative to keep their attention.

Compile that information into a persona

Now take all the information that you’ve compiled and give it an identity. Be sure to write in the first person, it will help to give persona an identity.

Next give your persona a name and a photo, without those it’s simply a personality profile.

Below is one of the personas that I use. It was greatly influenced by the wonderful book Letting Go of The Words by Janice Redish (See bottom)

The persona above makes it easy to access all this information and really gives the sense that this is a real person. The photo is important because it’s easier to remember all this information when you can associate it with an image.

Create scenarios to drive your decisions

What are your user’s primary tasks?

People come to your site for a reason, they want to get something done or learn something. It ’s your job to find those primary tasks and design accordingly.

In the example above Bill was created for a website that provided information for people who care for adults with mental disabilities. What kinds of tasks would Bill have?

Look for information about this site can help them.
Look for other adults in the area who also care for adults with disabilities

There are probably more but these are the two major tasks.

Write in the first person

Now that you’ve identified the tasks rewrite them as if they were saying it. So in this example you could write something like this.

Are you a local business? If so, what options do you offer?
Who else takes care of kids with Down syndrome in the area?

Everything on your site should fulfill those tasks

With the scenarios in place you should use these to drive you decisions on your website.

So in the Bill example you might have two links in a very visible spot saying,

Caring for someone with a disability? Learn how we can help.
Connect with other people in your area.

Designing an effective home page

admin — Mon, 29 Jun 2009 04:01:22 +0000

Design your home page around the content, not the other way around.

The home page should compliment the content. It’s very easy to let the aesthetics overpower content and usability. Especially when the home page is put in the hands of an inexperienced designer.

Establish an Identity

The first time a user looks at your website you should quickly answer these four questions.

Who you are
What you do
What you have
Why this site is better than another

Convey a Personality

Using adjectives how would you describe your site?

Jot down a list of adjectives to describe your site. These adjectives will help set the personality and drive the look and feel of the home page.

The portfolio site of Manolo Beviá

What adjectives would you use to describe the home page above?

I would use some of the following:

Clean
Professional
Minimalistic
Cool
Refreshing
Confident
Web 2.0

How would your writing style reflect your personality?

Your tone and choice of words should also be congruent with the personality. For example, a website for a library is going to much more formal than that for kids.

Establish a Hierarchy

Show them where to start.

Your website can be confusing the first time someone visits it. (Especially if it’s a large website). Establish some visual clues to get them started. Make your navigation clear and highlight any points of interest that you want them to see. You could even create a big button that simply says “start here”.

Use the visitor’s words.

Chances are, your business uses jargon that every employee knows like the back of their hand. On the web however, NO ONE understands your jargon! Use everyday words that everyone knows. Better yet, hold some usability tests and find out for sure if any words are confusing or unclear.

The home page can be different from the rest of the site.

The home page doesn’t have to share the same layout as the rest of the site. In fact, you will probably have to change the layout anyway because the home page serves a different purpose.

The background on the home page takes up more real estate than the other pages.

On the about page the background shrinks to allow more space for content.

Note that in the example above, the two pages change but the overall look and feel remain the same. Be sure to maintain consistency on all pages.

Give them what they’re looking for.

Have shortcuts to useful content.

Keep your users objectives at the forefront of your design and have links to your most popular content. They aren’t going to spend time admiring the subtle aspects of your home page, they just want the content.

The "Download Firefox" button is clearly visible on the Mozilla home page.

Provide timely content.

Provide any timely content and put it in a highly visible area. This shows the users that your the site is up to date. This is particularly true when designing for products, newspapers or blogs. But it can be applied pretty much anywhere.

People don’t read, they scan.

Don’t use paragraphs to identify the site.

People will never read your finely crafted paragraphs on your home page. Instead, use these three things.

Logo
Name
Tag line

Chris Jennings does a fine job of doing this.

On chrisjennings.com you know exactly who he is and what he does. Without reading a long paragraph.

Links and short descriptions.

When you think home page, think “links and short descriptions.” All your content should be easily visible with just a glance. If the link entices them then they will read the short description below it.

The “welcome” blurb.

As a rule, try to avoid using a “welcome” blurb. Most users are very familiar with them and immediately skip them because usually the welcome blurb has little or no useful information.

However, if you do find yourself needing a welcome blurb then keep it short and to the point. It should never be more than one sentence long!

This welcome blurb isn't terrible, the title is large and the links are clearly visible. However, shortening it by five lines would go a long way.

People are much more likely to read this welcome text.

Don’t overload the home page

The home page must appeal to the widest audience within your niche. Therefore it’s tempting to cram it with tons of information.

Don’t do this.

Too much information will clutter your home page and make it harder to understand. The less they have to process the better.

What are your thoughts?

Have any ideas on how to improve the home page?

How to write effective web content

admin — Mon, 15 Jun 2009 04:01:33 +0000

Let go of the words

Users don’t read, they scan

People are often busy and don’t have the time to read large paragraphs of text. If they see a wall of text they will either go somewhere else or at best they will bookmark it to “read later” which of course they never do.

Write simple, short sentences

“Get rid of half the words on each page, then get rid of half of what’s left” – Steve Krug

You don’t need a lot of fancy words and long paragraphs to convey your message. After you’ve finished writing your content go back and start cutting the hell out of it. If you’re finding it difficult ask a friend to help.

Use simple words that everyone understands

People aren’t sitting at the computer with a dictionary ready to look up your sophisticated use of the english language. Use words that everyone knows and conveys your information quickly and efficiently.

Also don’t use jargon in your website just because everyone else at your business does. Chances are, the general public won’t understand and won’t find your content valuable. This is especially true if you work in technical or medical fields.

Content is not copy

Copy is trying to sell an idea or product. Content delivers useful information to the user. Here are some key differences between the two.

Copy	Content
Encourages a call to action (ie register, purchase a product etc.)	Conveys information
Keywords first, user second	User first, keywords second
Has little or no useful information	Has a lot of useful information

Keep lines between 50 and 80 characters long

If it’s too short then people will have a hard time connecting the lines and understanding the information. If it’s too long then people will become tired and have a hard time switching to the next line. The optimal reading length is between 50 and 80 characters. Don’t freak out however if your lines are 45 or 87, these are just guidelines.

Use headings to break up your content

Your headings should summarize your content

Users are impatient on the web, they will scan the whole document first and then decide if they want to read it or not. Especially now where they don’t necessarily know if the content is viable. Afterall, they don’t know who wrote the content.

Effective headings should do the following

Get them interested
Provide a context for each section
Break up the page and make it more readable

Headings should answer questions

Write headings with their questions in mind. For example, on a page about pet food have headings like “What should my cat eat?” The less the user has to think the better. This is a great way to write “document-like” content.

Use the imperative when giving instructions

If you find yourself constantly repeating “how do I. . . ” simply remove that phrase and rewrite it as an imperative. This is a good way to give tips or advice.

Avoid using noun headings

Nouns label things and though they may be appropriate at times, chances are you can achieve the same thing by answering their questions. You are having a conversation with your user you can’t do this with nouns.

Use lists to simplify

Use lists to break up paragraphs and present key facts

When you start writing paragraphs of text ask yourself if you could break down what you’re writing into lists. or use a combination of the two.

Take a look at this paragraph.

“When you come camping, make sure that you bring a jacket, water bottle, flashlight, bug repellent sleeping bag, good shoes, warm clothing, sunglasses, and a bag to carry it all. Our trained staff will provide the rest. “

And now look at it when it’s been converted into a list.

When you come camping please bring the following:

Jacket
Water bottle
Flashlight
Bug repellent
Sleeping Bag
Good shoes
Warm clothing
Sunglasses
A bag to carry your equipment

Our trained staff will provide the rest.

Use numbered lists when you are giving instructions

Present instructions in a tidy numbered or ordered list. People will quickly realize that it’s a list of steps and perform the sequence of actions.

These directions are a good candidate for using an ordered list:

“Take Route 1 South from Machias approximately 15 miles. After passing the town of Robbington (Blueclyffe Motel on your left), you see Mill Drive on your left, and Perry’s chocolates on your right. The sign for Smith’s Dairy Farm is less than a mile further on your left (water side). It is the first left hand turn (dirt road) after the “Ferry” town marker on your right.”

As an ordered list.

To get to Smith’s Dairy Farm please follow these directions

Take Route 1 South from Machias (approximatly 15 miles)
Pass the town of Robbington
Keep driving until you see the sign for Smith’s Dairy farm on your left (water side).
Take a left onto the dirt road (after the Ferry town marker).
Follow this road until you see Smith’s Dary Farm on your left

Use tables to answer questions

Think of tables as “if. . . then” statements

Use tables when you have parallel sentences to show their relationship.

For example look at this sentence.

“If you want to file a tax return by mail please see this link: http://www.irs.gov/file/index.html. However, if you want to file it by email please see this link: http://www.irs.gov/efile/“

Now take a look at it when it’s been put in a table.

If you want to apply by. . .	Then go to the following link
Mail	http://www.irs.gov/file/index.html
E-Mail	http://www.irs.gov/efile/

Use tables to compare

Tables are great any time that you have information that relates to each other.

Country	Population in 1900 (in millions)	Population in 2000 (in millions)
Canada	5	30
Great Britain	40	59
Japan	45	126
United States	76	281

Use links that are meaningful

Use links that describe the content

Use link titles that reflect the content in which you are linking too. For example, if you are linking to someone’s portfolio you would write it something like this. check out Joshua Bolduc’s Portfolio

This makes it easier for the user but also helps with SEO (search engine optimization). If the link is meaningful the search engine spider will crawl this and associate its title with the link.

Don’t use “click here”

Never never never use “click here!” People scan the page and they will skip over anything that says “click here” they simply don’t want to read the text that explains it.

“Click here” also does not provide any useful information for search engine spiders and will not help your ranking in Google.

The fundamentals of logo design

admin — Mon, 01 Jun 2009 04:01:31 +0000

A logo is about identity

A logo is the visual identity of the company or client. It represents what they do and any emotional messages that go with it.

Who is the client?

What do they do?
What are their goals and values?
How do they perceive themselves?
How do they want other people to perceive them?

Use the answers to these question to drive the design of the logo. Don’t try and fit their business into something that may look good but isn’t appropriate.

Who is the audience?

Is the primary audience teenagers or senior citizens? Are they interested in sports or arts and crafts? Also, who makes the final decision about the design? They probably have a vision of the end product so work to be congruent with that vision.

Keep it simple!

Use simple shapes that have a strong silhouette

Simple shapes such as squares, triangles and circles are the most effective and easiest to remember. If you’re not sure whether your logo has a strong shape, fill in the shape with black and observe it’s silhouette. Is the logo still recognizable?

The apple logo is one of the most recognizable in the world. Due in large part to its simplicity.

Use appropriate colors

Keep the color palette congruent with your message. Too many colors convey conflicting messages.

For example, if you’re designing a logo for a dating website and you’re using blues, greens and yellows the user could confuse it with a conservation site. Reds, pinks and white would be more appropriate.

Make it the foundation of your design

The logo should set the tone for the rest of the design. For example, if your logo has round corners try using round corners in your interface.

A good way to get started is create a blank canvas and place the logo where you want. Then build the rest of the interface around it.

Be aware of emotional affiliations

Symbols

Symbols have strong emotional significance. If you’re designing for an international audience be sure to run your design by some people from your demographic. This way you avoid inadvertently pressing any buttons.

For example, in 1998, Nike released a new line of shoes called Nike Air Bakin. They quickly recalled them when Muslim American groups complained that the logo resembled the word “Allah” written in Arabic.

Nike had to recall 80,000 units costing them millions of dollars

Color

Colors also have emotional associations: blue is more soothing than red, green is more organic than gray.

Also, cultures view colors differently. In the United States red means danger, whereas in China, red means happiness. Research your audience before you make your decisions.

Design for different kinds of media

Is your logo going to be printed or is it going to sit on the computer screen? Make sure you know your client and where your logo will appear.

Television

Televisions (even large hdtvs) have a lower resolution than computer screens. Your very delicate details won’t appear as clear on a television than they would on a computer.

Print

Color looks darker on paper than on the computer screen. It’s also rendered in CMYK (Cyan, Magenta, Yellow, Key) and not RGB (Red, Green, Blue). Like the television, print can’t keep the kind of details that you would see on a computer screen so keep your shapes as simple as possible.

Black and White

It might not necessarily be in color either (newspapers, yellow pages, fliers etc) so have a high contrast to make it easily recognizable.

Design for the future

We are constantly bombarded by products and services often linked with a logo that leaves little or no impact. Your logo should withstand the test of time.

Design a logo that transcends any stylistic trends. If not it will soon and seem quaint and need a redesign. A redesign could potentially hurt the brand because people would lose that familiar affiliation.

The pirate logo has changed very little over the last 400 years

However, it’s also natural to “upgrade” a logo over time. By upgrading a logo you’re keeping the essence while making it more modern.

Notice that Intel kept the essence of their logo

Understand the difference between upgrade and change. When you change a logo you change the identity, when you upgrade a logo you improve the identity.

Books that every web designer should own

admin — Mon, 04 May 2009 18:28:32 +0000

Don’t Make Me Think:

This book is a classic in the web design industry. It takes a more general approach and talks about web design over all. Every time I read it I learn something new.

The Principles of Beautiful Web Design:

This is a great introduction to the fundamentals of web design. It covers layout and composition, color, typography and much more. If you’re a beginner web designer then this is essential reading.

Letting Go of the Words:

This book describes the way people search for (but not necessarily find) information. For example, it explains the different roles of the home page, pathway pages and content. A great book to get you thinking about web design the right way.

Logo:

This book changed the way I thought about Logo Design. If you’re interested at all in designing logos for your clients then this book is a must have.

Design Patterns:

This was the first book that took all Object Oriented Design Patterns and cataloged and explained them. This book is for advanced web developers but if your into code then pick this one up!

The Pragmatic Programmer:

Another classic in the web development world. This takes a very general approach and introduces you to the fundamental concepts of good code design.

PHP Objects Patterns and Practice:

Though it’s not as comprehensive as Design Patterns it’s easier to read and has a wonderful section that details some of the best work practices as a php professional.

Learning JQuery 1.3:

JQuery is a javascript framework that dramatically simplifies the way you code javascript. If you want to start building AJAX applications fast then you must, simply must get this book!

CSS: The Definitive Guide:

If you’re interested in learning Cascading Style Sheets (and if you consider yourself a web developer then you should be) then this is the single best source for learning CSS.

MySQL:

I’ve found that it’s hard to find a good book stricly about MySQL. Well here it is, book found. At over 1,000 pages it covers everything you would ever want to know about MySql.

Reference Books:

You have to get some reference material! Believe it or not but searching on the internet for the solution can often take more time than just looking through the index of the right book.

The good news is reference books are cheap! You can purchase all of the books below for less than $50.

HTML & XHTML Pocket Reference

This book lists out every html tag alphabetically which makes finding information a snap. It also has a great character list in the back for easy access.

CSS Pocket Reference

Not only is this a great reference it also has 30 pages of killer information about the concepts of CSS and how it works.This was written by Eric Meyer, one of the most respected names in CSS development.

MySQL Pocket Reference

A great reference that explains datatypes, the SELECT syntax and other common functions.

Adobe AIR for Javascript Developers Pocket Guide

This is a MUST HAVE if you’re going to be packaging and running web applications on the desktop. It explains how to debug and package an application as well as provides an excellent reference about the API.

BolducPress, a web design blog » Design

10 mistakes beginners make when writing HTML

I’ll build it in HTML first, and then design it in Photoshop

I’ll just export it from Photoshop

I don’t know how to code, I’ll just use the design view

Tables are great for layouts!

It looks fine, I don’t need to close that tag.

Tag attributes are handy!

DOCTYPE?

Character what?

Tags can go anywhere inside the body tag

CSS is a great video game!

The about page in theory

What is the about page?

Provide a context

What do you do?

Who is involved?

Provide some background

Reinforce your brand

Establish trust

Explain why you’re different from others

Write it with users in mind

Further Reading

Website templates are bad for everyone

What are website templates?

They’re bad for clients

They don’t educate clients about the creative process

Templates don’t convey a brand

Templates aren’t built around the content

They’re bad for designers.

Templates stunt creative growth

Templates can’t go in a portfolio

Use templates as inspiration

The value of Favicons

What the heck is a Favicon?

The Favicon was introduced with Internet Explorer 4

The advantages of the favicon

It improves usability

It strengthens the brand and improves user confidence

Designing a Favicon

Use simple, bold shapes

Use text sparingly

Use a limited color palette

Use high contrast

Further Reading

User personas and how they can improve your site

What is a user persona?

A user persona is not a site persona

Why is a user persona useful?

Gather information about your primary audience

Demographics

How experienced are they?

How technologically inclined are they?

How will they be feeling when they visit your site?

How are they using your site, and where?

Compile that information into a persona

Create scenarios to drive your decisions

What are your user’s primary tasks?

Write in the first person

Everything on your site should fulfill those tasks

Further Reading

Designing an effective home page

Design your home page around the content, not the other way around.

Establish an Identity

Convey a Personality

Using adjectives how would you describe your site?

How would your writing style reflect your personality?

Establish a Hierarchy

Show them where to start.

Use the visitor’s words.

The home page can be different from the rest of the site.

On the about page the background shrinks to allow more space for content.

Give them what they’re looking for.

Have shortcuts to useful content.

Provide timely content.

People don’t read, they scan.

Don’t use paragraphs to identify the site.

Links and short descriptions.

The “welcome” blurb.

Don’t overload the home page