Table Of Contentwww.it-ebooks.info
Responsive Web Design by
Example Beginner's Guide
Discover how you can easily create engaging, responsive
websites with minimum hassle!
Thoriq Firdaus
BIRMINGHAM - MUMBAI
www.it-ebooks.info
Responsive Web Design by Example Beginner's Guide
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: March 2013
Production Reference: 1140313
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-84969-542-8
www.packtpub.com
Cover Image by Arief Bahari ([email protected])
www.it-ebooks.info
Credits
Author Copy Editors
Thoriq Firdaus Brandt D'Mello
Insiya Morbiwala
Reviewers
Alfida Paiva
Kevin M. Kelly
Ruta Waghmare
Shawn McBurnie
Volkan Özçelik
Project Coordinator
Chad Adams Amey Sawant
Abhishek Bhardwaj
Proofreaders
Acquisition Editor Lynda Sliwoski
Erol Staveley Maria Gould
Lead Technical Editor Indexer
Neeshma Ramakrishnan Rekha Nair
Technical Editors Production Coordinator
Prasad Dalvi Nilesh R. Mohite
Varun Pius Rodrigues
Cover Work
Nilesh R. Mohite
www.it-ebooks.info
About the Author
Thoriq Firdaus is a graphic and web designer living in Indonesia. He has been working
in web designing projects with several clients from startup to notable companies and
organizations worldwide for over five years.
He is very passionate on HTML5 and CSS3 and writes on these subjects regularly
at http://www.hongkiat.com/ and at his own blog http://creatiface.com/.
Occasionally, he also gives presentations on web design at some local colleges
and institutions.
Outside of work, he enjoys watching movies with his family and trying out some good food
in a new cafe or restaurant nearby.
First, I would like to thank the team at Packt Publishing for giving me a
chance to write this book and also to the editors and reviewers for their
help on improving this book with their valuable feedback and comments.
I also thank my friends Arief Bahari (www.ariefbahari.com) and Ferina
Berliani (http://nantokaa.tumblr.com/) for allowing me to use their
artwork for this book.
Lastly, I thank my family, especially my wife and daughter, for giving me
support during the process of writing this book.
www.it-ebooks.info
About the Reviewers
Kevin M. Kelly is an experienced web craftsman specializing in interface development,
producing in areas such as ad agencies, e-commerce places, and government bodies. He
has worked with companies such as Canadian Tire, Rogers, The Toronto Star, Nissan, and
Mazooma. He is the cofounder of the coder-focused meetup, #devTO, and member of
Multimedia Design and Production Technician Program Advisory Committeee at Humber
Institute of Design and Advanced Learning. Kevin is passionate about the industry as well as
his community.
My special thanks to Packt Publishing, my friends, family, and every person
that I have dealt with in regards to my amazing career.
Shawn McBurnie has been developing websites since the late 1990s. He is the principal
developer at Nettercap, a promotion and development shop focused on traditional music
and arts, and is a frontend developer for The Nerdery. He was also a technical reviewer for
Sang Shin's HTML5 Mobile Development Cookbook.
When he's not programming, Shawn can be found performing with his band, Rumgumption,
or teaching at the Center for Irish Music in Minnesota.
www.it-ebooks.info
Volkan Özçelik is a frontend engineer living in Mountain View, in the middle of Silicon
Valley. Since 2003, he has been creating client-heavy AJAX web applications. He loves to
architect responsive and intuitive web components, driven by amazingly well-organized
JavaScript code. He dreams of the death of Internet Explorer, and shudders at the horror of
thousands of people still using the crazy thing, but tenaciously works around its quirks and
gently aligns it with its more modern peers.
Volkan has a blog (http://o2js.com/) where he shares peculiarities, intricacies,
best practices, patterns, use cases, and implementations of reusable, cross-platform,
optimized JavaScript. He is also the author of a book JavaScript Interview Questions
(http://o2js.com/interview-questions/).
Other than JavaScript, Volkan has experience with NoSQL data stores, ASP.net, C#, PHP, Java,
Python, Django, Ruby, Objective C, and a variety of other languages and frameworks.
Volkan is currently a Software Engineer at Jive Software (http://www.jivesoftware.
com); prior to that he was a JavaScript hacker at SocialWire (http://socialwire.com).
He was the VP of Technology at GROU.PS (http://grou.ps) and also a JavaScript Engineer
at LiveGO (a social mash-up that's gone to dead pool, R.I.P). He was the CTO of Turkey's
largest business network cember.net (which got acquired by Xing A.G.).
When he's not satisfying his never-ending appetite to experiment with cutting-edge
technologies and frameworks, Volkan loves to be with nature spending days away from
anything digital; he's a trekking and camping enthusiast, and a keen lover of parrots.
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
[email protected] 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 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.
www.it-ebooks.info
www.it-ebooks.info
Table of Contents
Preface 1
Chapter 1: Responsive Web Design 7
Basic responsive web design 8
Viewport meta tag and CSS3 media queries 8
Limitations of responsive web design 10
Responsive image with picture element 11
Learn more about HTML5 and CSS3 14
Introduction to RWD frameworks 15
Why use frameworks? 15
Skeleton 16
Bootstrap 16
Foundation 17
Who is using these frameworks? 17
Hivemind 18
Living.is 18
Swizzle 20
The cons 22
Tools required to build responsive websites 22
Web browsers 23
Code editors 23
Responsive bookmarklets 23
A brief introduction to CSS preprocessors 25
CSS preprocessor compiler tool 25
LESS 26
Nesting rules 26
Variables 28
Mixins 28
Parametric mixins 30
Operations 31
Sass (Syntactically Awesome Stylesheets) 32
www.it-ebooks.info
