Responsive Web Design with HTML5 and CSS3 - Second Edition

Responsive Web Design with HTML5 and CSS3 - Second Edition

by Ben Frain
Released August 2015
Publisher(s): Packt Publishing
ISBN: 9781784398934

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

Learn the HTML5 and CSS3 you need to help you design responsive and future-proof websites that meet the demands of modern web users

About This Book

  • Learn and explore how to harness the latest features of HTML5 in the context of responsive web design
  • Learn to wield the new Flexbox layout mechanism, code responsive images, and understand how to implement SVGs in a responsive project
  • Make your pages interactive by using CSS animations, transformations, and transitions

Who This Book Is For

Are you writing two websites - one for mobile and one for larger displays? Or perhaps you've already implemented your first 'RWD' but are struggling bring it all together? If so, Responsive Web Design with HTML5 and CSS3, Second Edition gives you everything you need to take your web sites to the next level.

You'll need some HTML and CSS knowledge to follow along, but everything you need to know about Responsive Design and making great websites is included in the book!

What You Will Learn

  • Understand what responsive design is, and why it's vital for modern web development
  • HTML5 markup is cleaner, faster, and more semantically rich than anything that has come before - learn how to use it and its latest features
  • Integrate CSS3 media queries into your designs to use different styles for different media. You'll also learn about future media queries which are evolving in CSS4.
  • Responsive images allow different images to be presented in different scenarios. We'll cover how to load different sets of images depending upon screen size or resolution and how to display different images in different contexts.
  • Conquer forms! Add validation and useful interface elements like date pickers and range sliders with HTML5 markup alone.
  • Implement SVGs into your responsive designs to provide resolution independent images, and learn how to adapt and animate them
  • Learn how to use the latest features of CSS including custom fonts, nth-child selectors (and some CSS4 selectors), CSS custom properties (variables), and CSS calc

In Detail

Desktop-only websites just aren't good enough anymore. With mobile internet usage still rising, and tablets changing internet consumption habits, you need to know how to build websites that will just 'work', regardless of the devices used to access them. This second edition of Responsive Web Design with HTML5 and CSS3 explains all the key approaches necessary to create and maintain a modern responsive design.

The changing way in which we access the web means that there has never been a greater range of screen sizes and associated user experiences to consider. With these recent trends driving changes in design, typical desktop-only websites fail to meet even minimum expectations when it comes to style and usability, which can be vital when your website is central to yours or your client's brand. Responsive Web Design with HTML5 and CSS3, Second Edition is an updated and improved guide that responds to the latest challenges and trends in web design, giving you access to the most effective approaches to modern responsive design.

Learn how to build websites with a 'responsive and mobile first' methodology, allowing a website to display effortlessly on every device that accesses it. Packed with examples, and a thorough explanation of modern techniques and syntax, Responsive Web Design with HTML5 and CSS3, Second Edition provides a comprehensive resource for all things 'responsive'.

This updated new edition covers all the most up-to-date techniques and tools needed to build great responsive designs, ensuring that your projects won't just be built 'right' for today, but in the future too.

Chapter example code is all hosted on rwd.education, a dedicated site for the book, built by the author, using the approaches and techniques championed throughout.

Style and approach

This book should be useful in two ways: as a 'read from the beginning and learn as you go' resource but also as a reference you can come back to in the months to come - when trying to remember this or that syntax or look up a link that may help you out of a development hell-hole.

To this end, rather than follow a single design through from chapter one and build on it incrementally until the end of the book, each chapter exists in relative isolation.

This means that code and examples are particular to each chapter and don't need to be considered along with what has gone before or after.

That doesn't mean that each chapter's techniques won't work in unison; the reference site for this book, rwd.education is an example of them all working in harmony.

However, by limiting the chapter examples to the topic at hand, it should be simpler for you to understand and reference the essence of each example and topic in the future.

