Responsive Web Design with HTML5 and CSS3


Responsive Web Design with HTML5 and CSS3
eBook: $23.99
Formats: PDF, PacktLib, ePub and Mobi formats
$20.39
save 15%!
Print + free eBook + free PacktLib access to the book: $63.98    Print cover: $39.99
$39.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • Everything needed to code websites in HTML5 and CSS3 that are responsive to every device or screen size
  • Learn the main new features of HTML5 and use CSS3’s stunning new capabilities including animations, transitions and transformations
  • Real world examples show how to progressively enhance a responsive design while providing fall backs for older browsers

Book Details

Language : English
Paperback : 324 pages [ 235mm x 191mm ]
Release Date : April 2012
ISBN : 1849693188
ISBN 13 : 9781849693189
Author(s) : Ben Frain
Topics and Technologies : All Books, Web Development, Mobile, Web Development

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
  • 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

                    Ben Frain

                    Ben Frain has been a frontend web designer and developer since 1996. He also works as a technology journalist, contributing regularly to a number of diverse publications on the Mac platform, consumer technology, website design, and the aviation industry.

                    Before that, he worked as an underrated (and modest) TV actor, 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 whilst his body (and wife) still allows it, and wrestling with his son.

                    Visit him online at http://www.benfrain.com and follow him on Twitter at twitter.com/benfrain.

                    Sorry, we don't have any reviews for this title yet.

                    Code Downloads

                    Download the code and support files for this book.


                    Submit Errata

                    Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                    Errata

                    - 8 submitted: last submission 24 Feb 2014

                    Errata type: Others | Page number: 68 | Errata date: 18 June 2012

                    under CSS #navigation, the revised width is shown as 72.7083333*; /*698 / 960*/. It should be: width: 97.9166667%; /*940 / 960 */

                     

                    Errata type: Others | Page number 134 | Errata date: 18 October 2012

                    In the section About that version comment, in the sentence I follow Nick Pilgrim's example..., Nick Pilgrim should be Mark Pilgrim as seen here http://diveintohtml5.info/ .

                    Errata type: Others | Page number 248 | Errata date: 18 October 2012

                    The sentence:

                    Notice the Go, forward slash (/), and .com keys? Because we've used a URL input type they are presented by the device for easy URL completion (unless you're not
                    going to a .com site in which case, you know, thanks for nothing Apple).

                    should be:

                    Notice the Go, forward slash (/), and .com keys? Because we've used a URL input type they are presented by the device for easy URL completion (if you're not going to a .com site, press and hold for other domain suffixes).

                    Errata type: Other | Errata date: 18 October 2012

                    The odd numbered pages from 65 to 95 are numbered as 63.

                    Errata type: Typo | Page number: 62 | Errata date: 19 October 2012

                    The sentence:

                    Whist media queries are incredibly powerful we are now aware of some limitations.

                    should have "While" instead of "Whist".

                    Errata type: Typo | Page number: 101 | Errata date: 16 Nov 2012

                    1st paragraph, 2nd sentence, the word "relieve" should be "relief".

                     

                    Errata type: Code | Page number: 261 | Errata date: 25 Dec 2012

                    Under CSS '#redemption input#submit' the following line should be added to  
                    style the submit button for IE10:
                    
                    background: -ms-linear-gradient(top, rgb(241,92,96) 0%, rgb(176,28,32) 100%);

                    Sample chapters

                    You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                    Frequently bought together

                    Responsive Web Design with HTML5 and CSS3 +    Responsive Web Design by Example =
                    50% Off
                    the second eBook
                    Price for both: €27.35

                    Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                    What you will learn from this book

                    • Responsive web design is the hottest topic in web design. Understand what it is and why it’s essential to master
                    • HTML5 is leaner, faster and more semantically rich. You’ll learn how to write HTML5 and understand all the key features
                    • CSS3 media queries allow different styles for different media, learn how to integrate them into a design
                    • Make web pages and the media within them ‘fluid’ - allowing them to flex when needed
                    • Ditch images and use CSS3 to create background gradients, text shadows, box shadows and more
                    • Use CSS3 3D transformations to flip elements in 3D space. Animate elements with CSS3 keyframes
                    • Create smooth CSS3 transitions between default and hover states with differing durations and timing functions
                    • Conquer forms – add validation and useful interface elements like date pickers and range sliders with HTML5 alone

                    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!

                    Code Download and Errata
                    Packt Anytime, Anywhere
                    Register Books
                    Print Upgrades
                    eBook Downloads
                    Video Support
                    Contact Us
                    Awards Voting Nominations Previous Winners
                    Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                    Resources
                    Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software