1 Who This Book Is For

This book is intended for those first venturing into responsive web design and are looking to add this design style to their skill set. Throughout the chapters of this book, there will be a focus on different aspects one should consider when going the responsive route for a website. In addition, it will also act as a guide showcasing how to create a responsive website from start to finish.

2 Preface
Mobile Internet browsing is no longer an afterthought in the majority of the web industry. Instead, it is now quickly becoming a mainstay that will quite shortly become the main method of accessing the Internet across the globe. So soon that the estimated year for when this mobile transition will take place is 2014, TWO YEARS AWAY! This rise has been slowly brewing since the release of the iPhone in 2007. This release can be described as the kindling of the true smartphone wars, which is the cause for the rush to mobile Internet browsing. Sadly however, two years of time left for an industry to transition to targeting a new platform is no where near suitable enough for those with no prior experience. What is there for a web professional to do? Well, there is of course a silver lining to this. Thanks to the chronic need for advancement this industry sees every second, there are easy ways to help even the beginner adjust. The simplest and most practical being responsive design. That is why in this book, were going to go on an easy to follow guided tour into responsive design. Also expect to see some cool examples of well done responsive websites at the end of each section!

3
CONTENTS Introduction 04

Getting Started 10 (Brief overview of Responsive Design, Tools to get started) Background 16 Navigation Typography Images Advice on targeting mobile devices for the rst time 22 24 26 29

4 Introduction
Responsive Web Design is another concept which can be generalized into one word to describe it, planning. The landscape of the Internet was not the same in previous years as it is now. Instead of having to worry about the three major Internet viewing devices(phones, tablets, and desktops), there was only the desktop to be concerned with. That has forever changed with the growing dominance of mobile web browsing continuously growing. Despite the shift of the main viewing audience, there are still three main platforms for browsing the Internet now. Wouldnt it be great if there was a way to target all three at the same time? You can! Responsive Web Design is the concept of a website which should adapt to fit any device that chooses to display it. Not only mobile devices, but also stationery computers and tablets. According to Ethan Marcotte, who wrote an interesting book Responsive Web Design after starting this whole concept, there are three parts to this kind of approach: a flexible grid, flexible images and media queries.

Grid system and background images

The grid system used in magazines, for example, need to be used in Responsive Web Design as well. It is impossible to design with this approach without having a grid system. In order for the layout to be flexible, the measurements must be in percent, not pixel. This means that a 50% width will always be half of the screen the website is shown on, regardless of its size. This is where flexible and responsive web design starts from. If you wish to use background images, it is OK, but you will have to properly select the right one. Photographs, illustrations or any other images that cant be tiled are not proper for fluid grid systems. Therefore do not use horizontal gradients either, because they do not scale well horizontally.

5
The texture borders will also suffer and look quite awful. If there is something you could use, then textures easy to tile are good, such as grunge, grain and so on.

Scale everything down

When you design with the responsive approach you have to scale everything down. This means the fixed-width approach you used until now has to disappear, exactly like the horizontal scroll. Instead try to insert every information section or web element in such a way that if you resize the browser width, you will still be able to see every piece of information. With a flexible wrapper set with a percent, instead of pixels, this is possible. Working in percent is the same as in pixels, there is not much of a difference and you dont need to learn other properties or CSS selectors. Working in percent is also simpler, because it is quite clear what width: 100% means. Regardless of the dimensions of the screen, the mentioned div will always be at a maximum width. If instead of percent you would have had pixels, then regardless of how the big the screen would be, the div will always be at 100 pixels. On an iPhone this is a lot. On my computer with a screen of 1600900 resolution this is nothing. You see the difference? It is just more logic to work this way.

6
Consider the media queries
I am sure you all know what these media queries mean. But to explain the concept of modules better, you can take a look at the following image.

Desktop
header content s i d e b a r 1 s i d e b a r 2

ipad
header content s i d e b a r 1

iphone
header content

sidebar 2

sidebar 1 sidebar 2

This means that you have to consider the way your layout is going to be, by thinking of the platform you design for. The main problem on the internet today is that designers and developers do not think of more than the queries for desktop and, maybe, for iPad. Nobody thinks of the iPhone screen when designing a webpage for desktop use. These modules need to be resized and moved when an iPhone browses through them, therefore the design has to be flexible. By using the media queries properly this is possible.The main idea behind this concept is that the modules change their place and size based on the screen size that the website is shown on.

