Death of the Pixel

184 views

Published on

These are the slides from a talk I gave about CSS development in the current era on February 2, 2014 in Ann Arbor. It expands on a section from a previous talk I gave.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
184
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Death of the Pixel

  1. 1. Death of the Pixel Or: How I Learned To Stop Worrying And Love All these screen resolutions
  2. 2. Patrick McSweeny ● Using the web since 1996 ● Developing with CSS since 2007 ● Also work with server-side code and a little design
  3. 3. Historical Perspective ● 1990s “Best viewed at x resolution” ● Early 2000s: Unfortunate trend of image slicing ● Mid to late 2000s – CSS takes over – Fixed width layouts common Heavy use of images –
  4. 4. Current Perspective ● Screen size and resolutions vary much more than before – Iphone no longer dominates mobile – Small tablets, big phones – Desktop screens larger than ever Pixels are not necessarily pixels –
  5. 5. Current Approaches ● Adaptive and/or Responsive – Hard to pin down definition – Target screen sizes – Fluid rather than hard coded values Possible to use both –
  6. 6. Current Aproaches
  7. 7. CSS To the Rescue ● Things that were recently only possible via images can now be rendered natively ● Media Queries ● New(ish) ways of thinking about measurement
  8. 8. Why Move away from Pixels? ● Accessibility ● More robust code ● More efficient coding ● Better suited for Content Centered Design
  9. 9. Only Two things Matter Content User
  10. 10. Content Centered Design ● Content drives design instead of design driving content ● Layout and typographic styles should determined by information hierarchy ● Makes things easier on everyone: designer, developer and user
  11. 11. Pixel Design Example
  12. 12. CCD CSS Example
  13. 13. Getting Started ● Target/Context = Result – Example: Typographic styles based on 16px context ● ● ● – H1: 32px/16px = 2em H2: 24px/16px = 1.5em P: 16px/16px = 1em Example: 1000 px two column layout ● ● Column One: 700px/100px = 70% Column Two: 300px/1000px = 30%
  14. 14. Transitioning ● Think of text element styles in ratios using ems – – Line-height – ● Font-size Margins Consider using ems for width/height of container elements – – Adjusts along with text size Text should be the most important thing on your site
  15. 15. Brand New Viewport width and viewport height – Measured as percentage of width and height of viewport – Progressive enhancement because not widely supported – VW is particularly useful for font-size of headers on mobile device
  16. 16. Other Techniques Use scalable fonts – Large x-height (lowercase letter height) Space around letters – Visible ascenders/descenders –
  17. 17. Other Techniques ● Write lean CSS/HTML that doesn't suck ● Keep images to a minimum ● Try to use min/max width and height attributes instead of static width/height ● Set hard-coded max-width in pixels of wrapping element
  18. 18. Further Study ● Treehouse: teamtreehouse.com ● Firebug/Chrome Inspector ● Hack!
  19. 19. @PatrickMcSweeny

×