Why?– Mobile0 Manypeopleaccessyourwebsiteviasmartphonesandothermobiledevices

0Yourcontentisnomorethan3tapsawayfrom“AngryBirds”

Imagesrc:http://www.angrybirds.com/

Itis2013?0Whichsiteswouldyouprefertovisit?Bequick!

or

1…2…3…

Screenresolutionshouldbeoptimizedfor???

Splinternet ?0 ConsiderAndroid mid‐2012[3,997distinctdevices]

ShortURLtooriginalarticle‐ http://markdubois.me/DroidFragment

Education0 IteachCMWEB280Multi‐screen

0 First3weekswefocusonthefundamentals

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– earlypage0 http://alistapart.com/article/responsive‐web‐design

ResponsiveDesign0 http://alistapart.com/article/responsive‐web‐design

RWD– simpleexample0 http://markdubois.me/RWDEx01

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%;

}

RWD– TextExample0 http://markdubois.me/RWDEx02

#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%;

}

DIY0 Probablywantanunderlyinggridsystem

0 ConsiderHeroku variablegridsystem asexample

DIY(2)0 DevelopsolidunderstandingofhowfluidgridsworkinRWD0 Goodstartingarticle

DIY(3)0 Thiscangetcomplexquickly0 85responsivedesigntools article

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)">

Issues0 Codecangrowcomplexrapidly0 Reallygoodideatohavevalid code

0 SEO0 Accessibility

Tools?

DreamweaverCS60 http://creative.adobe.com0 File>NewFluidGridLayout

InitialFile0 Desktop

InitialFile0 Phone

Addingnewitems0 Insert>Div

0 Result

Definefor@0 Tablet

0 Phone

DWCS6demo

ExamplePage0 ThiswascreatedentirelyindesignviewinDW0 Pagecontainslinkstositesmentionedduringthispresentation.

0 http://markdubois.me/RWDEx03

Alternatetool0 EdgeReflow(recentrelease)– worksbestforChromebrowser

EdgeReflow0 http://html.adobe.com/edge/reflow/ ‐ preview

EdgeReflow0 http://html.adobe.com/edge/reflow/ ‐ preview

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

Slides

http://markdubois.me/2013Apr30