Nik's Technology Blog

Travels through programming, networks, and computers

Learning jQuery 1.3 - Book Review

My first exposure to jQuery was using other developer's plugins to create animation effects such as sliders, and accordion menus.
The highly refactored and compressed production code isn't the easiest to read and understand, especially if you want to alter the code to any great extent.
After reading a few tutorials, I thought I'd buy a book and get more involved with the jQuery library.

As an ASP.NET developer used to coding with intellisense, I was pleased that jQuery has been incorporated into Visual Studio to allow ease of developing.
I browsed through the jQuery books on Amazon and opted to buy "Learning JQuery 1.3" by Jonathon Chaffer and Karl Swedberg after reading the user reviews.

I've now read most of the book and can highly recommend it.  The book assumes the reader has good HTML, CSS knowledge as well as a familiarity with JavaScript and the DOM, but this enables the book to quickly move onto doing useful, everyday tasks with jQuery.

The first six chapters of the book explore the jQuery library in a series of tutorials and examples focusing on core jQuery components.  Chapters 7 to 9 look at real-world problems and show how jQuery can provide solutions to them, and the final two chapters cover using and developing jQuery plugins.

Web developers should be aware of web accessibility and SEO issues with using client-side scripting and it is good to see the book highlighting the concepts of progressive enhancement and graceful degradation where appropriate.

"the inherent danger in making certain functionality, visual appeal, or textual information available only to those with web browsers capable of (and enabled for) using JavaScript.  Important information should be accessible to all, not just people who happen to be using the right software." - Learning jQuery 1.3,  page 94

After a brief introduction into the world of jQuery, what it does and how it came about the book moves quickly on to selectors, which are a fundamental part of how jQuery selects element(s) from the DOM.  It also covers jQuery's chaining capability, which coming from other programming languages looks odd at the outset, but quickly proves to be a very powerful technique.

The authors then move on to talk about events.  What I particularly like about the way jQuery handles events is that the behavioural code can be cleanly separated away from the HTML mark-up without having to litter tags with onclick and onload attributes.

The examples show how to add functionality on top of your HTML by binding events to elements on the page, which when triggered cause jQuery to modify the HTML to bring the page to life.  Techniques are introduced by example, then slowly refactored and improved while introducing new jQuery methods along the way, which is a breeze to follow and learn.

The fourth chapter covers effects such as fading in and out and custom animations, and jumps straight in to cover a useful example of how text size can be increased on-the-fly for ease of reading.  The intro also mentions an important usability example of effects.

jQuery effects "can also provide important usability enhancements that help orient the user when there is some change on a page (especially common in AJAX applications)."- Learning jQuery 1.3,  page 67

Chapter 5 is all about DOM manipulation and covers jQuery's many insertion methods such as copying and cloning parts of the page, which it demonstrates with another useful example in the form of dynamically creating CSS styled pull quotes from a page of text used to attract a readers attention.

AJAX is the next topic, which interested me enough to create a little tool to load in an XML RSS feed and create a blog category list from the data.
The chapter covers the various options of loading partial data from the server including appending a snippet of HTML into the page, JSON, XML and how to choose which method is the most appropriate.

Table manipulation is next on the agenda and the book discusses how to sort table data preventing page refreshing using AJAX as well as client-side sorting, filtering and pagination.

Chapter 8 delves into forms, using progressive enhancement to improve their appearance and behaviour.  It also covers AJAX auto-completion as well as an in-depth look at shopping carts.

Shufflers and Rotators are next and the book starts out by building a headline news feed rotator which gets it's headlines from an RSS feed, typically used by blogs.  It also covers carousels, image shufflers and image enlargement.

Chapter 10 and 11 examine the plugin architecture of jQuery and demonstrate how to use plugins and build your own.  I successfully produced my first jQuery plugin from reading this book.  You can check out my tag cloud plugin and read about how I originally built it before turning it into a plugin that other developers can use.

Book Review: Prioritising Web Usability

