Responsive Web Design with HTML5 and CSS3 - Second Edition

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

Responsive Web Design with HTML5 and CSS3 - Second Edition

Ben Frain

6 customer reviews
Learn the HTML5 and CSS3 you need to help you design responsive and future-proof websites that meet the demands of modern web users
Mapt Subscription
FREE
$29.99/m after trial
eBook
$10.00
RRP $31.99
Save 68%
Print + eBook
$39.99
RRP $39.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$10.00
$39.99
$29.99p/m after trial
RRP $31.99
RRP $39.99
Subscription
eBook
Print + eBook
Start 30 Day Trial

Preview in Mapt

Book Details

ISBN 139781784398934
Paperback312 pages

Book Description

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.

Table of Contents

Chapter 1: The Essentials of Responsive Web Design
Beginning our quest
Defining responsive web design
Setting browser support levels
Our first responsive example
The shortcomings of our example
Summary
Chapter 2: Media Queries – Supporting Differing Viewports
Why media queries are needed for a responsive web design
Media query syntax
Combining media queries
Using media queries to alter a design
Considerations for organizing and authoring media queries
Combine media queries or write them where it suits?
The viewport meta tag
Media Queries Level 4
Summary
Chapter 3: Fluid Layouts and Responsive Images
Converting a fixed pixel design to a fluid proportional layout
Introducing Flexbox
Getting Flexy
Responsive images
Summary
Chapter 4: HTML5 for Responsive Web Designs
HTML5 markup – understood by all modern browsers
Starting an HTML5 page the right way
Easy-going HTML5
New semantic elements in HTML5
HTML5 text-level semantics
Obsolete HTML features
Putting HTML5 elements to use
WCAG and WAI-ARIA for more accessible web applications
Embedding media in HTML5
Responsive HTML5 video and iFrames
A note about 'offline first'
Summary
Chapter 5: CSS3 – Selectors, Typography, Color Modes, and New Features
No one knows it all
Anatomy of a CSS rule
Quick and useful CSS tricks
Word wrapping
Facilitating feature forks in CSS
New CSS3 selectors and how to use them
CSS3 structural pseudo-classes
CSS custom properties and variables
CSS calc
CSS Level 4 selectors
Web typography
New CSS3 color formats and alpha transparency
Summary
Chapter 6: Stunning Aesthetics with CSS3
Text shadows with CSS3
Box shadows
Background gradients
Repeating gradients
Background gradient patterns
Multiple background images
High-resolution background images
CSS filters
A warning on CSS performance
Summary
Chapter 7: Using SVGs for Resolution Independence
A brief history of SVG
The graphic that is a document
Creating SVGs with popular image editing packages and services
Inserting SVGs into your web pages
Inserting an SVG inline
What you can do with each SVG insertion method (inline, object, background-image, and img)
Extra SVG capabilities and oddities
Animating SVG with JavaScript
Optimising SVGs
Using SVGs as filters
A note on media queries inside SVGs
Summary
Chapter 8: Transitions, Transformations, and Animations
What CSS3 transitions are and how we can use them
CSS3 2D transforms
CSS3 3D transformations
Animating with CSS3
Summary
Chapter 9: Conquer Forms with HTML5 and CSS3
HTML5 forms
Understanding the component parts of HTML5 forms
HTML5 input types
How to polyfill non-supporting browsers
Styling HTML5 forms with CSS3
Summary
Chapter 10: Approaching a Responsive Web Design
Get designs in the browser as soon as possible
View and use the design on real devices
Embracing progressive enhancement
Defining a browser support matrix
Tiering the user experience
Linking CSS breakpoints to JavaScript
Avoid CSS frameworks in production
Coding pragmatic solutions
Use the simplest code possible
Hiding, showing, and loading content across viewports
Validators and linting tools
Performance
The next big things
Summary

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

Authors

Table of Contents

