Producing Images and Graphics for Responsive

12/19/13 Lecture 17 - A Little More HTML5 INTERACTIVE WEB SITES LESSON 17 LECTURE A LITTLE MORE

CS 50.12 :: Fall 2013 :: Corrine Haverinen Santa Rosa Junior College

PRODUCING IMAGES AND GRAPHICS FOR RESPONSIVE WEB DESIGN RWD moves us away from the fixed-width pages Need to consider different images for different size devices You may want to deliver a graphic with a different aspect ratio for smaller devices Need to take into account Retina Displays high pixel density devices and displays Fitting web pages to the viewport is about more than layout now - need to consider resolution

PIXEL DENSITY Early days - computer displays had a pixel density of 72 ppi or 96 ppi Displays gradually improved in pixel density - largely driven by mobile use mobile devices held closer to face so pixels more visible By 2008 - 150 ppi phones were the norm today's phones have 300 ppi - Retina close to pixels being invisible - limit of human eye's ability to distinguish finer details

RETINA DISPLAYS branded Retina by Apple starting with iPhone 4 iPhones, iPads, Desktop monitors, laptops double the pixel density from before 320 x 480 display for most mobile devices new iPhones are 960 x 640 - Apple made retina exactly double need to design graphics to be retina-capable

HiDPI MODE

www.santarosa.edu/~chaverin/html5/Lectures/week17.html#/ 1/5 12/19/13 Lecture 17 - A Little More In rendering your pages, retina devices double up the pixels e.g. a 16px font takes over 32 pixels when rendered When an Apple product has retina display, each user interface widget is doubled in width and height to compensate for the smaller pixels Apple calls this mode HiDPI mode iOS devices ignore the PPI settings in images get dimensions set right Create 2 versions of images and name your images: 2x - means graphics designed for retina 1x for non-retina

BUILDING WEB SITES THAT ARE RESOLUTION INDEPENDENT Presenting page elements as fixed sizes may have issues now users may end up zooming Relative sizing - ems or percentages vs pixels used it with Fonts, now need to consider for graphics base sizing on default of 16 pixels or 1 em Study example in Resolution Independence With SVG Brush up on relative font sizes

SERVING GRAPHICS FOR VARIABLE PIXEL DENSITIES Images Avoid images - where possible make vector graphics Vectoring images will not look good - so cannot avoid raster images Resolution independent options SVG CSS - automatic pixel scaling feature of the web not so elegant a solution

SERVING IMAGES FOR RETINA - GOALS Provide every user with one image optimized for their display and resolution Don't waste time, memory, bandwidth If you send high-resolution image to all devices = waste of bandwidth and memory If you send regular-resolution images = less crisp on high resolution displays

SERVING IMAGES TO RETINA DEVICES ONE IMAGE APPROACH - COMPRESS MORE

www.santarosa.edu/~chaverin/html5/Lectures/week17.html#/ 2/5 12/19/13 Lecture 17 - A Little More Low density images will look the same on new screens, but not as crisp as high density images Use high density image will sacrifice performance since you will be downloading HiDPI images even on older devices with lower DPI Heavily compress a HiDPI image Use one image but do something clever with it (new stuff) new WebP image format - talked about in this article: High DPI Images for Variable Pixel Densities Clown Car Technique

SERVING IMAGES TO RETINA DEVICES MULTIPLE IMAGE APPROACH WITH CSS MEDIA QUERIES use CSS media queries in order to deliver the right graphics to the right screen based on certain criteria provide two sets of images: one for the standard display found in the older devices, and one set of images for the new Retina Display save as 1x and 2x versions (@2x for easily working with JS) this approach only works for background images - media queries will only affect images called for in CSS, not in HTML

CREATING THE IMAGES FOR RETINA DEVICES design projects at 1x if in vector scale to 200% for 2x use percentage in Image Size dialog box opposite for raster images - start big and go small Article: 5 Things I Learned Designing For HighResolution Retina Displays

SAMPLE MEDIA QUERY CODE You can use devicePixelRatio - has min and max variants #my-image { background: (low.png); } @media only screen and (min-device-pixel-ratio: 1.5) { #my-image { background: (high.png); } }

VENDOR PREXFIXES

www.santarosa.edu/~chaverin/html5/Lectures/week17.html#/ 3/5 12/19/13 Lecture 17 - A Little More You need to add vendor prefixes @media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) { #my-image { background:url(high.png); } } See CSSTricks site for more examples

RETINA JS - RETINAJS.COM

Open-source JavaScript makes it easy to implement Retina graphics on your site download and install looks for high-res graphics and substitutes them when accessed by someone with high-pixel- density device looks for a modifier at the end