31 Jul,2014

Principles of Good Responsive Web Design

Not long ago, web designers only had computer screens to take into consideration while making a layout. Today, things are completely different. Mobile phones with browsing capabilities and mini laptops came out and now, tablets and smartphones are used more and more. Those who want to benefit from responsive web design will have to design websites that can work well on any screen size and any type of platform: desktop computers, notebooks, tablets, mobile phones, etc. This type of design is the preferred one from other techniques like adaptive design, because it doesn’t require the development of multiple website versions.

Responsive Web Design is different than adaptive web design, which refers to developing an additional website version that could be displayed well on mobile platforms. Adaptive web design has proven to be impractical, because you simply cannot keep up with the multitude of platforms for which you have to create separate versions of the same website. The following responsive web design principles can help you create flexible websites that could fit on every possible platform:


The Use of Media Queries

Media queries are CSS3 modules that can determine the adaptation of content rendering to screen resolutions and other conditions. Media queries have become a W3C recommended standard since 2012 and they are among the basic elements of responsive web design. A module contains two elements: a media type and one or multiple expressions related to media features.

The use of a fluid design can still be limited in case you don’t use CSS3 media queries to assign a variable width for a page that could meet the needs of any modern browser and adapt to any small mobile screen, but also to a widescreen TV. CSS3 queries can actually be used to modify the layout at different breakpoints of the design.

Use a Fluid Grid System

When you use a mobile phone or any platform that has a small screen to view a classical type of website, you will surely have to zoom in and scroll to view an entire page. In order to solve this problem, you have to use a grid system for your pages. A grid-based design allows you to specify a separate behavior for each grid column. Instead of being pixel-based, the construct will be percentage-based. For multiple columns on a design meant for desktop, when you use a mobile phone to access the respective website, these columns will get on top of each other.

Optimize the Pages by Hiding Elements

Some elements of a website like image rotators may look great on a desktop screen. For mobile screens, some of these elements will have to be hidden, in order to make the rest of the elements fit well on the small screen. The content that is non-essential can become hidden (apparently removed) to avoid clutter when the website is displayed on smaller screen. The smaller a screen can be, the more elements can be eliminated.

Images and Videos Must Be Able to Scale

The resolution of the screen on which the images and videos from the website are shown has to determine the resolution or dimensions of the respective videos and images. These elements must be able to scale to fit each resolution. Images can be set to be shown on smaller resolutions when they are accessed from mobile devices and to high resolutions when they are shown on large displays.

Implement a Responsive Navigation System

Responsive navigation systems can constitute a plus if you really want to make a fully responsive web design. However, this implementation is still optional. It may become requirements in the future, but it is too early to predict this. Websites with extended menus will be easier to navigate in case they are accessed from mobile platforms.

Final Considerations

While the principles presented above are the essential principles of good responsive web design, they cannot guarantee that every website on which they are applied will benefit from them. For example, some websites simply cannot benefit from the use of a collapsible grid, because the goal of the site may be very different than what the grid could offer. The mobile market continues to rise and experts say that the future of computers is mobile.

Knowing this, we can also predict that the types of platforms on which the Internet will work will be more varied in the future. This could lead to the need for creating the best responsive web design for each website. What has worked in the past in terms of website design is currently not working anymore and what works now will probably have to be improved to work for the future.