• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Keeping responsive into the future by Chris mills
 

Keeping responsive into the future by Chris mills

on

  • 2,132 views

Chris Mills will go beyond the obvious, looking at what we can do today to adapt our front-ends to different browsing environments, from mobiles and other alternative devices to older browsers we may ...

Chris Mills will go beyond the obvious, looking at what we can do today to adapt our front-ends to different browsing environments, from mobiles and other alternative devices to older browsers we may be called upon to support. You’ll learn some advanced media query and viewport tricks, including a look at @viewport; insights into responsive images: problems, and current solutions; how to provide usable alternatives to older browsers with Modernizr; what other CSS3 modules provide responsive capabilities; and where media queries are going in the future, with CSS4 media queries.

Statistics

Views

Total Views
2,132
Views on SlideShare
2,120
Embed Views
12

Actions

Likes
2
Downloads
4
Comments
0

2 Embeds 12

http://librosweb.es 8
http://rome.codemotionworld.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Keeping responsive into the future by Chris mills Keeping responsive into the future by Chris mills Presentation Transcript

    • Friday, 9 November 12
    • Hi.I am chris mills.‣ Open standards advocate andEducation agitator‣ dev.opera.com editor‣ W3C fellow, workingon webplatform.org‣ Accessibility whiner‣ HTML5/CSS3 wrangler‣ Heavy metal drummerand proud dadFriday, 9 November 12
    • Friday, 9 November 12
    • useful stuff‣ dev.opera.com‣ webplatform.org‣ slideshare.net/chrisdavidmills‣ cmills@opera.com‣ @chrisdavidmillsFriday, 9 November 12
    • in this talk...‣ MQ: Beyond width and height‣ Other “responsive modules”‣ Legacy support‣ RWD for the futureFriday, 9 November 12
    • Friday, 9 November 12
    • A quick flashbackFriday, 9 November 12
    • In the beginning...‣ There wasn’t much RWD‣ We only really looked at theWeb on desktops/laptopsFriday, 9 November 12
    • Ok. We had wapFriday, 9 November 12
    • Friday, 9 November 12
    • Friday, 9 November 12
    • Then the mobile webarrivedFriday, 9 November 12
    • Then the mobile webarrivedFriday, 9 November 12
    • Then the mobile webarrivedFriday, 9 November 12
    • Then the mobile webarrivedFriday, 9 November 12
    • media typesmedia="screen"media="print"Friday, 9 November 12
    • media typesmedia="handheld"media="tv"Friday, 9 November 12
    • small tv rant“Searching, browsing,updating and buffering arenot TV-like. In fact anenormous number of peoplefound that the technologythey had purchased wasntwhat they expected at all,that they were bringing theworst parts of using acomputer into the televisionenvironment.”-- www.insideci.co.uk/news/rovi-research-reveals-changing-consumer-habits.aspxFriday, 9 November 12
    • small tv rant“Searching, browsing,updating and buffering arenot TV-like. In fact anenormous number of peoplefound that the technologythey had purchased wasntwhat they expected at all,that they were bringing theworst parts of using acomputer into the televisionenvironment.”-- www.insideci.co.uk/news/rovi-research-reveals-changing-consumer-habits.aspxFriday, 9 November 12
    • Friday, 9 November 12
    • Back to the modernworldFriday, 9 November 12
    • media="screen and (max-width: 481px)"@media screen and (max-width: 481px) {/* do amazing stuff fornarrow screens */}media queriesFriday, 9 November 12
    • media queriesFriday, 9 November 12
    • the mobile problemFriday, 9 November 12
    • <meta name="viewport"content="width=device-width">viewportFriday, 9 November 12
    • other rwd issuesFriday, 9 November 12
    • other rwd issuesFriday, 9 November 12
    • Otherconsiderations‣ Making replaced elementsresponsive‣ Bandwidth/loading ofresources‣ Resolution‣ Processing power‣ Control mechanismsFriday, 9 November 12
    • replaced elementsFriday, 9 November 12
    • replaced elements#related img {display: block;margin: 0 auto;max-width: 100%;}Friday, 9 November 12
    • be warned‣ Old IE versions don’tsupport max-width, so you’llhave to fallback to width:100% instead.Friday, 9 November 12
    • file size alsoimportant‣ Users on slow connectionswon’t want to download hugemedia files.‣ We need to try to serve themsmaller files/alternatives.‣ Assumptions: e.g. narrowequals mobile equals slowconnectionFriday, 9 November 12
    • css resources easyto deal with‣ Use “mobile first”‣ Load smaller resources bydefault, and larger onesinside MQs‣ And in the future we’ve gotthings like image-set comingup (possibly...)Friday, 9 November 12
    • Mobile firstexampleheader { background: url(small-image.png); }@media screen and (min-width: 480px) {header { background: url(large-image.png); }}Friday, 9 November 12
    • html5 video alsowell served<source src="crystal320.webm"type="video/webm" media="all and (max-width: 480px)"><source src="crystal720.webm"type="video/webm" media="all and (min-width: 481px)">Friday, 9 November 12
    • But html images arenot so lucky<img src="thats-all-folks.png"> ?Friday, 9 November 12
    • Various solutions‣ http://dev.opera.com/articles/view/responsive-images-problem/‣ None work perfectly‣ Pre-fetch is a bitchFriday, 9 November 12
    • adaptive-images‣ adaptive-images.com‣ Add .htaccess and adaptive-images.php to your documentroot folder.‣ Add one line of JavaScriptinto the <head> of yoursite.‣ Add your CSS Media Queryvalues into $resolutions inthe PHP file.Friday, 9 November 12
    • the picture element<picture alt="a picture of something"><source src="mobile.jpg"><source src="medium.jpg" media="minwidth: 600px"><source src="fullsize.jpg" media="minwidth: 900px"><img src="mobile.jpg"><!-- fallback fornon-supporting browsers --></picture>Friday, 9 November 12
    • suggested solutions‣ Srcset‣ New image formats?‣ Defined the media tests inmeta tags?‣ New headers and protocols?Friday, 9 November 12
    • processing power‣ You might want to turn offeffects like shadows,gradients and animations forsmall screen devices.‣ CSS effects are arguablyless power draining than JSor Flash, but even so.‣ They can cause the displayto look cluttered too.Friday, 9 November 12
    • resolutionFriday, 9 November 12
    • resolutionFriday, 9 November 12
    • resolutionFriday, 9 November 12
    • resolution64pxFriday, 9 November 12
    • resolution64px48pxFriday, 9 November 12
    • now we have hifidelity devices‣ e.g. iPhone 4s is 960 x 640pixels at 326ppi‣ These devices lie twice‣ One CSS pixel = multipledevice pixels‣ Images can start to lookpixellatedFriday, 9 November 12
    • SOLUTIONS<img src="500px_image.jpg" width="250">Friday, 9 November 12
    • 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) {body { background-size: 250px; }}Friday, 9 November 12
    • Friday, 9 November 12
    • soon to bereplaced by@media screen and (resolution: 1.5dppx){body { background-size: 250px; }}Friday, 9 November 12
    • tell the truth withviewport<meta name="viewport"content="width=device-width,target-densitydpi=device-dpi">Friday, 9 November 12
    • All good but...‣ Images may now start to looka little small‣ You could serve largerimages for devices withhigher resolutionsFriday, 9 November 12
    • control mechanisms‣ Currently tricky‣ Usual wisdom about web sitesapplies — make pageskeyboard accessible, etc.‣ Can’t be detected inCSS(yet)‣ JavaScript touch detectionis an option — Modernizr,jQueryFriday, 9 November 12
    • supporting olderbrowsersFriday, 9 November 12
    • old ie versions‣ Lack support for mediaqueries‣ Although we don’t get old IEon small screen devices‣ But mobile first is aproblemFriday, 9 November 12
    • solutions‣ Provide fallbacks such assimpler layouts or pixelsinstead of % or rems‣ Use a media query polyfillsuch as respond.jsFriday, 9 November 12
    • modernizr<html lang="en-US" class="no-js"><head><script src="modernizr.js"></script></head>Friday, 9 November 12
    • modernizr<html class=" js flexbox canvas canvastextwebgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchangehistory draganddrop websockets rgba hslamultiplebgs backgroundsize borderimageborderradius boxshadow textshadow opacitycssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontfacegeneratedcontent video audio ... ">Friday, 9 November 12
    • modernizr css#wrapper:hover, #wrapper:focus {transform: rotateX(180deg);}Friday, 9 November 12
    • 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%);}Friday, 9 November 12
    • modernizr JSfunction rotateForm() {if(Modernizr.cssanimations &&Modernizr.csstransforms3d) {form.setAttribute("class","form-rotate");form.style.left = "0rem";} else {back.style.zIndex = "5";}}Friday, 9 November 12
    • @supports@supports (display:flex) {section { display: flex }...}Friday, 9 November 12
    • other responsivecss3 modulesFriday, 9 November 12
    • other responsivecss3 modulesFriday, 9 November 12
    • worthy of note‣ CSS device adaptation‣ Flexbox‣ Multi-col‣ (Regions, Grids, etc.)Friday, 9 November 12
    • CSS deviceadaptation‣ Because viewport is reallymore of a CSS type thingthan an HTML type thing‣ This spec provides a@viewport at-rule to containviewport equivalents‣ Currently supported in Operaand IE10, with prefixes‣ dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewportFriday, 9 November 12
    • CSS deviceadaptation<meta name="viewport"content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">@viewport {width: 550px;max-zoom: 1;resolution: device;}Friday, 9 November 12
    • Flex box‣ A spec for easier UIlayout‣ Makes certain layout tasksmuch easier‣ New syntax supportcurrently very limited‣ Old syntax supportedin most modernbrowsersFriday, 9 November 12
    • Flex box<section><article id="first"></article><article id="second"></article><article id="third"></article></section>Friday, 9 November 12
    • Friday, 9 November 12
    • Flex boxsection {display: flex;flex-flow: row;}section {display: flex;flex-flow: column;}Friday, 9 November 12
    • Friday, 9 November 12
    • Flex boxsection {display: flex;flex-flow: row;align-items: center;}Friday, 9 November 12
    • Friday, 9 November 12
    • Flex box#first, #third {order: 2;}#second {order: 1;}Friday, 9 November 12
    • Friday, 9 November 12
    • Flex box#first {flex: 1;}#second {flex: 1;}#third {flex: 1;}Friday, 9 November 12
    • Friday, 9 November 12
    • Flex box#first {flex: 1;}#second {flex: 1;}#third {flex: 2;}Friday, 9 November 12
    • Friday, 9 November 12
    • multi col‣ A spec for breaking contentinto multiple columns.‣ Column widths/numbers,column rules, columnspacing, column gaps, columnbreaks.‣ Supported across all majorbrowsers, mostly.Friday, 9 November 12
    • Multi colarticle {column-width: 20em;column-gap: 2em;}Friday, 9 November 12
    • Friday, 9 November 12
    • other futuredevelopmentsFriday, 9 November 12
    • matchmediaif (window.matchMedia("(min-width:400px)").matches) {/* Do stuff for wider screens */} else {/* Do stuff for narrow screens */}For IE9 and Opera, polyfillgithub.com/paulirish/matchMedia.js/Friday, 9 November 12
    • script MQ@media screen and (script) {...}@media screen and not (script) {...}Friday, 9 November 12
    • hover MQThe ‘hover’ media feature isused to query whether theprimary pointing system usedon the output device canhover or not.@media screen and (hover) {...}Friday, 9 November 12
    • pointer MQ@media screen and (pointer: coarse) {...}‣none: The input mechanism ofthe device does not include apointing device.‣coarse: The input mechanism ofthe device includes a pointingdevice of limited accuracy.‣fine: The input mechanism ofthe device includes anaccurate pointing device.Friday, 9 November 12
    • luminosity MQ@media screen and (luminosity: dim) {...}‣dim: The device is being usedin a dim environment, such asnighttime.‣normal: The device is beingused in average lightingconditions, which don’trequire significantadjustment.‣washed: The device is beingused in washed outconditions, e.g. in brightsunlight.Friday, 9 November 12
    • other future MQs@media (paged) and (interactive:0) {// I am like a printer}@media (paged) and (interactive) {// Im a projector, or like a Kindle}@media (paged) and (interactive) and (touch){// Im like a touch-screen Kindle}Friday, 9 November 12
    • 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}Friday, 9 November 12
    • other future MQs@media (remote) {// TV or set-top box?}@media (remote) and (hover) {// Wii?}Friday, 9 November 12
    • other future MQs@media (network: v-slow) {...}“It has been proposed. Mostpeople agree that it would becool, nobody has a clue abouthow to spec it ... submitproposals to me or to www-style@w3.org. Use [css4-mediaqueries] in the subjectline, and read lists.w3.org/Archives/Public/wwwstyle/2012Mar/0691.html first.”-- Florian RivoalFriday, 9 November 12
    • Buy my book“Subtle”advertisementFriday, 9 November 12
    • game over1up 0000000Friday, 9 November 12
    • 01. dev.opera.com02. slideshare.net/chrisdavidmills03. cmills@opera.com04. @chrisdavidmills05. Practical CSS3: Develop &Design06. www.w3.org/Style/CSS/current-work.en.html07. http://dev.w3.org/csswg/mediaqueries4/08. CDM09. WOWgame over1up 0000000Friday, 9 November 12