• Dan Cederholm suggests serving up an un-styled version of the site.
• Nathan Smith points out that there ought to be a polite way to help the user upgrade their browser.  This is accomplished through a meta refresh.
• The creators of IE6 Update encourage an update with something that looks like IE’s Information Bar.  It contains a link to the latest release of IE.  Since Microsoft has marketed their browser as “the Internet” the creators reason we shouldn’t feel bad about tricking the visitor into moving on to a better browser.
• http://www.bringdownie6.com/ appears to be the one of the nicest looking unified efforts to get people to do something to encourage user awareness of IE6’s shortcomings. I wouldn’t include their graphics on anyone’s homepage, but I included it here, and now I feel like I’ve done my part. IE6 users get the following message:

If you’re reading this, you’re surfing using Internet Explorer 6, an eight-year-old browser that cannot cope with the demands of the modern internet. For the best web experience, we strongly recommend upgrading to Firefox, Opera, Safari, Google Chrome, or a more recent version of Internet Explorer.

Education is powerful, and the unifying theme on all of these sites and posts is: making your audience aware there are better options available to then, they are more likely to change, especially if you help make the change easy.

font: weight | variant | style | size/line height | font-family

font: bold small-caps italic 1em/1.25 Georgia, "Times New Roman", Times, serif;

For this to work, you must include font-size and the font-family (in that order).  They must also be the last two values listed.  If you leave out values, those values will render in their default state, ignoring inheritance and other group selectors.

Line height is optional.  Note that line height doesn’t have a unit.  Eric Meyer explains why.

This video has been widely circulated on the web for the past few years, but it seems that the message becomes even more important as time goes on.

I just watched Endward Tufte’s video review of the iPhone and pulled out some interesting principles of UI design and usability. The inherent challenge of a designing for a small screen is the lack of screen real estate. To overcome that challenge, Apple gives their users a high resolution screen and amazing design to mange the information. Watch the video and see for yourself how the iPhone reduces cognitive overload by keeping information on just a levels rather than deeply stacked hierarchies.

One thing that Tufte says repeatedly as both a compliment and criticism is how Apple manages “screen-hogging computer administrative debris.” If it’s not necessary to navigate within a page, it’s just taking up space.

Another principle he suggests is that clutter and confusion are not attributes of information, but failures of design. If confusion exists, fix the design.

My natural tendency is to strip away elements in order to simplify a design. Tufte suggests the opposite. He says, “To clarify add detail.”

It’s amazing the things you can learn from an expert observer.

1. DOCTYPES are essential for browsers to know how to render your page, especially older browsers. The three main types are Strict, Transitional, and Frameset.  Strict is probably the best choice unless you plan to use deprecated tags.  There’s no reason to re-type this code every time you create a page and increase the chances of getting it wrong.  Copy the code from an authoritative page, or let your code editor to do it for you.  I’ve set Dreamweaver to render the strict type by default.
2. XHTML is flexible but it requires your code to be written correctly, which is a good thing. If you can validate your code, it’s more likely to display the way you want it to.  All tags need to close.  For example: <p>A sample paragraph with a couple of sentences… must end with this tag </p>.  Tags that don’t have an enclosing tag, still need to close.  These are called empty elements, and the image tag is an example: <img src=”dog.jpg” alt=”My Dog Skip” />
3. All tags should be written with lowercase characters. This one is easy to implement.
4. Correctly nest your elements. Certain tags are block level elements and others are inline.  The div tag (which stands for division) is a block-level element.  If you assign a background color to a div and put some content in there, the div will look like a box.  Links (or anchor tags) are inline.  You can wrap an anchor tag around a word in a paragraph, and it will stay “inline” with the rest of the text.  I have been tempted on occasion to wrap a link around a div, which is a no-no.  You shouldn’t nest block-level elements in inline tags.
5. Use encoded equivalents for “&” and other special characters. You’ve probably noticed a funny character when looking at some web pages and wondered what it is: ?.  It’s a white diamond in a black question mark and is called the Unicode Replacement Glyph.  To insure that all ampersands, quotation marks, dashes, etc. display properly, use their encoded equivalents.  If your authoring software doesn’t suggest a code, check out this reference.

