You can call a website responsive if the design adopts itself according to the device it is viewed on.A website should re align based on the device viewport width.
I have been working on converting my ordinary website to a responsive one and I want to share the tips here.
Also Read :
Online Tool to create Responsive grid layouts
Optimize web page load time using Google page speed tool
Problem with images:
Images on the websites have defined width and height which fits on the proper aspect ratio. Consider in this way when a high resolution image is viewed on a mobile phone the parts outside the viewport is not visible and hence the picture will be meaningless.
Using CSS3 you can resize the image to fit the device width without any loss.
max-width:100%;
height: auto;
Max-width command specifies the maximum width the image can use which is 100% (device width) so the image will be scaled down to fit the screen.
We should use only Max-width:100% and not width :100% because if an image of width 100 px is viewed on smartphone it should not be scaled since its width falls within device boundaries.
See the working demo
