Over the past year I’ve found myself doing more and more teaching on web development. Considering how much I’ve invested in it, I decided to post some of my updated lessons here on WebTide for others to look over.
The first lesson deals with organization and planning while further lessons will handle coding. As these lessons were originally intended to be handouts for a lecture, please feel free to post any questions on the material in the comments section. I can’t promise I’ll get to them all, but I’ll try.
Setting up structure for a website
Most people don’t know how essential good navigation is- but every website I’ve ever built has required at least an hour of debate over navigation.
Navigation is very important as it organizes the content flow on your site. While planning the navigation, make sure to stress the user’s point of view. Role-play if you must. Imagine you know nothing about how the company works and just want to find something- where would you most likely look for it? This should help you construct the primary navigation. Lesser links can be placed in a sub navigation that’s not as prominent or used as secondary navigation within pages.
People generally don’t like clicking more than 3 times to find what they want- but they also don’t wish to be stuck on the first page for hours searching for the link they need. To help solve this problem, use umbrella terms in your main navigation and let your secondary navigation fine-tune the section. In the best possible situations you’ll only need these two levels. Larger sites with more content may require further links, but place them within the page to avoid confusion or frustration.
Tip: When working out your navigation, don’t fixate on users who are only going to visit your site once. Plan for those who will be visiting your site frequently and make sure their content is easily accessible.
Create a navigational chart
In order to make sure everything is correct, mock up a navigational chart. In this way, clients will be able to see the site’s flow and easily edit mistakes. This heads off a lot of arguments before you start coding since some people need to see navigation before they understand it. Two recommended ways to create a navigational chart are in outline style or as a data tree. Both have inherent hierarchy when created and allow for easy secondary navigation insertion.
Create a content layout model
How information is displayed on a page is also important. Remember that your users will usually be looking for one specific bit of information and won’t want to read your entire site to get it. Make things easy to spot on a page by using well-defined headers and bolding/italicizing only very important elements. Organize your page in a way that will allow the user immediate access to the information they want with a simple scan.
For each page, your content layout will naturally differ depending on the type of information. Understanding your audience, and what your audience wants, helps identify which elements are important, and where these elements should be placed. The one exception would be your home page, which should focus on emotional impact in addition to user needs. This impact is often accomplished by having a picture, illustration, or good typography showing what the organization is about.
When working on a home page layout, you may find that sketching out your ideas can be very helpful. They don’t have to look professional, they just act as a visual guide to help place your content. Use a grid and plan your layout with boxes and squiggles. This helps you figure things out before you start coding and saves time.
BEST PRACTICES
- Have main umbrella navigation terms for your main menu and keep them short.
- Keep important information within 3 clicks of the user.
- Advocate for the users of the site.
- Outgoing links should never be placed in your main navigation, though there are some exceptions.
- Keep in mind that companies tend to know their customers and business. If they insist on something you think is bad practice, compromise or give in depending upon the situation.
Getting comfortable with content
When it comes to reading a site, people want content to be clear, concise, and legible. In order to facilitate this, shorter sentences are used and body copy fonts are mostly sans-serif. There’s a good reason you see Verdana and Arial on the majority of web pages. Every computer has them pre-installed and they’re easy to read at smaller sizes.
Request content before you start coding the site, but after you’ve got the navigation planned. It takes time for people to write and by letting them know what you want, before you need it, the process will go much smoother. However, there may be times when you’ll need body copy and none is available. This might crop up while you’re building a site and want to see how content will look in your layout. For this, most turn to the old printer’s resource of Lorem Ipsum.
Lorem Ipsum is dummy text and has been used by the printing and typesetting industry since the 1500s. When websites came along, the same principles were used in their creation and thus the text made the leap from paper to screen. Just make sure that Lorem Ipsum is erased when you get the actual content.
Trivia: Lorem Ipsum is Latin and comes from Cicero’s “de Finibus Bonorum et Malorum” which was written in 45 B.C.
Image content is another beast altogether. A few things I recommend are getting a professional photographer or going to a stock photo site. With professional images your site will look better and inspire more trust with users. Also make sure your image conveys the same message as your text. Think of a few adjectives that describe your organization. Do those adjectives apply to your pictures? If not- don’t use them.
BEST PRACTICES
- Request content ahead of time.
- Use bolding and italicizing sparsely for only important elements- the more bolding and italicizing you have, the less important and more confusing those elements become.
- Make sure your content is edited for grammar and spelling.
- Use professional images that convey your organization’s purpose throughout the site.
WORST PRACTICES
- Don’t center your content- especially with paragraphs. Centering rarely looks good and reading from a jagged edge is hard on your users.
- Using too many fonts is confusing. Limit yourself to 2 different fonts (usually one serif and the other sans-serif) and use one font for headings and one for body copy.
- Some fonts are downright inappropriate for their subject matter. Comic Sans gives a childish feeling and unless your site deals directly with children- don’t use it.
- Stay away from site traffic counters or gif animations. They date your site like nothing else.
