Resolving Resolutions Regnard Raquedan

The Situation It used to be 800x600 versus 1024x768

Now… 800x600 1024x768 1280x960 1600x1200 4:3 aspect ratio…

More aspect ratios! 1280x768 (5:3) 1280x1024 (5:4) 1280x800 (16:10)

Why is this happening? Widescreen laptops Ultra portables Mobile devices Better graphics capability Monitor sizes

Monitor Resolutions Size Resolution Ratio 12.1" 800 x 600 4:3 5:3 1280 x 800 16:10 1400 x 1050 13.3" 14.1" 1280 x 1024 5:4

Monitor Resolutions 2 Size Resolution Ratio 14.1" 1440 x 900 16:10 4:3 15" 1024 x 768 15.2" 1152 x 768 3:2 15.4" 1280 x 800 1280 x 854 ~3:2 1440 x 960

Monitor Resolutions 3 Size Resolution Ratio 15" 1400 x 1050 4:3 15.4" 16:10 1600 x 1200 1920 x 1200 17" 1280 x 800 1440 x 900 20.1"

Issues Vertical size Horizontal Scrolling Harder to address People are used to vertical scrolling “Above the fold”

Now What? Fixed Layout Liquid Layout Hybrid Layout Limited application, but works on some types of websites Easy to implement “Best viewed using…” Liquid Layout Better option for inclusion strategy Hybrid Layout

Liquid Layouts HTML Tables CSS Not recommended, but easy Not web standards compliant CSS Plenty of techniques; Better option “Stacked” layouts

Things to consider Max Design recommends: work out a basic layout grid before you begin coding include gutters so that your columns will not spread too wide use percentage units for widths of all containers and gutters do not define containers that use the full width of a page - allow for browser rendering issues (such as percentage rounding)

What else? Testing different resolutions Going for a minimum 1024x768 is a safe bet Consider browsers Box model Font sizes

Thanks! Email: regnard@raquedan.com Blog: http://webstandards.raquedan.com