Instant Responsive Web Design

Cory Simmons

• Publisher: Packt Publishing
• Year: 2013
• eBook ISBN: 9781849699259
• Edition: 1
• Topic: Design
• Subtopic: Web Programming

In Detail

Making your sites responsive is an easy enough skill to learn, and really pays dividends when you're selling your product to potential clients or just trying to impress your boss for that promotion you want, but understanding all your options will help you develop a workflow that really works for you.

Instant Responsive Web Design makes learning mobile-friendly web design a piece of cake with site-builds imploring various approaches using a very easy-to-follow format where you'll actually be creating sites using each approach. Expand your web repertoire in a few, easy hours.

Instant Responsive Web Design takes the guesswork out of responsive web design, by teaching readers the most relevant approaches and leaves it up to them to develop a workflow that works best for their style of coding.

We'll help you to develop several websites from scratch using different philosophies such as the Goldilocks Approach, make your websites Fluid, understand desktop and mobile-first approaches, and master some of the tricky stuff such as making your images and video responsive.

In this step-by-step guide, you'll learn everything you could ever need to become an above-average responsive web designer in a matter of hours.

Approach

Get to grips with a new technology, understand what it is and what it can do for you, and then get to work with the most important features and tasks. A step-by-step tutorial approach which will teach the readers what responsive web design is and how it is used in designing a responsive web page.

Who this book is for

If you are a web-designer looking to expand your skill set by learning the quickly growing industry standard of responsive web design, this book is ideal for you. Knowledge of CSS is assumed.

Instant Responsive Web Design

---

Instant Responsive Web Design

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: 1230913

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84969-925-9

www.packtpub.com

Credits

Author

Cory Simmons

Reviewers

Dario Calonaci

Matt Rheault

Acquisition Editor

Kevin M. Colaco

Commissioning Editor

Priyanka Shah

Technical Editor

Vivek Pillai

Project Coordinator

Michelle Quadros

Proofreader

Hardip Sidhu

Production Coordinator

Kyle Albuquerque

Cover Work

Kyle Albuquerque

Cover Image

Ronak Dhruv

About the Author

Cory Simmons is a web designer/developer with over 17 years of experience. He currently works at Pressed Web, where he has maintained a tutorial blog for years covering everything from basic HTML/CSS to Django and Meteor. He has worked for companies such as Scholastic and World Vision Charities. Cory has written for CSS Tricks and is an author at TutsPlus. He created and maintains the Jeet Framework.

About the Reviewers

Dario Calonaci is a Graphic Designer who has specialized in Typography and Logo Design.

He has worked for the United Nations conference Rio+20, selected for Obama for America and Node.js. His name and work appears on a book presentation inside the Senate's Library in Rome. He has been teaching Web Design since he was 23 years old. He is also a member of FacultyRow, a NY based association as a valuable Teacher and Academic figure.

He has been invited to talk at two seminars and run one workshop; his works have also been published internationally. He has also studied in a couple of thesis.

You may know more about him in his website http://dariocalonaci.com.

Matt Rheault likes to design and create things on the web. He enjoys his morning cup of coffee and the satisfaction of getting the job done. He specializes in full website, e-commerce, blog, and responsive web app development. His roots are in graphic and UI design, however he has extensive back and front-end development experience to ensure that he can create a full-fledged product from start to finish. When he is not at his desk working, you can usually find him cooking up some bacon or hanging out with his vegetarian girlfriend—oh the irony!

Check out his personal website at mattrheault.com, and his company website at fueled4.com.

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.

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.

Chapter 1. Instant Responsive Web Design

Welcome to Instant Responsive Web Design. This book was written to provide you with all the information you need to start building responsive, mobile-friendly websites today.

You will learn various strategies for making your websites behave appropriately on every device with a minimal amount of additional work.

This book contains the following sections:

So, what is Responsive Web Design (RWD)? helps you discover why RWD is such an important tool in your web design arsenal.

Getting started will help you acquire the tools necessary to start designing your first responsive website.

Quick start – making your first responsive web page will help you to make a responsive web page using CSS media queries.

Top 5 Features you need to know about will help you to build responsive websites on your own. The features we'll cover are the power of CSS Media Queries, different strategies to make responsive websites, desktop-first versus mobile-first, gotchas and best practices, and putting it all together.

People and places you should get to know explains that RWD is more of a technique than a community-driven project, but even so there are some important contributors you should follow for fresh, creative solutions to problems with RWD. In this section I'll introduce you to them and let you know about some great places you can go to learn more about RWD and get help in case you get lost.

So, what is Responsive web design (RWD)?

Responsive web design (RWD) is the practice of making a website's layout change depending on what device and/or resolution the website is being viewed on. For instance, you may have a navigation bar at the top of your website with links laid out in a horizontal manner when viewed on desktop monitors, but when viewed on a small cell phone screen, wouldn't it be better if those links stacked on top of each other or collapsed into a menu?

This kind of thinking is what separates good web designers from great web designers, and the best part is, it's incredibly easy to up your game with a little bit of knowledge. When you are competing at job interviews or for a prospective client, who is more likely to get the job? The person who knows how to make websites, or the person who knows how to make websites that act great on any device? It's always a huge advantage to be the person who can tap into the ever growing landscape of non-desktop users. Clients love that.

So how does it work? With the help of something called CSS Media Queries.

CSS Media Queries are little wrappers in CSS. They appear in three forms. One form appears in your <head> tags...

Table of contents

• Instant Responsive Web Design