book

Beginning Responsive Web Design with HTML5 and CSS3

by Jonathan Fielding

September 2014

Beginner to intermediate

328 pages

8h 52m

English

Apress

Read now

Unlock full access

What Is Responsive Design?Why Is Mobile So Important?Responsive Design vs. Device-Specific ExperiencesResponsive Web Design Is Not Limited Just to MobileWhen Would You Not Use Responsive Web Design?Understanding the ViewportUnderstanding BreakpointsExamples of Responsive Web DesignAugustNyetimberGetting Started with HTML5AccessibilityVideo and Audio SupportSmarter StorageNew InteractionsCanvasMobileLooking at HTML5 TechnologiesThe doctypeNew Semantic HTML TagsNew Meta TagsWeb FormsPolyfillingValidating the HTML5 PageWhat’s New in CSS3Browser Vendor PrefixesCSS3 ExamplesSummary
Testing Responsive Design in the BrowserBrowser Specific Testing FeaturesTesting on a Device SimulatorSimulatorsPhysical DevicesDebugging Web Sites on DevicesOpen Device LabsOnline SolutionsSummary
An Introduction to Media QueriesMedia TypesMedia QueriesUsing Media Queries in CSSSeparate Style SheetsUse @importUsing Media Queries in CSSMobile First vs. Desktop FirstLooking at Building a Site Mobile FirstCaveats of Mobile FirstTargeting High Pixel Density DisplaysSummary
Types of LayoutsFixed Width LayoutsElastic LayoutsFluid LayoutsWhy Use Fluid Layouts for Responsive DesignPrinciples When Working with a Fluid DesignDo Not Use Fixed HeightsDo Not Necessitate Horizontal Scroll BarsThink About How Your Images Look at Different SizesThink About Wrapping ContentThink About SpacingThink About the Length of Your Lines of TextBuilding a Fluid Design Using a CSS GridBuilding a GridSummary
Grid SystemsFluidableCSS Smart Gridcsswizardry-gridsCSS FrameworksTwitter BootstrapZurb FoundationWhat Is Best for My Site?Choosing a CSS GridChoosing a CSS FrameworkChoosing Neither a Grid Nor a FrameworkPrototyping a Site Using a CSS FrameworkSummary
Adapt Existing Styles and ScriptsDefining the BreakpointsTypographyWrapperJumbotronProductsConclusionRefactoringDefining the BreakpointsRefactoring the Existing StylesTargeting the Different BreakpointsFull ReskinPreparationGeneral StylesDefining the BreakpointsTypographyWrapperHeaderJumbotronProductsFooterConclusionSummary
Knowing Your Command LinePreparing the Command LineCommanding Your Command LineTool PrerequisitesInstallationInstallationVersion Control with GitInitializing a RepositoryAdding FilesMaking a CommitAdding a RemotePushing a CommitPull ChangesCloning a RepositoryCSS PreprocessorsVariablesNestingImportExtendMixinsDifferent Preprocessors AvailableProblems of Using CSS PreprocessorsChoosing a PreprocessorBowerInstallationGruntInstallationGulpScaffoldingYeomangrunt-initInitializrSummary of Scaffolding ToolsOther Useful Toolsjshintserveios-simMixtureWorkflowScaffoldingAbstractionsIterationBuildDeployWorkflow SummarySummary
Adapting Your ContentThe Size of the ViewportFeatures that the Device SupportsUser Input MethodsThe Content ItselfAdapting the User’s JourneyCommon Site InteractionsUser Testing Your Responsive SiteCarrying Out User TestingWeb Analytics ToolsGoogle AnalyticsClickTaleSummary
Different Functionality Across Responsive StatesTechniques for Changing FunctionalityFeature DetectionState ManagementLibrariesenquire.jsUsing Feature Detection for Advanced StatesImplementing Responsive JavaScript TechniquesSummary
Why You Should Care About Site PerformanceImproving Network PerformanceConcatenate FilesOptimize ImagesConditionally Load ContentDomain ShardingServer ConfigurationCritical Rendering PathImproving the Critical Rendering PathServer-Side OptimizationWhat Can the Server Optimize?Implementing Server-Side OptimizationBenefits of Server-Side OptimizationDisadvantages of Server-Side OptimizationThird-Party Server-Side SolutionsMeasuring Your Sites’ PerformancePingdom Website Speed TestYSlowWebPageTestGoogle Analytics Site SpeedSummary