Introduction
Responsive web design is about designing and developing a website in the way that it is compatible with any device that can be used to browse the Internet. This means that a website should better have a mobile version. And a curious thing about mobile devices is that they are all so mush different! Diversity is good because it makes the world bright, but it can eventually drive the designer mad in his effort to make and tune a layout for every model of a variety of brands. This is where responsive web design comes in handy. The necessity for flexibility in the layouts is even more imperative now so that we can better accommodate the great number of browsing situations currently in place.
The popularity of the concept of responsive web design is obvious. No one wants to let go of the visitors, especially those who are most active using the Internet both on desktop computer and on the go. The companies want to have mobile versions of their websites to broaden their Internet presence and facilitate their services availability.
The concept of responsive web design assumes that the site layout should respond to the environment used to browse the website regarding the screen resolution, orientation and the platform. To achieve this effect designers can use a combination of techniques: flexible grids, flexible images and media queries. Thus the idea is about incorporating a technology of automatic responding to the user's preferences into a website. The site's design will tune automatically eliminating the need for additional design effort whenever a new gadget appears on the market.
How to Create Flexible Layout
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design.
Flexible Grid
Now with the advent of HTML5 and CSS3 we came up to amazingly scalable layouts. Off course it it not the ultimate solution, a workaround actually, yet it provides much more flexibility. These liquid layouts may become flat as a pancakes or completely illegible, but they will never break now.
These layouts have containers on the page each having their widths defined in percents - meaning that they are completely based on the viewport rather than the initial containing block. A liquid layout will move in and out when you re-size your browser window. A combination of elastic and fixed layouts forms the unbreakable flexible grid.
The best way to appreciate how this works is to try to browse such a website on a device that can switch from portrait to landscape view at the user's whim.
Flexible Images
One of the important issues while dealing with flexible design is working with the images. Proportional images resizing can be achieved in a number of ways. Scaling is the harshest way to bring the image to a mobile device. The easiest and the most common way at this moment is to use CSS's max-width for an easy fix. Another way is cropping the pictures with CSS overflow property (e.g. overflow: hidden). This lets us crop images dynamically as the containers around them shift to fit new display environments.
Appropriately sized versions of the image can be stored on the server to be dynamically served depending on the user agent with the help of server-side or client-side feature detection along with DOM manipulation. And as an option we may decide to hide images at all using media queries that serve a stylesheet which sets the display: none property for images.
In our opinion the main points of consideration with the context specific images should be the resolution and download times.
Media Queries
Media queries allow for selective serving of stylesheets for the same HTML document depending on the user agent's features, such as the browser window's size to produce multiple layouts. Among other parameters come page orientation, screen resolution, etc.
New devices made after the release of CSS3 (such as the iPad and Android devices) support media features, including max-width, device-width, orientation and color. So, calling a media query using CSS3 features to address these devices works just fine, and it is ignored if accessed by an older computer browser that does not support CSS3.
The limits put on by screen size and resolution fade in the face of media queries and responsive design. This lets us to go beyond and start building websites that flexibly adjust to a variety of media.
Useful Frameworks
Liquid layouts are easy to achieve if you follow some simple rules:
1.sketch a rough layout grid before you begin coding
2.use gutters - your columns won't spread too wide
3.indicate the width of all containers and gutters in percents
4.do not define containers that use the full page width - allow for browser rendering issues
And off course there are different ways to achieve flexibility.
Still if this appears a little complicated there always is a bypass. You can use a CSS grid system for designing adaptive websites.
Let us introduce some useful resources facilitating frameworks production.
Gridless has the simplest approach on markup and styles. There aren't any pre-made grid systems and the CSS isn't littered with silly classes. Gridless can only be viewed as a starting point, that should be edited to suit each project's needs.
Layout are based on a single grid, consisting of 68 px columns with 24 px gutters. The amount of columns and the width of the outer margins are the only measures that change from layout to layout.
A simple css framework centered around the printed layout techniques of 4 columns but with capabilities to unlimited column combinations and capacity to make elastic, fixed and liquid layout effortlessly.
Several common fluid-width layout frameworks
A fresh and lightweight CSS grid that can be used to streamline page templates for content management.
Showcase
In this section we would like to represent some beautiful examples of websites featuring responsive designs. Check them out!
Conclusion
Responsive web design requires a different way of thinking. You don't need to be a genius to understand how to make a design responsive. The techniques discussed above are not the ultimate solution for the ever-changing mobile world. Responsive Web design is simply a concept that has the power to refine the user experience. And be prepared that it will not completely solve the issue for every user, platform or device. While designers carry on making a path to solutions for every device and situation, the devices, at the same time, should seek to display the Web in the way so that it is comprehended most intuitively. Let's wait ans see where it takes us!
I'm in love with modern web design and beautiful typefaces. You may check out my web design related articles at www.websitetemplates.org/blog
