Learn responsive design using HTML5 and CSS3 to adapt websites to any browser or screen size
Ben Frain
[
]
PUBLISHING BIRMINGHAM - MUMBAI
Table of Contents 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 lsn'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 salve 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 magie bullets Edueating our elients that websites shouldn't look the same in all browsers Summary
Chapter 2: Media Queries: Supporting Differing Viewports You ean 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 panie but our design is fixed-width Responsive designs-making images as eeonomieal 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 eontext for proportional elements It's always important to remember the eontext Using ems rather than pixels for typography Fluid images Making images seale with the viewport Speeifie rules for specifie images Putting the brakes on fluid images The ineredibly versatile max-width property Serving different images for different screen sizes Setting up Adaptive Images Pul 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 ean be written in HTML5 Polyfills, shims, and Modernizr How to write HTML5 pages Eeonomies of using HTML5 A sensible approach to HTML5 markup All haiI the mighty tag
Obsolete HTML features New semantic elements in HTMLS The element The element The element The element The element
103 103 104 105 105 105 106
The HTML5 outline algorithm
106
The element The element The element Practical usage of HTMLS's structural elements What about the main content of the site? HTMLS text-level semantics The element The element The element Applying text-level semantics to our markup Adding accessibility to your site with WAI-ARIA ARIA's landmark roles Embedding media in HTMLS Adding video and audio the HTMLS 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 Automatie loading of pages to the offline manifest About that version eomment Viewing the site offline Troubleshooting Offline Web applieations Summary
Chapter 5: CSS3: Selectors, Typography, and Color Modes What CSS3 ofters 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
Ward 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 :Iast-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 fants 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: C553 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 Understandingtiming functions
Fun transitions for responsive web sites CSS3 20 transformations What can we transform? scale translate rot~e
skew matrix transform-origin property
189 190
192 194 196 198 203 204 205 205 205 206 207
209 210 212 212 213 214
215 216 217 217 217 218 218 219 221
Oabbling in CSS3 30 transformations Breaking down the 3D effect 3D transformations not ready for prime time Animating with CSS3 Putting CSS3 transformations and animations together Summary
221 224 227 228 232 236
Chapter 8: Conquer Forms with HTML5 and C553
237
HTML5 forms Understanding the component parts of HTML5 forms placeholder required autofocus autocomplete list (and the associated datalist element)
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 minImax 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
