First Step towards making your site responsive

Being a user, have you ever thought about how a website is designed? How a single website attracts more users while others don’t? Obviously content is a considerable aspect but apart from content what matters is the interactivity it provides the support and functions it contains. And the most importantly the responsiveness of that site.

Okay, so for beginners or those web developers who are just freshers and are still learning, Responsive site mean how the site looks on different platforms like a desktop, a laptop, a tablet, or any mobo platform. As you very well know being a user you want and most importantly need to access a site on different devices and being a web designer it’s your responsibility to make that site fit for the utilization on every platform because it directly affects the traffic you site is going to experience.

And if you have any prior knowledge regarding this a very obvious question you must be having is why responsive? I mean you can also have other ways to make your site fit for any other device then why responsive? Okay, let’s do the comparison.

Responsive Website Design(RWD): Basically in this, you write multiple stylesheets for a single HTML file according to the device you think the user is going to use to access your site, but ultimately you have only one URL for your site. This makes your site more user friendly.

Adaptive Designs(Dynamic Serving): In this, the server sends you a different HTML and CSS document according to the device you are trying to access the site but still you only have a single URL for your site which is a little bit problematic because if due to any reason server detects the wrong device the user will be in trouble and this kind of sites are more redirecting which means takes more time to load and you have to update a lot of code while making changes in the site.

Separate Mobile Sites(.m type): In these type of sites you have a separate HTML and CSS document for the mobo platform and A single document for every other device used for accessing the site but you will have different URLs every time you try to access the site which makes it tough to share your site and hence reducing the traffic.

Now, let me try to start how to make a site responsive because I can’t encompass a lot here as this article is for beginners and those who are interested to learn. So the basic concept is how the content adjusts itself according to the resizing of the screen because it’s very annoying to have scrollbars now and again. So here comes the terms absolute and fluid(relative) measurements. It’s always a very good idea to do not hardcode your site and give users more power and that’s why using fluid measurements while writing your CSS code has always proven a good idea.

Absolute measurements:

  • pixels(px): one device pixel or dot of display. 1px=1/96th of an inch.
  • mm, cm, in basic units of length.
  • point(pt): one point equal to 1/72th of an inch.
  • pica(pc): one pica is equal to 12 points.

 Relative measurements :

  • %: always relative to another value, for example, a length.
  • em: relative to the font size of a parent element.
  • rem: relative to root size to the root element.
  • vw: viewport’s width, 1/100th of the width of the viewport.
  • vh: viewport’s height, 1/100th of the height of the viewport.

I recommend using ems because rems are not supported by many browsers now or vw and vh are also very good options when it comes to responsive sites. So here I am concluding this article as it’s a vast topic and I can’t encompass it in a single article.

Hope you guys find this helpful. Happy reading!

Categories: News

Tagged as: