Jump Start Responsive Web Design

161 Pages·2013·5.413 MB·English

by  Craig Sharkie, Andrew Fisher

By Craig Sharkie
& Andrew Fisher
GET UP TO SPEED WITH RESPONSIVE WEB DESIGN IN A WEEKEND
JUMP START
RESPONSIVE WEB
DESIGN
BY CRAIG SHARKIE
& ANDREW FISHER
ii
Jump Start Responsive Web Design
byCraigSharkieandAndrewFisher
Copyright©2013SitePointPty.Ltd.
Product Manager:SimonMackie English Editor:KellySteele
Technical Editor:DianaMacDonald Cover Designer:AlexWalker
Notice of Rights
Allrightsreserved.Nopartofthisbookmaybereproduced,storedinaretrievalsystemortransmitted
inanyformorbyanymeans,withoutthepriorwrittenpermissionofthepublisher,exceptinthecase
ofbriefquotationsembodiedincriticalarticlesorreviews.
Notice of Liability
Theauthorandpublisherhavemadeeveryefforttoensuretheaccuracyoftheinformationherein.
However,theinformationcontainedinthisbookissoldwithoutwarranty,eitherexpressorimplied.
NeithertheauthorsandSitePointPty.Ltd.,noritsdealersordistributorswillbeheldliableforany
damagestobecausedeitherdirectlyorindirectlybytheinstructionscontainedinthisbook,orbythe
softwareorhardwareproductsdescribedherein.
Trademark Notice
Ratherthanindicatingeveryoccurrenceofatrademarkednameassuch,thisbookusesthenamesonly
inaneditorialfashionandtothebenefitofthetrademarkownerwithnointentionofinfringementof
thetrademark.
PublishedbySitePointPty.Ltd.
48CambridgeStreetCollingwood
VICAustralia3066
Web:www.sitepoint.com
Email:[email protected]
ISBN978-0-9873321-6-5(print)
ISBN978-0-9873321-7-2(ebook)
PrintedandboundintheUnitedStatesofAmerica
iii
About Craig Sharkie
Craigwasoncehappytocallhimselfadeveloper,speaker,author,andadvocate.Sincethen,
he’saddedJSmeetfounderandJSConforganizertothelist.Shouldyouaddhusbandand
father,you’dbegettingclosertoworkingoutwhyhe’softenunreasonablyhappy.
About Andrew Fisher
Andrewlovesplayingwithtechnology,especiallyattheintersectionoftheWeb,mobile
tech,ubicomp,anddata.Hehasbeencreatingdigitalsolutionsgloballysincethedawnof
theWebforbrandsincludingNintendo,peoplesound,Sony,CottonOn,theMelbourneCup,
andOptus.AndrewistheCTOforJBA,adataagencyinMelbourne,Australia,wherehefo-
cusesoncreatingmeaningoutoflarge,changingdatasetsforclients.Andrewisalsothe
founderofRocketMelbourne,astartuptechnologylabexploringphysicalcomputingand
theWebofThings.
About SitePoint
SitePointspecializesinpublishingfun,practical,andeasy-to-understandcontentforweb
professionals.Visithttp://www.sitepoint.com/toaccessourblogs,books,newsletters,articles,
andcommunityforums.You’llfindastackofinformationonJavaScript,PHP,Ruby,mobile
development,design,andmore.
About Jump Start
JumpStartbooksprovideyouwitharapidandpracticalintroductiontowebdevelopment
languagesandtechnologies.Typicallyaround150pagesinlength,theycanbereadina
weekend,givingyouasolidgroundinginthetopicandtheconfidencetoexperimenton
yourown.

ForJandJ,MandCandLandM,
SandWandMandJandP,Band
Bande,everyoneatS,and
becauseSWF.
—Craig
PaulaandJonah,thankyoufor
puttingupwithmewhileIhadmy
headdown.
—Andrew

Table of Contents
Preface
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Conventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xii
Supplementary Materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Do you want to keep learning? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Acknowledgements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv
Craig Sharkie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv
Andrew Fisher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv
Chapter 1 Becoming Responsive . . . . . . . . . . . . . . . . . . . 1
Write Once and Run . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
The Pillars of Responsive Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Refit or Restart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Making an Example of Ourselves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Structuring Our Content/Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Simplifying CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Tweaking the Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
A First Look at Mobile-first Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Any Viewport in a Storm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Reacting to the Responsive Movement . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Chapter 2 Fluid Grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
The Role of Fluid Grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Creating Your Own Response . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
viii
Fluid Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Unmasking Default Font Sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Applying Relative Layout Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Handcrafting a Fluid Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Off-the-shelf Grid Solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Pulling Up Our Bootstraps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Fluid Solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Chapter 3 Adaptive Images . . . . . . . . . . . . . . . . . . . . . . . . . 59
Adaptive CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Scripted Adaptive Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
HTML5 Adaptive Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
W3C Adopts srcset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
The Missed picture Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Adapting Our Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Get the Picture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Chapter 4 Understanding Media Queries . . . . . . 77
Exploring Media Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Query Feature Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Media Queries in Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Adding Breakpoints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Rise to the Occasion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Chapter 5 Responsive Content . . . . . . . . . . . . . . . . . . . . 103
Structured Content Sets You Free . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Document Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Metadata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Supporting Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
ix
Technical Approaches to Responsive Content . . . . . . . . . . . . . . . . . . . . . 113
Remove Contextually Bad Content . . . . . . . . . . . . . . . . . . . . . . . . . 113
Dynamic Loading by Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Platform-specific Experiences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Domain Decisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Browser Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Template Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Determining How Far to Go . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Tailor Made . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Chapter 6 Responsive Boilerplate . . . . . . . . . . . . . . . 125
Basic Web Page Boilerplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Off-the-shelf Boilerplates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
HTML5 Boilerplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Foundation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Skeleton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Semantic Grid System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
320 and up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Building Your Own Boilerplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Folder Structure and Core Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Resetting and Normalizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Base Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Packaging for Reuse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
CSS Preprocessors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Script Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Ship It . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
When You Boil It Down … . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Respond in Kind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145