Table Of ContentResponsive Web Design
by Example Beginner's Guide
Second Edition
Build powerful and engaging responsive websites with ease
Thoriq Firdaus
BIRMINGHAM - MUMBAI
Responsive Web Design by Example Beginner's Guide
Second Edition
Copyright © 2014 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
Second edition: November 2014
Production reference: 1171114
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78355-325-9
www.packtpub.com
[ FM-2 ]
Credits
Author Project Coordinator
Thoriq Firdaus Kranti Berde
Reviewers Proofreaders
Saumya Dwivedi Maria Gould
Gabriel Hilal Lesley Harrison
Joydip Kanjilal Linda Morris
Anirudh Prabhu
Taroon Tyagi Indexers
Rekha Nair
Commissioning Editor Priya Sane
Julian Ursell
Production Coordinator
Acquisition Editor Kyle Albuquerque
Sam Wood
Cover Work
Content Development Editor Kyle Albuquerque
Kirti Patil
Technical Editor
Anand Singh
Copy Editors
Sarang Chari
Shambhavi Pai
[ FM-3 ]
About the Author
Thoriq Firdaus is a web developer and lives in Indonesia. He has been dabbling in web
design and development for more than 5 years, working with many clients of varying sizes.
He appreciates the giving nature of the web design community at large. He also loves trying
out new things in CSS3 and HTML5 and occasionally speaks at some local colleges and
institutions on the subject.
Outside of work, he loves spending time with his wife and daughter, watching movies,
and enjoying meals at nearby cafes and restaurants.
[ FM-4 ]
About the Reviewers
Saumya Dwivedi is currently a member of the technical staff of Groupon India Pvt.
Ltd. She obtained a BTech degree in Computer Science from the International Institute
of Information Technology, Hyderabad. She is a software enthusiast and worked on the
responsive design of Gnome websites during one of her internships. She hails from
Indore (Madhya Pradesh) and currently resides in Chennai.
Gabriel Hilal is a full-stack web developer specializing in Ruby on Rails and related
technologies. He has a Bachelor's degree in Information Systems (Internet Business) and
a Master's degree in Information Systems with Management Studies, both from Kingston
University, London. During his time at the university, he developed a passion for Ruby on
Rails, and since then, he has done freelance work using behavior-driven development and
agile methodologies to build high-quality Rails applications. He can be contacted via his
website (www.gabrielhilal.com) or by e-mail at [email protected].
[ FM-5 ]
Joydip Kanjilal is a Microsoft Most Valuable Professional in ASP.NET, speaker, and author
of several books and articles. He has more than 16 years of experience in IT, with more than
10 years in Microsoft .NET and related technologies. He has been selected as MSDN Featured
Developer of the Fortnight (MSDN) a number of times and also as Community Credit Winner
at www.community-credit.com several times.
He is the author of the following books:
Visual Studio 2010 and .NET 4 Six in One, Wiley India Private Limited
ASP.NET 4.0 Programming, McGraw-Hill Osborne
Entity Framework Tutorial, Packt Publishing
Pro Sync Framework, Apress
Sams Teach Yourself ASP.NET Ajax in 24 Hours, Sams
ASP.NET Data Presentation Controls Essentials, Packt Publishing
He is the reviewer of the following books:
jQuery UI Cookbook, Packt Publishing
Instant Testing with QUnit, Packt Publishing
Instant jQuery Selectors, Packt Publishing
C# 5 First Look, Packt Publishing
jQuery 1.3 Reference Guide, Packt Publishing
HTML 5 Step by Step, O'Reilly Media
He has authored more than 250 articles for some of the most reputable sites, such as www.
msdn.microsoft.com, www.code-magazine.com, www.asptoday.com, www.devx.
com, www.ddj.com, www.aspalliance.com, www.aspnetpro.com, www.sql-server-
performance.com, www.sswug.org, and so on. A lot of these articles have been selected
and published on www.asp.net—Microsoft's official site on ASP.NET.
He has years of experience in designing and architecting solutions for various domains. His
technical strengths include C, C++, VC++, Java, C# 5, Microsoft .NET, Ajax, WCF 4, ASP.NET
MVC 4, ASP.NET Web API, REST, SOA, design patterns, SQL Server 2012, Google's Protocol
Buffers, WPF, Silverlight 5, operating systems, and computer architecture.
He blogs at http://aspadvice.com/blogs/joydip and his website is www.
joydipkanjilal.com. You can follow him on Twitter at https://twitter.com/
joydipkanjilal and on Facebook at https://www.facebook.com/joydipkanjilal.
You can also find him on LinkedIn at http://in.linkedin.com/in/joydipkanjilal.
I would like to thank my family for providing me with the support to make
this book a success.
[ FM-6 ]
Anirudh Prabhu is a software engineer (Web) with more than 5 years of industry experience.
He specializes in technologies such as HTML5, CSS3, PHP, jQuery, Twitter Bootstrap, and SASS.
He also has knowledge of CoffeeScript and AngularJS. In addition to web development, he has
been involved in building training materials and writing tutorials for twenty19 (http://www.
twenty19.com/) for the technologies mentioned previously.
Besides Packt Publishing, he has been associated with Apress and Manning Publications as a
technical reviewer for several of their titles.
Taroon Tyagi is a dreamer, designer, and a solution architect for mobile platforms and
the Web. He is a rationalistic optimist, with lust for food, technology, and knowledge. He
has more than 5 years of professional and industrial experience in web, UX, UI design, and
frontend development. He currently works as the Head of Design and Interaction at Fizzy
Software Pvt. Ltd, based out of Gurgaon, India.
When online, he is constantly involved with web communities experimenting with new
technologies and looking for inspiration. When offline, he enjoys music, books, wire-framing,
and digging philosophy.
He worked as a technical reviewer for a few books published by Packt Publishing.
[ FM-7 ]
www.PacktPub.com
Support files, eBooks, discount offers, and more
For support files and downloads related to your book, please visit www.PacktPub.com.
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
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book
library. Here, you can search, access, and read 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 a 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 9 entirely free books. Simply use your login credentials for immediate access.
[ FM-8 ]
Table of Contents
Preface 1
Chapter 1: Responsive Web Design 7
Responsive web design in a nutshell 8
Viewport meta tag 9
A word on screen size and viewport 11
Media queries 11
A look into responsive frameworks 12
The Responsive.gs framework 14
A word on CSS box model 14
CSS3 box sizing 15
The Bootstrap framework 17
The Foundation framework 17
A brief introduction to CSS preprocessors 18
Responsive web design inspiration sources 21
Summary 21
Chapter 2: Web Development Tools 23
Choosing a code editor 23
Time for action – installing Sublime Text Package Control 24
Time for action – installing XAMPP 26
Choosing a CSS preprocessor compiler 32
Browser for development 32
Source maps 33
Mobile emulator 34
Managing project dependency with Bower 35
Time for action – installing Node.js 35
Time for action – installing Bower 39
Bower commands 39
Summary 40
