Can you believe that it has been almost 20 years since the Internet was made accessible for the masses? Time sure flies when you’re having fun! While the history of the Internet can be traced as far back as the 1960s and 70s, Internet for the basic consumer really began in the late 1980s and early 90s when the first Internet Service Providers started selling their services to the public. I was in college and have fond memories of putting together my first “web page.” Back then, everyone that ran across the blink tag thought they were the coolest kid on the block.
Remember when web sites all looked like this:
…Ahhh the grey backgrounds, blue and purple hyperlinks, and the ugliest graphics money could buy. Yikes!
It has been over 20 years now, but some days I feel like many websites never caught up to modern technologies, especially when it comes to web design and usability. Clearly, web sites “look” better today, but are they more usable? Or are they just filled with more colors and prettier graphics?
- With ThemeRoller, you can essentially come up with one CSS file that gets applied to all of your jQuery widgets so that they each use your site’s colors and fonts.
- jQuery UI – Animations, graphical effects and UI widgets to help you get your web site away from flat HTML-only pages. Take a look at their demos page. Here are a few of my favorites:
- Autocomplete – Every site on earth should be using some auto-complete plugin for their custom search boxes. Google did this a long time ago!
- DatePickers – These have been a standard on most travel sites for a while, but it’s time we start using them everywhere.
- Dialog Boxes – We use these in desktop applications all the time. Why not keep that continuity online also?
- Sliders – This is another widget that is rapidly moving to the ‘every-travel-web-site-uses-this’ list. Let’s get away from text boxes that users have to type values into when we already know there is a limit to what can go in there. Sliders are a great way to turn a text box into something more visually appealing and useful.
- Ajax – This technology allows web pages to make background requests without reloading the entire web page in front of the user. We can move so much functionality to this framework and prevent the typical click-wait-redraw pattern. Almost everything you need to do with Ajax comes built into jQuery. Some typical uses of Ajax are:
- Form Field Validation – validate form fields as the user enters the data in each field. Why do I need to submit the entire form with 20 fields for the site to tell me that I messed up one of them? Redrawing the entire form forces the user to re-read the whole page to figure out where to pick back up and fix the errors. Validating a field at a time gives the user more direct feedback and speeds up the process overall.
- Dialog Boxes – Use Ajax requests to get content to put into overlay dialog boxes. We don’t always need to use the content area of a page to get content in front of a user. Login forms are a perfect example of this: use Ajax to get the login form, put it into a dialog box, and let the user login from there.
- If you really want to take Ajax to the next level, then combine it with a history manipulating api. You can make Ajax (background) requests to the server all over the place, but one of the downfalls of that is that those requests do not update the browser history. So if the user click’s their back button, they will not necessarily get what they expected. If you update the browser history for each ajax call, then they will!
- Lightbox plugins – There are tons of implementations of the same basic idea. A user clicks on an image and it opens a larger version in a full-screen overlay of the web page they were already looking at. Lokesh Dhakar’s version is one of the cleanest and most widely used ones out there.
- qTips – Remember speech bubbles? Yeah, like that, but for anything on a web page. You can have these appear and disappear at any time. You can turn one on when a user clicks something, or when they the roll their mouse over something, or when the page loads. Use your imagination. I love these as hover-text for navigation (so the user gets more descriptive information on what page they are about to click to get to) and for form field validation (use a red theme to highlight specific fields with errors).
Times have changed and the options are endless. As a developer, it is your responsibility to make user experience the very best that it can be. Use these tips to get started.
— Adi Rosenblum, firstname.lastname@example.org