Post on 12-Apr-2017
Why?– Mobile0 Manypeopleaccessyourwebsiteviasmartphonesandothermobiledevices
0Yourcontentisnomorethan3tapsawayfrom“AngryBirds”
Imagesrc:http://www.angrybirds.com/
Splinternet ?0 ConsiderAndroid mid‐2012[3,997distinctdevices]
ShortURLtooriginalarticle‐ http://markdubois.me/DroidFragment
Terminology0 Adaptivewebdesign
0 CoinedbyAaronGustafson0 Contentwillchangetofitapredefinedsetofscreensizes
0 Mediaqueriesarecore0 Responsivewebdesign
0 CoinedbyEthanMarcotte0 Contentwillfluidlychangetofitanyscreenordevice0 Mediaqueriesareapart,butpagesmorefluid
ResponsiveWebDesign0 Philosophyanddevelopmentstrategy
0 Multi‐screen/post‐PCworld0 Focusonvariousviewportsizes0 Singlefrontend
0 Flexiblegrids0 Flexibleimages0 Mediaqueries(maychangecontentbasedonavailablescreenrealestate)
RWD– code0 http://markdubois.me/RWDEx010 HTML
0 CSS
<img class="respImg"src="orchid.jpg"/>
img {display:block;margin‐left:auto;margin‐right:auto;
}
.respImg {width:66%;
}
#sidebar{width:22.1763598%;….float:left;
}#content{
width:77.8236402%;…float:right;
}
RWD– code0 http://markdubois.me/RWDEx020 HTML
0 CSS
<divid="wrapper"><divid="sidebar"><p>…</p><divid=“content”><p>…</p>
#wrapper{display:block;margin‐left:auto;margin‐right:auto;width:90%;
}
#wrapper{display:block;margin‐left:auto;margin‐right:auto;width:90%;
}
RetrofitExistingWebsites
Pro Con
0 Singlecodebase
0 OneURL@page
0 Adaptstovarious
screensizes
0 Mayhaveheavy,slowloadingpages
0 Mayhavetomakesignificantchangestoexistingwebsites
0 Oftenhavetodecidewhattoleaveoutforphones
RWD– simpleexample0 http://markdubois.me/RWDEx010 Extremeexample– largerphoto~4sec
0 Wanthigherresforretinadisplays0 Contrastwithquickloadsonmobile
MediaQueries0 TypicallywriteCSSfordesktop,tablet,phone0 Ifstartinganew– thinkmobilefirst(limitedspaceandUX)
0 HavetocreateseparateCSSdocuments
<!– Phone‐‐><linkhref="phone.css"rel="stylesheet"type="text/css"media="onlyscreenand(max‐width:320px)"><!‐‐ Tablet‐‐><linkhref="tablet.css"rel="stylesheet"type="text/css"media="onlyscreenand(min‐width:321px)and(max‐width:768px)"><!‐‐ Desktop‐‐><linkhref="desktop.css"rel="stylesheet"type="text/css"media="onlyscreenand(min‐width:769px)">
ExamplePage0 ThiswascreatedentirelyindesignviewinDW0 Pagecontainslinkstositesmentionedduringthispresentation.
0 http://markdubois.me/RWDEx03
EdgeReflow0 http://html.adobe.com/edge/reflow/ ‐ preview0 Features:
0 Setpinsforvariousscreensizes(mediaqueries)0 Layoutandstylingtabs0 Webfonts0 Groupingobjects0 CSS‐3enhancements(applypropertiestoallregions)0 Inspectiontools0 PreviewinChrome(onlyfornow)
RWD0 http://creative.adobe.com
0 Questions?Pleaseusequestionpod
@Mark_DuBois (twitter)
Mark@WebProfessionals.org