0
Death of the Pixel
Or:
How
I Learned
To
Stop
Worrying
And
Love
All
these
screen resolutions
Patrick McSweeny
●

Using the web since 1996

●

Developing with CSS since 2007

●

Also work with server-side code and a ...
Historical Perspective
●

1990s “Best viewed at x resolution”

●

Early 2000s: Unfortunate trend of image slicing

●

Mid ...
Current Perspective
●

Screen size and resolutions vary much more than before
–

Iphone no longer dominates mobile

–

Sma...
Current Approaches
●

Adaptive and/or Responsive
–

Hard to pin down definition

–

Target screen sizes

–

Fluid rather t...
Current Aproaches
CSS To the Rescue
●

Things that were recently only possible via images can now be rendered natively

●

Media Queries

●
...
Why Move away from Pixels?
●

Accessibility

●

More robust code

●

More efficient coding

●

Better suited for Content C...
Only Two things Matter

Content

User
Content Centered Design
●

Content drives design instead of design driving content

●

Layout and typographic styles shoul...
Pixel Design Example
CCD CSS Example
Getting Started
●

Target/Context = Result
–

Example: Typographic styles based on 16px context
●
●
●

–

H1: 32px/16px = ...
Transitioning
●

Think of text element styles in ratios using ems
–
–

Line-height

–
●

Font-size
Margins

Consider using...
Brand New
Viewport width and viewport height
–

Measured as percentage of width and height of viewport

–

Progressive enh...
Other Techniques

Use scalable fonts
–

Large x-height (lowercase letter height)
Space around letters

–

Visible ascender...
Other Techniques
●

Write lean CSS/HTML that doesn't suck

●

Keep images to a minimum

●

Try to use min/max width and he...
Further Study
●

Treehouse: teamtreehouse.com

●

Firebug/Chrome Inspector

●

Hack!
@PatrickMcSweeny
Death of the Pixel
Death of the Pixel
Death of the Pixel
Upcoming SlideShare
Loading in...5
×

Death of the Pixel

95

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
95
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×