Adapt and respond: keeping responsive into the future

Monday, 5 November 12

Hi.I am chris mills.

‣Open standards advocate and Education agitator

‣dev.opera.com editor‣W3C fellow, workingon webplatform.org

‣Accessibility whiner‣HTML5/CSS3 wrangler‣Heavy metal drummerand proud dad

useful stuff

‣dev.opera.com‣webplatform.org‣slideshare.net/chrisdavidmills

‣cmills@opera.com‣@chrisdavidmills

in this talk... ‣MQ: Beyond width and height‣Other “responsive modules”‣Legacy support‣RWD for the future

A quick flashback

In the beginning...

‣There wasn’t much RWD‣We only really looked at the Web on desktops/laptops

Ok. We had wap

Then the mobile web arrived

media typesmedia="screen"

media="print"

media typesmedia="handheld"

media="tv"

small tv rant“Searching, browsing, updating and buffering are not TV-like. In fact an enormous number of people found that the technology they had purchased wasn't what they expected at all, that they were bringing the worst parts of using a computer into the television environment.”

-- www.insideci.co.uk/news/rovi-research-reveals-changing-consumer-habits.aspx

small tv rant“Searching, browsing, updating and buffering are not TV-like. In fact an enormous number of people found that the technology they had purchased wasn't what they expected at all, that they were bringing the worst parts of using a computer into the television environment.”

-- www.insideci.co.uk/news/rovi-research-reveals-changing-consumer-habits.aspx

Back to the modern world

media="screen and (max-width: 481px)"

@media screen and (max-width: 481px) { /* do amazing stuff for narrow screens */}

media queries

the mobile problem

viewport

other rwd issues

Other considerations

‣Making replaced elements responsive

‣Bandwidth/loading of resources

‣Resolution‣Processing power‣Control mechanisms

replaced elements

replaced elements#related img {

display: block;

margin: 0 auto;

max-width: 100%;

be warned‣Old IE versions don’t support max-width, so you’ll have to fallback to width: 100% instead.

file size also important

‣Users on slow connections won’t want to download huge media files.

‣We need to try to serve them smaller files/alternatives.

‣Assumptions: e.g. narrow equals mobile equals slow connection

css resources easy to deal with

‣Use “mobile first” ‣Load smaller resources by default, and larger ones inside MQs

‣And in the future we’ve got things like image-set coming up (possibly...)

Mobile first example

header { background: url(small-image.png); }

@media screen and (min-width: 480px) { header { background: url(large-image.png); }}

html5 video also well served

But html images are not so lucky

<img src="thats-all-folks.png"> ?

Various solutions

‣http://dev.opera.com/articles/view/responsive-images-problem/

‣None work perfectly‣Pre-fetch is a bitch

adaptive-images

‣adaptive-images.com‣Add .htaccess and adaptive-images.php to your document root folder.

‣Add one line of JavaScript into the <head> of your site.

‣Add your CSS Media Query values into $resolutions in the PHP file.

the picture element

</picture>Monday, 5 November 12

suggested solutions

‣Srcset‣New image formats?‣Defined the media tests in meta tags?

‣New headers and protocols?

processing power‣You might want to turn off effects like shadows, gradients and animations for small screen devices.

‣CSS effects are arguably less power draining than JS or Flash, but even so.

‣They can cause the display to look cluttered too.

resolution

now we have hi fidelity devices

‣e.g. iPhone 4s is 960 x 640 pixels at 326ppi

‣These devices lie twice‣One CSS pixel = multiple device pixels

‣Images can start to look pixellated

SOLUTIONS

SOLUTIONS

