Whenever I’m involved in designing a new website or rewamping an existing one I follow these methods to include the responsive aspects to the layout – “Progressive Advancement”, “Graceful degradation.”
It is quite obvious these days that we all tend to use our phones more to browse the internet. Research stats have continuously proven that users use mobile phones to browse the internet. That means more and more users are visiting the web pages on a smaller device.
As per the Responsive Website Design (RWD) approach, any page of the website should be seamlessly accessible on any device/resolutions (call it viewports) e.g: Desktop, Laptop, Mobile, or on any browser i.e. Google Chrome, Firefox, Safari. Edge etc.
Let me give an example.
Please review the following wirefram design. On the left side what you see is the wireframe render of a home page layout specific to the mobile device. On the right you see the same layout, an extended view meant for the desktop, laptop devices. The mock up is developed for the same page. However, when accessed, based on the device’s screen resolution the layout automatically adjusts.
You might have observed the progressive advancement principle from the above wireframe. Yes, it is quite obviously seen isnt it? Availability of space(pixels), viewing space is less as the devices go smaller. And the design is extended (content or functionality) for a large screen device.
Now, the question is how to adapt or deliver the web-page content or functionality to the users without losing its context on different devices.
Should you simply shrink everything? Or should you eleminate content on specific viewport? That is where the concept of responsive design principles helps us carefully evaluate.
Progressive Advancement: Under this method, you first draft your designs for the mobile devices. As the term suggests, from your version of mobile design you will progress to Tablets & Desktop designs. This would help you understand what are the elements actually required or what can be accommodated or how can it be accomplished for the smaller viewports. Remember our goal is to make the page, functionality, content most user friendly, so user experience is flawless.
One drawback of this approach I would like to highlight is you may lose some element in the early phase of implementation. i.e. because of space constraints 🙂 That is why it is essential to get your scope right, validate the designs against the actual requirements as and when you progress from mobile to desktop designs.
Graceful degradation: Imagine you are in a phase where the mobile first approach is not feasible. That is okay, adapt the traditional root. Design for desktop devices. Now you have the full visibility. Gracefully degrade the layout, content elements, features specific to smaller device. What is actually required for the user has to be carefully determined. Include only those elements in the design.
Few factors to consider:
- Always check your design as and when you progress against the scope/requirements
- Involve your core team in advance
- Mobile first starts while you are in a low fidelity design phase.
- Continuous improvement is the key
- Finally, build it, test it, Compress overall HTML file size, Minify CSS & JS files, Render only required images – the usual code and content stuff you have to take care to perform well.
It is the high time, if you have not updated your website to responsive layout, do it now 🙂
Perspectives 