designing responsive web experiences · designing responsive web experiences session 517 casey...

© 2014 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

#WWDC14

Designing Responsive Web Experiences

Session 517 Casey Dougherty iBooks

Media

!

Ted O’Connor WebKit

- Need current hardware - Add screenshots

Optimized layout and performanceResponsive Design

What You Will LearnResponsive design techniques

Responsive columns

Font-relative units

CSS Shapes

Retina images

Media queries

Hairlines with subpixel layout

ColumnsStylish and legible

Responsive Columns

Responsive Columns

Column CountColumn Width

column-width

Responsive Columns

ABCDEFGHIJKLMNO

PQRSTUVWXYZABC…

column-width

Responsive Columns

ABCDEFGHIJKLMNOPQRST

UVWXYZABCDEFGHIJKLM…

Responsive Columns

column-width

ABCDEFGHIJKLMNOPQRSTUVWXY

ZABCDEFGHIJKLMNOPQRSTUVWX

YZABCDEFGHIJKLMNOPQRSTUVW

Responsive ColumnsColumn width

.my-column { -webkit-column-width: ; }

15rem

DemoResponsive columns


article { -webkit-column-count: 3; -webkit-column-width: 15rem; -webkit-column-gap: 2rem; -webkit-column-rule: 1px solid orange; } !

.spanner { -webkit-column-span: all; }

CSS Multicolumn Layout

}

}

CSS Multicolumn Layout

article { -webkit-column-count: 3; -webkit-column-width: 15rem; -webkit-column-gap: 2rem; -webkit-column-rule: 1px solid orange; } !

.spanner { -webkit-column-span: all; }

}

}

Responsive columns

Font-relative units

CSS Shapes

Retina images

Media queries


Responsive Design Techniques

Font-Relative UnitsFlexible font size

Font-Relative Units

Units defined in terms of font size

Applicable to both layout and text

Adapts your layout to different font sizes

Font-Relative Units

em—Based on ‘font-size’ of ancestors

ex—Roughly 0.5em

ch—Width of a typical glyph

rem—Based on ‘font-size’ of the <body>

Font-Relative Units

HelloHello

em rem

Font-Relative Units

Hello

Hello

em rem

Responsive columns

Font-relative units

CSS Shapes

Retina images

Media queries



CSS ShapesSay goodbye to rectangles

CSS Shapes

img { float: left;

CSS Shapes

Image element

} -webkit-shape-outside: url("moon.png");

CSS Shapes

Image element

}-webkit-shape-outside: url("moon.png");

img { float: left;

CSS Shapes

Image element

img { float: left; -webkit-shape-outside: url("moon.png");circle(50%);}

url("moon.png");

CSS Shapes

Image element

img { float: left; -webkit-shape-outside: circle(50%);}

CSS Shapes

img { float: left; -webkit-shape-outside: ellipse(50%, 50%); }

Image element

CSS Shapes

img { float: left; -webkit-shape-outside: polygon(0 33%, 33% 0, 67% 0, 100% 33%, 100% 67%, 67% 100%, 33% 100%, 0 67%); }

Image element

Responsive columns

Font-relative units

CSS Shapes

Retina images

Media queries



Image Source SetsResponsive image quality


srcset="galaxy.jpg 1x, super-galaxy.jpg 2x" super-galaxy.jpg 2x" srcset=" >



srcset="galaxy.jpg 1x, super-galaxy.jpg 2x" super-galaxy.jpg 2x"> srcset="


super-galaxy.jpg 2x" srcset="


>



Loads only the right image

No additional CSS

Backwards compatible

!

<img alt="andromeda galaxy" src="galaxy.jpg"

srcset="super-galaxy.jpg 2x”>

Image SetsResponsive image quality


div { background-image: url(galaxy.jpg);

}


div { background-image: url(galaxy.jpg); background-image: -webkit-image-set(url(galaxy.jpg) 1x,

url(super-galaxy.jpg) 2x); }

Summary—Responsive Images

Images for both standard and retina screens

HTML Image Source Set for content

CSS Image Set for style


Responsive columns

Font-relative units

CSS Shapes

Retina images

Media queries


Media QueriesKnow your environment

DemoMedia queries


Media Queries

<figcaption>…</figcaption> !

figcaption { position: absolute; width: 50%;

} !

@media (max-width: 750px) { figcaption { position: static; width: auto;

} }

Media Queries

Dimensions width, min-width, max-width !

Display quality -webkit-device-pixel-ratio -webkit-min-device-pixel-ratio -webkit-max-device-pixel-ratio

Media Queries

Drastic measure

Verbose and repetitive

Content drives responsive design


Responsive columns

Font-relative units

CSS Shapes

Retina images

Media queries


CSS Pixels and Device Pixels

1 CSS Pixel 4 Retina Pixels

=

Hairlines

Hairlines

Standard Border Retina Hairline Border

border: 1px solid black; ?

1 CSS Pixel 4 Retina Pixels

=

Hairline Border

Standard border syntax: div { border: 1px solid black; }

Hairline Border

Standard border syntax: div { border: 1px solid black; }

Retina hairline border syntax: div { background: repeat-x bottom left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='#ff0000' x='0' y='0' width='1' height='0.5'/></svg>"); }

Standard border syntax: div border: 1px solid black;

Hairline Border

{

{

Standard border syntax: div border: 1px solid black;

Retina hairline border syntax: @media (-webkit-min-device-pixel-ratio: 2) div border-width: 0.5px;

Hairline Border

{

{

{{

{{

Standard border syntax: div border: 1px solid black; !

Retina hairline border syntax: @media (-webkit-min-device-pixel-ratio: 2) div border-width: 0.5px;

Hairline Border

{

{

{{

{{

Hairline Border

- Need current hardware - Add screenshots

Responsive DesignA little markup with big rewards

Responsive columns

Font-relative units

CSS Shapes

Retina images

Media queries


More Information

Evangelism [email protected]

!

Safari Dev Center http://developer.apple.com/safari

Apple Developer Forums http://devforums.apple.com

http://devforums.apple.com

Related Sessions

• Your App, Your Website, and Safari Nob Hill Tuesday 4:30PM

Past Sessions

• What’s New in Safari and WebKit for Web Developers WWDC 2013

• Delivering Web Content on High Resolution Displays WWDC 2012

designing responsive web experiences · designing responsive web experiences session 517 casey...

Documents