Web Styling 101: Quick Tips

Want to become a web fashionista? Or, do you just want some styling tips to help engage your audience? Look no further, because I've got some tips for you!

Web Services intends to offer a "Styling for the Web" course soon, but in the meantime, please make use of the following tips that I extracted from Hampshire College in Amherst, MA:

• Use short paragraphs. Large blocks of text can look like walls, and act as such to the user. Research has shown that short, concise paragraphs and bulleted lists work best for web use.

• Your first paragraph is the most important one. As such, it should be brief, clear, and to the point in order to quickly engage the user. One sentence paragraphs are encouraged.

• Write in an inverted pyramid style. Place the most important information at the top, extra info toward the bottom.

• In most cases, it's best to use subheadings to clarify the subject of various sections on a page. Users want to skim and scan for information. Headings help this process exponentially.
  
  
• Don't waste space "welcoming" people to the page. There is no need, and most users ignore any welcome text as filler. Get to the meat - that is what they came for.

• Just when you think you are done, look again. Cut, cut, and cut your text until it is the most essential message.

• Name your page clearly. The page title and the navigation title should match as closely as possible. They should also clearly articulate the subject of the page. Do not use "Welcome to Marketing & Communications!" Instead, say "Department of Marketing & Communications."

• Do not tell users to "use the links on the left." Put the information or links you are referring to right there instead, or just let them find the navigation on their own - if it is clearly visible on the page they will find it.

• Use bold and italics sparingly. Bold should be used for headings and then sparingly for any other emphasis. Too much bold makes text harder, not easier, to read and differentiate.

• Italics should also be used sparingly. Italics on the web are also hard to read. Try to avoid making long paragraphs italic - you are making the text harder to read, not giving it emphasis. Exceptions are book titles and other grammar stylings.

• Do not underline text. On the web underline = link. Giving a sentence an underline for emphasis is misleading. And again, you don't really need it.

• Use all caps very sparingly. Research shows all caps are harder to read than mixed case.

• Don't try to emphasize too much. If you use bolded headings, short paragraphs, and bulleted lists, you should not need to rely on italics, all caps, or underlining for emphasis. These styles can make the page look messy and compete for the user's attention.

• Avoid exclamation points. We know Tarleton is awesome! We love it! But exclamation points on websites make can make it look unprofessional! Let the content speak for itself.

Headers and other images

• Use a header image that is relevant to the subject matter.

• Avoid pictures of buildings without people. You may know that a picture of the exterior of the Welcome Center fits well for a page, but to most people, and especially to those who are not familiar with our campus, it is meaningless. Remember your users do not have your insider knowledge. Give them pictures of people interacting instead of abstract building pics whenever possible.

• Let the Web Services office help you put images neatly into your content area. Break up your text with relevant images.
  
  
• Make sure you have accurate copyright permissions to use any picture. Just because it is on the internet does not mean it is free to use. When in doubt, please contact Daphne Hunt at djhunt@tarleton.edu.

Miscellaneous

• Link, link, and link to relevant information. If you mention a program, link to it. If you include an email address, make it an email link. If you mention a faculty member, link to their bio page. Don't make people go and search for something that you mention if it already has a page somewhere.

• Make your links contextual. Avoid "Click here." Use part of the actual referencing sentence as the link. Research shows that users like them to be 4-8 words in length.

Do not use:
For commencement information for graduating students click here.

Do use:
Commencement information for graduating students is now available.

• Avoid jump (anchor) links except on long pages such as FAQs. Research shows that today's web users don't mind scrolling if the content is useful and easy to scan. Anchor points just make pages longer, and are used too often on pages that are already a reasonable length. If you are not sure, please contact Daphne Hunt at djhunt@tarleton.edu so we can discuss it. If you do want to use anchor links, then there are best practices that should be followed.

• Keep your content up to date. Out-of-date content reflects poorly on the user's overall opinion of the website and the university. It also degrades the trust of the user to later find information on the website. If you put up info that needs to be updated later, mark it on your calendar so you don't forget.

 -Daphne

Tips were extracted from Hampshire College's website.