Contact Info Contact Info
Tel:
(+632) 654 0001
Office:
WEB OUTSOURCING GATEWAY
Unit 3101 One Corporate Center, Julia
Vargas Avenue, Corner Meralco Avenue,
Ortigas Center, Pasig City, Philippines

Our Blog

25
Mar

Responsive Web Design: Origin and Basic Elements

Every design trends have its origin. In terms of web development, every website design becomes a trend depending on the ease that it gives to users. It gains popularity as the time passed by as it fits the needs of a website. From the previous innovation, many designers and developers are familiar with the term “responsive” or the ability of a website to respond in different size of browsers. Responsive Web Design or RWD is a term coined by web designer and developer Ethan Marcotte in one of his article in A List Apart (May 2010). He then discussed the importance of having one standard term for designers in creating a specific design of a website for different browsers—in mobile, tablets, smartphones and other devices. For him RWD allows designers to designs for ebb and flow of things.

After the exposure to lots of web designers, RWD was listed in different designer magazines as one of the Top Web Design Trends and even became the reason why 2013 was a Responsive Year (Mashable.com). This design gained its popularity because of the ease that it gives, being mobile-friendly and the benefit for website owners to reach wider scope of users. Having a responsive website gives user a chance to have an optimal viewing experience. (Marcotte, 2010)

Have you ever wonder what the technicalities of this widespread web designs are. This design trend uses fluid grids, flexible images and CSS3 Media queries, a combination of elements that has a one-to-many effect or simply giving one website but many devices result.

Fluid Grids

The term fluid grid is used to let the site size flow depending on the smallest to the largest screen sizes of a device. It is the capability of website’s layout and grid to be flexible for the user experience. Element sizing is on percentages rather than using pixels or points.

Flexible Images

Scaling the size and resolution of images are difficult in terms of changing screen sizes. That is why flexible images are needed to have high quality contents even in different devices.

CSS3 Media queries

With CSS3 Media queries, web designers find it easier to change how contents appear in different devices.

CONCLUSION:

More web design trends may catch the attention of mobile and online users, what designers and developers should know is how to respond to it. The changes that technology brings ranges not only for desktop users but most especially for diverse group of people who are now fond of using smartphones, tablets and other mobile devices. Developing a website with this kind of design may not be difficult if you learn how to start and continue to improve.

For the next series of this article, we will be discussing the advantages and disadvantages of having a website built with Responsive Web Design.

Tags: , ,