Workflow Considerations for Responsive Web Design

Given the rise in increase of number of devices used to surf the internet, the demand for web developers for constantly change their website presentation also increased. Responsive web design, a development that allows websites to rapidly adopt its web presentation regardless of the device used to view it like how one would view the website on a normal computer scale.

But as the world of responsive web designing rapidly continues, there is also a need for the workflow to evolve. But what are things to consider in changing the workflow of a web design? Listed below are some of the things to consider for a responsive design workflow.

Content First

Beauty and design are one of the things to consider in building a website. But in a developing a responsive website, it is also important to consider the site’s content; making sure that it delivers what a conservative website would give. Since a responsive website can be simultaneously update with the normal website, user content is always updated and that’s why clients would almost always prefer a responsive website over a mobile site or a mobile app. One thing to always consider is the weight of any piece of a content to fit into the responsive website to avoid overflow.

Device Planning

When planning layout for a responsive design, one should also consider planning for the different sizes of device users will use to browse the site.

For example, you should always plan at least a couple different layouts for the sites to use for an iPhone, an Android phone or a tablet with different screen sizes. Putting this consideration as one of your top list to do will save you time and effort in the future.

Designing in Browser vs Photoshop and Fireworks

A lot of web designers have debated over designing in the browser rather than Photoshop and Fireworks. Some will choose Photoshop and Fireworks since will it deliver quick results on live testing. Others also find designing in browser much efficient in making responsive sites. Common tools such as Firebug and Firesass are reliable tools or designers who can take advantage of CSS3 and HTML5.

No matter what technique you may use, it will surely has its own characteristics and both will yield fantastic results when done.



Another consideration to improve workflow of a responsive site is starting with sketches. A lot of designers consider spending a short time with sketches saves them a lot of hours on the computer and a decreased amount of time hitting a virtual dead end.

Consider starting your design in a design sketchbook before turning to HTML5 or CSS. This will save you time facing issues and content placement problems that you wouldn’t have thought you’d miss.

Style Tiles and Mood Board

Mood board is a good tool in presenting and guiding clients with different images for the overall feel of the site. Since it is possible your taste and your client’s taste will not entirely match, it is ideal to present clients with 2 to 3 mood boards to determine which style will surely fit your client’s needs prior to commencing the process of designing the site.

Style tiles, on the other hand, contain designs for the font, color and elements of the interface that easily communicates the design visually without being a completely different one. Much like the mood board, presenting samples through the use of a style tile saves you time and effort in making sure every element you place on your responsive web design fits perfectly with the overall theme of the site and jives with what your client wants.

Given that there are numerous kinds of devices that come out almost every day, it is safe to assume that responsive web design will become a mainstay in the web design industry at least for the next few months or years. Different ideas for responsive web designing will also emerge making the responsive design world a more interesting one for web designers and owners alike.

3 thoughts on “Workflow Considerations for Responsive Web Design”

  1. I totally agree with the tips on Device Planning. When I make significant CSS changes, I check the site on a 10″ tablet and a 7″ Kindle. Rotating the screen 90 degrees will also give you a different view.

  2. Responsive web design is a trend and is going to be our web designing future as well. Designing a website in a browser is a good approach because it help in saving much of our time. thanks for sharing the workflow

  3. Great tips!

    One thing I’d like to add is the use of mobile-first development in your CSS stylesheets. It’s easier to add elements as you scale up, rather than hide things the smaller you go :)

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top