Book Image

Responsive Web Design with HTML5 and CSS3, Second Edition

By : Ben Frain
5 (1)
Book Image

Responsive Web Design with HTML5 and CSS3, Second Edition

5 (1)
By: Ben Frain

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Responsive Web Design with HTML5 and CSS3, Second Edition
Ben Frain
Aug, 2015 | 312 pages
No titles found
Table of Contents (17 chapters)
Responsive Web Design with HTML5 and CSS3 Second Edition
Responsive Web Design with HTML5 and CSS3 Second Edition
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
The Essentials of Responsive Web Design
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
2
Media Queries – Supporting Differing Viewports
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
3
Fluid Layouts and Responsive Images
Fluid Layouts and Responsive Images
Converting a fixed pixel design to a fluid proportional layout
Introducing Flexbox
Getting Flexy
Responsive images
Summary
4
HTML5 for Responsive Web Designs
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
5
CSS3 – Selectors, Typography, Color Modes, and New Features
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
6
Stunning Aesthetics with CSS3
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
7
Using SVGs for Resolution Independence
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
8
Transitions, Transformations, and Animations
Transitions, Transformations, and Animations
What CSS3 transitions are and how we can use them
CSS3 2D transforms
CSS3 3D transformations
Animating with CSS3
Summary
9
Conquer Forms with HTML5 and CSS3
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
10
Approaching a Responsive Web Design
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
Index
Index

About the Author

Ben Frain has been a web designer/developer since 1996. He is currently employed as a Senior Front-end Developer at Bet365.

Before the web, he worked as an underrated (and modest) TV actor and technology journalist, having graduated from Salford University with a degree in Media and Performance.

He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work, he enjoys simple pleasures. Playing indoor football while his body and wife still allow it, and wrestling with his two sons.

His other book, Sass and Compass for Designers is available now. Visit Ben online at www.benfrain.com and follow him on Twitter at twitter.com/benfrain.

I'd like to thank the technical reviewers of this book for giving up their free time to provide valuable input. Thanks to them, this is a better product.

I'd also like to thank the web community at large for their continued sharing of information. Without them, I wouldn't be able to enjoy my working days as a web developer.

Most importantly, a note of appreciation for my family. Many episodes of sub-standard TV (wife), cups of tea (parents), and piratical sword-fights (sons) were sacrificed for the writing of this book.

Previous Section
Next Chapter