www.it-ebooks.info Mobile First Design with HTML5 and CSS3 Roll out rock-solid, responsive, mobile first designs quickly and reliably Jason Gonzales BIRMINGHAM - MUMBAI www.it-ebooks.info Moblie First Design with HTML5 and CSS3 Copyright © 2013 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: September 2013 Production Reference: 1170913 Published by Packt Publishing Ltd Livery Place 35 Livery Street Birmingham B3 2PB, UK ISBN 978-1-84969-646-3 www.packtpub.com Cover Image by Arvind Shetty (arvindshetty86@gmail.com) www.it-ebooks.info Credits Author Project Coordinator Jason Gonzales Suraj Bist Reviewers Proofreader Ahmad Alrousan Stephen Copestake Daniel Blair Indexer Martin Brennan Rekha Nair Acquisition Editor Production Coordinator Martin Bell Aparna Bhagat Owen Roberts Commissioning Editor Neil Alexander Cover Work Aparna Bhagat Technical Editors Chandni Maishery Larissa Pinto Copy Editors Tanvi Gaitonde Sayanee Mukherjee Alfida Paiva www.it-ebooks.info About the Author Jason Gonzales has worked as a musician and an English teacher, but front-end engineering is his passion He is a self-taught engineer, but is an obsessive learner and researcher He's been working on front ends for over seven years, but also does full-stack work and lots of fretting over making sites that have awesome user experiences This keeps him learning pretty much on a daily basis, which is how he likes it I'd like to thank my wife, kids, and friends for putting up with me while working on this book I'd also like to thank Bear Republic Racer 5, coffee, and vim www.it-ebooks.info About the Reviewers Ahmad Alrousan has been a professional developer for over seven years, specializing in building desktop, web, and mobile business applications for different industries He holds a bachelor's degree in Computer Engineering and he is a NET Microsoft Certified Professional Developer (MCPD) He spends a lot of time working on startups and learning new skills He can be reached at http://alrosan.net Daniel Blair studied web development at Red River College in Canada He is an independent web and mobile application developer He specializes in Android where he has written several successful apps that a wide range of tasks Dan also enjoys working with WordPress and regularly develops custom themes for clients that are both responsive and beautiful A Linux enthusiast at heart, he often works with the Ubuntu desktop and server operating system and enjoys working with Linux compatibility issues Dan also runs a technology website that offers tutorials, reviews, and downloads He also regularly blogs about the current open source, Linux, Android, and operating system news www.it-ebooks.info Martin Brennan is a web developer working in Brisbane, Australia who develops primarily in the ASP.NET platform and has been doing so for the past three years He works regularly with ASP.NET, VB.NET, C#, JavaScript, and MSSQL, and loves to work with JavaScript MV* frameworks He spends his spare time learning new programming languages and frameworks and blogging at http://www.martin-brennan.com Martin also enjoys reading, obsessively organizing his music collection, and blogging about liquor and bars with his best friend at http://www.imbibeblog.com www.it-ebooks.info 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 TM 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 browsers 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 www.it-ebooks.info www.it-ebooks.info Table of Contents Preface 1 Chapter 1: Mobile First – How and Why? What is Responsive Web Design? Prerequisites 10 Andy Clarke's site 10 GitHub 10 My GitHub Fork 10 Summary 10 Chapter 2: Building the Home Page Preparing and planning your workspace Planning ahead 11 11 12 Navigation 14 Hero/slider 14 Content panels 14 Footer 15 Let's build! 19 Header 20 Logo 20 Navigation 21 Hero 29 Content panels 31 Footer 32 Making our page responsive 35 Slider 38 Summary 43 Chapter 3: Building the Gallery Page Creating the wireframe The slim hero Content panels www.it-ebooks.info 45 45 48 54 .. .Mobile First Design with HTML5 and CSS3 Roll out rock-solid, responsive, mobile first designs quickly and reliably Jason Gonzales BIRMINGHAM - MUMBAI www.it-ebooks.info Moblie First Design with. .. source framework you can build a mobile first responsive website fast What this book covers Chapter 1, Mobile First – How and Why? gives a quick introduction to mobile first strategy Chapter 2, Building... Chapter 1: Mobile First – How and Why? What is Responsive Web Design? Prerequisites 10 Andy Clarke's site 10 GitHub 10 My GitHub Fork 10 Summary 10 Chapter 2: Building the Home Page Preparing and planning