Web Design Tips and Tricks

Ignore typography in web design only at your peril

Get Web Design Tips and Tricks on mps-web-design.com. Ignore typography in web design only at your peril topic will increase your understanding on Web Design Tips and Tricks. We at mps-web-design.com only provide news, articles, information in Web Design Tips and Tricks. Web Design Tips and Tricks at mps-web-design.com provides the most up to date news and articles. If you have questions please do not hesitate to contact us.

Good typography is most crucial to design. It is.

Good typography is crucial enough on a web page as it is in any other medium. Any thing, good or bad, under the sun and even beyond it hmm... that goes into making the web page pleasing to look at and enticing to read boils down to careful typography. You can not be spared if your website is not visually appealing or digitally inviting in the multitude of sites in cut-throat competition.

Before you make any excuses for a lack of good typography, you might be out of the fray. It is high time you learnt fundamentals of typography that will help your site look - and benefit too - fundamentally different.

A word of relief for web designers! You are not alone on this side of the fence. Ninety percent of web pages that browsers look at have been poured- not designed.

What designers have to pay heed to Designers have to employ the tools and technique of typography in the best possible manner in conjunction with media needs, target audience aimed at, specialty of communication to be disseminated.

Designing for a computer screen has its own set of uniqueness and problems. Add to these the elastic nature of a web page, which has to work across different computer platforms and screen sizes, communication needs.

The unfailing concern for designers should be about a good match between the style, semantics, and intended impact of your text and corresponding properties of the typeface it uses

What typography means

A page designed to support a childrens TV program should be different for one designed for a politics course in a university. Similarly the text on the Financial Times Website , if it is doing its job right, should be be different from that of the The Tate Modern .

So typography, whether on the Web or otherwise has a job to do. This could be to support and re-enforce the message being presented by the content, or tell you something about the background and the implicit context, that the the page is part of.

Text alignment

Aligning text to the left, ragged on the right, increases reading speed because the straight left edge helps to anchor the eye when starting a new line

Line length

There seems to be little agreement on the best length length for optimum reading speeds. The most commonly advice is that limiting line length to 9 or 10 words can increases speed and comprehension.

Users read faster when line lengths are long, although they tend to prefer shorter line lengths. When designing, first determine if performance or preference is important. If user performance is critical, use longer line lengths to increase reading speed.

Leading (line-height)

Set the leading larger than the default - as a rough guide 1.3cm of leading (130%) will make a big difference to the readability of a web page. Leading and line length however are related; the longer the line the bigger you need to make the leading.

Newspapers have very short line lengths and very little leading - so they can fit as much text into a small space as possible.

Choice of fonts

Choose a font that is suitable to your subject matter. If you use more than two fonts on a page and it can start to look like a ransom note - distracting the users attention from the content. Off-line, headings are commonly set in a sans-serif font, with body text set in serif.

Morever, on-line, sans-serif are often used for both headings and body text; the cleaner outlines of the sans-serif fonts tends to make them easier to read on low resolution screens. Don't mix serif and sans-serif fonts in your body text, as it rarely looks good.

Italics

Avoid using italics for small text sizes: the problems of screen display of outline fonts has not entirely disappeared. Italized fonts look particularly bad at small sizes - as italics do not easy to render using a square pixel grid. If you must use italics, avoid using them for large blocks of text.

Use of capitals

Don't use all caps for bodytype - or even capitalise all words in headings. The uniformally of size and shape of capitals make them harder to read than lower case letters.

Readability is increased if only the first letter in a heading is in capitals; each capital - being less recognizable - acts as an interruption to the eye as it scans across the text.

Contrast

Ensure good contrast between the text colour and the background colour.

Underline links

Make it easy for visitors to understand what is a link and what is not a link. Don't rely exclusively on mouseovers to identify links, as this can be confusing and reduces usability.

Users scan web pages

For Service based website in particular, arrange your text for 'scannability', i.e have lots of headings, provide the most important ideas at the start of paragraphs, and use lists rather than dense passages of text when appropriate.

In short, typography is not so pleasant (Scared? Not too difficult either) means to make your site pleasing to aesthetic senses of surfers. It is done painstakingly and carefully, but definitely, it is worth it. It can either pay you or leave you at peril. So, give it a thought where you are heading for.

Hot* Brand New: AdwareAlert. - Our Highet Converting/Paying Designs Ever! Easy Ppc Sales! Also try SpywareRemover.com. Now with Msn/Goog/Yhoo Tracking!
Save My Marriage Today. - New design now has a 1/50 conversion rate!

This post comes a bit late in the whole web 2.0 cycle. I feel that it bears repeating because I have come across sites that don't follow some basic principles when pulling in 3rd party data from sites such as flickr, twitter et. al.

APIs and data portability

The blessing of popular and easy to use APIs and the data portability of web 2.0 applications has had an unfortunate side effect, and that is that some implementations that use these services do not integrate appropriate contingency design should these 3rd party services fail.

Caching data calls to APIs is a good bit of contingency design. Many APIs will require caching - like that of Amazon - but I suspect this is intended to help limit resource use of the API host, not the site using the API. The reasons a person using API accessed data on their website would want to cache the data are:

1. To speed up the load time of their website
2. To have a back up plan if the API call fails

A simple implementation to handle those two cases would be one that caches an API call for a given amount of time and one that freshens stale cached data and triggers an error should an API call fail.

Caching is good contingency design practice

As I said above, this post is a bit late to the party but it is worth writing as recently I have come upon at least three sites where firebug and other widgets have revealed issues retrieving API fetched data and the site loading times have been horrible.

A decent implementation idea would be to roll your own caching wrapper and agnostically plug it in to a stable caching tool, perhaps something like Cache Lite for PHP. In this manner you have a reusable, caching library independent piece of code that can handle caching/flushing and refreshing of data which could function to handle the two cases discussed above.

And that's it. It's been 541 days since my last post. Wow. I hope this is a re-start of a new phase of blogging. Right, and it looks like I had not built the commenting functionality into this version of the site. What a surprise. I'd still like feedback so if anyone has any email me at mike at this domain and I'll pop a comment right into the database. Off to build some commenting functionality... Comments should be working now.

More Articles: