HTML5 and CSS3 Responsive Web Design Cookbook


HTML5 and CSS3 Responsive Web Design Cookbook
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
$22.94
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
$44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • Learn the fundamental elements of writing responsive website code for all stages of the development lifecycle
  • Create the ultimate code writer’s resource using logical workflow layers
  • Full of usable code for immediate use in your website projects
  • Written in an easy-to-understand language giving knowledge without preaching

Book Details

Language : English
Paperback : 204 pages [ 235mm x 191mm ]
Release Date : May 2013
ISBN : 184969544X
ISBN 13 : 9781849695442
Author(s) : Benjamin LaGrone
Topics and Technologies : All Books, Web Development, Cookbooks

Table of Contents

Preface
Chapter 1: Responsive Elements and Media
Chapter 2: Responsive Typography
Chapter 3: Responsive Layout
Chapter 4: Using Responsive Frameworks
Chapter 5: Making Mobile-first Web Applications
Chapter 6: Optimizing Responsive Content
Chapter 7: Unobtrusive JavaScript
Index
  • Chapter 1: Responsive Elements and Media
    • Introduction
    • Resizing an image using percent width
    • Responsive images using the cookie and JavaScript
    • Making your video respond to your screen width
    • Resizing an image using media queries
    • Changing your navigation with media queries
    • Making a responsive padding based on size
    • Making a CSS3 button glow for a loading element
    • Chapter 2: Responsive Typography
      • Introduction
      • Creating fluid, responsive typography
      • Making a text shadow with canvas
      • Making an inner and outer shadow with canvas
      • Rotating your text with canvas
      • Rotating your text with CSS3
      • Making 3D text with CSS3
      • Adding texture to your text with text masking
      • Styling alternating rows with the nth positional pseudo class
      • Adding characters before and after pseudo elements
      • Making a button with a relative font size
      • Adding a shadow to your font
      • Curving a corner with border radius
      • Chapter 3: Responsive Layout
        • Introduction
        • Responsive layout with the min-width and max-width properties
        • Controlling your layout with relative padding
        • Adding a media query to your CSS
        • Creating a responsive width layout with media queries
        • Changing image sizes with media queries
        • Hiding an element with media queries
        • Making a smoothly transitioning responsive layout
        • Chapter 4: Using Responsive Frameworks
          • Introduction
          • Using the Fluid 960 grid layout
          • Using the Blueprint grid layout
          • Fluid layout using the rule of thirds
          • Trying Gumby, a responsive 960 grid
          • The Bootstrap framework makes responsive layouts easy
          • Chapter 5: Making Mobile-first Web Applications
            • Introduction
            • Using the Safari Developer Tools' User Agent switcher
            • Masking your user agent in Chrome with a plugin
            • Using browser resizing plugins
            • Learning the viewport and its options
            • Adding tags for jQuery Mobile
            • Adding a second page in jQuery Mobile
            • Making a list element in jQuery Mobile
            • Adding a mobile, native-looking button with jQuery Mobile
            • Adding a mobile stylesheet for mobile browsers only using media queries
            • Adding JavaScript for mobile browsers only
            • Chapter 6: Optimizing Responsive Content
              • Introduction
              • Responsive testing using IE's Developer Tools
              • Browser testing – using plugins
              • Development environments – getting a free IDE
              • Virtualization – downloading VirtualBox
              • Getting a browser resizer for Chrome
              • Chapter 7: Unobtrusive JavaScript
                • Introduction
                • Writing "Hello World" unobtrusively
                • Creating a glowing "submit" button with the event listener
                • Making a button stand out when you hover over it
                • Resizing an element with unobtrusive jQuery
                • Masking a password with unobtrusive JavaScript
                • Using an event listener to animate an image shadow

                Benjamin LaGrone

                Benjamin LaGrone is a web developer who lives and works in Texas. He got his start in programming at the age of 6 when he took his first computer class at The Houston Museum of Natural Science. His first program was “choose your own adventure book”, written in BASIC; he has fond memories of the days when software needed you to write line numbers.

                Fast forward to about thirty years later; after deciding that computers are here to stay, Ben has made a career combining some of his favorite things—art and coding; creating art from code. One of his favorite projects was using the GMaps API to map pathologies to chromosomes for cancer research.

                Fascinated with mobile devices for a long time, Ben thinks that the Responsive Web is one of the most exciting, yet long time coming, new aspects of web development. He now works in a SAAS development shop and is the mobile and Responsive Web evangelist for the team.

                When he’s not working on some Internet project, Ben spends his time building robots, tinkering with machines, drinking coffee, surfing, and teaching Kuk Sool martial arts.

                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

                - 4 submitted: last submission 30 Dec 2013

                Errata type: Technical| Page no: 19| Date: Sept 2 2013

                In the "How it works..." section, it is mentioned "In the smallest window,  
                below 1024px, ..." The dimension should be 800px (or 801px to be more  
                precise, because 800px is included)...
                
                In the next sentence, it is mentioned: "The medium window, ranging from  
                1025px to 1280px,..." It should say "ranging from 801px to 1024px,"...
                
                The next sentence COULD then be changed to "Finally, in the widest browser  
                widths (more than 1025px)
                

                In chapter 1, most of the examples, won't work on a real device.This issue can be fixed if you add the following code in the header section of the page:

                <meta name="viewport" content="width=device-width, initial-scale=1">
                

                Errata type: Technical| Page no: 9| Date: Sept 2 2013

                The code on page 9 should be ...

                if ($screen_w > 0) {
                	$theExt = pathinfo($img, PATHINFO_EXTENSION);
                	
                	// for Low resolution screen
                	if ($screen_w <= 800) {
                		$output = substr_replace($img, '-low', -strlen($theExt) - 1, 0);
                	}
                	// for Medium resolution screen
                	else if ($screen_w <= 1024) {
                		$output = substr_replace($img, '-med', -strlen($theExt) - 1, 0);
                	}
                		
                	// check if file exists
                	if (isset($output) && file_exists($output)) {
                		$img = $output;
                	}
                }
                ...
                
                
                
                
                								

                Errata type: Code | Page no: 9 | Date: November 27, 2013

                <!doctype html>
                <html>
                <head>
                <title>Responsive Images</title>
                <meta charset="utf-8">
                <script>
                document.cookie = "device_dimensions=" + screen.width + "x" + screen.height;
                </script>
                </head>
                <body>
                <img alt="robot image" src="images/index.php?robot.png">
                </body>
                </html>

                Should be

                <!doctype html>
                <html>
                <head>
                <title>Responsive Images</title>
                <meta charset="utf-8">
                <script>
                document.cookie = "screen_dimensions=" + screen.width + "x" + screen.height;
                </script>
                </head>
                <body>
                <img alt="robot image" src="images/index.php?robot.png">
                </body>
                </html>

                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

                HTML5 and CSS3 Responsive Web Design Cookbook +    HTML5 Enterprise Application Development =
                50% Off
                the second eBook
                Price for both: ₨351.00

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

                What you will learn from this book

                • Make responsive media that is optimized for the specific device on which it’s displayed, allowing images, videos, and other elements be fully appreciated
                • Learn the principles of making a solid, responsive layout that responds to unique displays
                • Make typography that’s fluidly responsive, so it’s easy to read on all devices – no more hard-to-see text on a tiny mobile screen
                • Using learning-by-doing recipes, you will learn how to use new responsive frameworks, and how to update your old static frameworks to be responsive
                • Make a mobile website using jQuery mobile and mobile-first design
                • Discover where to get the tools for building, deploying, and testing responsive websites
                • Make unobtrusive interactions that exist as a separate layer within the presentation, allowing it to coexist with other scripts for other devices
                • Learn techniques for server-side and client-side media deployment, providing platforms that are scaled for any device that requests them
                • Use working designs and codes that can be inserted into existing projects

                In Detail

                The Internet is going mobile. Desktop computer sales keep falling as the mobile device marketplace burgeons. Web development methods are rapidly changing to adapt to this new trend. HTML5 and CSS3 Responsive Web Design Cookbook, for all of today’s wireless Internet devices, gives developers a new toolbox for staying connected with this on-the-run demographic.

                HTML5 and CSS3 Responsive Web Design Cookbook is the programmer’s resource for generating websites that effortlessly interface with modern mobile devices. Using its clear instructions you can create responsive applications that make snappy connections for mobile browsers and give your website the latest design and development advantages for reaching mobile devices.

                HTML5 and CSS3 Responsive Web Design Cookbook is full of how-to recipes for site enhancements and optimizing your sites for the latest devices and the mobile Web.

                You will learn how to make images automatically respond to page size, make responsive menus, embed responsive videos and take advantage of a number of responsive typography techniques.We’ll then move on to creating layouts using frameworks making captivating responsive sites and retrofit frameworks into responsive websites with just a few lines of CSS.

                HTML5 and CSS3 Responsive Web Design Cookbook is your guide to obtaining full access to next generation devices and browser technology.

                Approach

                As a Cookbook, we are targeting existing developers who need to pick and choose specific recipes in order to help their websites become accessible (and usable) regardless of screen size, device, or browser.

                Who this book is for

                HTML5 and CSS3 Responsive Web Design Cookbook, for all of today’s wireless Internet devices, is for web developers seeking innovative techniques that deliver fast, intuitive interfacing for the latest mobile Internet devices.

                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