Navigation Keys:

Next Slide

Space Bar and Right Arrow

Previous Slide

Left Arrow

First Slide

Home

Last Slide

End

I’m a programming snob

My first Java program was RSA

Pointer arithmetic makes me happy

I ♥ compilers

I hate weakly typed languages

I look down my nose at
JavaScript programmers

1. Good UI Starts With Good Architecture

To customers, the interface is the product

How I learned to stop worrying
and love REST

Server

Client

REST makes your APIs better

Speed is a usability issue

JavaScript is full of dark corners

parseInt('8') = 8
parseInt('08') = 0

Mix and match JQuery and GWT

Wrapping JavaScript In GWT Is Easy

JQuery UI Datepicker

JQuery UI Progress Bar

The Tools Can Save You

Check your JavaScript - JSLint

Compress your JavaScript - Google Closure Compiler

Pack your CSS - YUI Compressor

Test your JavaScript - QUnit

2. Five Rules of Spiffy UI

Rule 1. Simple HTML

GWT File Upload

81 HTML Tags

Spiffy File Upload

21 HTML Tags

Rule 2. All layout in CSS

custom.css

#mainBody {
    margin-left: 10px;
}

#mainNavigation {
    float: right;
}

Rule 3. No FlexTable

Rule 4. All images and branding in CSS

Classic Spiffy...

Gone in 60 minutes

Rule 5. Love the grid

Messy Vertical Rhythm

Clean Vertical Rhythm

3. Would You Buy A Car With
Three Steering Wheels?

Simplicity isn’t simple

Say “No” …a lot

We said no to

The back button
Authentication configuration UI
Categories
Running the client and server on separate servers
Localized reports
…and over a dozen preferences

All UI is contextual

4. Details Matter

Define your style plan

Give feedback as early as possible

Don’t fear custom controls

Modality is really hard

Humanized dialogs avoid modality

Waiting doesn’t have to be the hardest part

5. Discuss, Argue, and Brag

Your application gets better
every time you talk about it

Never design in a vacuum

More writing means better code

6. Lessons Learned

Architecture drives UI

If you write software for humans,
you’re a designer

I don’t know what I’m doing

Never stop revising

Argue about your UI

Avoid modality

Learn CSS

Quality software does what you expect

Share the bugs

And ask lots of questions…

Resources

Google Closure Compiler

WordPress Editorial Calendar

Fluid Grids, Vertical Rhythm, and CSS Blocking

Calling REST from GWT with a little bit of JQuery

Creating a JQuery Powered Posts Calendar for WordPress