Introduction to Responsive Web Design: Part 1

Introduction to Responsive Web Design: Part 1

You have probably heard of responsive web design every where but you are unsure on how to make a web site responsive. In this multipart blog post I will help you understand and be able to start making responsive websites.

Understand of HTML/CSS


In this series of articles I am assuming you have a solid understand of HTML and css because responsive web design is tough to understand and even harder if you are learning HTML and css too. Once you are comfortable with HTML and css I would encourage you to dive into responsive web design because it is fun to make responsive websites.

What is Responsive Web Design


Responsive web design is when a site looks like it has been made specifically for whatever device you view in on. Anything from your phone to your internet connected TV. To tell if a site is responsive (like this one) find a desktop/laptop and open the browser window as big as it goes. Then scale the window down to as tiny of a width as you can. You will see the layout change as it need to adjust to the width. You will also see the text flow as you resize the window too. This is what responsive sits look like.

Responsive vs Fluid vs Adaptive

There is sometime confusion between these three and what people call responsive may not truly be responsive.

Fluid Design

This is when you change the width if the browser window and it seems to adjust to the width of the window but the layout doesn’t change it will stay the same. It is just be “Fluid” because the layout doesn’t change and it squashes everything together.

Adaptive Design

This is when when you scale the window up or down and you get new fixed layouts at certain points and not fluid. This is most often confused with responsive design because it appears to be changing and adjusting to the width if the window. However there has been a fixed width layout created for several different sizes. You will notice on these that the text doesn’t flow as the window size is changed.

Responsive Design

This takes both Fluid and Adaptive and uses both at the same time. They will have fluid layouts and will change at different size while happening at the same time.

Why Responsive Web Design Important


The biggest reason to make a responsive site is with all the different internet connected devices we have all of which are different sizes, it is currently the best way to have our sites look best on everything.

It is also important because now you don’t have to build a separate mobile m.site (or /moblie or whatever) and deal with all the headache of dealing with what happens if someone share a link from there phone and views it on there desktop. Will they see the mobile site or will it redirect them to desktop site. Is Google going to be able to tell they are the same and not two different sites.

How to use RWD


The first thing you need to so is add this meta tag <meta name="viewport" content="initial-scale=1.0, width=device-width" /> to your HTML head. This tells browsers to use the width of the device width (or browser window width on a desktop browser) for the website instead of shrinking down a “desktop” layout to your screen. For example on an iPhone if you put the viewport tag it will use 320px for its viewport width instead of shrinking a larger version of your site down to fit the screen width. You don’t want to put the viewport tag on a non responsive site or it will zoom in to the left top corner and be really bad for the people visiting your site because most likely they will only see your logo and part of your navigation.

Use relative units


When making responsive websites you needs to use relative unit. Units such as percents, em, and rem. There are still times when pixels are used but and majority of your units will be in percents and em.

I have two post that goes into much deeper details that I would suggest you read before reading part 2:

In part 2 of this series I will introduce Media queries, Mobile first, and Box sizing border box.

Leave Your Feedback

Name is required.
Email is required.
URL is required.
Message is required.