Overview of Responsive Web Design
Nowadays many of you might have heard a word RWD (Responsive Web Design), a lot of people, organizations are trying to make their website responsive. In this blog, I will give an overview of RWD and how we can make the website responsive.
As we all know that today Smartphone and Tablet users are increasing day by day so, almost every organization wants a mobile version of their website and applications. But the biggest challenge is that we have a number of devices with different screen sizes and operating systems. It’s very tough to manage design for each kind of device and all screen resolutions must be compatible too. In this case “Responsive Design” of web applications comes in to picture.
Responsive design is a web design and development technique that creates a site or system that reacts to the size based on a user’s screen. It optimizes a user’s browsing experience by creating a flexible and responsive web page for the device that is accessing it. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size, and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
Now, you must be thinking that how we can achieve this. Using HTML5 and CSS3 features in your websites can make it responsive.
Three major features of HTML5 and CSS3 those help in Responsive Web Designing are
- Media queries and media query listeners
- A flexible grid-based layout that (Fluid grid)
- Flexible images
Media Queries
Earlier in CSS2, we had only two media types - Screen and Print. Now in CSS3, we have multiple media types like Orientation, Size, Color, etc.
@media screen and (min-width: 600px) { .MyClass { width: 30%; float: right; } }
This style will apply only when the media type is screen and width is above 600 Pixel else it will be ignored.
@media screen and (max-width: 600px) { .MyClass {clear: both; font-size: 12 Px; } }
This style will apply only when the media type is screen and width is below 600 Pixel else it will be ignored.
Flexible grid\ Fluid Grid
The Layout of the page is Flexible. In CSS, multiple layouts are defined and are applied based on media queries. There are no fixed numbers of columns and the column layout.
For example, we can define the Single Column layout for smartphones, 2 Column for tablet and 3 Column layouts for desktop\laptop.
Flexible images
The images should also be flexible and fit in their container. We can give max-with:100% to image tags. All modern browsers support the max-width attribute.
Img { max-width: 100%; }
Benefits of Responsive Design
- Increase reach to tablet and mobile audiences
- Save time and cost on mobile development. No need to manage multiple applications for Mobile and Desktop User.
- Increase visibility in search engines.
- Save time and cost on-site management.
- Enhance the user's browsing experience.