Long gone are the days for website designers where they could just write a single piece of website design and forget everything else. The technology is expanding rapidly and with it there is an expansion of many devices with many different functionalities and many different screen sizes. These screen sizes make it tough for web designers to write their websites in a way which can support all different types of devices. Designing a website for a Desktop computer with a big screen size will render a bad display in the small screen of a mobile phone. There is a variety of devices like Phones, Tablets, Pallets, Desktops, Game consoles, Televisions and even wearable tech these days. And building just one site for these seems illogical and useless really. This is where the theory or Responsive web design (RWD) kicks in.
Responsive web design is a new concept which was developed by Ethan Marcotte. It was designed as a technology with the first priority given to screen sizes. Ethan Marcotte was able to see the future and design methods which could make viewing a site in all kinds of devices a good experience for the end user. Responsive web design is a brilliant use of HTML5 and CSS3 techniques to create content which “Adapts” to the changing environment. It aims to avoid unnecessary redirects based on the device used by the user or dynamic creation of HTML and CSS codes based on User-Agent. Here are the main things you need to understand to understand what Responsive web design with HTML5 and CSS3 really is.
Fundamentals of Responsive Web Design
Media Queries:-
With the arrival of CSS3, the developers added an option with the help of which they can customize the presentation of content based on the device that sent the request. Based on the screen size that requested a particular page, the CSS that was designed for it would be served automatically. All responsive web design experts use media query extensively as follows:-
/* Default styles first then media queries */
@media screen and (min-width: 400px) {…}
@media screen and (min-width: 600px) {…}
@media screen and (min-width: 1000px) {…}
@media screen and (min-width: 1400px) {…}
The media query is used in the way as shown above. The designer enters the min-width attribute with the size of the screen which is used to view this content. We can customize the output for a wide range of screen sizes using the media query. It can be used to customize font sizes, the style, and the color, anything – just name it. There are other items which can be queried upon by using the @media query – min-width, max-width, min-height, max-height, and orientation etc. In the case showed, min-width is used which is the most used query. It specifies the min-width of the screen of the device viewing the content. Hence, we are able to customize everything depending on the size of the screen using the media query.
Fluid Grids: –
Fluid grids are the most important element that help with the layout of the final output. The fluid grid is a simple concept to understand, but one of the toughest thing to master in responsive web design. The most important thing to note in fluid grids is that everything is decided in terms of relative size. The size and the height and width of the layout are decided in terms of relative sizes to other elements. The standard “px” is not used here, but rather relative proportions of various elements are used. Instead, we use “%” symbol to define what percentage of the viewport is occupied by that particular element. Fluid grids are what makes responsive web design so beautiful to work with. This gives the feel of the “adaptive” nature of the layout. While using fluid grids, we define the maximum size of the design. The grid is divided into a specific number of columns to keep the layout clean and easy to handle. For Example:-
.port{
width.50%;
}
This CSS property ensures that the element using this will occupy 50% of the width of the viewport in which it is contained. A great website to see Fluid grids in action is http://fluidgrids.com/. This site shows how responsive web design is used to create fluid grids and used in real life.
Flexible Images:-
It is one of the trickiest things to master for responsive web design. Most new web design experts fail to address this problem in most websites. The thing to understand about responsive web design is that even if the rest of the design is fluid and responsive, it will not render well if “ALL” components don’t scale properly. Even if you have paid very good attention to using fluid grids and media queries, but if the image does not scale very well in the device, you will not get a good output. In mobile devices, most users like to zoom in and out of images. That is why most bitmap images which are used lose resolution when they are expanded. Hence, while creating images or graphics that require to be zoomed, it is a good practice to use vector graphics like SVG. These will make sure that your graphics are not distorted. And to make flexible images, we use the attribute “max-width” to indicate the maximum percentage ratio that an image will occupy relative to the viewport. This ensures that an image will not fill up the screen on smaller devices compared to the larger screen devices.
So, to answer the question of what is RWD or what is responsive web design, here it is. Responsive web design is a method used to create layouts which are suitable for a variety of screen sizes. Responsive web designers use these above-mentioned tricks all the time to help create websites which are very responsive. Create websites for the mobile-friendly environment not only helps in user engagement and creating a better user experience, it also helps to rank your page higher in Google search results. After all, no one can ignore the fact that 60% of the users are using pocket mobile devices and only 40% of the users are using desktop computers.
