Responsive Website

Responsive Website or Responsive Web Design (RWD) is a website which is optimized for all media screens (mobile phone, tablet, laptop, PC, large screen). The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. Nowadays, web design and responsive design are the same thing. With the new CSS, there is no need to create a completely new website for mobile version.

Firstly, create your semantic website with HTML 5 (aside, header, footer, article) and add you core CSS. When you are done start implementing media queries to id or class.

Container/Wrapper

Create a container or wrapper (same thing) class where all if your content will be put together.

.container { //LARGE DESKTOP CSS - 1200px
	width: 1200px; //the only fixed width in your responsive website
	text-align: left; // aligns text on left
	margin: 0px auto; //centered
}

Media Queries

The most important of all. Media query can target screen, print, handheld, including max-width, min-width, device-width, orientation and color.
How to make our website mobile friendly? Go to your styles.css and after your container or at the bottom of your css add

@media only screen and (max-width : 1220px) { //SMALL DESKTOP CSS / LANDSCAPE TABLET CSS - 960px
	.container {
	width:960px;
	text-align:left;
	margin:0px auto; //centered
}

Let’s add for mobile

@media only screen and (max-width : 980px) { //MOBILE CSS Fluid width
.container {
	width:100%;
}

Here are some devices and their width:

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:480px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:960px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

This is a great article for detailed mobile screen devices.

As you can see you can use both min and max-width. It is pretty clear as if you set min-width: 480px the rules will be applied to a resolution minimum 480px width to the next resolution you use. You can also set @media (min-width:320px) and (max-width 480px), where it will target between 320px to 480px. Just play with it.

Clear margin and padding (Normalize)

Golden rule! All browsers by default have their custom CSS build-in. Clear all the margin and padding from the elements which you are going to use. Do not use asterix sign (*). It will cause to go through all the elements (250+) and slow down your page. Instead, just declare 5-15 elements by simply listing them separated by comma.

html, body, ul, li, p, h1, h2, h3, img{
margin: 0;
padding: 0;
}

Flexible Images

It is pretty easy to make an image flexible. Just add in your CSS to the img max-width: 100%. The maximum width of the image is set to 100% of the screen or browser width, so when that 100% becomes narrower, so does the image. The idea is not to declare custom height or width, you let the browser to extend to maximum the image. This is not supported in previous versions of IE8.

img { max-width: 100%; }

Use REM/EM

Set the main font-size and use REM/EM in your styles.css. It ensures that if you change your html, body{font-size: 14px} all of your custom css font-size will be scaled to your new size.
Difference between REM and EM?

  • EM is relative to the font-size of its direct or nearest parent
  • REM is only relative to the html, body font-size.

How is it calculated? If your body font-size: 14px and you set your h1 font-size: 3rem // 14×3 = 42px. You can also set small to 0.5em (50% – 7px).
Best practice – set body font size and parent font size and then use rem and em.

html, body{
font-size: 14px;
margin: 0;
}
...
.pricingtable{
font-size: 1.5rem // 14x1.5 = 21px
}

Use percentages not fixed width

Let’s say you have 3 horizontally divs (each 1/3). Just add in your CSS width: 30% (not 33%!, because you might need some gutter) and there you go. If you set custom width to 400px will apply everywhere unless you use media query and change it. Don’t give yourself a hard time.

Test your responsive website

The easiest method is to re-size your browser’s window. The safest method is to upload somewhere your website and access it directly with your phone. Here are some websites that you can check the mobile version of your website:

Optimize your website

As soon as you are finished with your responsive website, go check it for errors and try to optimize it as much as possible. Here are some websites which are a must to use before you finish officially your responsive website.

Common mistakes

  • No normalize in CSS (margin:0 padding:0)
  • No container
  • Using Fixed Width
  • Inline CSS in HTML (big mistake, not only for responsiveness)
  • Tables (please NO)

External libraries

There are some free libraries that you can use. I suggest Bootstrap or Skeleton. Boostrap is pretty powerful and it has a lot of features. Moreover, you can customize your package and download only what you need (e.g. grid system works perfect in this case).
If you build a website from scratch and bootstrap is not a option, you can download normalize.css, or just follow the rules I mentioned.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.