Responsive Design Process

RESPONSIVE DESIGN WORKFLOW With changes in website design industry we see a need to change the way we approach website design. This infographic describes responsive design workflow we started implementing in our company. Content comes first! CONTENT ANALYSIS Structuring it for every page before anything else is very important. It allows you to start thinking about your site in a linear form, which is the way mobile version of your site will be. All the content questions can be answered on this stage. This will make responsive design workflow more efficient. Presenting content blocks identified during content analysis stage in the form of a dynamic html wireframe. RESPONSIVE WIREFRAME This way it can also be viewed on multiple devices. We try to keep it simple. STATIC DESIGN We will try to identify if we start with desktop or mobile static mock for each particular site. On this stage we want client to focus on la yout, color, style of images type. DESIGN PROTOTYPE This stage is about translating the visual language of the static mock to different devices. Dynamic html prototype of the design is created that could be tested on different devices. DESIGN STYLEGUIDE HTML digital style guide is developed to help developers to identify Sizes, styles and colors of the main HTML elements of the site. Site is coded according DEVELOPMENT to static mocks, prototype and digital style guide and integrated with content management system. TESTING Final website is tested for anything that might be working wrong. This workflow isnt something set in stone. We slightly modify it depending on chient needs and budget. ereatage