Have you seen a site on a mobile phone, which looks like a zoomed out version of the main site? The content is tiny, and you have to zoom and pan to make the text readable. This results in bad user experience. Especially when you have a lot of content.
Making a website responsive is not just a requirement, it is an expectation. Keeping this in mind, we have to design a website, in such a way, that the information we want to convey is displayed and structured properly, across all devices.
Basics of Responsive Layout Design
Understand the need for a Responsive Pattern
Create a Fluid Grid
What is a Responsive Pattern?
The basis of creating a responsive website, is to have a responsive pattern. Just like design patterns are used while coding, a web designing pattern to create responsive layouts, is known as responsive pattern. The elements have to be designed in such a way, that they work well when rearranged on a mobile or tablet device.
To give you an idea, usually the web layout is divided into columns. Each column or a collection of columns, share some logical content. The columns can be arranged above or besides one another, or nested. This would depend on the pattern you choose. When the browser is resized or when viewing on a different device, the columns are rearranged, to maintain the logical flow, but to improve readability.
Since this requirement is quite common, you have many resources to help you. You could refer to, Responsive Web Design Patterns – by Brad Frost, which provides you with a compiled list of such web layout patterns.
Create a Fluid Grid
A fluid grid basically involves setting element dimensions in proportion (in percentage) to the display screen.
As compared to using fixed grids and setting element dimensions in pixels, use of a fluid grid ensures that, when the screen is changed, the elements will be resized proportionally. But deciding proportions can be difficult. Frameworks like Bootstrap can help you design interface elements, because they take care of creating the fluid grid for you.
You may also like to read: The use of media queries and viewport settings as part of responsive web design.