Tutorials HTML/CSS Responsive Web Design

Responsive Web Design

Today's tutorial will be on making your website work on all resolutions while still having control over your layout. A lot of users are using their phones to surf the web.

What is responsive web design?

Responsive websites are websites with different CSS rules for different situations. You can change the width, height, margin, or any other CSS property.

Responsive vs Mobile

Mobile websites are completely remade with different content.

Responsive Pros

  • Can support a lot of resolutions and different layouts
  • Easy to update as a single CSS file

Responsive Cons

  • All content must exist, even if you hide it
  • DOM structure remains the same
  • Only limited to CSS changes

Mobile Pros

  • DOM structure can be changed
  • Files can be different for better optimization for mobile devices

Mobile Cons

  • Hassle to maintain with multiple versions
  • New devices coming out forcing you to constantly update your device database
  • Hard to distinguish what is actually "mobile" with the influx of tablets

Making a responsive website

A responsive CSS file uses media queries for different situations. You can use min-width and max-width to tell the browser when to follow certain rules. I recommend you make your website big and then work your way down. CSS rules are set based on the last reference, so you can overwrite them at certain points.

/********************* Default Settings *********************/

#wrapper {
  width:1140px;
  margin: 0 auto;
}

/********************* Media Settings *********************/

/* 1024 - 1279 Settings */

@media screen and (max-width: 1279px) {
  #wrapper {
    width:960px;
  }
} /* End max 1279 */

/* 768 - 1023 Settings */

@media screen and (max-width: 1023px) {
  #wrapper {
    width:720px;
  }
} /* End max 1023 */

/* 480 - 767 Settings */

@media handheld, screen and (max-width: 767px) {
  #wrapper {
    width:420px;
  }
} /* End max 767 */

/* Less than 479 Settings */

@media handheld, screen and (max-width: 479px) {
  #wrapper {
    width:300px;
  }
} /* End max 479 */

The viewport

Mobile and responsive websites are new to the website scene. Most websites are still desktop resolutions so mobile browsers adjust their screen to about 300 DPI, resulting in about 900 pixels width of content on a three inch screen.

Put this meta tag between the head tag in your html page to make mobile browsers report the correct number of pixels they have.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Posted by on . Category: HTML/CSS


Comments

No comments posted yet

You need to register or login to post new comments.