7
With our newly found knowledge on Responsive Design, lets now get started in the process of creating one.

Builtwithmomentum

Raewynbrandon

Gonzoblog

10 Getting Started
Since we now have an understanding of what Responsive Web Design is, its as good as time as any to head straight into learning about how to create one. As with anything in life, it is important to start off with the basics and create a foundation, before going into pursuing more advanced things early on. Now without further ado, lets set that knowledge foundation for you.

Media Queries
It is impossible to get started with Responsive Web Design, without first talking about media queries. Media Queries are the CSS majic settings that tell the browsers what sections on your website will load when a certain screen size has been identified for the viewing device. There are three different media queries that make up the majority of the what Responsive Web Design is all about. These three different settings of course belong to the screen resolutions of phones, desktops, and tablets. To accommodate for these screen resolutions, there will be 4 screen width settings well be taking advantage of. These being 320px, 600px, 768px, and 1280px. A slightly less important screen width setting is 1824px, this is used for large screen sizes that exceed the standard desktop/laptop screen size and using CSS to create specifications for the each device width would look something like this: /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }

11
/* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ }

These device width parameters set above will allow for declaring parts of a websites sections visibility, this is also how your websites grid is set for different devices.

Grids
Once there is an understanding of what media queries are, and the width settings for targeted devices, the next thing should be a no brainier. Its time to set up the grid flexible enough to suit whatever device being viewed on. This is a pretty easy task, all the knowledge necessary for this isnt anything new mostly. The use of grid systems like the 960 grid system have already given the proper knowledge of creating flexible grids, just switch out pixels for percents. Okay, there is a little bit more to it than that. What really needs to be done is setting a max-width setting of your choice for the container of your website. From that point on, there is a formula to be used to find the percentage width that best matches the desired pixel width.

12
This formula, from Ethan Marcotte, is target context = result. So here the max-width setting is the target, the context is the desired screen size for a section in particular. Continue the process until every section of your site has an appropriate grid width in percentages, with respect to your max-width.

Frameworks
For most, jumping right out the gates using your own media queries to address your needs for a responsive website may be overwhelming. Another good rational is that some just dont want to bother with it. Whatever the cause of steering away from creating a responsive grid yourself, its nowhere near the end of the world. This is so because there are so many top quality pre-built frameworks available for plug and play usage. Lets take a look at a couple now.

Zurb Foundation
The presence of Zurbs Foundatoin project is felt so strong across the web today, that simply by mentioning responsive design your assumed to be also associating with this framework. With Foundation, Zurb has offered a way for even the novice web designer to be able to go in and create a website that responds well across the board. It also comes with multiple UI features, and a responsive slider in Orbit.

Less Framework 4
On the slimmer side as compared to Zurbs Foundation, Less Framework 4 is another good option to take a look at. Right out of the box, it comes with 4 layouts and 3 sets of typography presets. All of this is based off of a single grid, composed of68 px columns with 24 px gutters.

13
Sketchbooks
When dealing with something like Responsive Web Design, it is always a best practice to just fine tune everything on the fly. It isnt all that practical to go sketch by sketch for every responsive state, or to simply mark up a few different device widths and think the job is done. An exception to this is if you are new to the ways of responsive design. In that case a quality sketchbook will be of great use in these early stages.

App Sketchbooks Responsive Sketchbook

This sketchbook will provide you with everything necessary to grow into a greater knowledge of Responsive Web Design. Each page is broken down into a multi-targeted blueprint, including one being for full screen. There are 50 pages in total, and every page is based on the Responsive formula target context = result. In this chapter, we went over some good starting out tools to aid in easing the transition into starting out in Responsive Web Design. In the following chapters, we will discuss responsive design on specific areas.

14

Dentsunetwork

15

Upperdog

16 Background Images
The first thought many newcomers to Responsive Web Design have deals with background images. Since it would defeat the purpose of the ideal flexibility found in responsive design to use media queries to call different background images for specific screen sizes, the most practical and less time consuming way is to just work with one universal image. What is now filling the air of confusion is becoming curiosity, a curiosity leading to one question. How do you make background images responsive?

Background-Size
What CSS3 did was open the flood gates for new techniques that can be done that answered a lot of questions for web designers and opened the door for a whole world of fun possibilities. The fun possibility on the board today is the background-size property. Background-size gives now gives the option for setting a specific size for the background image being used. It can be set by using lengths and percentages, or by using two keywords contain and cover. Since the latter two keywords have slightly lesser descriptive definitions, that is where the discussion will begin.

App Sketchbooks Responsive Sketchbook

What is the first thought that pops up when the word contain is mentioned? If it is something similar to keeping the entirety of something within a container, then this is a great assumption. Contain refers to a background image being fully displayed within its parent container to the closest of its aspect ratios. Take a look at the example below,

17
body{ } What is done above is setting a background image, of lets say a width of 300px and height of 200px, of bg.jpg with the background-size property keyword contain. What will happen here is that the background will go according to the overall size of the device width, while maintaining its aspect ratio. In simpler terms, the bg.jpg image will keep the size proportions relating to 300px by 200px while stretching to respond to the viewing width of the current browser. background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-color: #000;

background-size:contain;

Cover
When background-size is set to cover, it is exactly what could be expected. At this setting, the background image will expand or crop itself in any way to completely cover the entire allotted space in the viewing browser. Here is another code example to take a look at: body{ } background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-color: #000;

background-size:cover;

18
All the code is the same as is it was for contain right? The only difference is the background-size setting is now set to cover. This setting will now allow the background image to ignore its aspect ratios, and cover the entire browser window to the best of its abilites. Whether this be by the image being cropped at a certain point, or stretched to a miserable blur.

Exact Measurements(Lengths and Percentages)

This setting for background-size does exactly what it implies it will do. With this setting, the background will be set at a specific size and will remain as such. It might seem odd to be discussing setting the background image to a specific size when aiming for adaptability and flexibility with responsive design, but dont overlook the percentages option for this setting. To use this setting, set the background-size to an ideal percentage. This is done by placing the width first, then height. If only one setting is specified, that will be recognized as the width and the height will be set to auto. Setting the height only simply requires placing auto first then the height setting next. Lets take a look at another code example: body{ } background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-color: #000; background-size:40% 60%;

19
What this example shows is the body background image, bg.jpg, will always have a approximation pixel size of 40% by 60% with respect to its viewing device. Pretty straightforward and to the point, no? Well now that the main headache of most is taken care of, lets move onto another one of slightly lesser found wonders. What is being refereed to here is navigation.

Forefathersgroup

20

Teehanlax

21

Weareduo

22 Navigation Menus
What is going to be covered here, may be the easiest and quickest part of the book to pick up on. There is nothing new to learn here. No formulas or new CSS3 properties, just using what has already been learned about adaptive and flexible grids will suffice here. However, for many people there is one problem newcomers have with navigation menus. How can I convert my navigation menu to one that is suitable for mobile screens? This is an easy and quick fix, and only takes a little bit of jQuery to do it.

Automatically Creating a Mobile Nav Menu From Main Nav Menu

This era of the web, and future ones to come, are being ruled by CMS solutions. Every site has one behind it making updates a quicker and easier process for those with or lacking the knowledge to alter the raw code. This is GREAT of course because this gives those without knowledge to update their own sites, without having to go back to the person they hired to create it. One problem when that comes to Responsive Web Design, the menu may become unsuitable for lower device screen widths. Of course in popular CMS options like WordPress the developer could just create a separate navigation menu just for the mobile experience, but there is one problem. The average person isnt going to have to want to have to manage two identical menus, the question will soon come about being able to pull entries from the main nav to the mobile version.

23
In anticipation of this, its in the best interest for both parties to take care of this right quick before hand. To do this, well be using the jQuery snippet below. var $old=$(#main-nav); $old.data(myhtml,$old.html()); var x = $old.data(myhtml); $(x).appendTo(#mobile-nav); Simply put, what the above snippet is doing is pulling all the html within the tag with the id of main-nav and copying it straight over to the tag with the id mobile-nav. That is it, and everyone is happy after some styling is done of course. Another way of doing this is by converting your navigation menu to a select menu, which is a very popular option. It will not be discussed here because while it may be a good solution, it is not practical for all situations. For instance, think of a navigation menu with many sub levels. Would that give off a good enough experience to match what is being done in the main navigation menu for bigger device screens? No. With the method shown here, it is easy to create a similar experience through CSS styling and jQuery animation.

24 Typography
Some people will argue that it is a better practice to use pixels for the CSS prooperty font-size, and others say that it is better to use ems. Well for responsive design, both parties are right. This is so because to have properly planned and flexible type setting, there needs to be a setting that is adaptable to device screen widths and has a fall back for when the browser doesnt support that font-size setting. Sounds fun, right?

REM Units
Earlier it was mentioned that the best practice for dealing with font-size in responsive web design is to use both ems and pixels as the declaration. Well, this is because both are fall back settings for browsers that dont support the use of rem unites. What are rem units? REM stands for root em and is a relative unit, meaning the actual font size of every rem declaration is based off the setting for the main parent element. A good place to set the parent size is in the <html> tag, but the <body> tag will work as well. To get a better understanding, take a look at the code example below. html { }

font-size: 62.5%;

body {

} /* Setting 2.2rem = 22px */ h1 { font-size: 3.2rem;

font-size: 2.2rem;

} /*Setting 3.2rem = 32px */