Chapter 1: The Essentials of Responsive Web Design
Beginning our quest
Defining responsive web design
Setting browser support levels
Our first responsive example
The shortcomings of our example
Summary
Chapter 2: Media Queries – Supporting Differing Viewports
Why media queries are needed for a responsive web design
Media query syntax
Combining media queries
Using media queries to alter a design
Considerations for organizing and authoring media queries
Combine media queries or write them where it suits?
The viewport meta tag
Media Queries Level 4
Summary
Chapter 3: Fluid Layouts and Responsive Images
Converting a fixed pixel design to a fluid proportional layout
Introducing Flexbox
Getting Flexy
Responsive images
Summary
Chapter 4: HTML5 for Responsive Web Designs
HTML5 markup – understood by all modern browsers
Starting an HTML5 page the right way
Easy-going HTML5
New semantic elements in HTML5
HTML5 text-level semantics
Obsolete HTML features
Putting HTML5 elements to use
WCAG and WAI-ARIA for more accessible web applications
Embedding media in HTML5
Responsive HTML5 video and iFrames
A note about 'offline first'
Summary
Chapter 5: CSS3 – Selectors, Typography, Color Modes, and New Features
No one knows it all
Anatomy of a CSS rule
Quick and useful CSS tricks
Word wrapping
Facilitating feature forks in CSS
New CSS3 selectors and how to use them
CSS3 structural pseudo-classes
CSS custom properties and variables
CSS calc
CSS Level 4 selectors
Web typography
New CSS3 color formats and alpha transparency
Summary
Chapter 6: Stunning Aesthetics with CSS3
Text shadows with CSS3
Box shadows
Background gradients
Repeating gradients
Background gradient patterns
Multiple background images
High-resolution background images
CSS filters
A warning on CSS performance
Summary
Chapter 7: Using SVGs for Resolution Independence
A brief history of SVG
The graphic that is a document
Creating SVGs with popular image editing packages and services
Inserting SVGs into your web pages
Inserting an SVG inline
What you can do with each SVG insertion method (inline, object, background-image, and img)
Extra SVG capabilities and oddities
Animating SVG with JavaScript
Optimising SVGs
Using SVGs as filters
A note on media queries inside SVGs
Summary
Chapter 8: Transitions, Transformations, and Animations
What CSS3 transitions are and how we can use them
CSS3 2D transforms
CSS3 3D transformations
Animating with CSS3
Summary
Chapter 9: Conquer Forms with HTML5 and CSS3
HTML5 forms
Understanding the component parts of HTML5 forms
HTML5 input types
How to polyfill non-supporting browsers
Styling HTML5 forms with CSS3
Summary
Chapter 10: Approaching a Responsive Web Design
Get designs in the browser as soon as possible
View and use the design on real devices
Embracing progressive enhancement
Defining a browser support matrix
Tiering the user experience
Linking CSS breakpoints to JavaScript
Avoid CSS frameworks in production
Coding pragmatic solutions
Use the simplest code possible
Hiding, showing, and loading content across viewports
Validators and linting tools
Performance
The next big things
Summary

Book Details

ISBN 139781784398934
Paperback312 pages
Read More
From 6 reviews

Read More Reviews

Recommended for You

Responsive Web Design with HTML5 and CSS3 Book Cover
Responsive Web Design with HTML5 and CSS3
$ 23.99
$ 4.80
Object-Oriented JavaScript - Second Edition Book Cover
Object-Oriented JavaScript - Second Edition
$ 29.99
$ 10.00
Mastering Web Application Development with AngularJS Book Cover
Mastering Web Application Development with AngularJS
$ 26.99
$ 5.40
AngularJS by Example Book Cover
AngularJS by Example
$ 24.99
$ 10.00
Python Machine Learning Book Cover
Python Machine Learning
$ 35.99
$ 10.00
Learning jQuery - Fourth Edition Book Cover
Learning jQuery - Fourth Edition
$ 23.99
$ 4.80