Responsive Web Design with HTML5 and CSS3 [eBook]

If you think you need to create a "mobile" version of your website—think again!A responsive web design provides one design that looks great on smart phone,desktop, and everything in-between. It will effortlessly respond to the size ofthe user's screen, providing the best experience possible for bResponsive Web design with html5 and csS3Copyright o 2012 Packt PublishingAll rights reserved. No part of this book may be reproduced, stored in a retrievalsystem, or transmitted in any form or by any means, without the prior writtenpermission of the publisher, except in the case of brief quotations embedded incritical articles or reviewsrt has been made in the preparation of this book to ensure the accuracyof the information presented However the information contained in this book issold without warranty, cither express or implied. Neither the author nor PaclPublishing and its dealers and distributors will be held liable for any damagescaused or alleged to be caused directly or indirectly by this bookPackt Publishing has endeavored to provide trademark information about all of thecompanies and products mentioned in this book by the appropriate use of capitalsHowever, Packt Publishing cannot guarantee the accuracy of this informationFirst published: April 2012Production reference: 1020412Published by Packt Publishing ltdLivery place35 Livery streetBirmingham b3 2PB UKISBN978-1-84969-3189www.packtpub.comCover Image by J. Blaminsky (jarekojblaminsky. com)CreditsAuthorProject CoordinatorBen frainKushal BhardwajReviewersProofreaderEd HendersonAaron NashMauvis ledfordKJAMANIndexerMonica Ajmera MehtaAcquisition EditorRobin de jonghProduction coordinatorShantanu AgadeLead technical editorJoanna finchesCover workShantanu AgadeTechnical editorsVrinda amberkarVanjeet D'souzaSonali tharwaniAbout the authorBen Frain has been a freelance frontend web designer/ developer for over a decade,working directly with clients and alongside design agencies worldwide. He alsoworks as a technology journalist, contributing regularly to a number of diversepublications on the Mac platform, future technology, website design and technologysystems in the Aviation industryBefore that, he worked as an underrated(and modest) TV Actor, having graduatedfrom Salford University with a degree in Media and Performance. He has writtenfour equally underrated(his opinion) screenplays and still harbors the(fading) beliefhe might sell one. Outside of work, he enjoys playing indoor football whilst his body(and wife)still allow itVisithimonlineatwww.benfrain.comandfollowhimontwitterattwitter. com/benfrainThanks first and foremost to the web community Without theircombined brilliance and generosity in documenting and sharingsolutions I wouldn,'t be able to make things I'm even slightly proudof on the webText, I'd like to thank the father of responsive web designEthan marcotte. A man l've never met or spoken to but whosemethodology now affects the way I build websites on a day-to-daybasis. It goes without saying that any imperfections or errors in theway i have presented responsive methodology are entirely mineFinally, thanks to my family. Anyone who's watched the(alsounderrated)Wyatt Earp, already knows, "Nothing counts so much asblood. The rest are just strangers.About the reviewersEd henderson is an experienced Web developer with a love for designing andbuilding things onlineNot afraid to get his hands dirty and his feet wet, he is open to most technologies aslong as they are useful and funEd has a degree in Computer Science and runs his own business(Web manWalking). He has worked freelance, permanent and contracted, and has a vastunderstanding of all aspects of the industry from web pages to web apps andSocial mediaEd thrives on coming up with fresh ideas. He has been a Programmer, SoftwareDeveloper, and is now a Web Superhero who likes nothing more than tinkeringwith all things shiny, fluffy, and fuzzy. Making a difference and turning an ideainto a useful, working thing are what floats ed 's boatYou may not know that ed is the dad from Jack draws anythinghttp://jackdrawsanything.comandwinneroftheprestigiousnetSocialCampaign of the Year 2011 awardEd lives in Upper Cockenzie, East Lothian, Scotland with the rest of Team Hendonhis amazing wife, Rose and sidekicks, Jack, Toby, and NoahYoucanfollowEdoverathttp://edhenderson.com(alwaysaworkinprogressso excuse the mess or on twitter, @edhendersonMauvis Ledford is a full-stack Web Developer specializing in frontendarchitecture. He's been working actively in this field for the past 9 years thelast two concentrating on the Mobile Web and HTmL5He runs his own HImL5 web consultancy, specializing in responsive design andwrite-oncedeployeverywherewebapplicationsathttp://www.brainswap.me.Hehas worked or was contracted for Disney Mobile, Skype, Netflix, and many startupsin the san francisco bay areaKamrujaman Shohel has 6 years of experience as a frontend Engineer and is anexpert in multiple areas. He has a strong background as a User Interface/FrontendEngineer, UX Designer, UI Specialist, and Usability Consultant. After graduatingin 2004, he started his career as a PHP Developer with SSr IT, before working withMultimode group(microsoft Department)as an Analyst. He has always likedfrontend development, because he can visually apply his creativity there; this isthe reason why he changed his career path in January 2005 to become a successfulFrontend Developer. Since then, he has worked with Right Brain Solution Limited,as a Senior Frontend Developer. He has excellent expertise on HTML, HTmL5CSS3, jQuery, jQuery UL, PHP, Photoshop CS5, Photoshop CS5, and IllustratorCS5. For the last two years, he has been working with Trenza Softwares, as a SeniorFrontend Engineer(Team Lead), has also been working with Mesovison ConsultancyLimited as an IT Consultant, and has been a part-time Freelance Developer. He likesto research interface design interactivity, user compatibility and comprehensiveusability and high end web application functionality This year, he plans to startwriting a book on htML5, CSS3, jQuery, jQuery Mobile, or jQuery UI. His vision isto establish his own company and a foundation where people will help each otherdevelop their talentsUnless he is asleep, he is always working. Outside of his work he keeps himselfup-to-date by reading technical books and researching frontend engineeringHe has excellent knowledge of PHP Cc#,vb.NEt asP. NET, CakePHP zendFramework, Drupal, Joomla, and WordPress. Though he is a Frontend engineer,he believes practice makes a man perfect, so he always keeps himself updated withnew technologiesWww.Packtpub.comSupport files, eBooks, discount offers and moreYoumightwanttovisitwww.Packtpub.comforsupportfilesanddownloadsrelatedto your bookDid you know that Packt offers e Book versions of every book published, with PDFandepubfilesavailableYoucanupgradetotheebooKversionatwww.packtpubcom and as a print book customer you are entitled to a discount on the e book copyGet in touch with us at service@packtpub com for more detailsAtwww.packtpub.comyoucanalsoreadacollectionoffreetechnicalarticlessignup for a range of free newsletters and receive exclusive discounts and offers on Packtbooks and ebooksPACKTLIB°http://packtliB.Packtpub.comDo you need instant solutions to your IT questions? PacktLib is Packt's onlinedigital book library. Here, you can access, read and search across Packt's entirelibrarybOOKSWhy Subscribe?Fully searchable across every book published by PacktCopy and paste, print and bookmark contentOn demand and accessible via web browserFree Access for packt account holdersIfyouhaveanaccountwithpacktatwww.Packtpub.com,youcanusethistoaccessPacktLib today and view nine entirely free books Simply use your login credentialsfor immediate accessTable of contentsPrefaceChapter 1: Getting Started with HTML5, CSS3and Responsive Web DesignWhy smart phones are important (and old IE isnt8Are there times when a responsive design isnt the right choice?10Defining responsive web design10Why stop at responsive design?Examples of responsive web designGet your viewport testing tools here12Online sources of inspiration21HTML5— why it's so good22Saving time and code with HTML522New, semantically meaningful HTML5 tag elements23CSS3 enables responsive designs and more24The bottom line-CSS3 won t break anything25How can CSS3 solve everyday design problems?25Look Mano images!28What else has css3 got to offer?29Can HTML5 and CSS3 work for us today31Responsive web designs are not magic bullets33Educating our clients that websites shouldnt look thesame in all browsers33Summary34Chapter 2: Media Queries: Supporting Differing Viewports35You can use media queries today35Why responsive designs need media queries?36Media query syntax36What can media queries test for?39