word press gets responsive 4x3

WordPress Gets

Responsive

1. About Responsive Design 2. About Responsive Images 3. About Retina Images 4. Responsive Support in

WordPress 5. Summary

Agenda

ABOUT RESPONSIVE DESIGN

What is Responsive Design

• Design and development respond to the user • Layout tailored for resolution, image size,

scripting • Media Queries to determine layout at

different sizes • Percentages rather that fixed width • display: none - to hide sections when

appropriate

LAYOUTS THAT WORK FOR ALL SCREENS

ABOUT RESPONSIVE IMAGES

WHAT MAKES IMAGE RESPONSIVE?

Why Responsive Images?

Mobile users have surpassed desktop users

Images comprise up to 62% the web

No benefit of hi-res images on low-res screens

Small images look fuzzy at high resolution

More Mobile than Desktop

IMAGES THAT WORK FOR ALL VISITORS

ABOUT RETINA IMAGES

Retina Images

• Term Created by Apple for the iPhone 4 • High pixel density

• Pixels are not visible to the eye • resolution effectively half • 2560x1600 is 1280x800

• HiDPI displays • 2x, 3x resolution

High Res images

• Retina Images • high resolution

• double, triple or even higher

• aspect ratio maintained

1x2x

3x

RESPONSIVE SUPPORT IN WORDPRESS

New in WordPress 4.4

Support for srcset HTML attribute

Uses default sizes attribute

Reference: https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

New Image Size as of 4.4

• Medium Large • Dimensions - 768 x height

WordPress Default Image Sizes

• First Level • Second Level

• Third Level

• First Level • Second Level

• Third Level

get_intermediate_image_sizes()

var_dump( get_image_sizes() );

array (size=5) 0 => string 'thumbnail' (length=9) 1 => string 'medium' (length=6) 2 => string 'medium_large' (length=12) 3 => string 'large' (length=5) 4 => string 'post-thumbnail' (length=14)

Show all Image Sizes

Display all image sizes • Use the example function from the codex • Copy function and call it via var_dump:

var_dump( get_image_sizes() );

Reference: https://codex.wordpress.org/Function_Reference/get_intermediate_image_sizes

get_image_sizes() returns:

array (size=5) 'thumbnail' => array (size=3) 'width' => string '150' (length=3) 'height' => string '150' (length=3) 'crop' => boolean true 'medium' => array (size=3) 'width' => string '300' (length=3) 'height' => string '300' (length=3) 'crop' => boolean false 'medium_large' => array (size=3) 'width' => string '768' (length=3) 'height' => string '0' (length=1) 'crop' => boolean false

Adding Images to the Media Library

Media -> Add New •Uploads original file

•WordPress creates image files for all media sizes

Custom Image Sizes

• Defaults sizes can be changed in the dashboard

• Dashboard -> Settings -> Media

• Can be created via add_image_size() • add_image_size($name, $width, $height, $crop)

width x height

<img> element

srcset attribute

sizes attribute

<img>

src attribute loads media file

<img> element

<img src=“image.png”>

srcset attribute

specifies media at different display widths

srcset attribute

<img src=“image.png” srcset=“image.png 40003w”>

sizes attribute

how wide an image is

depending on the screen size

sizes attribute

<img src=“image.png” srcset=“image.png 4003w”

sizes="(max-width: 768px) 50vw”, 100vw>

Media Queries

@media screen and (min-width: 480px) { img { width: 50%; } }

<img> tag with srcset and sizes

<img src="peleton-Bicycle-Race.jpg"

srcset="peleton-Bicycle-Race.jpg 4003w, peleton-Bicycle-Race-300x190.jpg 300w, peleton-Bicycle-Race-768x487.jpg 768w, peleton-Bicycle-Race-1024x649.jpg 1024w, peleton-Bicycle-Race-1200x761.jpg 1200w"

sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px"

height="2537" width="4003">

Which Image is Used

Browser Decides Based on a Calculation • image width / display width

•results vary depending on browser

Reference: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

WP Retina 2x

Media -> Retina •Creates 2x version of each file

•Changes to 2x retina version depending on resolution

Reference: https://wordpress.org/plugins/wp-retina-2x/

SUMMARY

Responsive ImagesImage loaded based on screen size

Retina ImagesUsed for high resolution 2x displays

Summary

• Responsive images allow for an optimized experience for all displays • WordPress has built in support for responsive images • Theme images outside of the Media Library will not be responsive

Thank you!

@spicecadetedmund.turbin@wpengine.com