Responsive Web Design
Responsive web design is the practice of development or building a website/web application suitable to work on every device and screen size. It does not care about mobile or desktop, screen size is large or small. This article describes about the overview of responsive web design;how it works; importance of responsive web design. Summary of the article:
- What is Responsive Web Design?
- History of Responsive Web Design
- How we can Make a Site Responsive?
- How does Responsive Web Design Work?
- Why we should use Responsive Web Design?
What is Responsive Web Design?
Responsive Web Design (RWD) is the web development technique or approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation of the device being used to view it. When the user switches from their desktop computer to smart phone, the website should automatically switch to accommodate for screen size, resolution, image. In other words we can say, the website should have the mechanism to automatically respond to the user’s preference. This type of design eliminates the need for a different design and development each device. Its layout will be changed according to viewers devices. Sample view for smart phone and tab is given bellow:
Responsive Web Design (RWD) is the web development technique or approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation of the device being used to view it. When the user switches from their desktop computer to smart phone, the website should automatically switch to accommodate for screen size, resolution, image. In other words we can say, the website should have the mechanism to automatically respond to the user’s preference. This type of design eliminates the need for a different design and development each device. Its layout will be changed according to viewers devices. Sample view for smart phone and tab is given bellow:
History of Responsive Web Design
At first Cameron Adams write the adjustment technique of layout based on device, in 2004. In 2010 Ethan Marcotte mention the term “Responsive Web Design” in an article (A List Apart). In 2011 he writes a book “Responsive Web Design”, where he describes the details theory. That’s why we can call Ethan Marcotte as the creator of Responsive Web Design.
At first Cameron Adams write the adjustment technique of layout based on device, in 2004. In 2010 Ethan Marcotte mention the term “Responsive Web Design” in an article (A List Apart). In 2011 he writes a book “Responsive Web Design”, where he describes the details theory. That’s why we can call Ethan Marcotte as the creator of Responsive Web Design.
How we can Make a Site Responsive?
We can make a web site responsive with the combination of flexible grids and layouts, images and an intelligent use of CSS. We can also design a responsive web site by using framework such: Bootstrap.
We can make a web site responsive with the combination of flexible grids and layouts, images and an intelligent use of CSS. We can also design a responsive web site by using framework such: Bootstrap.
How does Responsive Web Design Work?
Responsive web sites use fluid grids. All page elements of the site are sized by proportion or percentage, rather than pixels.
So if a page that has three columns, we can’t say exactly how wide each column should be.
But we can say how wide they should be in relation to the other columns. Column 1 should take up 50%, column 2 should take up 30%, and column 3 should take up 20% of the page.
Images are also resized comparatively and an image can stay within its column or relative design element.
Responsive web sites use fluid grids. All page elements of the site are sized by proportion or percentage, rather than pixels.
So if a page that has three columns, we can’t say exactly how wide each column should be.
But we can say how wide they should be in relation to the other columns. Column 1 should take up 50%, column 2 should take up 30%, and column 3 should take up 20% of the page.
Images are also resized comparatively and an image can stay within its column or relative design element.
Why we should use Responsive Web Design?
There are several advantages of the responsive Web design. They are as follows:
There are several advantages of the responsive Web design. They are as follows:
- It offers better user experience.
- It reduces the production cost.
- It is easier to manage.
- It offers one web site multiple devices.
- It allows us to keep track of who visits the site.
- It is recommended by Google.
- It is user-friendly for internet marketing and SEO.
- It reduces the page load time.
- It reduces the bounce rate.
In future responsive design will be more popular. It is more effective than native apps. Because instead of developed and manage content for multiple sites, responsive site provides unique approach to manage content.
No comments