Responsive Web Design – The Water flow Model Approach

Please give us a quick like and share on !
Rajdeep Singh

I am associated with CYBERMOUNT Solutions as the Managing Director of the company. My role includes checking the current levels of demand and supply in the online market with respect to web design and development services. I have been working as an entrepreneur in the fields of manufacturing and IT for past 12 years. My current objective is to set the CYBERMOUNT brand on global platform. Besides this, I am also working as an independent author/writer in the context of current online services available in the market.

Being ‘RESPONSIVE’ is what everybody is speaking about when it comes to making a website design. Responsive web design (RWD) is a creative web design approach and methodology wherein the websites are crafted in such a manner so as to provide an optimal viewing experience. This includes the facility of easy reading and navigation with a minimum of resizing, panning, and scrolling, across a wide range of devices like desktops, laptops, smart phones, tablets etc.

The reason for making websites responsive is because some of the obvious reasons.

  • The conventional usage of desktop computers being replaced by modern day smart phones, tables and other upcoming smart devices which are internet enabled.
  • An increased usage of web surfing via tablets and smart phones.
  • Modern day application usage and purchasing trends over non conventional devices.

Likewise there are many other vital stats all over which clearly show that the smart phones and tablets are going to be the ‘Next Big Thing’ or better say they already have, when it comes to surfing the net, searching a product/services or even making day to day purchases. This trend is increasingly shifting from the zone of luxury to being a basic necessity.

All these factors contribute to the fact that how important is a responsive web design for everybody, be it the web development companies, research firms, manufacturing corporations, bank services or even an individual who wants to check on a particular when he is in mobility from home to office.

Getting Responsive by Water flow Model

This article is particularly based on the usage of ‘Water flow Model’ where an effective responsive web design can be formulated and implemented by methodologies such as….

  • Strategic formulation
  • Design & Development
  • Testing
  • Implementation/Deployment

This model abides by a step to step approach where in an effective strategy is formulated for making the responsive web design which continues further with its designing development (coding) that is tested in the next series of steps, after which the deployment of the built set up is done. In this entire process, the next step is started only after the previous steps are finished.

Though the water flow model is a little bit stiff as it is in a linear motion however by the usage of responsive techniques all the loopholes can be voided.

Below is the list of critical steps involved in creating an effective responsive web design.


Here the basic planning of designing the wireframes and building them comes to play. If we follow a conventional water flow model then the wireframe (consisting of layouts & widgets) would be set to a specific size which is not flexible.

So in order to make it responsive, you need to design different widgets for different views which would be able to make the entire wireframe representing screen sizes with the presence of layouts in fluid state. This would be able to make the entire wireframe in a flexible mode.


The upcoming process as per the waterfall approach would constitute the designing of wireframes via usage of different fonts, colors, space and other designing tools. Now to upgrade the quality in the context of design for making it more responsive the design should include few layouts and widgets of different sizes. The usage of fluid layouts is what will make the entire platform more flexible. This should make the design all together compatible with different screens.


As per the waterfall model, there comes the phase of development after designing (after design approval). Now here because the water flow model is linear in nature we have to make sure that the design must survive on a flexible grid in order to make it responsive. The coding has to be done in accordance with the different widgets as they are smallest units of a webpage that would ultimately ensure flexibility, thus making it responsive in nature.


Following the water flow model after design & development, comes the stage of testing where the evaluation is done via unit and functional testing. Now here the testing has to be done time and again on multiple browsers and screens so that if there are any problems as such, they can be identified.


This is the final step of waterfall approach wherein, after the successful testing of the developed setup over multiple platforms which includes different browsers, screens and devices, the deployment of the system is done on the live market.