One of the current buzz words in the design industry is Responsive Design. Clients hear this term and find themselves compelled to need one. They think Responsive will be the do all be all for their web needs in terms of covering all the possible platforms. In years past we had the 960 grid system that worked until more fluid layouts became more prevalent in the marketplace. Both the 960 and fluid layouts had limitations when it came to mobile and tablet layouts and have gradually been replaced with responsive. Not that both design methods were not readable but rather they didn’t dynamically adjust for the screen size. Responsive has been the next evolution of website layouts, meaning your website will change depending on the device being used.

Responsive uses a number of techniques including mobile friendly JavaScript, dynamic media queries and other css3 (cascading style sheet – in case you need to know).  Browsers of basic mobile phones do not understand JavaScript and media queries. In years past the designer would create the desktop version of a site first and possibly consider additional versions. The new school of thought is to design the mobile version first and consider the JavaScript limitations at the start. The importance of the workflow is how you set up the expectations with the client during the design process. Clients want to see fireworks from the start and may even request to see the Responsive design quickly. As a designer I consider identifying the clients sitemap structure to understand the site flow. Based on the sitemap I will work on wireframes to introduce basic layout elements. Wireframes allow the client to quickly work collaboratively to determine where elements will be placed on the page. Its important as a designer to gain the approval from the client before progressing to the actual design phase. Clients sometimes have a tendency to get stuck during wireframes and identifying how many revisions they have during this phase is important. Once approval is given the fun begins with the designs. As mentioned earlier, start with the mobile site first and work towards the Desktop version. The mobile helps identify the important elements for the website that if you go directly to the desktop will sometimes be missed. Understanding the entire workflow for designing a responsive site will allow a developer to pick up the site designs and quickly transform them into a living website.

Design for all the platforms

Note: the responsive issue was brought to my attention while testing my site on a Samsung Galaxy Note 2 (edited for JP Lgos). I have a fully responsive site, however on the Note my site was having difficulties responding to the screen size. The note, which looks like a tablet you hold to your head, has a 5.5″ screen.

Part 2 – The Development cycle