Resolving Resolutions

1
Resolving Resolutions

• Regnard Raquedan

2
The Situation

• It used to be 800x600 versus 1024x768

3
Now

• 800x600
• 1024x768
• 1280x960
• 1600x1200
• 43 aspect ratio

4
More aspect ratios!

• 1280x768 (53)
• 1280x1024 (54)
• 1280x800 (1610)
• 1440x900 (1610)
• 1680x1050 (1610)
• 1920x1200 (1610)

5
Why is this happening?

• Widescreen laptops
• Ultra portables
• Mobile devices
• Better graphics capability
• Monitor sizes

6
Monitor Resolutions
7
Monitor Resolutions 2
8
Monitor Resolutions 3
9
Issues

• Vertical size
• Scrolling
• Horizontal
• Harder to address
• People are used to vertical scrolling
• Above the fold

10
Now What?

• Fixed 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
• 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!

• Email regnard_at_raquedan.com
• Blog http//webstandards.raquedan.com