Sam RoshanMarch 18,2014

Three Primary Components Of Responsive Site Designs

Responsive design is continually evolving, however, it contains several core components. We’ll give you a brief guide of the primary components of RWD.

Responsive design has several primary development components which are combined to create the entire design process.

  • Fluid grids: Fluid grids are based upon the sizing of page elements as opposed to using pixels. They are designed with proportions in mind so that the viewing screen will be properly fitted regardless of its size.
  • Media queries: Media queries allow the gathering of information about a site visitor. This information is then applied to CSS styles, based upon the characteristics of the accessing device.
  • Flexible images: The size of flexible images is dictated by relative units so they are kept inside of their element.


These three components when combined with a modern thought process are used to design sites that are flexible with no pre-conceived ideas regarding a screen’s resolution.

Responsive web design is still a relatively novel concept but it provides numerous advantages for users, including the ability to access one site with multiple devices. The ability to function on multiple devices gives users a consistent user experience without having the need for a separate mobile site, which provides a huge benefit for any site.

For designers, this creates new challenges. Recent surveys have indicated that a common problem for web designers is testing their designs on multiple devices. If a designer does not have direct access to all the devices that are commonly used to access the web, this can be an issue. Since mobile devices are continually being changed, it may be expensive for smaller design firms to determine if their site works properly across numerous devices.

One solution is device sharing, which has started to take hold in some design communities, but is not common place. Some mobile emulators and site validators are in existence that can be used, although you may need several of them to test all types of devices.

Demonstrate Responsive Design To Your Clients

Demonstrateing Responsive Website

Instead of explaining responsive design to your clients, a better way is to demonstrate it to them. This will have a greater impression upon them than explaining it to them in technical terminology that they may not understand. Most of your clients won’t understand media queries and fluid grids, although they are common terms for web designers.

Begin by demonstrating a site on several types of devices. Show them how sketching and wireframes can be very powerful tools. Remember, you won’t have any pixel perfect visual designs to show them prior to the completion of their site. This was much simpler for them to grasp, however you need to demonstrate that RWD will provide them with a site that is more usable.

Some designers have the belief that response design is the only way to create new sites since they are adaptable to meet the needs of their clients and they can be accommodated to meet the swipe and touch features on most mobile devices.

Overcoming RWD Issues

Problem - Solution

Similar to most new technologies, there are issues with RWD, but the majority of them have been solved without too many problems. To begin with, there have been some designers that had problems with images, navigation and tables. However, by using SVG, icon fonts, and scripts combined with consistent design, these difficulties have been overcome.

For pre-existing sites that are based on a fixed width there are additional difficulties. Since there is a big difference in creating traditional versus responsive designs, other issues are raised. When faced with this type of problem a designer has two available options:

  • Reverse engineer the site: This is not usually the best option and it frequently takes more time than rebuilding a site. However, at times, due to a variety of factors, this may be the only viable choice.
  • Rebuild the site: Creating entirely new style sheets and templates will frequently be faster and less costly. This will give the designer the ability to create an improved responsive device and to structure the content accordingly.

An additional issue encountered with responsive design is when a site visitor is using an older type of browser. This can result in a site that will frequently look too small for the viewer’s browsing window. This problem can be addresses using filler.

Should You Be Using Responsive Web Design?

Are you ready for fully responsive web design

If you aren’t using RWD you may be imposing serious limits upon your viewing audience. Clearly, this will not be beneficial for your business. Since people are accessing the web with a large variety of browsers and devices, sites that are able to engage with all of them will have superior metrics. This will result in converting more site visitors into leads or paying customers, which is usually the reason businesses have a web presence to begin with!

In increasing numbers, people are using a mobile device as their sole internet accessing mechanism and don’t use their laptop or desktop at all anymore. Therefore, not having a responsive site will make things difficult for people who are on the go, and it will completely eliminate a large sector of your potential customers.

The rapidly evolving options for viewing the web, and their ever increasing availability, will mean that responsive design will be here for the foreseeable future. In fact, RWD may become the only way to create a high-quality site with excellent usability.

Author: Sam Roshan Sam Roshan has been working in the Digital Marketing industry for over 7 years. He has worked for multiple companies ranging from corporates to boutique agencies encompassing his unique skill set to ensure businesses of all sizes can compete and grow their business using Online marketing strategies.

Instant Website Analysis

We offer a FREE 20 page anaylsis of your website. This indicates areas that need improving or changed for a positive user experience and increase traffic volumes.

etraffic TV

<… name="allowfullscreen" value="true">

Join the etraffic community

Connect with us on the following social media platforms.


• Social Networks •

• Our Locations •

Click To View Our Contact Details

Level 1, 530 Little Collins Street, Melbourne VIC 3000, Australia | 1300 887 151

Level 2, 50 York Street, Sydney 2000 | 1300 788 679

Level 1, The Realm, 18 National Circuit, Barton Canberra ACT 2600 Australia | 1300 765 708

Level 1, 16 McDougall Street, Milton 4064 | 1300 765 709

220 Varsity Parade, Varsity Lakes QLD Australia 4227 | 1300 887 804

Level 1, Paspalis Centrepoint, 48-50 Smith Street, Darwin NT 0800 Australia | 1300 889 815

Level 18, Central Park. 152-158 St Georges Terrace Perth, WA 6000 Australia | 1300 550 753

Level 3, 97 Pirie Street, Adelaide 5000 | 1300 669 895

Level 6 Reserve Bank Building, 111 Macquarie Street, Hobart TAS 7000, Australia | 1300 885 870

We seek to create long-term relationships
Tell us about your business goals and we will contact you