Responsive Web Design with HTML5 and CSS3 Learn responsive design using HTML5 and CSS3 to adapt websites to any browser or screen size Ben Frain BIRMINGHAM - MUMBAI

Responsive Web Design with HTML5 and CSS3 Copyright © 2012 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: April 2012 Production Reference: 1020412 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84969-318-9 www.packtpub.com Cover Image by J. Blaminsky (jarek@jblaminsky.com) 

Credits Project Coordinator Kushal Bhardwaj Proofreader Aaron Nash Indexer Monica Ajmera Mehta Production Coordinator Shantanu Zagade Cover Work Shantanu Zagade Author Ben Frain Reviewers Ed Henderson Mauvis Ledford KJAMAN Acquisition Editor Robin de Jongh Lead Technical Editor Joanna Finchen Technical Editors Vrinda Amberkar Vanjeet D'souza Sonali Tharwani 

About the Author Ben Frain has been a freelance frontend 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 in the Aviation industry. 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 www.benfrain.com and follow him on Twitter at twitter.com/benfrain. Thanks first and foremost to the web community. Without their combined brilliance and generosity in documenting and sharing solutions I wouldn't be able to make things I'm even slightly proud of on the Web. Next, I'd like to thank the father of responsive web design: Ethan Marcotte. A man I've never met or spoken to but whose methodology now affects the way I build websites on a day-to-day basis. It goes without saying that any imperfections or errors in the way I have presented responsive methodology are entirely mine. Finally, thanks to my family. Anyone who's watched the (also underrated) Wyatt Earp, already knows, "Nothing counts so much as blood. The rest are just strangers." 

About the Reviewers Ed Henderson is an experienced Web Developer with a love for designing and building things online. Not afraid to get his hands dirty and his feet wet, he is open to most technologies as long as they are useful and fun. Ed has a degree in Computer Science and runs his own business (Web Man Walking). He has worked freelance, permanent and contracted, and has a vast understanding of all aspects of the industry, from web pages to web apps and social media. Ed thrives on coming up with fresh ideas. He has been a Programmer, Software Developer, and is now a Web Superhero who likes nothing more than tinkering with all things shiny, fluffy, and fuzzy. Making a difference and turning an idea into a useful, working thing are what floats Ed's boat. You may not know that Ed is the Dad from Jack Draws Anything, http://jackdrawsanything.com/ and winner of the prestigious .net Social Campaign of the Year 2011 award. Ed lives in Upper Cockenzie, East Lothian, Scotland with the rest of Team Hendo; his amazing wife, Rose and sidekicks, Jack, Toby, and Noah. You can follow Ed over at http://edhenderson.com (always a work in progress, so excuse the mess) or on Twitter, @edhenderson. Mauvis Ledford is a full-stack Web Developer specializing in frontend architecture. He's been working actively in this field for the past 9 years, the last two concentrating on the Mobile Web and HTML5. He runs his own HTML5 web consultancy, specializing in responsive design and write-once deploy everywhere web applications at http://www.brainswap.me. He has worked or was contracted for Disney Mobile, Skype, Netflix, and many startups in the San Francisco Bay area. 

Kamrujaman Shohel has 6 years of experience as a Frontend Engineer and is an expert in multiple areas. He has a strong background as a User Interface/Frontend Engineer, UX Designer, UI Specialist, and Usability Consultant. After graduating in 2004, he started his career as a PHP Developer with SSR IT, before working with Multimode Group (Microsoft Department) as an Analyst. He has always liked frontend development, because he can visually apply his creativity there; this is the reason why he changed his career path in January 2005 to become a successful Frontend Developer. Since then, he has worked with Right Brain Solution Limited, as a Senior Frontend Developer. He has excellent expertise on HTML, HTML5, CSS3, jQuery, jQuery UI, PHP, Photoshop CS5, Photoshop CS5, and Illustrator CS5. For the last two years, he has been working with Trenza Softwares, as a Senior Frontend Engineer (Team Lead), has also been working with Mesovison Consultancy Limited as an IT Consultant, and has been a part-time Freelance Developer. He likes to research interface design, interactivity, user compatibility and comprehensive usability and high end web application functionality. This year, he plans to start writing a book on HTML5, CSS3, jQuery, jQuery Mobile, or jQuery UI. His vision is to establish his own company and a foundation where people will help each other develop their talents. Unless he is asleep, he is always working. Outside of his work he keeps himself up-to-date by reading technical books and researching frontend engineering. He has excellent knowledge of PHP, C, C#, VB.NET, ASP.NET, CakePHP, Zend Framework, Drupal, Joomla, and WordPress. Though he is a Frontend Engineer, he believes practice makes a man perfect, so he always keeps himself updated with new technologies. 

www.PacktPub.com Support files, eBooks, discount offers and more You might want to visit www.PacktPub.com for support files and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub. com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@packtpub.com for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. Why Subscribe? • Fully searchable across every book published by Packt • Copy and paste, print and bookmark content • On demand and accessible via web browser Free Access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.