4 Rules For Creating Interactive Content For A Multi-Platform, Multi-Device World

Miller Medeiros and David Vale of digital agency Firstborn discuss the principles of responsive web design and how brands should be thinking and creating beyond the desktop.

The interactive world is constantly changing, and the number of different devices that connect it all is growing every year. The problem that arises is that there are no rules for the game. As big corporations create new products with different systems and technology, it’s inevitable that we’ll have to come up with creative ways to adapt.

Responsive Web Design is not a new concept, but it has gained people’s attention in the past couple years as a good alternative to designing for different screen sizes and aspect ratios for all desktop, tablet and mobile devices. Put simply, responsive design is the creation of a single website with a fluid proportion-based grid that automatically adapts to users’ browsers and the devices they are using. This is not a trend—it’s the future.

"Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience." (Ethan Marcotte)

This means that brands now have more control over how users access and interact with their content. These are huge changes. Most brands focus on desktop experiences only and leave the other devices aside. Now, more than ever, consumers are interfacing with brands from anywhere and everywhere; often they are using mobile as a way to augment or enhance another branded experience. By compromising content accessibility, brands position themselves negatively.

Access is good, but it’s not that easy. As we are dealing with multiple platforms, we have to plan ahead and prioritize the content as well as the format that it will be displayed in, to users. In our opinion, that’s the biggest challenge for brands--prioritization. The next step will be to take all that information and adapt it to a single template using the simplest code possible, making sure that it will be displayable on devices that have fewer capabilities.

This is not a simple task for huge brands with countless products and services, but some brands like Starbucks and Sony are already catching up. They’ve both launched new responsive websites that adapt to all formats and devices, thus maintaining a great user experience.

Miller Medeiros

Another good case of responsive web design, created by Firstborn, is the new Mountain Dew website. We designed a site that brings together assets from across the Dew universe: action sports, music, promotions, product lineup and social channels. Beyond just making the design responsive, we created a personalized experience where users can also filter the content and display only what is most relevant to them.

During the design and development of previous projects at Firstborn, we learned some simple rules that should be taken into consideration if you want to target multiple platforms.

1. Plan Ahead

In order to create an efficient and responsive design, we must plan things properly. The design process is a little bit different than what we usually have with a traditional website, especially because we can’t base the layout on a fixed viewport size and there is no simple way to design to every single size. We’ve found that it’s easier to design as few breakpoints as possible and then interpolate the layout between these breakpoints.

"The grid, like any other instrument in the design process, is not an absolute. It should be used with flexibility, and when necessary it should be modified or abandoned completely for a more workable solution." (Allen Hurlburt)

If the layout is based on a grid, make sure the grid still makes sense on smaller/bigger screens and that the size of the grid can be easily adapted.

Most people agree that it’s best to start your grid structure from the mobile version, focusing first on the smaller screens with as few features as possible. That way it’s possible to have a "bare bones" version of the site that works on the oldest phones/tablets, and an "enhanced" version for the most capable browsers. On this project, we worked on both dimensions (desktop and mobile) simultaneously as we wanted to ensure the best experience for each view.

The relationship that a user has with a desktop is different than with a mobile, and therefore it shouldn’t be treated as the same. Priorities change, content needs to be much more clear and concise on a mobile version than on a desktop. A good example is if you access the Chase mobile site, it only gives you three options that are very clear and probably all you need. Review your priorities and only deliver the user what they’re most likely to want.

Remember that on tablets and mobiles there are no "roll overs" and most of the navigation elements that were designed for the desktop version will not work with gestures. Lately I have been noticing that we are blending some usabilities from across platforms. For example, the new mouse from Apple utilizes the scrolling references from the iPad and iPhone. This is a good trend, as sites should adapt to us and not the other way around.

David Vale


2. Prototyping is Fundamental

Prototyping is really important for testing, validating the grid size and making sure the whole structure will scale to multiple pages. Since we won’t be doing designs for all of the possible widths, it is much easier to set some of the breakpoints on the prototype itself. Prototypes are also a good tool to introduce the project to the client. They show how the design will adapt to different screen sizes and help determine the content priorities that lead to an enhanced user experience.

