Making your Responsive Site – Picture Perfect

View Github Repository Open presentation in a new window

startinggravity

See all presentation from startinggravity

Making your Responsive Site – Picture Perfect

0 1

picture-perfect-drupal

A presentation on tips to make images on Drupal sites responsive and optimized.

On Github startinggravity / picture-perfect-drupal

Making your Responsive Site

Picture Perfect

Presented: July 31, 2014 - Capital Camp and Gov Days '14 August 23, 2014 - Drupal Camp Asheville 2014 September 13, 2014 - Drupal Camp Chattanooga 2014 October 4, 2014 - Drupal Camp Atlanta 2014

This session will be repeated at the Chattanooga Drupal camps.

Jim Smith

[reveal]

Play along at home

This presentation can be found athttp://startinggravity.github.io/picture-perfect-drupal

Download a copy of the presentation to get the links. [view survey]

Where are we trying to go?

What are our goals for this session? Where are we trying to go?

Great looking websites

We want great looking websites, yes, but that's not enough.

...that look good on any device

Our sites must look good on any device, including devices not yet invented.

Easy Responsive Images

            img {
            max-width: 100%;
            }

Except... This won't work on IE 6 or 7

http://sassmeister.com/gist/startinggravity/4f7f692eb60e92c23ece

To make an image fit any device, make it scalable. Fortunately, just a little bit of CSS will make that happen. Setting max-width to 100% ensures the image does not scale larger than its actual size and it will be constrained by the container around it. [reveal] This CSS won't work on IE 6 or 7.

Easy Responsive Images for IE 6 & 7

            img {
            width: 100%;
            }
Use width 100% on IE 6 and 7 if you must design for those browsers.

Thank You

Thanks and enjoy the rest of the camp.

You didn't really think it would bethat easy, did you?

Responsive sites need more than just resizable images!

What's Wrong with the Easy Way?

              img {
              max-width: 100%;
              }
Looking at our easy solution we see the problem: We're treating every image the same, regardless of where it appears.

One size does not fit all!

Display Size

We should never try to load images that are larger than necessary.

One size does not fit all!

Pixel Density

We also need to understand that some displays are capable of handle high density images. An image with a 2x multiplier will have four times the number of pixels.

For great images you mustuse the right tools

Producing sites with great images is all a matter of using the right tools.

What we'll use

  • Media Queries
  • Breakpoints
  • CSS Preprocessor (Sass)
  • Compass
  • Sprites
  • Icon Fonts
  • Modernizr.js
  • Vector Graphics (SVG)
Media queries - Breakpoints - CSS Preprocessor (Sass) - Compass - Modernizr - SVG - Sprites

And we'll use

  • Picture Module
  • Breakpoints Module

These two modules work together with image styles, already in core, to deliver images appropriate to the device size and display density.

Before we get too far,some definitions.

Some definitions...

Media Query

A media type and zero or more expressions that define a style sheet's scope. These may be such things as width, height, color or resolution.

Best practice: Media queries are hard to keep track of unless you use a CSS preprocessor.

Media Query

              @media (max-width: 50.875em) {
              .links a {
              display: block;
              font-weight: 400;
              height: 70px;
              color: red;
              }
              }
              @media (max-width: 68.75em) {
              .links a {
              height: 90px;
              color: blue;
              }
              }

Breakpoint

A defined point in the display where we want to make stuff change, such as the size and position of text and images, and the number of columns.

Best practice: Don't set breakpoints according to devices. When the page looks bad at a certain size, add a breakpoint.

Multiplier

A number indicating the increased total of pixels displayed in an image compared to a standard image.

Best practice: Enlarge the orginal image by the multiplier. What matters is number of pixels.

CSS Preprocessor

A preprocessed language to parse code into CSS. This allows for variables, selector inheritance and other shorthand methods to be used to speed up coding and make the CSS more flexible.

Sass: http://sass-lang.com

Best practice: Use SCSS, a newer version of Sass.

Compass

Extends the use of Sass by providing reusable patterns.

Compass: http://compass-style.org

Best practice: Use Compass extensions to simplify your workflow and and make Sass do things it can't do on its own.

Picture Module:Picturefill Polyfill goodness baked in!

Available now in Drupal 7Included in core for Drupal 8

Picture module makes use of the latest verstion of Picturefill Polyfill. A polyfill is a JavaScript method of adding stuff the browser might not natively do on its own.

Picture Module

              <picture>
                  <!--[if IE 9]>
                  <video style="display: none;"><![endif]-->
                  <source srcset="images/extralarge.jpg" media="(min-width: 1000px)">
                  <source srcset="images/large.jpg" media="(min-width: 800px)">
                  <!--[if IE 9]></video><![endif]-->
                  <img src="images/medium.jpg" alt="A picture">
              </picture>

https://www.drupal.org/project/picture

Here is an example of code that Picturefill polyfill (and therefore, Picture module) can use. The will now recognize the use of the picture, srcset and src in your markup.

Breakpoints Module

https://www.drupal.org/project/breakpoints

You can't talk about Picture module without talking about Breakpoints module, which creates custom breakpoints using media queries to define them.

Picture & Breakpoints Modules

Using these modules with Image Styles allows you to select images of different sizes for your breakpoints.

You don't always want images in the same size ratio, and using Image Styles allows you to change that, as well as the size.

Picture & Breakpoints Modules

Trigger the use of high-density images.

Picture & Breakpoints Modules

High-density versions can be created automatically with Image Styles.

Start with a standard size. Create another the same size and then increase the size by multiplying the dimensions with the multiplier.

Picture & Breakpoints Modules

