1 / 14

Resolving Resolutions

Explore the evolution of monitor resolutions from 800x600 to multiple aspect ratios, how widescreen laptops and better graphics capabilities have influenced this shift, and the challenges faced with different resolutions. Learn about fixed, liquid, and hybrid layout strategies, along with considerations such as layout grids, gutters, and container widths for optimal web design. Discover testing methods, minimum resolution recommendations, browser compatibility, and font size adjustments. For more insights, reach out to Regnard Raquedan at regnard@raquedan.com or visit his blog at http://webstandards.raquedan.com.

bnoland
Download Presentation

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