HTML5 and CSS3 Responsive Web Design Cookbook

The web is moving inexorably away from the desktop, and this is the cookbook you need to make responsive websites that adapt fluidly to mobile devices. All the innovative techniques at your fingertips in one handy volume.

HTML5 and CSS3 Responsive Web Design Cookbook

Cookbook
Benjamin LaGrone

The web is moving inexorably away from the desktop, and this is the cookbook you need to make responsive websites that adapt fluidly to mobile devices. All the innovative techniques at your fingertips in one handy volume.
$26.99
$44.99
RRP $26.99
RRP $44.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

+ Collection
Free Sample

Book Details

ISBN 139781849695442
Paperback204 pages

About This Book

  • 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

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.

Table of Contents

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 the media query
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

What You Will Learn

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

Authors

Table of Contents

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 the media query
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

Book Details

ISBN 139781849695442
Paperback204 pages
Read More