Adobe Edge Quickstart Guide

In Detail Tablets, smart phones and even televisions are being used increasingly to view the web. There's never been a greater range of screen sizes and associated user experiences to consider. Web pages built to be responsive provide the best possible version of their content to match the viewing devices of not just today's devices but tomorrow's too. Learn how to design websites according to the new "responsive design" methodology, allowing a website to display beautifully on every screen size. Follow along, building and enhancing a responsive web design with HTML5 and CSS3. The book provides a practical understanding of these new technologies and techniques that are set to be the future of front-end web development. Starting with a static Photoshop composite, create a website with HTML5 and CSS3 which is flexible depending on the viewer's screen size. With HTML5, pages are leaner and more semantic. A fluid grid design and CSS3 media queries means designs can flex and adapt for any screen size. Beautiful backgrounds, box-shadows and animations will be added - all using the power, simplicity and flexibility of CSS3. Responsive web design with HTML5 and CSS3 provides the necessary knowledge to ensure your projects won't just be built 'right' for today but also the future. Approach This book will lead you, step by step and with illustrative screenshots, through a real example Who this book is for Are you writing two websites - one for mobile and one for larger displays? Or perhaps you've heard of Responsive Design but are unsure how to bring HTML5, CSS3, or responsive design all together. If so, this book provides everything you need to take your web pages to the next level - before all your competitors do! Cover 1 Copyright 3 Credits 4 About the Author 5 About the Reviewers 6 www.PacktPub.com 8 Table of Contents 10 Preface 16 Chapter 1: Getting Started with HTML5, CSS3, and Responsive Web Design 22 Why smart phones are important (and old IE isn't) 23 Are there times when a responsive design isn't the right choice? 25 Defining responsive web design 25 Why stop at responsive design? 26 Examples of responsive web design 26 Get your viewport testing tools here! 27 Online sources of inspiration 36 HTML5—why it's so good 37 Saving time and code with HTML5 37 New, semantically meaningful HTML5 tag elements 38 CSS3 enables responsive designs and more 39 The bottom line—CSS3 won't break anything! 40 How can CSS3 solve everyday design problems? 40 Look Ma'—no images! 43 What else has CSS3 got to offer? 44 Can HTML5 and CSS3 work for us today? 46 Responsive web designs are not magic bullets 48 Educating our clients that websites shouldn't look the same in all browsers 48 Summary 49 Chapter 2: Media Queries: Supporting Differing Viewports 50 You can use media queries today 50 Why responsive designs need media queries? 51 Media query syntax 51 What can media queries test for? 54 Using media queries to alter our design 55 The best way to load media queries for responsive designs 56 Our first responsive design 56 Don't panic but our design is fixed-width 57 Responsive designs—making images as economical as possible 61 Content clipping in smaller viewports 63 Stopping modern mobile browsers from auto-resizing the page 65 Fixing the design for different viewport widths 68 With responsive designs, content should always come first 69 Media queries—only part of the solution 74 We need a fluid layout 74 Summary 75 Chapter 3: Embracing Fluid Layouts 76 Fixed layouts aren't future proof 77 Why proportional layouts are essential for responsive designs 77 Amending a design from fixed to proportional layout 78 A formula to remember 78 Setting a context for proportional elements 81 It's always important to remember the context 87 Using ems rather than pixels for typography 90 Fluid images 92 Making images scale with the viewport 92 Specific rules for specific images 94 Putting the brakes on fluid images 96 The incredibly versatile max-width property 97 Serving different images for different screen sizes 98 Setting up Adaptive Images 99 Put background images somewhere else 101 Where fluid grids and media queries come together 103 CSS Grid systems 104 Rapidly building our site with a Grid system 105 Summary 111 Chapter 4: HTML5 for Responsive Designs 112 What parts of HTML5 can we use today? 113 Most sites can be written in HTML5 113 Polyfills, shims, and Modernizr 113 How to write HTML5 pages 114 Economies of using HTML5 116 A sensible approach to HTML5 markup 117 All hail the mighty tag 117 Obsolete HTML features 118 New semantic elements in HTML5 118 The element 119 The element 120 The element 120 The element 120 The element 121 The HTML5 outline algorithm 121 The element 123 The element 123 The element 124 Practical usage of HTML5's structural elements 124 What about the main content of the site? 131 HTML5 text-level semantics 132 The element 132 The element 132 The element 132 Applying text-level semantics to our markup 133 Adding accessibility to your site with WAI-ARIA 134 ARIA's landmark roles 135 Embedding media in HTML5 138 Adding video and audio the HTML5 way 138 Providing alternate source files 140 Fallback for older browsers 141 Audio and video tags work almost identically 141 Responsive video 141 Offline Web applications 146 Offline Web applications in a nut shell 146 Making web pages work offline 146 Understanding the manifest file 148 Automatic loading of pages to the offline manifest 148 About that version comment 149 Viewing the site offline 149 Troubleshooting Offline Web applications 150 Summary 151 Chapter 5: CSS3: Selectors, Typography and, Color Modes 152 What CSS3 offers the frontend developer 153 CSS3 support in Internet Explorer versions 6 to 8 153 Using CSS3 to design and develop pages in the browser 154 Anatomy of a CSS rule 154 Vendor prefixes and how to use them 154 Quick and useful CSS3 tricks 157 CSS3 multiple columns for responsive designs 157 Adding a gap and column divider 159 Word wrapping 160 New CSS3 selectors and how to use them 161 CSS3 attribute selectors 161 CSS3 substring matching attribute selectors 162 A practical, real world example 163 CSS3 structural pseudo-classes 164 The :last-child selector 165 The nth-child selectors 169 Understanding what nth rules do 170 The negation (:not) selector 173 Amendments to pseudo-elements 174 Is :first-line handy for responsive designs? 174 Custom web typography 176 The @font-face CSS rule 176 Implementing web fonts with @font-face 177 Help—my CSS3 @font-face headings look messy 181 A note about custom @font-face typography and responsive designs 183 New CSS3 color formats and alpha transparency 184 RGB color 184 HSL color 185 Fallback color values for IE6, IE7, and IE8 187 Alpha channels 187 Summary 189 Chapter 6: Stunning Aesthetics with CSS3 190 Text shadows with CSS3 191 HEX, HSL, or RGB color allowed 191 Pixels, em, or rem 192 Preventing a text shadow 193 Left and top shadows 195 Creating an embossed text-shadow effect 195 Multiple text-shadows 196 Box shadows 196 Inset shadow 197 Multiple shadows 199 Background gradients 200 Linear background gradients 200 Breakdown of linear gradient syntax 203 Radial background gradients 204 Breakdown of radial gradient syntax 205 Repeating gradients 207 Background gradient patterns 209 Responsive considerations for CSS3 211 Bringing CSS3 properties together 213 Multiple background images 218 Background size 219 Background position 220 Background shorthand 220 More CSS3 features 220 Sizeable icons which are perfect for responsive designs 221 Summary 222 Chapter 7: CSS3 Transitions, Transformations, and Animations 224 What CSS3 transitions are and how we can use them 225 The properties of a transition 227 The transition shorthand property 227 Transition different properties over different periods of time 228 Understanding timing functions 229 Fun transitions for responsive web sites 230 CSS3 2D transformations 231 What can we transform? 232 scale 232 translate 232 rotate 233 skew 233 matrix 234 transform-origin property 236 Dabbling in CSS3 3D transformations 236 Breaking down the 3D effect 239 3D transformations not ready for prime time 242 Animating with CSS3 243 Putting CSS3 transformations and animations together 247 Summary 251 Chapter 8: Conquer Forms with HTML5 and CSS3 252 HTML5 forms 253 Understanding the component parts of HTML5 forms 255 placeholder 256 required 256 autofocus 258 autocomplete 258 list (and the associated datalist element) 259 HTML5 input types 260 email 260 number 261 url 262 tel 263 search 265 pattern 265 color 266 Date and time inputs 267 date 267 month 268 week 268 time 269 datetime and datetime-local 269 range 271 How to polyfill non-supporting browsers 273 Styling HTML5 forms with CSS3 274 Form-specific CSS3 pseudo class selectors 280 Summary 282 Chapter 9: Solving Cross-browser Responsive Challenges 284 Progressive enhancement versus graceful degradation 289 Reality 289 Should you fix old versions of Internet Explorer? 290 Statistics (again) 291 Personal choice 291 Modernizr—the frontend developer's Swiss army knife 292 Fix styling issues with Modernizr 294 Modernizr adds HTML5 element support for old IE 297 Add min/max media query capability for Internet Explorer 6, 7, and 8 298 Conditional loading with Modernizr 300 Changing navigation links to a drop menu (conditionally) 302 High resolution devices (the future) 307 Summary 310 Index 312 Annotation Tablets, smart phones and even televisions are being used increasingly to view the web. Theres never been a greater range of screen sizes and associated user experiences to consider. Web pages built to be responsive provide the best possible version of their content to match the viewing devices of not just todays devices but tomorrows too. Learn how to design websites according to the new responsive design methodology, allowing a website to display beautifully on every screen size. Follow along, building and enhancing a responsive web design with HTML5 and CSS3. The book provides a practical understanding of these new technologies and techniques that are set to be the future of front-end web development. Starting with a static Photoshop composite, create a website with HTML5 and CSS3 which is flexible depending on the viewers screen size. With HTML5, pages are leaner and more semantic. A fluid grid design and CSS3 media queries means designs can flex and adapt for any screen size. Beautiful backgrounds, box-shadows and animations will be added all using the power, simplicity and flexibility of CSS3. Responsive web design with HTML5 and CSS3 provides the necessary knowledge to ensure your projects wont just be built right for today but also the future