25
What has been done here is the parent tag of <html> has been set at a font-size, and all type within this parent element based will have an rem declaration based off of what is set for <html>. In the <html> tag CSS, the font-size has been set to 62.5%. This was done so that the rem settings can be written similar to what would be written if using pixel approximations.

Pixel Fallback
REM units are great, but like any other new feature of CSS3, they are not fully cross browser compatible.Luckily, there is one simple solution. This being using pixel approximation as a fallback option for non supported REM unit browsers. The code will be simply adding a pixel approximation before the REM unit, something like below. html { } } } h1 {

font-size: 62.5%

body {

font-size: 22px;

font-size: 2.2rem;

font-size: 32px;

font-size: 3.2rem;

The pixel fall back is put before the REM unit so that the REM unit loads first, and then the pixel declaration will load if REM units are not supported

26 Images
Probably the most concerning issue to those new to responsive design, once they start to understand the concept, is how images are handled here.It is an honest concern because many have used images to balance their layout, or used to strengthen their content. In responsive design, the images move and scale according to their size and position on the gird being used. Fortunately, there are many options for how to handle this.

Setting Max Width

The max-width CSS property is important to understand because it is the foundation for what can be done with images in Responsive Web Design. What this CSS setting does by being is say that an image can be no more wider than its containing element when set at 100%. A code example has been provided below. #right-hero{ } #right-hero img{ } max-width: 100%; height: auto; padding: 5px; width:30%; height: 200px; float: right; margin: 0 0 5% 5%;

27
The sample code above shows that no matter the actual size of the image, it cant be rendered as wider than what is considered to be 30% of the parent container of #right-hero. Taking note of the height setting for the image being auto, this is also important to make sure the image will maintain its aspect ratio. There is only one setting that will cause problems however, the padding. I guess a quick review of the CSS box model may be a little necessary here. Setting the padding or margin can achieve similar results, but there are major differences between the two. What margins do is add the desired space on the outside, while padding is added to the inside. So whatever padding is set, that will need to be added to the overall size. The same is not said for margins, they have no connection to size. The problem here becomes that when the image reaches the max width of its parent container, the padding setting will make it expand that. Luckily CSS3 has allowed a new property to fix all of this, box-sizing. There are two settings for box-sizing that should be made note of, border-box and padding-box. This two settings somewhat do the same thing. Border-box sets the image to a specific height and width by including the amount of and the border, and padding-box only takes into account the padding. Having that set should give all images a truly responsive experience. There are also other alternative, but maybe not as flexible, options to handle images as well. The option is available to have multiple versions available of the same image and then serve up the appropriate sized version depending on the user.

28
Cropping. The CSS overflow property (e.g. overflow: hidden) gives us the ability to crop images dynamically as the containers around them shift to fit new display environments. Hde images altogether. Media queries that serve up a stylesheet which sets the display: none property for images takes care of this function. Unstoppable Robot Ninja has a simple script that automatically resizes your images Zomigi allows you to selectively hide parts of your image dynamically. Well, everything necessary has been touched on for heading straight into Responsive Website Design. The only thing left to discuss is a little bit of advice that will strongly aid in any responsive site being made.

29 Advice
Despite now having a good grasp of what Responsive Web Design is, why its important to know, and how to implement it, there are still some things only experience can teach. Things like how to properly plan for the downsize in device width, what is important to keep and what needs to be left off, and what to do for the device widths not specifically mentioned.

Use Screen Dimensions as a Guide, Not a Sole Determining Factor

The common thought on responsive design is that you design your site differently based on the usual screen resolutions of the device power trio (phones, tablets, desktops/notebooks) and work from there. This may work to some degree, but it defeats the purpose of pursuing a website that is responsive. For such a case, the website would best be described as being adaptable for the screen resolutions mentioned. What should be done instead of this, is understanding the different resolutions and coming up with a framework, or editing a pre-built one, to the point where how it responds with different screen sizes matches up well with your websites design and layout.

Understanding how Much your Viewer can Take

Imagine a scenario where you have an adult and a young child, both are thirsty and are about to get a drink to quench said thirst. Does the adult and the child have the same size drink? Of course not, the child would be overwhelmed by such a size and might have a negative impact from taking in more than allotted for their size. When dealing with what content should stay, and which should go, with smaller screen resolutions its all in a matter of a few determining factors: what type of content does your site have, what are the reading habits of your visitors, what areas are needed to maintain the message, and what would go unnoticed missing.

30
Forming a Bond between Independence and Cohesiveness
The most beautiful thing about water is that every one of its molecules is completely independent of one another, but when combined with another water molecule, a cohesive bond is formed. This bond allowing for each one to stay independent, and able to detach from one another, and allowing for a greater amount of water to be formed without conflict. This may be a general practice for any website built, but its way more important when dealing with one that is responsive. The goal here is to find a way where all aspects are independent enough to stand alone on their designated resolutions without an issue, and be able to come together when that time is called like they belong with each other.

31

Zync

32

Techdept

33

Pelicanfly

34

Marijazaric

35

36creative

36

Unfold

37 Conclusion
By reaching the end of this book, what and how to implement Responsive Web Design should no longer be a question. From what has been read, a good understanding should have been achieved. However, like anything there is always more that can be learned. Below will be found a very brief roundup of quality articles, resources, and inspiration pieces.

Articles
Responsive Web Design: What Is It and How To Use It via Smashing Magazine Beginners Guide to Responsive Web Design via Think Vitamin Introduction to Responsive Web Design via 1stwebdesigner Responsive Web Design via A List Apart Responsive Web Design Techniques, Tools and Design Strategies Responsive Design with CSS3 Media Queries via Web Designer Wall Fluid Images via Unstoppable Robot Ninja Responsive Data Tables via CSS Tricks Experimenting With Responsive Design via Lee Munroe Context Aware Image Sizing via Filament Group

38
Resources
Responsive Wireframing Less Framework 4 Gridless Gridpack: The Responsive Grid Generator Mobile Boilerplate Skeleton Twitter Bootstarp Fittext Media Query Bookmarklet Responsive Testing Adapt.js

39
Inspiration

Briangardner

40

Notloremipsum

41

Fortysevenmedia

42

Brace Yourself

43

Osvaldas

44

Thegregthompson

45

Studiopress

46

Paperstreetinteractive

47

Food Sense

48

255creative

49 About The Author

Jamal is a 19 year old freelance web designer, web developer, writer, and blogger based in Atlanta, Ga. His work can be found at his online identity Five Alarm Interactive(FAI). He is a college student and philosophical poet by day, and passionate professional by night. You can keep up with him on Twitter @5alarmint.

50 Acknowledgments
Christian Vasile - Introduction
Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for writing about graphic and web design, social media, blogging and freelancing and features articles on 1stwebdesigner.com since early September 2011. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

Daniels Meks - Resources

Im a 17 year old teenager from Latvia making my allowance with blogging. Im interested in photography, skateboarding, snowboarding and poker. You can find me on Flickr, Facebook and Twitter.

51

Copyright 2012 1stwebdesigner.com All rights reserved . No part of this publication may be reproduced or redistributed in any form without the prior written permission of the publishers.