 |
| Image Courtesy from Internet |
Itself this picture tells about the idea of Responsive Design. RD is used too make your web page interactive and looks good and easy to use irrespective of devices.
At present and near future there is various number of devices with various resolutions will be invented, and its not impossible but tedious to write code for each and every resolution, to solve this problem there is phenomena came into light that is called Responsive Design.
RD is separated from programming part, its only deal with HTML and CSS.
Responsive Design Consists of :
- Flexible Layouts
- Media Queries
- Flexible Media
Flexible Layouts :
- This means a view with a dynamic grid which can easily re-size to any width.
- Flexible grids uses relative length unit, em or %. Relative length are used to add margin, padding, width properties.
- In Flexible Layouts don't use large fixed width element, it can cause the viewport scroll horizontally.
Flexible Layout can be divided few parts :
- ViewPort :
- ViewPort is the User's visible area on device.
- ViewPort used meta tag which instruct browser about width and scaling on device.
- Meta tag always included in <head> tag.
- For example :
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- width=device-width : This sets the width of page according to device resolution.
- initial-scale : Sets the initial zoom level on first time page loaded.
- If there is no meta tag then all the content will get shrink on different devices excluding browser.
- Content inside viewport shouldn't rely on any particular viewport width.
- Grid View is very helpful in displaying elements into different section or places. Usually responsive design has 12 columns and width will be 100% for each sections.
Media Query :
While making flexible layout once viewport separated into sections after calculation of % partitioned by coulmns of page which can be too little or too large to show on devices. This can be break the layout, in this situation Media Queries will assist.
This is introduced in CSS3.
We can write the different style css for different devices and browsers.
Media Queries can be used in many ways as
In HTML :
In CSS : To add an existing CSS file,
@media rule
To import new CSS :
@import rule, i.e. @import url(styles.css) all and (max-width: 1024px) {...}
- Its recommended to use @media rule to avoid additional HTTP requests.
- Always Design for Mobile First this will help page to get load faster.
- Internet Explorer 8 or older doesn't support media query. For this add media-queries.js Or respond.js to add media query support in IE.
Flexible Media :
Final important aspect of Responsive Design is Flexible Media, its required because Flexible layout always not work in case of Media's (Images and Videos). Media needs to be scaleable as viewport started to change the size.
It can be fixed by using "max-width" property with a value of 100%. This can make media scaleable according to viewport.
max-width: 100%;
height: auto;
}
But for many third party videos max-width property is not working because it can not scale larger then the original size. To resolve this problem "width" property used. If width is set to 100% it can scale the video larger then original size.
width: 100%;
height: auto;
}
Few Responsive Design Framework Free to Use:
1) W3.CSS
2) BootStrap
3) Skeleton
I will go for example of Responsive Design in next part.
Thank you for your post. This is excellent information. It is amazing and wonderful to visit your site.
ReplyDeletethe best web design services in kukatpally
best web development company hyd
best web designing company in kukatpally
top web designing companies in gachibowli
Thank you :)
ReplyDeleteThank you so much for sharing the best information. web designing in UK
ReplyDeleteThank you because you have been willing to share information with us. Digital Agency
ReplyDelete