HTML5 and CSS3 Responsive Web Design Cookbook
eBook:
$26.99
Formats:
Formats:
$22.94
save 15%!
save 15%!
Print + free eBook + free PacktLib access to the book:
$71.98
Print cover: $44.99
$44.99
save 37%!
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
| Also available on: |
|
- 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 : EnglishPaperback : 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
PrefaceChapter 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
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 2013Errata 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
+
=
50% Off
the second eBook
the second eBook
Price for both:
£24.65
Buy both these recommended eBooks together and get 50% off the cheapest eBook.
- 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
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.
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.
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.