What is a responsive site?


Do you know what is a responsive site means?
Does the website images scales respectfully? Which means according to device, if it is a phone, it should fit in the phone screen, if it is a tablet device it should fit to the tablet screen. If is not responsive design graphic images, photos if they are larger size than a device, it will not fit the screen, you will need to zoom out to see whole image.
So if your website is responsive then your web pages should responds to or resizes itself depending on the type of device it is being seen through. That could be an oversized desktop computer monitor (PC or MAC), a 11-inch laptop, a 10-inch tablet, a 7-inch tablet, an iPad or iPhone or any other 4-inch smartphones screen.

Why choose a responsive design?
The purpose of a responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly. For instance if view your site in a small tablet device or a smart phone the site will scale according to device sizes. Therefore you will be able to read the text and see the images without pinching, zooming the pages.

Can a responsive website site look identical in every browsers and devices?
The answer is it depends.
If your site based on one column and mostly text then your website will look same pretty much in every browser and devices. However if your site has 2 columns:
If you view it on a tablet device, the tablet might automatically adjust to display just two columns. That way, the content is readable and easy to navigate. The navigation menu might look different, such us on a small ipad, he navigation menu might be scrolling style rather than horizontal one long line. If you are viewing on a smart phone including an iPhone , the content might appear as a single column or even perhaps stacked vertical. Basically a sidebar or second or third column would display after the first column content.
Another issue having too many photos on the site. If you have a website which has a lot of photos, you choose thumbnail based on photo galleries rather than large slideshow style in order to reduce the download speed. The more large photos means, on the phones it will download slowly. same thing applies large background photos on a site as well as large banners. Mobile version of the site might eliminate using large banner to speed up page loading.

More technical explanation:
A responsive site is build with multiple style sheets for the same web pages and images will scale respectfully according to device with each of the style sheets.
Responsive websites use fluid grids. All page elements are sized by proportion, rather than pixels. Good responsive theme sites use percentage for even text size, so instead of defining the page font size as 14px, it will define like this:
font-size: 100%;
Another example if you have two columns on your website, it wouldn’t use fixed size ( such as 980px width ) in other words how wide columns’ size should be, but rather how wide they should be in relation to the other columns. Main Column would take up 70% of the page, and sidebar column would take up to 30% only. That is commonly used in WordPress Responsive theme sites. Images on your site images also resized relatively. If you are viewing your site in an iPhone, the image scales smaller and fit in your phone screen correctly.

Here is as an example responsive site nur web.biz
On an Iphone it looks like this: ( notice that navigation menu looks different )
As you notice that banner looks different as well as sidebar column display underneath of the content ( the main column ).
The website txt adjust the size according to device, so you do not need to zoom in to read the text.
On an iMac computer looks like this: ( it uses horizontal navigation menu )

The site banner shows as full size and it uses full horizontal drop down menu system.

How do you know if your website responsive or not?

Then you should check those facts:

  • Does your website text adjust according to devices (mobile phones and tablets)?
  • Does your main navigation menu work properly in mobile phones and tablets? If you have to zoom to read the menu your site is not responsive.
  • Does your website images resizes according to devices? If you are zooming out or in in order to see on the mobile or tablets, then your site is not responsive.
  • Does your website links are too small to click on? If they are  hard to select with a finger on a tiny spot on a screen it means your site is not “touch”  enable ( for tablets and mobile phones) .

Please pay attention to usage  of graphics, ads and download speed. Always suggested that on mobile devices; you should  display fewer graphics than for desktop views so that your website will not take forever to load on a smartphone.

Please share it
Email this to someoneShare on Google+Pin on PinterestTweet about this on TwitterShare on LinkedInShare on Facebook