How To Develop Interactive Content Across Multiple Platforms

Multiplatform publishing bolsters your position as a forward-thinking brand or publisher who understands the intricacies of multiple channels and uses them to deliver messages to your target audience.

Among the most crucial aspects of cross-platform success is content design that plays well in a variety of devices. That includes remembering the differences between desktop and mobile applications, and relying on both user and expert feedback. With the pace technology is updating and developing solutions for practically anything, staying relevant on the digital space is no easy task. But, attention to how interactive content is created in multiple devices will help ensure your publication or any other project reaches your target audience.

In this post, we feature Firstborn‘s Senior Developer, Miller Medeiros, and Art Director, David Vale’s four simple rules to consider when building a digital project and creating its interactive content across multiple channels. These rules help not only in developing cross-platform content but also in ensuring you successfully meet the goals you’ve set for your title or brand.

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.

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.

Read full article on Fast Company.

Trusted by publishers and content providers worldwide, Realview can offer you all of the digital publishing tips, tricks, and tools needed to successfully catapult your brand into the digital space. Let’s sit down to discuss how we can help you.