@media screen and (-o-min-device-pixel-ratio: 3/2) {

body { background-size: 250px; }

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {

soon to bereplaced by

@media screen and (resolution: 1.5dppx) {

tell the truth with viewport

content="width=device-width,

target-densitydpi=device-dpi">

All good but...

‣Images may now start to look a little small

‣You could serve larger images for devices with higher resolutions

control mechanisms‣Currently tricky‣Usual wisdom about web sites applies — make pages keyboard accessible, etc.

‣Can’t be detected in CSS(yet)

‣JavaScript touch detection is an option — Modernizr, jQuery

supporting older browsers

old ie versions

‣Lack support for media queries

‣Although we don’t get old IE on small screen devices

‣But mobile first is a problem

solutions

‣Provide fallbacks such as simpler layouts or pixels instead of % or rems

‣Use a media query polyfill such as respond.js

modernizr

<head>

</head>

modernizr

modernizr css

#wrapper:hover, #wrapper:focus { transform: rotateX(180deg);}

modernizr css

.no-csstransforms3d #wrapper #front { transition: 0.8s all ease-in;}

.no-csstransforms3d #wrapper:hover #front,

.no-csstransforms3d #wrapper:focus #front { transform: rotate(-30deg) translate(-50%,-100%);}

modernizr JS

function rotateForm() { if(Modernizr.cssanimations && Modernizr.csstransforms3d) { form.setAttribute("class","form-rotate"); form.style.left = "0rem"; } else { back.style.zIndex = "5"; } }

@supports

@supports (display:flex) { section { display: flex } ...}

other responsive css3 modules

worthy of note

‣CSS device adaptation‣Flexbox‣Multi-col‣(Regions, Grids, etc.)

CSS device adaptation

‣Because viewport is really more of a CSS type thing than an HTML type thing

‣This spec provides a @viewport at-rule to contain viewport equivalents

‣Currently supported in Opera and IE10, with prefixes

‣dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport

CSS device adaptation

@viewport { width: 550px; max-zoom: 1; resolution: device;}

Flex box

‣A spec for easier UIlayout

‣Makes certain layout tasks much easier

‣New syntax supportcurrently very limited

‣Old syntax supportedin most modernbrowsers

Flex box

Flex box

section { display: flex; flex-flow: row;}

section { display: flex; flex-flow: column;}

Flex box

section { display: flex; flex-flow: row; align-items: center;}

Flex box

#first, #third { order: 2;}

#second { order: 1;}

Flex box

#first { flex: 1;}

#second { flex: 1;}

#third { flex: 1;}

Flex box

#first { flex: 1;}

#second { flex: 1;}

#third { flex: 2;}

multi col

‣A spec for breaking content into multiple columns.

‣Column widths/numbers, column rules, column spacing, column gaps, column breaks.

‣Supported across all major browsers, mostly.

Multi col

article { column-width: 20em; column-gap: 2em;}

other future developments

matchmedia

if (window.matchMedia("(min-width: 400px)").matches) { /* Do stuff for wider screens */} else { /* Do stuff for narrow screens */}

For IE9 and Opera, polyfill

github.com/paulirish/matchMedia.js/

script MQ

@media screen and (script) {...}@media screen and not (script) {...}

hover MQ

The ‘hover’ media feature is used to query whether the primary pointing system used on the output device can hover or not.

@media screen and (hover) {...}

pointer MQ

@media screen and (pointer: coarse) {...}

‣none: The input mechanism of the device does not include a pointing device.

‣coarse: The input mechanism of the device includes a pointing device of limited accuracy.

‣fine: The input mechanism of the device includes an accurate pointing device.

luminosity MQ

@media screen and (luminosity: dim) {...}

‣dim: The device is being used in a dim environment, such as nighttime.

‣normal: The device is being used in average lighting conditions, which don’t require significant adjustment.

‣washed: The device is being used in washed out conditions, e.g. in bright sunlight.

other future MQs

@media (paged) and (interactive:0) { // I am like a printer}@media (paged) and (interactive) { // I'm a projector, or like a Kindle}@media (paged) and (interactive) and (touch){ // I'm like a touch-screen Kindle}

other future MQs

@media (touch) and (max-width: 480) { // looks like an smart phone}@media (touch) and (keyboard) and(min-width:600) { // looks like a touch-screen laptop}

other future MQs

@media (remote) { // TV or set-top box?}@media (remote) and (hover) { // Wii?}

other future MQs

@media (network: v-slow) {...}

“It has been proposed. Most people agree that it would be cool, nobody has a clue about how to spec it ... submit proposals to me or to www-style@w3.org. Use [css4-mediaqueries] in the subject line, and read lists.w3.org/Archives/Public/wwwstyle/2012Mar/0691.html first.”

-- Florian Rivoal

Buy my book

“Subtle” advertisement

game over

1up 0000000Monday, 5 November 12

01. dev.opera.com

02. slideshare.net/chrisdavidmills

03. cmills@opera.com

04. @chrisdavidmills

05. Practical CSS3: Develop & Design

06. www.w3.org/Style/CSS/current-work.en.html

07. http://dev.w3.org/csswg/mediaqueries4/

08. CDM

09. WOW

game over

1up 0000000Monday, 5 November 12

Adapt and respond: keeping responsive into the future

screen media

media screen

media types media

media queries media

handheld media

media tests

media queriesmonday

huge media files

Technology

ADAPTIVE IMMUNITY *To adapt means to become suitable, and...

Organizations Supporting Vibrant Communities in British...

Dynamic marketing capabilities, foreign ownership modes...

Enclosemedia.haworth.com/asset/771/Enclose_Brochure.pdf ·....

Sample Reports -...

Developing An Organisational Resilience FrameworkN… ·...

Segue Technologies, Inc. RESPONSIVE DESIGN · WHA T IS IT?....

ADAPT - An ACT Public Service Strategic Workforce...

Adapt Webinar on Responsive E-learning | Learning Pool, C&G....

Characteristics of Living Things Need food/require energy...

1. Grow and Reproduce 2. Digest Nutrients 3. Excrete Waste.....

THE WORLD HAS CHANGED INFORMATION MOVES SLOWLY COMMAND AND.....

Responsive Web Design with ASP.NET Core...

Organizational Resilience - Leadership & Management · PDF.....

HS Performance Indicators Hospitality Cluster...Reinforce...

IdentificationofFunctionforCD44IntracytoplasmicDomain...