This document discusses cross-device development using web standards. It covers the concepts of adaptive design, responsive design, fluid layouts, media queries and responsive images. For layouts, it discusses moving from fixed tables and floats to newer CSS techniques like flexible boxes, multi-column layouts, and CSS grids. It provides examples of fluid layouts using these techniques. It also covers media queries in depth, including using them for breakpoints, device characteristics like orientation and resolution. The document discusses challenges and solutions for responsive images, including resolution switching, art direction, high DPI images, and emerging standards like srcset and the picture element.
Report
Share
Report
Share
1 of 88
Download to read offline
More Related Content
[SF HTML5] Responsive Cross-Device Development with Web Standards (2013)
2. H E L L O
M Y N A M E I S
Tomomi
@girlie_mac
02
3. One Web Approach
Mobile Web Best Practices by W3C (2008)
One Web means making, as far as is
reasonable, the same information
and services available to users
irrespective of the device they are
using. ”
“
Mobile Web Best Practices 1.0 (2008)
03
10. Then
• HTML Table Layout (Party like it's 1999)
• The CSS "Holy Grail" Column Liquid Layout
• Float
• Negative margin
• All the hacks that are PITA
• UI Frameworks for Grid Layout
• YUI
• jQuery Masonry10
11. Now and Future: CSS3 Layouts
• Columns
• Flexible Box ("FlexBox")
• Regions
• Grids
11
19. Responsive Grid
An arrangement suitable for ‘portrait’ orientation. An arrangement suitable for ‘landscape’ orientation.
10*
http://www.w3.org/TR/css3-grid-layout/
19
21. CSS2.1 @media Media-Types
For mobile phones:
@mediahandheld{
/*Somemobile-specificCSShere*/
}
Only supported by:
• Opera Mini
• OpenWave
• Obigo
• PIE (partial)21
22. CSS3: Media-Queries
allows content rendering to adapt to conditions:
• width of the target viewport
• width of the device's screen size
• screen orientations (landscape v. portrait)
• device pixel ratio (aka. Retina)
etc...
22
23. CSS3: Media-Queries
Separate styles by the width of the target viewport (browser display
area)
@mediaonlyscreen
and(min-width:768px)
and(max-width:1024px){
/*Styles*/
}
23
24. CSS3: Media-Queries
by device-width, the width of the device's screen size
@mediaonlyscreen
and(min-device-width:320px)
and(max-device-width:480px){
/*Styles*/
}
24
35. CSS Pixel vs. Device Pixel
• Pixel in CSS is relative
• 1 CSS pixel != 1 device pixel
35
36. Pixel Density in DOM
window.devicePixelRatio
Device Browser Pixel Density
Nexus One Android browser 1.5
Galaxy Nexus Chrome 2.0
Galaxy Nexus Opera Mobile 2.25
Samsung Galaxy S4 Chrome 3.0
36
37. Zoom Dependent Pixel Density
⌘+ and ⌘- , but not for pinch-zoom
Test page (Firefox and Chrome 31+)
37
59. Yay
• Easy enough. No scripts.
Meh
• Hard to figure out MQ Breakpoint
• Not semantic to use background for contents
• Some browsers download all assets (Tests by Tim
Kadlec)
59
69. Yay
• Simple enough to implement
Meh
• Browser-dependent MQ data types / prefix
• Not semantic to use background for contents
• Some browsers download all assets (Tests by Tim
Kadlec)
69
80. The srcset attribute
Proposal by Apple & adopted by WhatWG
<imgalt="TheBreakfastCombo"
src="banner.jpeg"
srcset="banner-HD.jpeg2x,
banner-phone.jpeg100w,
banner-phone-HD.jpeg100w2x">
WebKit Nightly r154002
The srcset attribute - An HTML extension for adaptive images
80
81. Picture Element
Proposal RespImg CG
<picturewidth="500"height="500">
<sourcemedia="(min-width:45em)"src="large.jpg">
<sourcemedia="(min-width:18em)"src="med.jpg">
<sourcesrc="small.jpg">
<imgsrc="fallback.jpg">
<p>Accessibletext</p>
</picture>
Responsive Images Community Group
81
82. HTTP Client-Hints
Proposal from Google: let the server selects the right asset
[Request]
GET/kitten.jpgHTTP/1.1
User-Agent:...
Accept:image/webp,image/jpg
CH:dpr=2.0
http://www.igvita.com/2013/08/29/automating-dpr-switching-with-client-hints/
82
85. Automotive
proposals for standardizing HTML5-based
vehicle APIs:
• Tizen
• Webinos
• GENIVI
• QNX
W3C: Automotive and Web Platform Business Group
QNX Auto Blog
85