/ Web-Technology / Planning to Do Responsive Website? Follow These Steps to Make Your Design Easy.

Planning to Do Responsive Website? Follow These Steps to Make Your Design Easy.

Kamrul Khan on August 12, 2014 - 12:11 am in Web-Technology


Website Design expectations are unlimited.  Everyone wants their website to be responsive means compatible with all devices.

To have a good quality responsive website you need to have a good designer.  The process of responsive website design is time consuming and difficult because there are many things involved in it. Responsive website represents quality and achieve the quality a web designer should do proper analysis, design framework, development platform and divide the work in phases.  There can be many phases involved depending on level and experience of designer.  Here I list down some phases which a design can follow to build responsive website.

Phase 1:- Website Analysis with Client

Involve your client in the early process.  It is important to take their information, ideas and objective for creating website.  List down the key elements such as responsive breakpoints, navigation etc.  This will help you to move to phase two.

Phase 2: Design a Wireframes

As per the information you have collected from your client design the structure of website by creating columns, boxes and where the key elements will be located in the website.  Its good to start sketching on paper and later you can use wireframe tool like Wirify by Volkside which is browser extension tool and allows you see wireframe of any website..  Later the page you have sketched you can divide in sections to know where you will place menu, boxes, button, windows charts, images etc.

Design of Wireframes is useful for following reasons:

  1. It help us to interact with clients and give them design process and different options
  2. It fulfills real objective and key elements of the website.
  3. Can help in doing testing like how the website will look in different devices.
  4. Helps to save time by taking feedback before even starting to much work.
  5. Gives a clear picture of each elements website have and what platform we have to use for development.

Phase 3: Design a Mock-up Grids

We can start the mock-up design by beginning with grids that allows us to be more precise for responsive website.  Design them on Photoshop or any web design software and define the width of columns, number of columns, distance from one grid to another grids and allow us to adapt them into different layouts.  These will make our coding job easy and we can implement the code and if will be life copy from draft to fine copy.  Below is the example of 960px which is based on a grid of 12 columns of 69 Px each separated by space of 12 px.

Responsive Design Grids

In this way we set the basis for our grid position content in a precise manner.  I have included the header, footer, logo, sidebar right and sidebar left.

Phase 4: Style Tiles

As we see in below image a set of visual elements ranging from color, texture, types of buttons, fonts etc. are very nicely presented.

Responsive Design Style Tiles

Communicate with your client to design Style file in order to implement style file in you website.  Present multiple files so that client can the choose one he likes.

By following these steps of planning process of Responsive Website you can save time in coding.

For any website project design should be done first to get the good result and for Responsive websites it is more imporatant to complete design before starting development.

Planning is more important for responsive design because we have to ensure client gets unique website visibility on different devices and a single website is accessible on all devices rather having multiple versions of websites.

Perfectly follow all these phases to make you responsive design easy and time saving.