Menu

Austin Web Design Blog

One Website for All!

How to have one website that resizes for mobile devices with Responsive Design

More and more users are surfing the web with smart phones and other mobile devices. As such, web designers are often forced to create (and maintain) two separate sites for one business or service. This can lead to more work, and inconsistent unity of content between the two sites if updates are missed.

While this is a burden for web designers, the reasons are justified. Your professional website must meet the demands and limitations of users with varying options of surfing the web. Users on smart devices may have slower connectivity (some networks are as slow as a modem from the 90's), users may have varying sized small screens (the iPhone 4 is only 3.8 in.), they will not have keyboards, or a mouse, Additionally Apple devices do not support Flash. With these limitations, having a mobile friendly site is necessary. But is there a way to create one single site to meet the demands of all screens and connectivity speed?  Yes there is! Responsive Design has come to the rescue.

What is responsive design? Well first take a look at this website. If on a large screen resize the browser and check out what happens to the page www.wildflowersightings.org. Notice how the layout moves to accommodate the smaller window? It fits both a large screen and a small screen. Always adjusting in an aesthetically pleasing way to fit all sizes. This is a responsive design website. If on a smart phone you can see how it is formatted to fit your screen. This site is not a separate mobile version. But is rather "One site for all"!

While making a responsive design website might seem intimidating for first timers it is actually easier to learn than one may think.  Below are some useful responsive design tips for newbies and intermediate website designers.

Responsive Websight Design - The Jist

First lets make a simple RD websight in 3 simple steps. This brief tutorial assumes you have basic knowledge in website design and CSS. For CSS tips click here.

1). META TAG

Smart phones and devices scale html files to fit a screen.  This usually causes a scaled page with tiny unreadable text. If you have visited a non responsive website you know what we are referring too.  The first way to over come this problem is to insert a special META TAG into the header of your HTML files.

Here we have the meta tage with the VIEWPORT TAG. This tag informs the browser disable the scale and instead uses the device width as the viewport width.


Please note that IE 8 and below do not support this (or many many other things for that matter; but that's another discussion). You will need to link to a js  IE


2. The HTML

Design the page using div tags and define the widths and heights. Perhaps something like this  page with a header, container, side content, and a footer.

[ HEADER ]

CONTENT      |     SIDECONTENT



FOOTER

3.  Media Queries

Herein lies the secret and nugget for effective responsive design, Think of media queries as a way of telling a browser exactly how to display a web page for the viewport width that you specified in the meta tag. They are used to apply CSS rules for varying layouts using the viewport widths.

Below is an example of Media Query code .

Note that we set the container width to 999 pixels. Next simply use percentages for the divs instead of pixels. This lets the content move and scale to any size.

/* less than 999px rules are only in effect if the viewport width is less than 1000 pixels in width */

@media screen and (max-width:999px){

  #pagewrap {
     width : 90%;
  }
  #content {
     width: 70%;
  }
  #sidecontent{
     width: 25%;
  }
}

Ok that takes care of the tablets. Now lets tell the site what to do with smaller screens! In this code we will set the width to equal or less than 700 pixels. We will also change the container attributes to auto width and disable the float attribute. This will cause the divs to display in full viewport width. In this case 700PX or less which is Perfect for the larger smart phones.

/* less than 700px  */

@media screen and (max-width:700px){

  #content { 
     width: auto;
     float: none;
  }
  #sidecontent {
     width: auto;
     float: none;
  }
}

Finally lets address those older iPhones with screens of 480PC (or less) First we will set the heath of the header div to auto, next we will hide the side content so that we can fit everything on the small screen.

/* less than 481px */

@media screen and (max-width:480px) {
  #header {
     height: auto;
  }
  #sidecontent {
     display: none;
  }
}

These are three short samples of media queries for effective responsive design websites. Of course you can write as many as your site may need.

We hope this short article on simple yet effective responsive design helps to get the ball rolling in your website coding.

Thanks to www.wildflowersightings.org

Tue, 05 Mar 2013 21:10 Posted in

Tags , , , , , , , , ,

Comment One Website for All!