1. Resolving Resolutions
Regnard Raquedan

2. The Situation
It used to be 800x600 versus 1024x768

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

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

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

6. 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

7. 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

8. 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"

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

10. 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

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

12. 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)

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

14. Thanks!
Blog: