responsive themes and ID

Jay Thornton (wcfay, Collective Bias, slides, all presentations)

Responsive design is about building a design that reacts to the screen size of any browser. Answer the question “What if I don’t know what size screen all users will be using?” impacts your design thinking.

Media Queries

@media screen and (max-width: ???px)

• general max-widths: 980px, 650px, 480px, 320px, 240
• device specific example:  @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)

Relative Sizing

Use percents and ems instead of hard pixels. Start with a base size (pixel-specific), and adjust from that as ratio.

Flexible Media/Images

Here is a discussion of flexible media and images from Ethan Marcotte, since Jay didn’t really cover anything in depth about this.