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

Overview

Beginning Responsive Web Design with HTML5 and CSS3is your step-by-step guide to learning how to embrace responsive design for all devices. You will learn how to develop your existing HTML, CSS, and JavaScript skills to make your sites work for the modern world. Web sites and apps are now accessed on a wide range of devices with varied sizes and dimensions, so ensuring your users have the best experience now means thinking responsive.

InBeginning Responsive Web Design with HTML5 and CSS3 you will learn about all aspects of responsive development. You'll start with media queries, and fluid CSS3 layouts. You'll see how to use responsive frameworks such as Twitter Bootstrap, and how to use tools such as Grunt, Bower, Sass, and LESS to help save you time. You'll also learn how to use JavaScript to manage responsive states, manage your user's journey across screen sizes, and optimize your responsive site. By the end of the book you will be able to build new sites responsively, and update existing sites to be responsive. Every aspect of a responsive build will be covered.

This book is perfect for developers who are looking to move into the future of responsive sites. Whether you have already dipped your toes into responsive development or are just getting started,Beginning Responsive Web Design with HTML5 and CSS3 will teach you the very best techniques to optimize your site and your user's experience.