1 / 14
Télécharger la présentation

Resolving Resolutions

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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) • 1440x900 (16:10) • 1680x1050 (16:10) • 1920x1200 (16:10)

  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@raquedan.com • Blog: http://webstandards.raquedan.com

More Related