Table of contents

  1. Responsive Web Design with HTML5 and CSS3 Second Edition
    1. Table of Contents
    2. Responsive Web Design with HTML5 and CSS3 Second Edition
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. 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
    8. 1. The Essentials of Responsive Web Design
      1. Beginning our quest
      2. Defining responsive web design
        1. Responsive web design in a nutshell
      3. Setting browser support levels
        1. A brief note on tooling and text editors
      4. Our first responsive example
        1. Our basic HTML file
        2. Taming images
        3. Enter media queries
          1. Amending the example for a larger screen
      5. The shortcomings of our example
      6. Summary
    9. 2. Media Queries – Supporting Differing Viewports
      1. Why media queries are needed for a responsive web design
        1. Basic conditional logic in CSS
      2. Media query syntax
        1. Media queries in link tags
      3. Combining media queries
        1. Media queries with @import
        2. Media queries in CSS
        3. What can media queries test for?
      4. Using media queries to alter a design
        1. Any CSS can be wrapped in a media query
        2. Media queries for HiDPI devices
      5. Considerations for organizing and authoring media queries
        1. Linking to different CSS files with media queries
        2. The practicalities of separating media queries
        3. Nesting media queries 'inline'
      6. Combine media queries or write them where it suits?
      7. The viewport meta tag
      8. Media Queries Level 4
        1. Scripting media feature
        2. Interaction media features
        3. The hover media feature
        4. Environment media features
      9. Summary
    10. 3. Fluid Layouts and Responsive Images
      1. Converting a fixed pixel design to a fluid proportional layout
        1. Why do we need Flexbox?
        2. Inline block and whitespace
        3. Floats
        4. Table and table-cell
      2. Introducing Flexbox
        1. The bumpy path to Flexbox
        2. Browser support for Flexbox
          1. Leave prefixing to someone else
            1. Choosing your auto-prefixing solution
      3. Getting Flexy
        1. Perfect vertically centered text
        2. Offset items
        3. Reverse the order of items
          1. How about if we want them laid out vertically instead?
          2. Column reverse
        4. Different Flexbox layouts inside different media queries
        5. Inline-flex
        6. Flexbox alignment properties
          1. The align-items property
          2. The align-self property
          3. Possible alignment values
          4. The justify-content property
        7. The flex property
        8. Simple sticky footer
        9. Changing source order
        10. Wrapping up Flexbox
      4. Responsive images
        1. The intrinsic problem of responsive images
        2. Simple resolution switching with srcset
        3. Advanced switching with srcset and sizes
          1. Did you say the browser 'might' pick one image over another?
        4. Art direction with the picture element
          1. Facilitate new-fangled image formats
      5. Summary
    11. 4. HTML5 for Responsive Web Designs
      1. HTML5 markup – understood by all modern browsers
      2. Starting an HTML5 page the right way
        1. The doctype
        2. The HTML tag and lang attribute
        3. Specifying alternate languages
        4. Character encoding
      3. Easy-going HTML5
        1. A sensible approach to HTML5 markup
        2. All hail the mighty <a> tag
      4. New semantic elements in HTML5
        1. The <main> element
        2. The <section> element
        3. The <nav> element
        4. The <article> element
        5. The <aside> element
        6. The <figure> and <figcaption> elements
        7. The <details> and <summary> elements
        8. The <header> element
        9. The <footer> element
        10. The <address> element
        11. A note on h1-h6 elements
      5. HTML5 text-level semantics
        1. The <b> element
        2. The <em> element
        3. The <i> element
      6. Obsolete HTML features
      7. Putting HTML5 elements to use
        1. Applying common sense to your element selection
      8. WCAG and WAI-ARIA for more accessible web applications
        1. WCAG
        2. WAI-ARIA
          1. Don't use roles for semantic elements
        3. If you only remember one thing
        4. Taking ARIA further
      9. Embedding media in HTML5
        1. Adding video and audio the HTML5 way
          1. Fallback capability for older browsers
        2. Audio and video tags work almost identically
      10. Responsive HTML5 video and iFrames
      11. A note about 'offline first'
      12. Summary
    12. 5. CSS3 – Selectors, Typography, Color Modes, and New Features
      1. No one knows it all
      2. Anatomy of a CSS rule
      3. Quick and useful CSS tricks
        1. CSS multi-column layouts for responsive designs
          1. Fixed columns, variable width
          2. Adding a gap and column divider
      4. Word wrapping
        1. Text ellipsis
        2. Creating horizontal scrolling panels
      5. Facilitating feature forks in CSS
        1. Feature queries
        2. Combining conditionals
        3. Modernizr
          1. Feature detection with Modernizr
      6. New CSS3 selectors and how to use them
        1. CSS3 attribute selectors
        2. CSS3 substring matching attribute selectors
          1. The 'beginning with' substring matching attribute selector
          2. The 'contains an instance of' substring matching attribute selector
          3. The 'ends with' substring matching attribute selector
        3. Gotchas with attribute selection
        4. Attribute selectors allow you to select IDs and classes that start with numbers
      7. CSS3 structural pseudo-classes
        1. The :last-child selector
        2. The nth-child selectors
        3. Understanding what nth rules do
          1. Breaking down the math
        4. nth-based selection in responsive web designs
        5. The negation (:not) selector
        6. The empty (:empty) selector
        7. Do something with the :first-line regardless of viewport
      8. CSS custom properties and variables
      9. CSS calc
      10. CSS Level 4 selectors
        1. The :has pseudo class
        2. Responsive viewport-percentage lengths (vmax, vmin, vh, vw)
      11. Web typography
        1. The @font-face CSS rule
        2. Implementing web fonts with @font-face
        3. A note about custom @font-face typography and responsive designs
      12. New CSS3 color formats and alpha transparency
        1. RGB color
        2. HSL color
        3. Alpha channels
        4. Color manipulation with CSS Color Module Level 4
      13. Summary
    13. 6. Stunning Aesthetics with CSS3
      1. Text shadows with CSS3
        1. Omitting the blur value when not needed
        2. Multiple text shadows
      2. Box shadows
        1. An inset shadow
        2. Multiple shadows
        3. Understanding spread
      3. Background gradients
        1. The linear-gradient notation
          1. Specifying gradient direction
          2. Color stops
          3. Adding fallback for older browsers
        2. Radial background gradients
          1. Breakdown of the radial-gradient syntax
        3. Handy 'extent' keywords for responsive sizing
      4. Repeating gradients
      5. Background gradient patterns
      6. Multiple background images
        1. Background size
        2. Background position
        3. Background shorthand
      7. High-resolution background images
      8. CSS filters
        1. Available CSS filters
        2. Combining CSS filters
      9. A warning on CSS performance
        1. A note on CSS masks and clipping
      10. Summary
    14. 7. Using SVGs for Resolution Independence
      1. A brief history of SVG
      2. The graphic that is a document
        1. The root SVG element
        2. Namespace
        3. The title and desc tags
        4. The defs tag
        5. The g element
        6. SVG shapes
        7. SVG paths
      3. Creating SVGs with popular image editing packages and services
        1. Save time with SVG icon services
      4. Inserting SVGs into your web pages
        1. Using an img tag
        2. Using an object tag
        3. Insert an SVG as a background image
        4. A brief aside on data URIs
        5. Generating image sprites
      5. Inserting an SVG inline
        1. Re-using graphical objects from symbols
        2. Inline SVGs allow different colors in different contexts
          1. Make dual-tone icons that inherit the color of their parent
        3. Re-using graphical objects from external sources
      6. What you can do with each SVG insertion method (inline, object, background-image, and img)
        1. Browser schisms
      7. Extra SVG capabilities and oddities
        1. SMIL animation
          1. The end of SMIL
        2. Styling an SVG with an external style sheet
        3. Styling an SVG with internal styles
          1. SVG properties and values within CSS
        4. Animate an SVG with CSS
      8. Animating SVG with JavaScript
        1. A simple example of animating an SVG with GreenSock
      9. Optimising SVGs
      10. Using SVGs as filters
      11. A note on media queries inside SVGs
        1. Implementation tips
        2. Further resources
      12. Summary
    15. 8. Transitions, Transformations, and Animations
      1. What CSS3 transitions are and how we can use them
        1. The properties of a transition
        2. The transition shorthand property
        3. Transition different properties over different periods of time
        4. Understanding timing functions
        5. Fun transitions for responsive websites
      2. CSS3 2D transforms
        1. Scale
        2. Translate
          1. Using translate to center absolutely positioned elements
        3. Rotate
        4. Skew
        5. Matrix
          1. Matrix transformations for cheats and dunces
        6. The transform-origin property
      3. CSS3 3D transformations
        1. The transform3d property
          1. Use transforms with progressive enhancement
      4. Animating with CSS3
        1. The animation-fill-mode property
      5. Summary
    16. 9. Conquer Forms with HTML5 and CSS3
      1. HTML5 forms
      2. Understanding the component parts of HTML5 forms
        1. placeholder
          1. Styling the placeholder text
        2. required
        3. autofocus
        4. autocomplete
        5. List and the associated datalist element
      3. HTML5 input types
        1. email
        2. number
          1. min and max ranges
          2. Changing the step increments
        3. url
        4. tel
        5. search
        6. pattern
        7. color
        8. Date and time inputs
          1. date
          2. month
          3. week
          4. time
        9. range
      4. How to polyfill non-supporting browsers
      5. Styling HTML5 forms with CSS3
        1. Indicating required fields
        2. Creating a background fill effect
      6. Summary
    17. 10. Approaching a Responsive Web Design
      1. Get designs in the browser as soon as possible
        1. Let the design dictate the breakpoints
      2. View and use the design on real devices
      3. Embracing progressive enhancement
      4. Defining a browser support matrix
        1. Functional parity, not aesthetic parity
        2. Choosing the browsers to support
      5. Tiering the user experience
        1. Practically delivering experience tiers
      6. Linking CSS breakpoints to JavaScript
      7. Avoid CSS frameworks in production
      8. Coding pragmatic solutions
        1. When a link becomes a button
      9. Use the simplest code possible
      10. Hiding, showing, and loading content across viewports
        1. Let CSS do the (visual) heavy lifting
      11. Validators and linting tools
      12. Performance
      13. The next big things
      14. Summary
    18. Index

Product information

  • Title: Responsive Web Design with HTML5 and CSS3 - Second Edition
  • Author(s): Ben Frain
  • Release date: August 2015
  • Publisher(s): Packt Publishing
  • ISBN: 9781784398934