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.
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
Author(s): Benjamin LaGrone
Publisher: Packt Publishing
Year: 2013
Language: English
Pages: 204
Tags: Библиотека;Компьютерная литература;HTML / CSS / JavaScript;HTML5 / CSS3;
Cover......Page 1
Copyright......Page 3
Credits......Page 4
About the Author......Page 5
About the Reviewers......Page 6
www.PacktPub.com......Page 8
Table of Contents......Page 10
Preface......Page 14
Introduction......Page 18
Resizing an image using percent width......Page 19
Responsive images using the cookie and JavaScript......Page 21
Making your video respond to your screen width......Page 23
Resizing an image using media queries......Page 26
Changing your navigation with media query......Page 27
Making a responsive padding based on size......Page 32
Making a CSS3 button glow for a loading element......Page 34
Introduction......Page 40
Creating fluid, responsive typography......Page 41
Making a text shadow with canvas......Page 42
Making an inner and outer shadow with canvas......Page 44
Rotating your text with canvas......Page 46
Rotating your text with CSS3......Page 47
Making 3D text with CSS3......Page 49
Adding texture to your text with text-masking......Page 51
Styling alternating rows with the nth positional pseudo class......Page 52
Adding characters before and after with pseudo elements......Page 54
Making a button with a relative font size......Page 55
Adding a shadow to your font......Page 57
Curving a corner with border radius......Page 59
Responsive layout with the min-width and max-width properties......Page 62
Controlling your layout with relative padding......Page 65
Adding a media query to your CSS......Page 68
Creating a responsive width layout with media query......Page 72
Changing image sizes with the media query......Page 77
Hiding an element with the media query......Page 79
Making a smoothly transitioning responsive layout......Page 81
Introduction......Page 92
Using the Fluid 960 grid layout......Page 93
Using the Blueprint grid layout......Page 97
Fluid layout using the rule of thirds......Page 101
Trying Gumby, a responsive 960 grid......Page 106
The Bootstrap framework makes responsive layouts easy......Page 112
Introduction......Page 118
Using the Safari Developer Tools' User Agent switcher......Page 119
Masking your user agent in Chrome with a plugin......Page 122
Using browser resizing plugins......Page 125
Learning the viewport and its options......Page 126
Adding tags for jQuery Mobile......Page 129
Adding a second page in jQuery Mobile......Page 132
Making a list element in jQuery Mobile......Page 135
Adding a mobile native-looking button with jQuery Mobile......Page 142
Adding a mobile stylesheet for mobile browsers only using the media query......Page 148
Adding a JavaScript for mobile browsers only......Page 150
Introduction......Page 152
Responsive testing using IE's Developer Tools......Page 153
Browser testing – using plugins......Page 156
Development environments – getting a free IDE......Page 162
Virtualization – downloading VirtualBox......Page 165
Getting a browser resizer for Chrome......Page 169
Writing "Hello World" unobtrusively......Page 174
Creating a glowing submit button with the event listener......Page 178
Making a button stand out when you hover over it......Page 182
Resizing an element with unobtrusive jQuery......Page 186
Masking a password with unobtrusive JavaScript......Page 190
Using an event listener to animate an image shadow......Page 192
Index......Page 198
