web design tips
 

web design tipsHints All the Way.

One of the best ways to make your site easier to use is to provide hints to your visitors everywhere you can. You might think that sounds simple enough, but the amount of time required to do it and the number of things to consider puts a lot of web designers off.

Visitors Don't Know Your Site.

You have to consider that the overwhelming majority of your site's visitors are likely to be visiting for the first time - some of them may be loyal visitors, coming back over and over again, but the modern web lends itself more to being dipped in and out of using search engines and links from other sites. If there's some kind of process visitors need to go through to accomplish something on your site, you can't assume that they have any familiarity with it at all.

For
this reason, it's important to scatter hints across your site. Whenever there's something that could seem mysterious if you hadn't used it before, hints should either appear automatically or be easily accessible, in case the user needs to know what to do.

Question Mark Icons.

One of the easiest ways of doing this is to put question mark icons next to things that you think might be confusing. For example, at a website that lets people pay their water bill, I saw this:

Register for Online Billing
First name: ____
Last name: ____
Account no.: ____ [?]

Notice the question mark next to the input box for account number - this was provided because, of course, not every customer is likely to know their account number by heart, or where to find it. Clicking the question mark popped up an image of a paper water bill, with an arrow pointing to where the account number could be found. Unless you want customers to wonder 'what account number?', that's the best way of doing things.

Alt Text.

Alt text is the contents of your images' alt tags - that is, text you put in your image tags' alt properties, like this:

alt text here

The main purpose of this text is to provide an alternative form of display for browsers that don't support images, and blind users. However, it also has another purpose: as 'tooltips', to provide hints. If you have a small icon of a printer, for example, and clicking it causes the current article to change to its print CSS and then print, then you make make the alt text look like this:

print this article

Now, when users hover over the printer icon, the text "print this article" will appear as a tooltip - that is, black text in a yellow rectangle. This is useful for letting users know what will happen when they click parts of your site, without having to have text next to everything - especially good if you're limited for space, or you expect lots of people to use your site from mobile devices like phone and PDA browsers.

Javascript.

Finally, one of the best ways to make your hints context-sensitive is to use Javascript. Not only can you enhance the alt text boxes to look nicer with Javascript, but you can also display hints entirely automatically. For example, you might have a form that asks for someone's state and date of birth:

State: _____
Date of Birth: _____

Using Javascript's onfocus event, you can easily write a little code to not only highlight the box the visitor is currently typing into, but also provide a hint next to it - so when I'm typing my state, the hint can say 'two letters is fine - just CA or NY', and when I'm typing my date of birth the hint says 'dd/mm/yyyy'.

What does this approach achieve? Well, it lets you provide hints when they're needed, without having to clutter the page with them or put them in small, faded text that makes them hard to see. Making your site sensitive to context when it comes to helping the user get things done is one of the big keys to better usability.

Finding a Good HTML Editor

Building Online Communities

Fonts are More Important Than You Think

Its a World Wide Web Going International

Cut to the Chase How to Make Your Website Load Faster

  

