Archive for the ‘UI/UX’ Category

File Under: UI/UX

Mulders Stylesheets Tutorial – Lesson 1

Building Web pages with HTML is like painting a portrait with a paint roller. Only truly determined and tenacious souls can achieve the exact result they want. It’s just not the right tool for precision and flexibility.

Anyone who’s used HTML for more than a week knows it isn’t a very effective tool for making Web pages. That’s why we sometimes resort to making large GIFs when we want just the right font or layout. That’s why we’re forced to use convoluted table tags and invisible spacer GIFs to push things around on a page.

It’s ridiculous, really. Our code gets too complicated, our GIFs too numerous, and our final pages too bandwidth-heavy. It’s not exactly optimal Web page construction.

But in late 1996, stylesheets quietly entered the scene. Officially called cascading stylesheets (CSS), it was an elegant cousin to HTML that promised:

  • more precise control than ever before over layout, fonts, colors, backgrounds, and other typographical effects;
  • a way to update the appearance and formatting of an unlimited number of pages by changing just one document;
  • compatibility across browsers and platforms; and
  • less code, smaller pages, and faster downloads.


Despite lukewarm support from many of our favorite Web browsers, CSS is starting to make good on these promises. It’s transforming the way we make Web pages and is the cornerstone of Dynamic HTML.

We’ll spend the next five lessons taking a tour through the land of stylesheets. You’ll learn the basics of how to create and use cascading stylesheets within your Web pages as well as what’s possible with fonts, typography, colors, backgrounds, and positioning.

Continue Reading “Mulders Stylesheets Tutorial – Lesson 1″ »
File Under: CSS, UI/UX

Mulders Stylesheets Tutorial – Lesson 2

Welcome to Lesson 2 of our tutorial on the wondrous language known as cascading stylesheets. After Lesson 1 on the basics of how to use and add stylesheets to Web pages, we can now begin exploring the individual properties that make them more than cool.

Lesson 2 is devoted to fonts: calling them by name, controlling text size, specifying all manner of bolds and italics, and adding special effects. Do you think you can do all these things with existing HTML tags? Well, you can’t.

The CSS properties covered in this lesson include:

  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant
  • text-transform
  • text-decoration
  • font


Let’s get started.

Continue Reading “Mulders Stylesheets Tutorial – Lesson 2″ »
File Under: UI/UX

Site Optimization Tutorial

Overview

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


File Under: Backend, UI/UX

Site Optimization Tutorial – Lesson 1

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″ »
File Under: UI/UX

Information Architecture Tutorial

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!


Suggested readings