What Is Responsive Web Design?

Responsive web design is a methodology that creates web sites with the viewer in mind. Rather than using fixed points to display text and images, element size adjusted to the device accessing the web page to provide the best viewing experience for the user. This is critical as technology evolves into more and different types of media devices such as tablets and smartphones. Yet while the primary focus for responsive websites is on the smaller, mobile devices, the concept extends to large screen displays as well.

cssA programming method known as a CSS3 media query is used to determine the size of the device that is viewing the web page. The query gathers the data from the device and adjusts the image dimensions proportionately. However, using media queries as a one step solution is not responsive web design.

There are two approaches to design used in conjunction with media queries – the fixed width grid layout and the fluid width grid layout. The first approach is oftentimes used when the elements to be viewed are of a large to medium size. These types of objects are generally more easily proportionally sized down and therefore do not lose their image clarity in the process. Smaller objects, particularly those seen on a smaller device such as a smartphone, are more likely to employ the fluid width grid layout to ensure proper proportionality when the display area is significantly reduced in size. There are advocates to a hybrid, mixed approach that uses fixed width for large and medium sized elements and the fluid width for the smaller sized elements.

What has been briefly covered, media queries, flexible grids, and fluid grids, are the three technical ingredients that define responsive web design. Not all responsive web designers should take a one-size-fits-all approach to a specific web site and think that responsive web design is a final answer. Some sites can use both the standard web design methodology and responsive web design to accomplish the goal of providing a better user experience.

The obvious advantage of responsive web design: you can create a single web page that is not only viewable across a range of media devices, but proportional to the display it is being viewed on. As with any methodology, there are several major considerations when attempting to employ responsive web design constructs in either creating a new web site or converting an existing one to a mobile friendly website.

One of the first questions to be asked is where are the majority of my sales going to be coming from? For example, statistics show that lower income users are more likely to use only mobile devices to access the Internet. If the answer is a lion’s share will be coming from mobile device users, the web site is more effectively constructed using responsive web design.

Browser support has been mentioned above with the media query, but cross platform compatibility is a key issue. There are a number of Javascript libraries and scripts that are potential choosing-web-browserssolutions to the problem, among them Modernizr and respond.js, both which work in tandem with the media query.

How using responsive web design will affect the performance of your mobile app or website. Developing a web app will bypass the number of redirects necessary to access content, significantly speeding up the user experience. In contrast, implementing responsive web design to a mobile website will not eliminate this performance dimension of redirects. While this decision is usually a matter of personal preference, it can also be resolved by opting to use a responsive web design methodology by reducing, if possible, the number of redirects.

Content is an essential consideration. Research has shown that mobile websites that have a content focus on online shopping, web searches, and are optimized for entertainment are more likely to access that content than if the same content was available in a mobile app.

Another consideration with content is the issue of image display. Image management in responsive web design is a current concern with the evolution of higher resolution devices becoming more mainstream. If you have ever looked at a normal image on a high-density device such as Apple’s iPad with the retinal display, you see edges of images that are blurred and fuzzy. How a particular mobile website or app will appear is important.

Beyond the aesthetic, practical, and personal angles of the project, there are the ever-present complications of time and money. In time, the approach to responsive web design testing is that it should be thought of as systemic. In most cases, using responsive web design can be done at a lower cost than developing a mobile app. But there is another issue of time – the time users spend accessing mobile websites versus mobile apps, and the tide is making a significant turn towards mobile apps.