Web Design
◦ 5 Simple Steps to Accepting Payments.
◦ 5 Ways to Avoid the 1998 Look.
◦ 6 Reasons Why You Need a Website.
◦ 7 Ways to Make Your Web Forms Better.
◦ A Question of Scroll Bars.
◦ Ads Under the Radar: Linking to Affiliates.
◦ AJAX: Should You Believe the Hype?
◦ All About Design: Principles and Elements.
◦ An Introduction to Paint Shop Pro.
◦ An Issue of Width: the Resolution Problem.
◦ Avoiding the Nuts and Bolts: Content Management Software.
◦ Beware the Stock Photographer: Picking Your Pictures.
◦ Building a Budget Website.
◦ Building Online Communities.
◦ Clean Page Structure: Headings and Lists.
◦ ColdFusion: Quicker Scripting, at a Price.
◦ Column Designs with CSS.
◦ Content is King.
◦ CSS and the End of Tables.
◦ Cut to the Chase: How to Make Your Website Load Faster.
◦ Designing for Sales.
◦ Designing for Search Engines.
◦ Dreamweaver: The Professional Touch.
◦ Encryption and Security with SSL.
◦ Finding a Good HTML Editor.
◦ Focus on the User: Task-Oriented Websites.
◦ Fonts are More Important Than You Think.
◦ Free Graphics Alternatives.
◦ FrontPage: Easy Pages.
◦ Hints All the Way.
◦ Hiring Professionals: 5 Things to Look For.
◦ How Databases Work.
◦ How the Web Works.
◦ How to Get Your Website Talked About on Blogs.
◦ How to Install and Configure a Forum.
◦ How to Make Visitors Add You to Their Favorites.
◦ How to Run Ads Without Driving Visitors Crazy.
◦ How to Set Up Your Hosting in 5 Minutes Flat.
◦ IIS and ASP: Microsoft's Server.
◦ Image Formats: GIF, JPEG, PNG and More.
◦ It's a World Wide Web: Going International.
◦ JSP: Java on Your Server.
◦ LAMP: The Most Popular Server System Ever.
◦ Making Friends and Influencing People: the Importance of Links.
◦ Making Searches Simple.
◦ Offering Free Downloads on Your Website.
◦ Opening a Web Shop with E-Commerce Software.
◦ tag - they have one extra tag before it. This is the doctype, and it must be present right at the top of your document for it to be valid HTML. There are only really
◦ Perl: Cryptic Power.
◦ Photoshop: a Graphic Designer's Dream.
◦ Picking a Colour Scheme.
◦ Printing and Sending: the Two Things Users Want to Do.
◦ Putting Multimedia to Good Use.
◦ Python and Ruby: the Newer Alternatives.
◦ Registering a Domain Name.
◦ Registering Your Users by Stealth.
◦ RSS: Really Simple Syndication.
◦ Setting Up a Mailing List.
◦ Setting up a Test Server on Your Own Computer.
◦ Some Places to Go For More Information.
◦ Taking HTML Further. HTML might seem like a simple language for web documents, and to an extent, it is - that's what it was intended to be. If you know what
◦ Taking HTML Further with Javascript. Once you've built your HTML pages, you might need them to do something a little more interactive on the client-side (that
◦ Taking Your Website Mobile.
◦ Text Ads: Unobtrusive Advertising.
◦ The 5 Principles of Effective Navigation.
◦ The Art of the Logo.
◦ The Basics of Web Forms.
◦ The Basics of Web Servers.
◦ The Case Against Flash.
◦ The Confusing World of Web Hosting: Making Your Decision.
◦ The Evils of PDFs.
◦ The Importance of Validation.
◦ The Many Flavours of HTML.
◦ The Smaller, the Better: Avoiding Graphical Overload.
◦ The Top 10 Biggest Web Design Mistakes.
◦ The Web Designer's Toolbox.
◦ The Web is Not Paper.
◦ There's More than One Web Browser.
◦ Time for User Testing.
◦ Titles and Headlines: It's Not a Newspaper.
◦ Tracking Your Visitors.
◦ Understanding Web Jargon.
◦ Uploading Your Website with FTP.
◦ Using Flash Sensibly.
◦ Using Quizzes and Games to Get Traffic.
◦ VBScript: Javascript Made Easy.
◦ Websites and Weblogs: What's the Difference?
◦ What Do You Want Your Website to Do?
◦ What You See Isn't Always What You Get.
◦ Which Database is Right for You?
◦ Why Doing It Yourself is Best.
◦ Why Java Will Drive Your Visitors Away.
◦ Why Word is Bad for the Web.
◦ Why You Should Put Your Content in a Weblog Format.
◦ Why You Should Stick to Design Conventions.
◦ Working With Templates.
◦ Writing for the Web.
GoogleSense
Making Money with Articles
Webhosting
RSS
◦ Reading RSS Feeds with an RSS Aggregator

Web Traffic Machines

Link to Us    Contact Us   Privacy Statement   Links  

LT International Inc - Web Design ABC