Responsive Web Design with HTML5 and CSS3 Essentials

Responsive Web Design with HTML5 and CSS3 Essentials

by Alex Libby, Gaurav Gupta, Asoj Talesra
Released August 2016
Publisher(s): Packt Publishing
ISBN: 9781783553075

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

Design and deliver an optimal user experience for all devices

About This Book

  • Get to grips with the core functionality of RWD through examples
  • Discover how to make layouts, content and media flexible, and explore why a content-first approach is more effective
  • Maximize the performance of your web pages so that they work across all browsers and devices irrespective of the screen size

Who This Book Is For

This book is for web designers who are familiar with HTML and CSS, and want to begin with responsive web design. Web development experience and knowledge of HTML5, CSS3 is assumed.

What You Will Learn

  • Explore various layout options
  • Understand what can be achieved in the browser, without the use of third-party tools
  • Executing media queries to benefit responsive designs
  • Understand the basics of responsive workflow and boilerplate frameworks
  • Improve performance of responsive web design
  • Maintain compatibility across various browsers

In Detail

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing and interaction experience - providing easy reading and navigation with minimum resizing, panning, and scrolling - and all of this across a wide range of devices from desktop computer monitors to mobile phones. Responsive web design is becoming more important as the amount of mobile traffic now accounts for more than half of the Internet's total traffic.

This book will give you in depth knowledge about the basics of responsive web design. You will embark on a journey of building effective responsive web pages that work across a range of devices, from mobile phones to smart TVs, with nothing more than standard markup and styling techniques.

You'll begin by getting an understanding of what RWD is and its significance to the modern web. Building on the basics, you'll learn about layouts and media queries. Following this, we'll dive into creating layouts using grid based templates. We'll also cover the important topic of performance management, and discover how to tackle cross-browser challenges.

Style and approach

This is a practical example-based book which will delve into various elements and benefits of a responsive web design. It will help you understand the essential skills needed to create responsive web sites and guide you through the basics of building responsive web pages for any device. The topics are a blend of theoretical and practical essentials which will assist you to explore more about responsive web design.

Table of contents

  1. Responsive Web Design with HTML5 and CSS3 Essentials
    1. Responsive Web Design with HTML5 and CSS3 Essentials
    2. Credits
    3. About the Authors
    4. About the Reviewer
    5. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    6. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    7. 1. Introducing Responsive Web Design
      1. Getting started with RWD
      2. Exploring how RWD works
      3. Understanding the elements of RWD
        1. Controlling the viewport
        2. Creating flexible grids
        3. Making media responsive
        4. Constructing suitable breakpoints
      4. Appreciating the importance of RWD
        1. Making our site accessible and intuitive
        2. Organizing our content
      5. Comparing RWD to adaptive design
      6. Preparing our development environment
      7. Considering a suitable strategy
      8. Exploring best practices
        1. Designing for touch
      9. Setting up a development workflow
        1. Discovering the requirements
        2. Planning our site
        3. Designing the text
        4. Sketching our design
        5. Prototyping and creating our design
        6. Testing our design
      10. Exploring mistakes
      11. Summary
    8. 2. Creating Fluid Layouts
      1. Introducing flexible grid layouts
      2. Understanding the different layout types
      3. Setting the available viewport for use
        1. Balancing viewport against experience
        2. Considering viewport units
      4. Exploring the benefits of flexible grid layouts
      5. Understanding the mechanics of grid layouts
      6. Implementing a prebuilt grid layout
      7. Exploring the use of flexbox
        1. Taking a closer look
      8. Visiting the future
        1. Implementing a basic gallery grid
        2. Exploring what happened
      9. Taking it further
      10. Summary
    9. 3. Adding Responsive Media
      1. Making media responsive
        1. Creating fluid images
        2. Implementing the <picture> element
          1. Using the srcset attribute
          2. Exploring the sizes attribute
          3. Manipulating the HTML5 <picture> element
          4. Putting it all together
          5. Exploring what happened
        3. Creating a real-world example
        4. Taking things further
      2. Making video responsive
        1. Embedding externally hosted videos
        2. Introducing the new HTML5 video element
        3. Embedding HTML5 video content
          1. Exploring what happened
        4. Building a practical example
          1. Exploring what happened
        5. Exploring the risks
        6. Making audio responsive
        7. Taking things further
      3. Making text fit on screen
        1. Sizing with em units
        2. Using rem units as a replacement
        3. Exploring use of viewport units
        4. Taking things further
      4. Summary
    10. 4. Exploring Media Queries
      1. Exploring some examples
      2. Understanding media queries
        1. Exploring the available media types
        2. Listing the available media features
        3. Introducing operators in our queries
      3. Identifying common breakpoints
        1. Creating custom breakpoints
        2. Understanding the rationale
        3. Taking care over our design
        4. Removing the need for breakpoints
      4. Putting our theory into practice
      5. Creating some practical examples
        1. Making it real
          1. Exploring what happened
        2. Detecting high-resolution image support
          1. Exploring how it works
      6. Examining some common mistakes
      7. Exploring best practices
      8. Taking things further
      9. Summary
    11. 5. Testing and Optimizing for Performance
      1. Understanding the importance of speed
      2. Understanding why pages load slowly
      3. Optimizing the performance
        1. Starting with Google
        2. Taking things further
      4. Testing the performance of our site
        1. Working through a desktop example
        2. Viewing on a mobile device
      5. Best practices
      6. Providing support for older browsers
        1. Considering which features to support
        2. Let the user choose what they want
        3. Do we need to include a whole library?
      7. Considering cross-browser compatibility
        1. Outlining the challenges
        2. Understanding the drawbacks of JavaScript
        3. Providing a CSS-based solution
      8. Testing site compatibility
        1. Working out a solution
        2. Exploring tools available for testing
        3. Viewing with Chrome
        4. Working in Firefox
        5. Exploring our options
      9. Following best practices
      10. Summary

Product information

  • Title: Responsive Web Design with HTML5 and CSS3 Essentials
  • Author(s): Alex Libby, Gaurav Gupta, Asoj Talesra
  • Release date: August 2016
  • Publisher(s): Packt Publishing
  • ISBN: 9781783553075