I don’t consider this an exhastive list on how to write proper XHTML because there are many ways to mess it up.  It does include some of the most important ideas and the most common errors.  Now go and fix all those pages you’ve made that have problems!

An excellent article based on direct observation by Mary Theofanos and Janice Redish gives some great suggestions on how to improve accessibility.  Here is a partial summary of some of their ideas and a few of my own:

• Write for the web. Screen readers begin reading at the begining of a section.  Those who use them scan web pages auditorily like sighten users scan with their eyes.  Place keywords at the begining of a line of text so they your users have the most important information first.
• Build a page with proper XHTML structure. The wonderful thing about semantic coding is that it makes sense in a hierarchy and provides structural context.  Even though your page may display differently, your markup should reflect what is most important to your user.
• Use proper CSS techniques. CSS is allows designers the freedom to display a page the way they’d like it seen, but is also allows a user the same luxury.  By employing CSS best-practices, you can maximize a users experience by letting them “see” a page that makes sense for them.
• Use alternative text for all images. It always suprises me how many websites still don’t include alt text for images.  Crafting a perfect description for a complicated graphic may be a little tricky, but something is better than nothing.  If an image is purely decorative, it’s better to have an empty alt tag (i.e. alt=” “) so that the screen reader will ignore it.  Having appropriate alt text will improve your search engine ranking for images, which is reason enough to include it.
• Make content, especially forms, keyboard accessible. Tabbing through form fields is something a lot of people do. If you’ve ever watched a computer power user, they often don’t even touch their mouse, or they have one hand on the keyboard at all times.  Some people can’t use a mouse, so this one is very important.

As your tools to create web pages become more sophisticated, you’ll find that accessibility will be a more integrated part of your workflow.  Being aware of the big ticket items will help you move forward in your goal to create amazing work for a global audience.

One of the most powerful, simple, and important suggestions he gives is how to conduct a usability test.  After reading the book and visiting his website, I found a video of the author giving a workshop.  It is a very good overview of the book and includes a usability test demonstration.  I encourage you to watch the video (or at least listen) and get the book if you don’t already have it.

Create the Rails Project
Go to your projects directory and create a rails project. Just for fun, let’s call it ‘bank’:

Create MySQL Databases
Go into mysql and create the two databases that rails has set up the bank project to use:

Put Gems Into Environments
Edit the files

and

and add the following lines:

config.gem "thoughtbot-factory_girl", :lib => 'factory_girl', :source => 'http://gems.github.com'
config.gem "rspec", :version => '1.2.2', :lib => 'spec'
config.gem "rspec-rails", :version => '1.2.2', :lib => false

This sets up the test and development environments to use rspec and factory girl.

Install the Gems
Install the gems referenced in your environments:

You’ll see output that says that the gems were installed, if you didn’t have them already.

Bootstrap RSpec
Do a:

You will see the following:

This generates some default rspec files and directories that the project will use.

Generate Model, Test, and Migration with rspec_model
Do a:

You will see the following output:

This will create a default test at

and a BankAccount model in

and a migration in

You can also do a script/generate rspec_scaffold BankAccount.

Edit the Test
Go to

and you will see:

require File.expand_path(File.dirname(__FILE__) + '/../spec_helper')
 
describe BankAccount do
  before(:each) do
    @valid_attributes = {
    }
  end
 
  it "should create a new instance given valid attributes" do
    BankAccount.create!(@valid_attributes)
  end
end

Since this is a bank account, one of the behaviors that we would expect is to be able to make deposits into it. That being the case, let’s change the test to

require File.expand_path(File.dirname(__FILE__) + '/../spec_helper')
 
describe BankAccount do
  before(:each) do
    @bank_account = BankAccount.create
    @bank_account.balance = 0
  end
 
  it "should increase the balance upon deposit" do
    @bank_account.deposit(100)
    @bank_account.balance.should == 100
  end
end

Also, edit

and change ‘progress’ to ’specdoc’ (because it will make rspec output look a lot better)