Define breakpoints first

              @import "breakpoint";
              @import "compass";

              // min-width (by default) if only a number
              $breakpoint-hamburger: 20em; // 320px
              $breakpoint-tabs: 36.250em; // 580px
              $breakpoint-twocolumn: 56.25em; // 900px
              $breakpoint-fullfeatures: 68.75em; // 1100px

If you use Sass, use the Breakpoint Compass extension.

http://sassmeister.com/gist/cd26d6de7d8779f2b4f4

Use breakpoint variables that are meaningful.

Picture & Breakpoints Modules

Set breakpoints in theme.info

              ; ========================================
              ; Breakpoints
              ; ========================================

              breakpoints[fullfeatures] = (min-width: 68.75em)
              multipliers[fullfeatures][] = 1.5x
              multipliers[fullfeatures][] = 2x
              breakpoints[twocolumn] = (min-width: 56.25em)
              multipliers[twocolumn][] = 1.5x
              multipliers[twocolumn][] = 2x
              breakpoints[tabs] = (min-width: 36.250em)
              multipliers[tabs][] = 1.5x
              multipliers[tabs][] = 2x
              breakpoints[hamburger] = (min-width: 20em)
              multipliers[hamburger][] = 1.5x
              multipliers[hamburger][] = 2x

Breakpoint order should be largest to smallest.

This will mess with your configuration if you do it wrong.

Picture & Breakpoints Modules

Breakpoints in theme.info will load automatically

Clear cache to see breakpoints in the configuration page.

Picture & Breakpoints Modules

Map images to breakpoints and multpliers

Map images to breakpoints and the multipliers

Picture & Breakpoints Modules

Good tutorials are available online. It's easy to forget to change the image setting, which is the key part of implementing this module.

Picture & Breakpoints Modules

Done correctly, the right image for the display size and pixel density will be delivered.

Any image that should be uploaded and applied on the fly should use these modules.

When Not to UsePicture & Breakpoints Modules

Not every image is a photo, butevery image needs to be handled responsively.

A little misleading. Always use Picture and Breakpoints, but not ever image can be used in this way.

Sprites

Several small images combined into a single image, then a portion of the image is selected for display through CSS.

This technique has been around a long time.

Sprites

              .stars-half, .stars-one, .stars-one-half, .stars-two, .stars-two-half, .stars-three, .stars-three-half,
              .stars-four, .stars-four-half, .stars-five, .stars-none {
              background-image: url("../images/sprite.png");
              background-repeat: no-repeat;
              display: inline-block;
              }
              .stars-half {
              background-position: 0 0;
              height: 17px;
              width: 8px;
              }
              .stars-one {
              background-position: -10px 0;
              height: 17px;
              width: 16px;
              }
              ...
This is just example code. There is a lot more that goes into displaying these stars.

Several Ways to Make Sprites

Sprites can be hard to manage, but there are ways to simplify the process.

Sprites Aren't Alwaysthe Best Approach

  • They use more bandwidth than you think.
    • Download size != memory size.
  • They are pain to maintain.
Don't assume sprites are the best way to go.

Another Way to Make Sprites

Use Compass and Sass to make your sprites on the fly!

  • Much easier to maintain, update
  • But also comes with costs
    • Can slow stylesheet compilation time
    • Can load up Sass file with many variables

More: http://compass-style.org/help/tutorials/spriting

Icon Fonts

Clean, resizable icons that can be usedregardless of browser or pixel density

Icon fonts are treated the same way as any font.

Icon Fonts

  • Scalable
  • Small compared to images
  • Change color, add text shadow with CSS
  • No cross-browser compatibility issues
  • Can't be complex; limited to one color
  • Accessibility can be a tricky issue to solve

http://sassmeister.com/gist/startinggravity/70cb05adac7d5f386d1c

Create your own Icon Font set

Online tools let you create a custom set from multiple libraries.

But wait,there's one more way toadd icon fonts!

...and it's the Drupal way.

Font Awesome Library& Font Awesome Module

All the advantages of icon fontswith the convenience of a Drupal module.

https://www.drupal.org/project/fontawesome

Font Awesome Library& Font Awesome Module

Several ways to use

This example shows just one way to use the Font Awesome module.

Icon Fonts Sometimes Come Up Short

They're convenient and flexible,but they miss the mark for most logos.

That's when you need vector (SVG) images.

Why SVG Images?

  • Completely scalable
  • Resolution independent
  • No matter how large or small, only one file is served
  • The file size is small
  • Opens opportunities for CSS3 animation

Major browsers nowsupport SVG Images

  • Internet Explorer 9+
  • Firefox 4+
  • Chrome 4+
  • Safari 4+
  • Opera 9.5+
  • Android 2.4+

Simple to save any vector as SVG

Add SVG images "the old fashioned way"

              <img src="logo.svg" alt="my logo">

What happens when you must design for an older browser?

Modernizr to the rescue!

http://modernizr.com

Modernizr tells you what you have to work withand what you don't

http://modernizr.com

http://sassmeister.com/gist/6fa96162d0668cafb813

Or run a pixel density media query!

              $hidpi: min-resolution 1.5dppx;
              $cross-reso: max-resolution 143dpi;

              #foo{
              @include breakpoint($hidpi){
              content:'Device Pixel Ratio of at least 1.5';
              }
              @include breakpoint($cross-reso){
              content:'Cross Browser Resolution Query'
              }
              }

http://breakpoint-sass.com

Know What Your Screen Can Display

Device pixel density tests

http://bjango.com/articles/min-device-pixel-ratio

Know What Your Browser Can Display

Can I Use _____ ?

http://caniuse.com

Know When You've Reached the Goal

  • Image sizes change depending on design layout and context
  • Images are optimized for high-dpi screens
  • Images with different mime types are used when appropriate and when browsers support them

Thank You

(Again)

Before we get to questions, please note there are several links to resources.

References

References

References

References

Jim Smith

0