Device Oriented Approach Rather Than Content Oriented
A carefully planned approach is essential if you want to build a successful web design. However, this process doesn’t hold true anymore if you are looking to create Responsive Web Design. Something interesting that you should know about Responsive Web Design is that it has brought the world one step back, where everything is inherently fluid. Before the advent of responsive web design, web designed was made with fixed-width layouts and containers. The designers then had the idea of adding tables and boxes to the websites and we had websites that were completely inflexible in terms of pages. With so many screen sizes the focus no longer is on creating something that is fixed, but something that can work on multiple devices. If designers focus on old processes that require creation of static wireframes and mockup it will make the whole process of creating a RWD counter-productive. Designers need to begin working on fluid elements rather than focusing on fixed width. With each devices having a different resolutions, the designer can never cover all of then when working on design, instead the solution for this is working on content design.
Adaptive Web = Adaptive Process
When working a responsive you need to know that approaching it the same way as a non-responsive website, you are bound to fail. In the world of new adaptive design, you need to let go of the old processes to make it easier to progress. Rethinking and reanalyzing the process will make your responsive web designs more effective and less time-consuming.
RWD Workflow and How To Work Wowards it
Now that we have an understanding of RWD, lets look at the workflow that can make the process simple.
1. Web Design – Develop a Design System
When it comes to creating a design system, Laura Kalbag talks about creating a design system that doesn’t worry too much about the overall layout, but focuses on creating separate responsive components. As the responsive design is all about fluidity, it makes no sense to worry about something that cannot be controlled through a wireframe. This basically suggests that we forget about the old practice, where the first step for web design was to create a layout. This new practice encourages working on the feel of the website that you are looking for and then translating it over to multiple devices and screen sizes. When it comes to visual design, it made up of typography, color, shapes and other imagery. All these element make the website to have a cohesive feel, even though it is being adapted on different screen sizes. Building the elements of the website design is of essence when it comes to RWD, as these elements can be adapted unlike the unknown width of different devices which they have to be adapted on.
2. Creating the Content Hierarchy
Although, creating static mockups for a RWD is not necessary but we cannot rule out the importance of mockups! The only difference is that the mockups in case of the RWD are content- based, rather layout based. Being narrow by nature, the content on the mobile device is mostly presented in a single column. This narrowness of screen sizes leaves the designer with no other option but to give priority to certain content in the hierarchy, something that is less apparent when viewing the website on a wide screen. This is the primary reason why most designers experiment with new kinds of mockups that aim at experimenting the content hierarchy, instead of design layout. Numerical value is given to elements of content to the location of these items in the one column layout for mobile devices. This helps present design in the best possible manner without constraining the design.
Tools for Responsive Web Design
When you look for tools on the internet for RWD you will find plenty of them. However, the two best tools that we found in providing assistance specifically for new responsive-centric workflow are:
1. StyleTil.es One great tool that designers can use for design system portion is StileTiles. The website contains a lot of design deliverables that focus on elements for a RWD including fonts, colors, UI swatches etc. Style Tiles is a website that will help you communicate what a website design will look like without getting worried about specifics. http://styletil.es/ is a great resources for visual responsive planning
2. Priority Guide Priority guide is a great way to show how content will appear on a website by priority. This helps in taking visuals decisions as it helps in communicate the hierarchy of content rather than the aesthetics.
Responsive Web Design: Conclusion
If you are looking get into RWD, don’t be afraid to experiment. It is a new domain and the more you experiment, the greater are your chances of learning with a RWD. Remember to keep in mind the process for adaptive design. You need to have a new approach for a new type of design.