Responsive Web Design with HTML5 and CSS3 Table of Contents

Table of Contents

Preface
Chapter 1: Getting Started with HTML5, CSS3, and Responsive Web Design
Chapter 2: Media Queries: Supporting Differing Viewports
Chapter 3: Embracing Fluid Layouts
Chapter 4: HTML5 for Responsive Designs
Chapter 5: CSS3: Selectors, Typography, and Color Modes
Chapter 6: Stunning Aesthetics with CSS3
Chapter 7: CSS3 Transitions, Transformations, and Animations
Chapter 8: Conquer Forms with HTML5 and CSS3
Chapter 9: Solving Cross-browser Responsive Challenges
Index

• Preface

• Chapter 1: 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
• Get your viewport testing tools here!
• Online sources of inspiration
• HTML5—why it's so good
• Saving time and code with HTML5
• New, semantically meaningful HTML5 tag elements
• CSS3 enables responsive designs and more
• The bottom line—CSS3 won't break anything!
• How can CSS3 solve everyday design problems?
• Look Ma'—no images!
• What else has CSS3 got to offer?
• 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

• Chapter 2: Media Queries: Supporting Differing Viewports
• You can use media queries today
• Why responsive designs need media queries?
• Media query syntax
• What can media queries test for?
• Using media queries to alter our design
• The best way to load media queries for responsive designs
• Our first responsive design
• Don't panic but our design is fixed-width
• Responsive designs—making images as economical as possible
• Content clipping in smaller viewports
• 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
• We need a fluid layout
• Summary

• Chapter 3: 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
• A formula to remember
• Setting a context for proportional elements
• It's always important to remember the context
• Using ems rather than pixels for typography
• Fluid images
• Making images scale with the viewport
• Specific rules for specific images
• Putting the brakes on fluid images
• The incredibly versatile max-width property
• Serving different images for different screen sizes
• Setting up Adaptive Images
• Put background images somewhere else
• Where fluid grids and media queries come together
• CSS Grid systems
• Rapidly building our site with a Grid system
• Summary

• Chapter 4: HTML5 for Responsive Designs
• What parts of HTML5 can we use today?
• Most sites can be written in HTML5
• Polyfills, shims, and Modernizr
• How to write HTML5 pages
• Economies of using HTML5
• A sensible approach to HTML5 markup
• All hail the mighty <a> tag
• Obsolete HTML features
• New semantic elements in HTML5
• The <section> element
• The <nav> element
• The <article> element
• The <aside> element
• The <hgroup> element
• The HTML5 outline algorithm
• The <header> element
• The <footer> element
• The <address> element
• Practical usage of HTML5's structural elements
• What about the main content of the site?
• HTML5 text-level semantics
• The <b> element
• The <em> element
• The <i> element
• Applying text-level semantics to our markup
• Adding accessibility to your site with WAI-ARIA
• ARIA's landmark roles
• Embedding media in HTML5
• Adding video and audio the HTML5 way
• Providing alternate source files
• Fallback for older browsers
• Audio and video tags work almost identically
• Responsive video
• Offline Web applications
• Offline Web applications in a nut shell
• Making web pages work offline
• Understanding the manifest file
• Automatic loading of pages to the offline manifest
• About that version comment
• Viewing the site offline
• Troubleshooting Offline Web applications
• Summary

• Chapter 5: CSS3: Selectors, Typography, and Color Modes
• What CSS3 offers the frontend developer
• CSS3 support in Internet Explorer versions 6 to 8
• Using CSS3 to design and develop pages in the browser
• Anatomy of a CSS rule
• Vendor prefixes and how to use them
• Quick and useful CSS3 tricks
• CSS3 multiple columns for responsive designs
• Adding a gap and column divider
• Word wrapping
• New CSS3 selectors and how to use them
• CSS3 attribute selectors
• CSS3 substring matching attribute selectors
• A practical, real world example
• CSS3 structural pseudo-classes
• The :last-child selector
• The nth-child selectors
• Understanding what nth rules do
• The negation (:not) selector
• Amendments to pseudo-elements
• Is :first-line handy for responsive designs?
• Custom web typography
• The @font-face CSS rule
• Implementing web fonts with @font-face
• Help—my CSS3 @font-face headings look messy
• A note about custom @font-face typography and responsive designs
• New CSS3 color formats and alpha transparency
• RGB color
• HSL color
• Fallback color values for IE6, IE7, and IE8
• Alpha channels
• Summary

• Chapter 6: Stunning Aesthetics with CSS3
• Text shadows with CSS3
• HEX, HSL, or RGB color allowed
• Pixels, em, or rem
• Preventing a text shadow
• Left and top shadows
• Creating an embossed text-shadow effect
• Multiple text-shadows
• Box shadows
• Inset shadow
• Multiple shadows
• Background gradients
• Linear background gradients
• Breakdown of linear gradient syntax
• Radial background gradients
• Breakdown of radial gradient syntax
• Repeating gradients
• Background gradient patterns
• Responsive considerations for CSS3
• Bringing CSS3 properties together
• Multiple background images
• Background size
• Background position
• Background shorthand
• More CSS3 features
• Sizeable icons which are perfect for responsive designs
• Summary

• Chapter 7: CSS3 Transitions, Transformations, and Animations
• What CSS3 transitions are and how we can use them
• The properties of a transition
• The transition shorthand property
• Transition different properties over different periods of time
• Understanding timing functions
• Fun transitions for responsive web sites
• CSS3 2D transformations
• What can we transform?
• scale
• translate
• rotate
• skew
• matrix
• transform-origin property
• Dabbling in CSS3 3D transformations
• Breaking down the 3D effect
• 3D transformations not ready for prime time
• Animating with CSS3
• Putting CSS3 transformations and animations together
• Summary

• Chapter 8: Conquer Forms with HTML5 and CSS3
• HTML5 forms
• Understanding the component parts of HTML5 forms
• placeholder
• required
• autofocus
• autocomplete
• list (and the associated datalist element)
• HTML5 input types
• email
• number
• url
• tel
• search
• pattern
• color
• Date and time inputs
• date
• month
• week
• time
• datetime and datetime-local
• range
• How to polyfill non-supporting browsers
• Styling HTML5 forms with CSS3
• Form-specific CSS3 pseudo class selectors
• Summary

• Chapter 9: Solving Cross-browser Responsive Challenges
• Progressive enhancement versus graceful degradation
• Reality
• Should you fix old versions of Internet Explorer?
• Statistics (again)
• Personal choice
• Modernizr—the frontend developer's Swiss army knife
• Fix styling issues with Modernizr
• Modernizr adds HTML5 element support for old IE
• Add min/max media query capability for Internet Explorer 6, 7, and 8
• Conditional loading with Modernizr
• Changing navigation links to a drop menu (conditionally)
• High resolution devices (the future)
• Summary

• Index