Mobile Design Tidbits
This site uses the following techniques:
- Image Sprites
- Responsive Tables
- Popup Menus
- Mobile First (mostly)
- Responsive Images
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.)
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.
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.
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.