Responsive Web Design

What is RWD?

• Optimal viewing AND interaction experience

• Layout adapts fluidly to screen

• Elements are generally flexible

• Love pixel-perfect design? You’ll hate RWD :)

CSS3 Media Queries• Styles can load based on browser width

• Useful to re-style and resize page elements

Responsive JavaScript• Can be progressive - loaded as needed

• Can also be activated based on browser width

PHP - Mobile Detect• https://github.com/serbanghita/Mobile-Detect

• Allows loading of content (and querying database) occur only on screens that it needs to

• https://github.com/serbanghita/Mobile-Detect

Can I see a good example?

Show me something awful

Caveats• User Expectations

Change

• Longer Design and Development Cycle

• Dat Load

• Pixel Pushers

• Endless Devices