Responsive Web Design

Introduction to Responsive Web Design Tutorial

A responsive web design is based on conditional CSS.

With conditional CSS, different styles kick in, when the browser is made a certain size.
e.g. when the window is a certain width, change the layout from 3 columns to 2

In addition to your normal stylesheet, create a stylesheet called responsive.css

Attach it to your html like this:

<link rel=”stylesheet” href=”css/responsive.css” media=”screen and (max-width: 900px)”>

To create areas and divs that change when the website width is less than 500px:
1. Name a class for the divs in your html that you want to be responsive. The class name should end with “mobile-collapse”. In this instance, you should name the columns in this class.

2. Add this code to the responsive.css stylesheet:
Responsive web design

Now when the website is reduced to a size less then 500px in width, all the elements within the div classes ending with “mobile-collapse” should become styled with auto width, no float and a right margin of 0.

The “@media screen” tells the browser that this is a Media Query and that it should be called when the browser is a certain width.

Hopefully this explains the concept behind responsive design.  Different styles will be called/initiated when the browser window is a certain size.

In order to hide certain elements of the webpage when it reaches 500px or less, add the “display.none” style to the responsive css stylesheet

Responsive Web Design

and name the div classes, in the html, so they end with hide-mobile

ScreenShot from http://www.youtube.com/watch?v=F_fhyXUH_To
ScreenShot from http://www.youtube.com/watch?v=F_fhyXUH_To


For the Nav Bar

Add the following code in the responsive CSS stylesheet, it will change the width and font-size of the nav bar when the screen width is 620px and 500px:

NavigationCss

 

 

I used the custom css option to make my free wordpress theme responsive on this site for Online Personal Training.
Try resizing that bad boy

 

Resources
http://www.w3schools.com/css/css_mediatypes.asp

http://www.youtube.com/watch?v=BIz02qY5BRA

http://learnwebcode.com/tutorial-files/responsive/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s