Think Mobile

Mobile Design Tidbits

This site uses the following techniques:

• Image Sprites
• Responsive Tables
• Popup Menus
• Mobile First (mostly)
• Callouts
• Responsive Images

Icons

There are different standards for icons on Android, iPhone, iPad, retina displays, and Windows Phone. This list will help you keep them all straight.

(This page has floated figures that reflow on small screens.)

Breakpoints

Where should you make your breakpoints in a responsive design? This page shows some common screen sizes for desktop, tablet, and phone, and suggests some breakpoint sizes.

(This page has responsive tables.)

iPad Media Queries

The iPad doesn't necessarily respond to media queries the way you might expect. If you want your site to display on iPad landscape orientation differently than in portrait, here is one suggestion how you might achieve that.

Responsive Tables

Sometimes tables with several columns can become too wide for a phone screen, or the cells break in ugly ways. This article suggests some CSS and Javasript techniques that can be used to re-format tables to look nice on a narrow screen.

Performance Bottlenecks

Why is your page too slow? Images too large? Too many scripts to run? This article discusses typical performance bottlenecks and how to deal with them.

Mark's Rules of User Interface

Why your users can be led astray and how to prevent it.

(This page has some responsive images.)

Quotes about Design and Web

Things to think about and keep you on the right track.

(This page has some floated callouts that reflow on smaller screens.)

Good Books about User Interface

User Interface was here long before the web, and here are a few classic tomes with long-term appeal.