I can't recommend this book enough. A lot of the topics covered in this book are common sense. As a Web developer or designer you may think you create very usable sites already, but even if this is true, and you are a true usability guru, a lot of the facts and statistics in this book are useful for backing up your views, and getting your point across to clients who insist on functionality that you know full well will break usability conventions, and potentially harm their finished Web site.

The book is for people who have business goals for their Web sites or the Web sites they work on. This includes sites that match the following criteria:

  • E-commerce sites
  • Corporate sites
  • News sites
  • Non-profit organisations
  • Government agencies

If you are trying to get users' to accomplish something when they visit your site then you should be concerned about usability.

This book contains the results of many studies into how people behave on the Internet and consequently what makes Web sites succeed or fail.

This book alone is not enough to ensure your site will be the most usable it can be, but it is crammed full of tips and real world examples of what to do, and what not to do when it comes to designing Web user interfaces, writing Web copy and planning your Information Architecture. Ideally you will need to perform usability testing as well, but the information in this book will significantly help in improving your Web site.

The book begins by explaining how people use the Web and how to optimise your site accordingly. It explains how users' use search engines to find answers to problems, and how to improve your site to cash-in on these users.

Nielsen and Loranger then go back to the usability problems they found back in 1994 and discover what significant usability issues are still relevant today, including bugbears such as:

  • Breaking the back button
  • Pop-ups
  • Flash
  • Uncertain clickability
  • Plug-ins
  • Splash pages

The forth chapter helps you prioritise your Web site usability issues and decide what to tackle first. They do this by categorising usability problems by severity, frequency, impact and persistence.

Site search engines and their user interfaces and results pages (SERPS) are covered next, including a brief introduction to Search Engine Optimisation.

Chapters 6 and 7 concern navigation, information architecture, readability and legibility. This is followed by a chapter on how important it is to specifically write for the Web, using summaries for key points, and by using simple language. The importance of knowing your audience and how people skim read articles on the Web is talked about, as is the use of marketing slogans and hype.

The following chapter is geared towards your e-commerce goals. How to provide good product information and win consumer confidence in your site and product to increase and promote sales.

The penultimate chapter looks at presentation and users' expectations, while the final chapter in the book is all about balancing technology with people's needs. This covers the use of multimedia content such as videos and the use of familiar interface conventions in Web design.

Prioritizing Web Usability
By Jakob Nielsen and Hoa Loranger
Published by New Riders
ISBN 0-321-35031-6

 

Font and Text Styles for Websites

People find reading text on screen much more difficult than reading on paper, by following some simple guidelines web designers can help make this as painless as possible.

Due to the nature of how web browsers render textual content on the screen; using the fonts installed on the client machines, it severely limits the font variation web designers have at their disposal.
Most browsers will be able to render the following fonts without reverting to a default alternative:

  • Arial
  • Georgia
  • Verdana
  • Arial Black
  • Times New Roman
  • Trebuchet MS
  • Courier New
  • Impact
  • Comic Sans MS

I personally stick to the top 3 fonts in this list as they are very readable on-screen and are the most professional; avoid Comic Sans MS and Courier New.
It is also possible to specify alternative fonts in your CSS style sheets for the browser to use if your font of choice isn't available.

Once you've chosen a font for a website use that font throughout to maintain consistency. Websites that use too many fonts sprinkled through their pages look unprofessional. Verdana is the most readable font even at low point sizes.

Maintaining Readability

To increase a sites' readability you should focus your attention on three things:

  1. Choose a good font and a decent readable default font size.
  2. Make sure the text and background contrast in colours is high.
  3. Avoid using all capitals in blocks of text and headings.

Text in Images

Some web designers get around the font support problems mentioned above by creating a bitmap image of all headings, titles etc. Although this method does allow you to use any font your graphics program supports, including anti-aliased (smooth-edged) fonts, it causes a big accessibility and SEO problems. You should only use this technique for a company logo, all other textual information should be actual text in your HTML.

Hyperlink Usability

