Why responsive websites have more impact than regular websites ?

Why responsive websites have more impact than regular websites ?

These days the most hot topic discussed between web designers and developers is “Responsive Websites” implementation. It was not so common an year ago but these days taking on a new project will definitely involve responsive implementation.

So what basically is responsive website ?

The answer is simple, its making your website responsive to your screen size. Earlier websites used to be of a fixed width and thus they were not looking good in mobile devices like iPhones, HTC and Nokia and then they introduced ipads and tablets. So the need arises that we must have a way to scale our websites based on the screen size as previously there were only a few screen sizes and had less difference in their width so no body cared about them.

Then came the life saver…. CSS3

Yes indeed CSS3 saved many of us from spending much more time in building websites having size per their devices. Before CSS3 if we were to make a website responsive to its device it was either to write a new template code for it, or making a redirect to another folder or domain where we built its specific size website written for it. It was too hectic, was difficult to manage and was time and cost consuming.

CSS3 introduces media queries whose basic syntax is:

     @media screen { .................. }

So now its easier for us to make responsive websites that looks beautiful on every screen and it is more of dealing with a single CSS file to make everything happen. It doesn’t need any specific server as its totally clean and simple CSS which will run on any server and any device. The limitation till today in using CSS3 is that its not supported by earlier versions of IE that is IE8 and older browsers. I think we will soon get rid of them when we stop using pirated windows. Being a front end developer i pray daily that somehow it just vanishes as it cost my many of my precious sleeping hours.

Without getting into more details let me show you examples of how it can be used with a few screen size declarations

@media all and (min-width: 900px) {
  body {
    font-size: 18px;
  }
}
@media screen and (min-width: 780px) and (max-width: 899px) {
  body {
    font-size: 16px;
  }
}
@media screen and (min-width: 600px) and (max-width: 779px) {
  body {
    font-size: 14px;
  }
}
@media screen and (min-width: 480px) and (max-width: 599px) {
  body {
    font-size: 12px;
  }
}

In this example i made the default size of the font to be 18px for all media types having minimum of 900px width to be 18px. I didnt mentioned any max size limit so it will apply on all screen sizes having more than 900px width. I didnt mentioned media type as well so it wont matter if it is print or screen it will have 18px font size. In others i mentioned max width as well as min width and i kept the media to be screen as well. So to limit it for a fixed size screens. By the way dont forget to declare a default size as well. that way if media is not active that is if CSS3 is not supported visitors can easily see a standard version of the website.

I hope this basic tutorial on responsive websites will be of any help to you. If you need any help please feel free to write me a comment below and i will try to be responsive as well 😉

.