3 Key Rules in Designing for a Multi-Platform World

Over the last five years, we’ve become witnesses to how modern technology has grown and brought changes to the world that we never thought would ever by possible a decade ago. Take for instance the emergence of mobile and interactive media where connectivity seems the order of the day from the moment one wakes up to the time one sleeps. As companies create multiple interactive platforms and systems to bring gorgeous digital experiences to the way we interact with people and objects, the challenge to adapt becomes more and more daunting.

A relatively new design concept that have the industry talking about for years now is the responsive design for the web. The philosophy behind this “design trend” (but looks it’s here to stay for long) is really about making a single website that renders or adapts well to multiple browsers and devices that the users are using.

For brands and companies, this means more freedom that they can give to the intended users to access and interact with their site content or digital branding initiatives such as social media or web marketing campaigns. When used properly, brands no longer need to just concentrate on providing desktop experiences while leaving other platforms aside.

Responsive web design enhances the use experience without having to compromise accessibility of the brands’ content because the experience is expanded to as many devices as possible. Thus, brands position themselves more positively among their target audience.

While saying seems easy, doing is actually the difficult part to creating a really responsive interactive experience. The process of creating a really responsive web design necessitates the designer to be always conscious that his work will be displayed in multiple formats. This process also demands that the interactive or user experience designers be able to use all the information to adapt to a single unified template made using the simplest code possible until the content is displayable on devices, even of those that have fewer capabilities.

Thought this was easy doing? Definitely not. Here are few design processes and tips that we can adapt to help you design your responsive design for the web.

Planning.

FastCoDesign site’s Miller Medeiros and David Vale talked about the recent changes that a multi-platform and multi-device world has brought in the way humans use technology. Medeiros and Vale listed their four responsive design processes and like how the old design processes are developed.

Planning, which they stressed are necessary to creating an efficient and responsive design, is what we’d like to highlight in this post. The old design process when the layout is based only on a fixed viewport size can no longer be applied to the new, responsive design. Plus, designing to every single size is not that simple.

Medeiros and Vale suggested that “it’s easier to design as few breakpoints as possible and then interpolate the layout between these breakpoints,” then added that the layout will be grid-based, the grid must make sense on smaller to bigger screen and the grid size can flexibly adapt.

As most designers agree, the best way to start designing a responsive layout for the web from the mobile version, where the smaller screen will best indicate what content and features to prioritize in such screen. Responsive web designing is far far different from the old design that only considers users using their desktop devices. Medeiros and Vale advised that since priorities change, “the content needs to be much more clear and concise on a mobile version than on a desktop.”

Prototyping.

We’ve come across this interesting slideshow presentation from Slideshare from mrscammels who talked about prototyping for responsive web, which the account deems the future of the web as the old design processes are aleady unsuitable and inefficient.

Prototyping helps define and discuss functionality and interaction in a realistic way while mindful of making sure that layouts scale or work responsively to multiple devices. Compared to immediatley jumping to the actual development, prototyping provies a quick and easy way to produce and amend the proposed responsive design layout or the proposed content priorities.

Also with prototyping, which can be used to introduce the project to the client, the same can then get a glimpse of the design that will allow for a fair decision-making as clients immediately get to see the proposed responsive web design, its adjustments and adaptability to different screen sizes for enhanced user experience.

Simplify.

The simpler the better is an old adage and may already be a cliché. But keeping the design simple is and will always be in as this gives bigger chances to render the site work well across the different platforms and devices.  In simplifying the design, there is the need to identify the technical limitations in order to design the interaction and complexity of the layout that will help improve the user experience.

Medeiros and Vale suggested: “The amount of breakpoints should be kept to a minimum, since each new breakpoint makes the system harder to test and maintain–especially if each breakpoint changes the design drastically and relies heavily on JavaScript to work.”

Finally.

Designing for a multi-platform, multi-device world may be an exciting new terrain for everybody. But like anything else, there is definitely no single rule that will apply. What’s altogether more important is to be mindful of the people who will use the device. The users are the end users and they deserve to experience the best of our brands.

User interaction and user experience is an ever evolving terrain where designers will always have to keep a tight watch of the latest trend and what’s changing. Until next time.

Please share us your thoughts and experience how you design for mobile.