3. Keep it Simple

The simpler the site is, the greater the chance that it will work across multiple devices. Simple blogs are much easier to adapt than a complex interactive site. Technical limitations should always be taken into consideration if you want the best experience on the broadest range of devices. Sometimes we need to simplify the interaction and complexity of the layout to improve accessibility.

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.

4. Break the Rules

It is important to understand why a rule was created and if it really applies to your project. Sometimes a remarkable experience is the most important thing; don’t let these rules bind you.

Miller Medeiros is Senior Developer and David Vale is Art Director at digital agency, Firstborn.

Add New Comment

14 Comments

  • ambreen11

    Its very well written article. The rules are useful.I agree with your points. Its very helpful. Thanks for sharing

  • Stephan

    Responsive design is definitely where are be going, but in concert with that should be the notion that content should also be responsive. Too often, we see responsive design used without consideration for the different role content plays on each device. Brands try to shove everything from their web world into a mobile experience.  Now its even more crucial to have a true user experience lens on these experiences.

  • rowlandwithaw

    Nice article. and satisfying to see that the traditional rules still work whatever the medium.... i think Michelangelo, Da vinci, and probably Euclid worked in the same way! Plan, try it out, keep it simple and break rules when you need to (and you know why you're doing it!)

  • ourshopsale

    Vous seriez surpris de voir combien les idées que vous venez avec lorsque deux personnes ou plus réfléchir ensemble. Une fois que vous avez quelques idées dans le pot.
    Sacs Louis Vuitton Homme
    Attention à ces mythes. vous aurez tout ce dont vous avez besoin de mettre sur pied parfaite pour les fêtes. N'oubliez pas de garder à l'esprit ce serait amusant et attrayant.
    sac louis vuitton
    Le jus de créativité qui coule et se fera bient?t, résidents veulent un endroit spacieux et élégant. Pour un espace magnifique et un personnel serviable et professionnel.

  • Adastralinden

     I loved this article and the mountain dew site is amazing. I looked at it first with my browser (chrome) scaled back to phone size and it the experience is so interesting, then scaled the browser back to desktop. 

    Question: is this work all done in html5, or another development platform?

    thanks for showing it.

  • Andy Pyman

    this is a basic/dumb question, but can you explain what exactly you mean by prototyping in this situation? i can do some searching on my own but would appreciate the authors' perspective/explanation.

    thanks!  great article overall.
    -Andy

  • millermedeiros

    The "prototype" would be a simplified HTML of the layout (think of it as a working wireframe). The main goal is to make sure content
    structure, markup and breakpoints makes sense. It helps to spot things that could be
    improved earlier in the process, specially since we can try it out on multiple devices and validate with the client - before we spend too much time
    designing and developing the "wrong product".

  • Leo Santiago

    Great article Miller and David. We are developing a new website down here in Brazil, and  your tips are very valuable.
    Glad to hear about your great work!
    Best regards

  • Stephen Lee

    Nice article. I wonder if during the discovery phase do you focus on the Mobile User as a user? Or are all of your Users mobile "able". Reason I ask is that some sites have Apps, and some are also Responsive. I would be interested to know what your discussions were like with the customer (Brands)

  • millermedeiros

    We decided to go with a mobile-first approach for the Mountain Dew site because we knew we could deliver a good experience for the high-end devices (iPhone, Android) without the need of an app.

    Apps are great since they give us greater creativity freedom (better performance, more features) but we feel that the web is a better platform to publish content since it reaches a broader audience - URLs are shareable and crawled by search engines.

    PS: I tried to reply last week but for some reason I couldn't comment, sorry for the delay.

  • dylan conklin

    great article. did you use an open source framework for your responsive functionality or was it custom?

  • millermedeiros

    Since we wanted a very custom behavior (filter, sort, split the grid, animations, ...) and no framework provided that level of control, we realized that coding it from scratch would be easier and a better fit. Glad you liked the piece.