Responsive Web Design with HTML5 and CSS3

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


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!

About the Author
Ben Frain has been a freelance front-end web designer/developer for over a decade working directly with clients and alongside design agencies worldwide. He also works as a technology journalist, contributing regularly to a number of diverse publications on the Mac platform, future technology, website design and technology systems. 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 playing indoor football whilst his body (and wife) still allow it. Visit him online at http://www.benfrain.com and follow him on Twitter at twitter.com/benfrain

Table of Contents
Preface
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: Sporting 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  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 mark


	
		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 <hgro> 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 mark


	
		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 sport 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-sporting 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 sport 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


	
		Index