PacktLib: Responsive Web Design with HTML5 and CSS3

Responsive Web Design with HTML5 and CSS3

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Getting Started with HTML5, CSS3, and Responsive Web Design

Why smart phones are important (and old IE isn't)

Are there times when a responsive design isn't the right choice?

Defining responsive web design

Why stop at responsive design?

Examples of responsive web design

HTML5—why it's so good

CSS3 enables responsive designs and more

Look Ma'—no images!

Can HTML5 and CSS3 work for us today?

Responsive web designs are not magic bullets

Educating our clients that websites shouldn't look the same in all browsers

Summary

Media Queries: Supporting Differing Viewports

You can use media queries today

Why responsive designs need media queries?

Our first responsive design

Stopping modern mobile browsers from auto-resizing the page

Fixing the design for different viewport widths

With responsive designs, content should always come first

Media queries—only part of the solution

Summary

Embracing Fluid Layouts

Fixed layouts aren't future proof

Why proportional layouts are essential for responsive designs

Amending a design from fixed to proportional layout

Using ems rather than pixels for typography

Fluid images

Serving different images for different screen sizes

Where fluid grids and media queries come together

CSS Grid systems

Summary

HTML5 for Responsive Designs

What parts of HTML5 can we use today?

How to write HTML5 pages

New semantic elements in HTML5

Practical usage of HTML5's structural elements

HTML5 text-level semantics

Adding accessibility to your site with WAI-ARIA

Embedding media in HTML5

Adding video and audio the HTML5 way

Responsive video

Offline Web applications

Summary

CSS3: Selectors, Typography, and Color Modes

What CSS3 offers the frontend developer

Anatomy of a CSS rule

Vendor prefixes and how to use them

Quick and useful CSS3 tricks

New CSS3 selectors and how to use them

Custom web typography

Help—my CSS3 @font-face headings look messy

New CSS3 color formats and alpha transparency

Summary

Stunning Aesthetics with CSS3

Text shadows with CSS3

Box shadows

Background gradients

Background gradient patterns

Responsive considerations for CSS3

Bringing CSS3 properties together

Multiple background images

More CSS3 features

Sizeable icons which are perfect for responsive designs

Summary

CSS3 Transitions, Transformations, and Animations

What CSS3 transitions are and how we can use them

CSS3 2D transformations

Dabbling in CSS3 3D transformations

Animating with CSS3

Summary

Conquer Forms with HTML5 and CSS3

HTML5 forms

How to polyfill non-supporting browsers

Styling HTML5 forms with CSS3

Summary

Solving Cross-browser Responsive Challenges

Progressive enhancement versus graceful degradation

Should you fix old versions of Internet Explorer?

Modernizr—the frontend developer's Swiss army knife

Changing navigation links to a drop menu (conditionally)

High resolution devices (the future)

Summary

Index