Archive for the ‘UI/UX’ Category

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: CSS, Fonts, UI/UX

Web Typography Tutorial – Lesson 1

Before I knew anything about typography, I thought of it as some kind of high magic, shrouded in arcane terminology and a long, mysterious history. Since then, I’ve learned enough to know that – although that’s all quite true – even us mere mortals can use type sensitively by learning a bit about how it works and paying just a little attention to how it is used.


Continue Reading “Web Typography Tutorial – Lesson 1″ »

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: CSS, Fonts, UI/UX

Web Typography Tutorial – Lesson 2

Ask any web designer about the use of typographic design on web pages and they’ll tell you the same truth: The web is a harsh, uninviting environment for the delicateness of fine typography. Along with the usual web culprit of platform inconsistency, the extreme low resolution of even the best current screens means type online can only allude to the geometry of the typefaces you’ve so carefully chosen and specified.

Continue Reading “Web Typography Tutorial – Lesson 2″ »

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″ »