This article aims at explaining Responsive design and its features. What is responsive design? You must have noticed that right now, the internet is being used for practically anything like shopping, searching for data or data inquiry, communication and exchanging data. And besides laptops and desktop computers people are accessing the net on a whole range of devices like smart phones, tablets, androids, iPhones, iPads, etc. Also, you must have noticed that some websites which function perfectly on the laptop or a PC does not work as efficiently on your phone or tablet. Bits and parts of important details seem to be missing and the website does not respond well. Designers have overcome this issue by making responsive web designs. These designs enable the rearranging and resizing of the website to ensure that it fits every screen type as well as maintains its functionalities.
In his book Responsive Web Design, Ethan Marcotte attributes responsive designs to 3 main aspects – a flexible grid, flexible images and media queries.
Flexible Grids and Background images
In order to incorporate flexibility and responsiveness for your website you need to use a grid system just like in magazines. It is impossible to achieve a responsive design without a grid. Besides a grid you have to use percentage as a measurement and not pixels. That is if its 50% width the it will be half the size of the screen on which the website is shown.
Similarly you have to carefully choose the background images you want to use for example photographs, illustrations or any images that cannot be tiled are not fit for a responsive grid. Even horizontal gradients can’t be used as again, they can’t be scaled horizontally. It's best to use textures that are easy to scale or tile like grunge, grain, etc.
Scaling Down works best:
Responsive approach to designing requires scaling down and removing the horizontal scroll. The whole concept of fixed- width approach has to be entirely changed. Now you have to arrange all the elements of your website such that even when you resize the browser width all the information and elements are seen. This is possible by using a fluid grid made in percentage and not pixels. The reason certain websites don’t perform as well as they should is because they don’t have a fluid design.
Working with precent is just like working with pixels. In fact it's much simpler; Regardless of the screen size the mentioned div would always be maximum width that is 100%. Whereas if you were working with pixels the div would always be at 100 pixels so this would impact the design depending on the screen size(PC screen = 1600× 900).
Media queries are the cornerstone technology for Responsive Web designs they deal with the degree of media device responsiven
Of layouts depending on the screen size. This means that when you design a website you have to consider the screens of a laptop, desktop, iPad, iPhone as well as android tablets and smart phones. And the layout has to be resized and rearranged depending on these screens and this can be achieved by using appropriate media queries
The design concept aside, I would like to highlight that considering the benefits of s responsive website, designers must shift from fixed-width designs for fluid grid patterns as they are extremely useful and is an essential aspect of website designing. Now with the advent of HTML 5 and CSS 3 coding these flexible layouts just got easier.