Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)

Editor's Notes

  • #2 Intro, welcome to Wash U,
  • #4 33% use mobile as PRIMARYway to accessSmaller screens + slower networks
  • #5 While more people are using SMALLER SREENS with SLOWER NETWORKS to access our websites, the SIZE is getting BIGGER.----- Meeting Notes (3/1/14 07:16) -----The amount is the SAME. Just bigger. Why?
  • #6 Retina screens are nice because we can show clearer images, but 2x larger images are also ~4x the file size
  • #7 For a lot of users, we’re making the internet SUCK waaaaay more.STILL NOT CONVINCED?
  • #8 - 30 terms : 20% less searches....speed matters.- page weight -30% : +30% more REQUESTS- Project 22% faster and saw 18% more page views.
  • #12 SVGs are Illustrator files for the web
  • #13 Bonus points if you use: SVGO (Optimizer)SVGs can’t be uploaded to WP by default
  • #14 So we’re good to go right?(Sad trombone)
  • #16 SVG as background imageFEAUTRE Detection adds a class to the body tag
  • #17 Using SVGs in your HTML??
  • #18 NO feature detectionNOTE the double download.
  • #19 Uses ONERROR=…</SVG>
  • #20 DASHICONS since WP3.8ICOMOON
  • #23 Similar symbolsPrivate use UnicodeUse ARIA
  • #25 TIP:SPRITES can be added to :BEFOREpseudo-ELEMENTCHECK TIME. Pause for questions maybe.
  • #27 ImageOptim: Right click > Services > ImageOptimCompress a whole folder full of images. So good.
  • #29 That’s how you show layout appropriate images.But truly responsive means right image forThe right context…so: