designing responsive web experiences · designing responsive web experiences session 517 casey...
Post on 15-Feb-2019
221 Views
Preview:
TRANSCRIPT
© 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
What You Will LearnResponsive design techniques
Responsive columns
Font-relative units
CSS Shapes
Retina images
Media queries
Hairlines with subpixel layout
What You Will LearnResponsive design techniques
Responsive columns
Font-relative units
CSS Shapes
Retina images
Media queries
Hairlines with subpixel layout
What You Will LearnResponsive design techniques
Responsive columns
Font-relative units
CSS Shapes
Retina images
Media queries
Hairlines with subpixel layout
What You Will LearnResponsive design techniques
Responsive columns
Font-relative units
CSS Shapes
Retina images
Media queries
Hairlines with subpixel layout
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
Responsive Columns
Column CountColumn Width
Responsive Columns
Column CountColumn Width
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
Responsive ColumnsColumn width
.my-column { -webkit-column-width: ; }
15rem
DemoResponsive columns
Ted O’Connor WebKit
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
}
}
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; }
}
}
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; }
}
}
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
Hairlines with subpixel layout
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
HelloHello
em rem
Font-Relative Units
Hello
Hello
em rem
Font-Relative Units
Hello
Hello
em rem
Responsive columns
Font-relative units
CSS Shapes
Retina images
Media queries
Hairlines with subpixel layout
Responsive Design Techniques
CSS ShapesSay goodbye to rectangles
CSS Shapes
CSS Shapes
CSS Shapes
CSS Shapes
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
}-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
Hairlines with subpixel layout
Responsive Design Techniques
Image Source SetsResponsive image quality
Image Source SetsResponsive image quality
Image Source SetsResponsive image quality
Image Source SetsResponsive image quality
<img alt="andromeda galaxy" src="galaxy.jpg">
Image Source SetsResponsive image quality
<img alt="andromeda galaxy" src="galaxy.jpg">
<img alt="andromeda galaxy" src="galaxy.jpg">
Image Source SetsResponsive image quality
Image Source SetsResponsive image quality
srcset="galaxy.jpg 1x, super-galaxy.jpg 2x" super-galaxy.jpg 2x" srcset=" >
<img alt="andromeda galaxy" src="galaxy.jpg">
Image Source SetsResponsive image quality
srcset="galaxy.jpg 1x, super-galaxy.jpg 2x" super-galaxy.jpg 2x"> srcset="
<img alt="andromeda galaxy" src="galaxy.jpg">
super-galaxy.jpg 2x" srcset="
Image Source SetsResponsive image quality
>
<img alt="andromeda galaxy" src="galaxy.jpg">
Image Source SetsResponsive image quality
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
Image SetsResponsive image quality
div { background-image: url(galaxy.jpg);
}
Image SetsResponsive image quality
div { background-image: url(galaxy.jpg); background-image: -webkit-image-set(url(galaxy.jpg) 1x,
url(super-galaxy.jpg) 2x); }
Image SetsResponsive image quality
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 Design Techniques
Responsive columns
Font-relative units
CSS Shapes
Retina images
Media queries
Hairlines with subpixel layout
Media QueriesKnow your environment
DemoMedia queries
Ted O’Connor WebKit
Media Queries
<figcaption>…</figcaption> !
figcaption { position: absolute; width: 50%;
} !
@media (max-width: 750px) { figcaption { position: static; width: auto;
} }
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 Design Techniques
Responsive columns
Font-relative units
CSS Shapes
Retina images
Media queries
Hairlines with subpixel layout
CSS Pixels and Device Pixels
1 CSS Pixel 4 Retina Pixels
=
Hairlines
Hairlines
Hairlines
Standard Border Retina Hairline Border
border: 1px solid black; ?
1 CSS Pixel 4 Retina Pixels
=
Hairlines
Standard Border Retina Hairline Border
border: 1px solid black; ?
1 CSS Pixel 4 Retina Pixels
=
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>"); }
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
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
Hairlines with subpixel layout
More Information
Evangelism evangelism@apple.com
!
Safari Dev Center http://developer.apple.com/safari
Apple Developer Forums 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
top related