How often do you visit a website and are unsure where to click and what is clickable?
In the past all links were blue and underlined, but web designers have increasingly found that modern stylesheet functionality (CSS) now allows them to change the look and feel of links and experiment with unconventional navigation. Sometimes so much so, that users have to mine the pages for links by hovering over the page to find out what is clickable, all for the sake of design.

User Expectations

Hyperlinks need to stand out to users as links, a clickable entity that will cause a new page to be requested when clicked.
Users should not have to spend their precious time learning what style the site uses to render hyperlinks, by watching when their mouse cursor turns into a pointing-hand while scanning the site.
Web designers need to understand users expectations.

All links should be underlined at the very least. Any other use of underlined text or blue words should be avoided as these can be confused with links.

A Recipe for a Successful Website

Creating a successful website can be a hit and miss affair even before you've even thought about attracting users to the site.

There are countless websites, books and consultants dedicated to designing websites, web programming and development, search engine optimisation, usability and accessibility. However even if you have an expert specialising in each field on your development team you will have to make difficult decisions along the way which can have a fundamental impact on how your site will perform. This won't be much of a surprise to anyone in the business.

Web Designers Role

Web designers for instance need to be able to create designs that have a high level of usability as well as creating a visually appealing design that sticks to standard methods of navigation with a colour scheme that conforms to accessibility guidelines. Good guidelines and specifications are needed from the client and the other members of the team prior to commencing work so the designer knows the scope of the project.

Web Developers Role

Web developers need to be aware of search engine optimisation techniques and accessibility practices while building pages based on the chosen design. The choice of development environment is also important. Will your website scale when your users increase? Will your choice of platform and IDE have negative impacts on your SEO and usability efforts? Dreamweaver and other WYSIWIG editors are renound for adding reams of unnecessary HTML to your pages. Visual Studio's standard web controls also introduce problems with large VIEWSTATE tags and lots of pointless nested tables.

Search Engine Marketers Role

Search engine marketers need to make sure that they stick to "White Hat" methodoligies. They will need to have an intimate understanding of your business or product(s) in order perform keyword research.
In the push to get goods search rankings usability can be affected by excessive keyword stuffing, which can make paragraphs of text un-readble.

Usability and Website Testing

While usability evangelists will restrain the designers and developers from using browser plug-in technologies and any form of cutting edge design, or navigational elements that deviate from what Web users' expect. Badly positioned advertisements can also affect the usability of the site especially the flash pop-out kind.

The Client

If the client insists on items of functionality and design that will have a detrimental effect on the site such as using a splash page, a non-standard navigation tool etc, he or she will need to be educated on the impact of implementing such items.

Lots of websites fail to look at website development from one or more of these view points and suffer one way or another. Whether that is through confusing users with un-navigable sites, failing to generate traffic because of poor search engine optimisation or making people install software to view your content.

Creating a successful website requires a lot of different skill sets, but this will depend partly on your audience and your individual goals for the project.

HTML Forms - Usability

Making HTML forms easier for the user is no easy task.

Make good use of Radio buttons, Check boxes and drop-down menus within the form instead of text boxes where possible to keep the users typing down to a minimum.

Use the "Tabindex" HTML form attribute to set the tabbing order if your HTML forms are large and complex.

Make clear which elements of a form are compulsory with and * or similar, stating what the asterix is for at the top. If you think any of the fields might be filled in wrongly, then think about adding help pages (pop-ups) for the form.

If your form is asking for personal data, then link to your site's privacy policy on the page. Information such as Credit Card details should only be submitted over a secure SSL (Secure Sockets Layer) connection, you will need to set this up if you don't already have one.

If you already have data on the user then pre-populate the fields and ask for confirmation where necessary, this will save the user re-typing them.

Finally you will be able to judge your forms usability by how many badly filled forms you receive.

HTML tabindex

HTML Tabindex

Tabindex is very useful when designing large forms as it dictates what element the tab key jumps to next. Only works in IE. Tabindex of -1 is ignored. Tabindex's of 0 come after the highest tabindex.