Edit the Migration
We need to add the ‘balance’ attribute to the model. Go to

(or some file like that)

and change the migration to

class CreateBankAccounts < ActiveRecord::Migration
  def self.up
    create_table :bank_accounts do |t|
      t.float :balance
 
      t.timestamps
    end
  end
 
  def self.down
    drop_table :bank_accounts
  end
end

Edit the Model Now we need to add the deposit method to the BankAccount model. Go to

Change the class to

class BankAccount < ActiveRecord::Base
 
  def deposit(amount)
    self.balance = self.balance + amount
  end
 
end

Migrate the DB, Run RSpec Now, do a

and then a

You should see:

At this point, RSpec is functioning.

Add Factory Girl
Want to add Factory Girl? The environments are already set up and gem is installed. The rest is not hard:

Create a ‘factories’ directory under the ’spec’ directory.

and make the file

and put this inside:

Factory.define :bank_account do |ba|
  ba.add_attribute :balance, 0
end

Edit the Test
Open

Change the body of the before each block to

@bank_account = Factory(:bank_account, :balance => 0)

Since the factory you just made (spec/factories/bank_accounts.rb) automatically sets the balance to 0, you could leave the body with just

@bank_account = Factory(:bank_account)

and it would still work.

The finished spec/models/bank_account_spec.rb will look like this:

require File.expand_path(File.dirname(__FILE__) + '/../spec_helper')
 
describe BankAccount do
  before(:each) do
    @bank_account = Factory(:bank_account, :balance => 0)
  end
 
  it "should increase the balance upon deposit" do
    @bank_account.deposit(100)
    @bank_account.balance.should == 100
  end
end

Watch RSpec Run With Factory Girl
Watch the test run with Factory Girl:

The wonderful thing about web design is that it’s flexible and growing.  You can build a site wearing your pajamas in your home at 3:00 am, or work 9 to 5 at a day job.  Even in a shaky economy, every business needs a website.  In fact, most start-up companies get their website up and running before they print business cards (if they print any at all).

You’ll find that most web designers are self taught.  This is a good thing because a web designer needs to know how to self direct their learning because the learning never stops.  I’ve done a little searching on the sites of universities in my area, and have found individual courses in web related subjects, but not a cohesive program pulling these classes together.  Learning about the web on the web is obviously one of the best ways to learn new tricks and tips.  On the other hand, the really useful content is strung across innumerable blog posts, so this may be tricky way to get grounded.  I highly recommend picking up a well written book on the fundamentals of CSS and XHTML.  My personal favorite is Stylin’ with CSS, by Charles Wyke-Smith.  It is written in an easy-to-read manner and contains many helpful visual examples (not to mention free code samples on the website).  I also recommend CSS Mastery, by Andy Budd, Simon Collison, and Cameron Moll, for those who already have some familiarity with the basics.

Once you have a solid starting point, dive in there and start coding your ideas.  May I also suggest a couple online magazines about web design to keep those creative juices flowing.  A couple that I like are Smashing Magazine and A List Apart.

It’s an exciting time for designers.  Web standards are widely recognized and are now being implemented.  If you are just starting, you hopefully won’t have to worry too much about IE6, as IE8 was just released last month.  Designing for the web isn’t restricted to designing for a computer monitor anymore as more and more mobile devices are literally in consumers hands.  To state the obvious, the web is a very social place.  I’d say the one commonly agreed upon characteristic applied to the term Web 2.0 is interactivity.  Most web savy folks not only want to teach you what they know, but tell you all about their kids and hobbies.  On the average designer’s blog, you find many tutorials on styling techniques, not to mention links to flickr photos, twitter tweets, or a facebook profile.

Learning how to create for the web has never been easier.  Make friends, work hard, and you’ll see amazing results.

Update 5/5/2009: I discovered a couple more good resources for web design education. Aaron Walter posted a great article about Web Education on A List Apart. I’m personally pretty excited about the Opera Web Standards Curriculum (Opera WSC), and have reviewed a few of the articles.  I also really love lynda.com and loads of video tutorials.  There are some great resources available for the web designer.