Principles Which Form The Foundation of Responsive Web Design
In present day scenario you need to have a site which works equally well on mobile phones as it does on desktop or laptop computers. This is where responsive web development comes into picture due to the many features it provides.
So what does this responsive website designing involve? Let us delve deeper and look at what responsive design is and how it works.
What is Responsive Designing and how it Works?
In very simple terms it is a designing technique which makes it possible to use the same code across different screen resolutions. Here, the elements on the screen automatically resize according to the resolution of the device on which web page is opened.
What is the need for responsive web design?
Nowadays there are several types of web capable devices with myriad form factors. As such it is nearly impossible for any web development company to target all the individual screen resolutions. In this situation responsive layout allows your web site to respond to the environment in which it is opened and adapt accordingly.
Principles behind Responsive Design
Basically there are 3 principles which together form the core of responsive designing, these are:
• Fluid Grids
• Fluid Images
• Media Queries
Let us now look at these three principles in detail.
Normally, sites are defined with the help of pixels but in case of responsive design, relative units are utilized such as percentages. Such percentage values are then utilized within CSS by using them for values used in margins, width as well as padding properties.
The basic idea here is that fluid images need to shrink to adjust within restrictions of fluid grid. Normally, this is accomplished by use of CSS coding.
Code such as the following, img (max-width: 100%; ) can be used to indicate to browser that all the images can be large up to pixel value they have. This makes sure that the images do not get pixilated or stretched.
Additionally, in case image is located within a parent container which is smaller in comparison to pixel value of the image then such image needs to shrink accordingly. In terms of height of such images, they are calculated automatically and stay the same as per actual aspect ratio.
Normally, in case of mobile phones, the website is viewed in portrait mode where screen is comparatively taller to what its width is.
In this scenario web sites have vertical scrolling rather than horizontal. But in case there is wide layout along with several columns then this approach cannot yield the desired results.
In such situation media queries become important which make use of CSS technology present in browsers. These media queries permit CSS features to be used only if certain conditions are fulfilled.
As for example, a media query can be created that allows use of CSS in case a particular width is reached in browser window.
Thus media queries can be utilized to detect width of the website and use CSS which can correctly re-arrange content present on the site.
A Final Note
Thus to conclude it can be said that responsive site design is the most suitable way of developing mobile compatibility and achieving better visibility for your web site in front of growing mobile user base.