We’re all tired of waiting for web pages to download, aren’t we? To make sure that visitors to your site don’t get frustrated, we rounded up some in-house experts to help you make your pages faster ‘n greased lightning.
Pictures are worth a thousand words — especially on the web, where pages of text can download in the time it takes for a single image to load. Your images may be sub-zero cool, but if they’re too plump, few people will stick around long enough to see them. We’ll dig into tricks and optimizations to speed up your GIF, JPG, and PNG downloads.
Once you’ve learned the basics of shrinking your images, we’ll will walk you through the advantages of using CSS for your page layout. And, if you’re one of those people who insists on using tables, we’ll offer you a few choice hints on how to get those tables slim and streamlined.
After you’ve removed the bloat from your layout code and your images, you’ll learn how to cut needless elements from your pages. Hint: Start with all those links.
The series concludes with wise words about how to come up with benchmarks for speed and how to test your site using nothing but a stopwatch and a pencil.
Get started with with lesson 1
Site Optimization Tutorial
A picture’s worth a thousand words. An old saying, but true enough on the web where you can transfer chapters of text in the time it takes to download just one big image. Ever notice how pictures are always the last thing to show up when you’re surfing? That’s because the biggest hunk of download time comes from the image files.
Over the next four days, we’ll be looking at all the different ways to get pages down to their leanest and meanest. Today we start with the most egregious and most obvious culprit: images.
By the way, a lot has changed since the first edition of this tutorial – there’s more to optimizing image performance today than just knowing your GIFs from your JPEGs. (Though we’ll review that, since this may be your first time around.) There are now other file formats (like PNG) worth considering, and improved weighted-optimization techniques to throw into the mix.
And, hey, quite a bit hasn’t changed. For one, web users haven’t gotten any more patient. It doesn’t matter how ice-cool your images may look – if they can’t be downloaded quickly over a 56K modem, very few people without broadband will stick around to see them.
Fortunately, there’s still a host of tricks and optimizations that web designers can implement to speed image downloads. Let’s start with the easiest thing in the world.
Continue Reading “Site Optimization Tutorial – Lesson 1″ »
Information architecture is the science of figuring out what you want your site to do and then constructing a blueprint before you dive in and put the thing together. It’s more important than you might think, and John Shiple, aka Squishy, tells you why.
Squishy first looks at how to define your site’s goals, shedding light on the all-important art of collecting clients’ or co-workers’ opinions and assembling them in a coherent, weighted order of importance. He also shares his scheme for documenting everything so that all parties can keep up.
The next step is figuring out who the heck your audiences are going to be. Once that’s out of the way, you can start organizing your future site into pages of content and functions that the site will need to have.
Next, Squishy gets into creativityland, where you start to build the beast:form a skeleton, pick your metaphors, map out your navigation. Then it’s time to break out the graphics program, come up with layout grids, design sketches, and mock-ups, and get ready to build!
Why’s Information Architecture So Important?
Information architecture (also known as IA) is the foundation for great Web design. It is the blueprint of the site upon which all other aspects are built – form, function, metaphor, navigation and interface, interaction, and visual design. Initiating the IA process is the first thing you should do when designing a site. This series of articles describes specific methods and processes for developing a site’s information architecture.
Clients sometimes view the development of an IA to be impractical, both in terms of the time it takes and the skill needed to do it effectively. But this mentality is slowly changing. A good IA is incredibly effective, and knowing the basics of the IA process can save both time and money in the long run. Also, you don’t need to be an expert to use it to your advantage.
This series will demonstrate how easy and powerful the IA process can be. We’ll present two ends of the design continuum, which can be thought of as either the difference between developing a small and a large site or the difference between having little time and having lots of time to design a site.
Each article presents a portion of a design document. Upon completing this series, you will have the template for a complete IA design document; the record of the decisions made in designing the site. It serves as a road map for the site’s construction. Additions and revisions are made easier by the presence of this document. Oh, yeah – and clients and management love this stuff.
Also, just about everyone these days is a proponent of ease-of-use. Well, ease-of-use starts here. It’s practically guaranteed if you have a solid information architecture at the outset.
Continue Reading “Information Archetecture Tutorial – Lesson 1″ »
Define the User Experience
After figuring out why a site should be built, the second most important aspect of designing information architecture is determining who the audience is. This is an invaluable step that many people fail to grasp. Many sites do not even take into consideration who will be using them. How can you design a site if you don’t know who’s going to be seeing it?
Some people think an audience is defined by the technology it uses to access the site. This, too, is missing the point. That a user visiting the site uses a 28.8 modem is only a small part of the audience definition. A true audience definition consists of who the users are and their goals and objectives. Scenarios, or stories, are useful in visualizing the audience.
Oftentimes, a single department or group in a company takes the lead in putting together a Web site. The result is usually a site focused on that group’s needs, which ignores the needs of everyone else. For a long time, MIS departments were responsible for putting together their corporate sites. These sites were utilitarian, and neglected important departments, like marketing. It is your job to prevent this from happening on your site.
Defining beforehand the user experience you seek establishes a clear, well-documented definition of your audience, and it helps in understanding how users will react to the site.
To get started on this stage of the IA process, just as with defining the goals, you need to figure out who will be involved and how much time you will have. Generally, the same people will be involved. However, you probably will change how you weigh each person’s opinion. For example, the marketing department should have a good idea of who your audience is. If that is the case, you’ll want to listen to them more than to others.
Defining the audience takes less time than defining the goals, because you have already established how you will be working with people – whether formally or informally – and you are more familiar with asking them questions and getting responses.
Continue Reading “Information Architecture Tutorial – Lesson 2″ »