What is Responsive Web Site and its advantages

10 years ago users used to surf the web through one type of device: the desktop/laptop computer. Resolutions were optimum at1024x768, developers needed to test their pages against this resolution and everybody was happy.

Nowadays we have numerous types of devices to access the internet. From the smallest cell phones, to the medium sized tablets (or phablets), to larger ones (ipads), to desktops with large resolutions (1440 x900 and up), and finally the huge TV screens.

Designing different versions of your website to cater to this wide spectrum of devices is a waste of time and effort. The solution that came up was "Responsive web design". It's basically the use of advanced techniques of CSS and javascript to make the website "adapt" to different resolutions.

So you basically design a responsive website, and forget about the type of device/screen that will be showing your pages. All your components, widgets, nav bars ...etc will be visible and accessible to the user regardless of his/her device or resolution. Example: a nav bar will appear horizontal in wide screens, and will transform to a button that when clicked, displays the navigation in a vertical dropdown list on smaller screens.

One well known framework that uses this technology is Twitter Bootstrap.

Now a days responsive web templates have an important role in web designing because it does not matter which device you are using to view the website it will look clear and according to that screen size. It will automatically adjust its elements according to that device size for example mobile, tablets, laptop and pc.

In a nut-shell: designing your website according to screen size (device). Meaning that the design will adopt to the screen size and show differently to offer best user experience. Most likely, it is used by CSS media queries, but sometimes JavaScript is involved. Imagine a website browsed from the desktop. What would you feel if you get the same exact design on a cellphone? Now imagine when you brows it from a cellphone or tablet and it shows completely different. For example, the horizontal menu is turned to a hamburger icon menu and images width are in percentage (100%) instead of fixed. Linked In is a good example and fnanen.net is a site I worked on. 

The easiest and most known standard way is to involve Bootstrap framework. If you need further information, I will be glad to help.

Nowadays technology is moving too fast. many Gadgets are being released like mobile phones and tablet. Responsive web design, responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device. For example, on a phone, users would see content shown in a single column view; a tablet might show the same content in two columns. There is a multitude of different screen sizes across phones, “phablets”, tablets, desktops, game consoles, TVs, even wearables. Screen sizes will always be changing, so it’s important that your site can adapt to any screen size, today or in the future.