I will admit that until last year, I perceived Responsive Design to be just a front-end development methodology, a combination of css media queries and javascript to deliver a ubiquitous web experience across devices, resolutions, screen sizes and orientations. A closer experience this year has made me realize the opportunities and challenges responsive brings – a dramatically different way of envisioning user experience and web design, a mental shift from thinking pixels to proportions that requires strategic, creative & technology collaboration. It has redefined the concept of a personalized user experience, which until now was limited to personalized content & functional behavior.
Here is a possible approach to responsive design with “some” of the key elements that should be thought through before “responding”:
Where do you start?
Firstly, DO NOT assume that mobile means responsive. Respond to an optimum design and do not limit your design to fit responsive needs. Resist the Temptation and weigh in all pros & cons. Mobile for instance brings its own usage pattern & features that cannot be ignored for the sake of being responsive.
Extent of Responsiveness
Create a SWAT team of IA, Creative Designer, Content Strategist, and Front End Developer. Having initial concepts showing your design landscape across the highest to lowest viewport to determine the extent of responsiveness could help. For content driven sites, a completely responsive approach from desktop to mobile can work but for interactive sites with functions, keeping mobile out of the responsive scope “may” be a better option. After all a www.m.mynonresponsivedesign.com is NOT suddenly a bad thingJ.
In-Scope Devices & Business Priority
Create a list of devices that are in scope and their respective priorities based on existing and future traffic expectations & modeling. Don’t try to solve for every combination.
Stay Agile – Plan & Estimate Accordingly
A responsive approach is anything but conventional in terms of methodology, effort, planning and tasks. It is collaborative & agile at its core, so “get to the browser early” by bringing some front end development together with creative design. Testing the breakpoints on the browser with actual code could be a more efficient approach than being completely linear.
ViewPorts & BreakPoints
Have the SWAT team identify the breakpoints for your design across the view ports and resolutions that are in scope. A breakpoint is a combination of resolution, screen and device at which your base design starts to break, for instance a 5-column design that works well at 960 pixels would break at 420 pixels.
Progressive (Low – High) vs Downward (High – Low) Approach
Arguably the most debated and subjective decision – what should be your starting point or baseline design. Should you design for the highest viewport ie desktop and work your way down OR should it be an upward progression by going mobile first (preferred by some)? The decision is largely based on your design complexities.
Content Choreography
The concept of permanently placing content on a web page using fixed width is obsolete. Use CSS3 media queries and content hierarchy to hide or show content. Look beyond the layout in front and envision how the elements will reflow and lockup at various widths while maintaining form & hierarchy.
Media Queries
Heart of a responsive execution, conditional application of css styles based on a user’s context. Define media queries guidelines and standards to adapt the css downward or upward.
Fluid Grids
Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels, a fluid grid is more carefully designed in terms of proportions. When a layout is squeezed onto a tiny mobile device or stretched, all elements resize proportionally.
Navigation Approach
Define how the overall navigation structure for the different breakpoints, typically driven by functional and content relevance in the user’s context.
Image & Video Handling Strategy
Strike a balance between performance and experience. Fluid or flexible images, css driven adjustments for images can be used. Consider the impact of downloading heavy images on a mobile device. Standard video players could pose challenges, consider fluid width video embeds while making sure the aspect ratio of the videos does not get impacted.
Advertising | Display Ads
This is an easily ignored area but one that is directly associated to revenue. Everything from the ad placement to the creative dimensions could get impacted when the design adapts on a mobile device, something to consider as part of the content hierarchy.
Validate SEO
With a single URL and no re-directs for all content across desktop, tablet & mobile is only meant to improve your SEO ranking, plan to test the impact.
Touch vs Cursor Effect
Design should be optimized for both cursor based (most desktops) and touch screen usage (mobile & tablets).
Creative & Performance Testing Strategy
An area that lacks innovation and automation in general, define a cross device test strategy. Identify performance bottlenecks (page sizes, images, responsive times) early on especially on devices with low memory & processing capacity.
End to End Proof Of Concept (POC)
Plan for an end-end POC that proves your strategy before you go too far into execution. Resolve all roadblocks for key flows & templates to avoid surprises later on.
While responsive is great and revolutionary and needed for a particularly diverse consumer device ecosystem, it is not without its set of challenges, price and what I call “responsive temptations” that may be hard to resist but are better avoided. It is anything but a silver bullet and should be adopted with cognizance. The questions & apprehensions will continue to exist but one thing is for sure, with the future of smart TVs and newer mobile and tablet devices launched almost every week, the impact of a responsive mindset and methodology will only grow.
Read the Responsive Design Approach from the Boston Globe Team