Beginning Responsive Web Design with HTML5 and CSS3

Beginning Responsive Web Design with HTML5 and CSS3

by Jonathan Fielding
Released September 2014
Publisher(s): Apress
ISBN: 9781430266945

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

Table of contents

  1. Cover
  2. Title
  3. Copyright
  4. Dedication
  5. Contents at a Glance
  6. Contents
  7. About the Author
  8. About the Technical Reviewer
  9. Acknowledgments
  10. Introduction
  11. Chapter 1: Introduction to Responsive Design
    1. What Is Responsive Design?
    2. Why Is Mobile So Important?
    3. Responsive Design vs. Device-Specific Experiences
    4. Responsive Web Design Is Not Limited Just to Mobile
    5. When Would You Not Use Responsive Web Design?
      1. Understanding the Viewport
      2. Understanding Breakpoints
    6. Examples of Responsive Web Design
      1. August
      2. Nyetimber
    7. Getting Started with HTML5
      1. Accessibility
      2. Video and Audio Support
      3. Smarter Storage
      4. New Interactions
      5. Canvas
      6. Mobile
    8. Looking at HTML5 Technologies
      1. The doctype
      2. New Semantic HTML Tags
      3. New Meta Tags
      4. Web Forms
      5. Polyfilling
      6. Validating the HTML5 Page
    9. What’s New in CSS3
      1. Browser Vendor Prefixes
      2. CSS3 Examples
    10. Summary
  12. Chapter 2: Testing a Responsive Site
    1. Testing Responsive Design in the Browser
      1. Browser Specific Testing Features
    2. Testing on a Device Simulator
      1. Simulators
    3. Physical Devices
      1. Debugging Web Sites on Devices
      2. Open Device Labs
    4. Online Solutions
    5. Summary
  13. Chapter 3: The Power of Media Queries
    1. An Introduction to Media Queries
      1. Media Types
      2. Media Queries
    2. Using Media Queries in CSS
      1. Separate Style Sheets
      2. Use @import
      3. Using Media Queries in CSS
    3. Mobile First vs. Desktop First
      1. Looking at Building a Site Mobile First
      2. Caveats of Mobile First
    4. Targeting High Pixel Density Displays
    5. Summary
  14. Chapter 4: Using Fluid Layouts
    1. Types of Layouts
      1. Fixed Width Layouts
      2. Elastic Layouts
      3. Fluid Layouts
      4. Why Use Fluid Layouts for Responsive Design
    2. Principles When Working with a Fluid Design
      1. Do Not Use Fixed Heights
      2. Do Not Necessitate Horizontal Scroll Bars
      3. Think About How Your Images Look at Different Sizes
      4. Think About Wrapping Content
      5. Think About Spacing
      6. Think About the Length of Your Lines of Text
    3. Building a Fluid Design Using a CSS Grid
      1. Building a Grid
    4. Summary
  15. Chapter 5: Frameworks in Responsive Design
    1. Grid Systems
      1. Fluidable
      2. CSS Smart Grid
      3. csswizardry-grids
    2. CSS Frameworks
      1. Twitter Bootstrap
      2. Zurb Foundation
    3. What Is Best for My Site?
      1. Choosing a CSS Grid
      2. Choosing a CSS Framework
      3. Choosing Neither a Grid Nor a Framework
    4. Prototyping a Site Using a CSS Framework
    5. Summary
  16. Chapter 6: Adapt an Existing Site
    1. Adapt Existing Styles and Scripts
      1. Defining the Breakpoints
      2. Typography
      3. Wrapper
      4. Jumbotron
      5. Products
      6. Conclusion
    2. Refactoring
      1. Defining the Breakpoints
      2. Refactoring the Existing Styles
      3. Targeting the Different Breakpoints
    3. Full Reskin
      1. Preparation
      2. General Styles
      3. Defining the Breakpoints
      4. Typography
      5. Wrapper
      6. Header
      7. Jumbotron
      8. Products
      9. Footer
      10. Conclusion
    4. Summary
  17. Chapter 7: Tools and Workflow
    1. Knowing Your Command Line
      1. Preparing the Command Line
      2. Commanding Your Command Line
      3. Tool Prerequisites
      4. Installation
      5. Installation
    2. Version Control with Git
      1. Initializing a Repository
      2. Adding Files
      3. Making a Commit
      4. Adding a Remote
      5. Pushing a Commit
      6. Pull Changes
      7. Cloning a Repository
    3. CSS Preprocessors
      1. Variables
      2. Nesting
      3. Import
      4. Extend
      5. Mixins
      6. Different Preprocessors Available
      7. Problems of Using CSS Preprocessors
      8. Choosing a Preprocessor
    4. Bower
      1. Installation
    5. Grunt
      1. Installation
    6. Gulp
    7. Scaffolding
      1. Yeoman
      2. grunt-init
      3. Initializr
      4. Summary of Scaffolding Tools
    8. Other Useful Tools
      1. jshint
      2. serve
      3. ios-sim
      4. Mixture
    9. Workflow
      1. Scaffolding
      2. Abstractions
      3. Iteration
      4. Build
      5. Deploy
      6. Workflow Summary
    10. Summary
  18. Chapter 8: Making the User Journey Responsive
    1. Adapting Your Content
      1. The Size of the Viewport
      2. Features that the Device Supports
      3. User Input Methods
      4. The Content Itself
    2. Adapting the User’s Journey
      1. Common Site Interactions
    3. User Testing Your Responsive Site
      1. Carrying Out User Testing
    4. Web Analytics Tools
      1. Google Analytics
      2. ClickTale
    5. Summary
  19. Chapter 9: JavaScript Across Responsive States
    1. Different Functionality Across Responsive States
    2. Techniques for Changing Functionality
      1. Feature Detection
      2. State Management
      3. Libraries
      4. enquire.js
      5. Using Feature Detection for Advanced States
    3. Implementing Responsive JavaScript Techniques
    4. Summary
  20. Chapter 10: Optimizing Your Responsive Site
    1. Why You Should Care About Site Performance
    2. Improving Network Performance
      1. Concatenate Files
      2. Optimize Images
      3. Conditionally Load Content
      4. Domain Sharding
      5. Server Configuration
    3. Critical Rendering Path
      1. Improving the Critical Rendering Path
    4. Server-Side Optimization
      1. What Can the Server Optimize?
      2. Implementing Server-Side Optimization
      3. Benefits of Server-Side Optimization
      4. Disadvantages of Server-Side Optimization
      5. Third-Party Server-Side Solutions
    5. Measuring Your Sites’ Performance
      1. Pingdom Website Speed Test
      2. YSlow
      3. WebPageTest
      4. Google Analytics Site Speed
    6. Summary
  21. Index

Product information

  • Title: Beginning Responsive Web Design with HTML5 and CSS3
  • Author(s): Jonathan Fielding
  • Release date: September 2014
  • Publisher(s): Apress
  • ISBN: 9781430266945