How to handle various media when publishing across multiple platforms

(Note: I’m using some screenshots here for illustration purposes, not as examples of easy ways to transpose items across platforms. Avoid screenshots if you can.)

Publishing on multiple platforms means being conscious of where your content will sit when it’s published, and what your content can do on the medium it lives on.

image

Capability – Connectivity – Continuity

Three of the biggest shifts you’ll have are based on capability (what devices can do), connectivity (does the device have a web connection) and continuity (is your content a static bundle or can it be updated live).

Failing to consider these factors as you distribute your content in multiple formats across multiple platforms can lead to broken content, confusion, and a poor experience for your reader.

Most media will cover more than one of these factors – for example, an embedded twitter timeline will require a live connection to pull in the account’s tweets (connectivity), and a browser to handle the embed script (capability).

A YouTube embed requires a web connection to play the video (connectivity), and a device that’s capable of displaying video (capability).

Paved with Good Intentions

No matter what tools you are using and what fallbacks you implement, it’s important to remember the intention behind the media you are using, and what you are trying to communicate with it. Use this as a basis for finding the best solution for your reader, rather than what seems technically cool, or quick but lazy.

What to do with.. CAROUSELS

Carousels can work well on wider screens (though they are often abused), but on smaller screens (for example mobile) they can be tricky to navigate, and can be easily missed if the reader is swiping quickly down their screen.

You can use CSS and javascript to work round this, by, for example having a stacked layout for your carousel slides below a certain width, and then activate the carousel above a certain width/height, or by being more mindful of how you position your controls.

image

The above example centres the arrows and dots for wider screens, and then moves them below and to the sides, so they are easier to see and hit on smaller screens.

image

The above example converts a numbered carousel to a stacked list while hiding the interactions, once the screen goes below a certain width.

Also, make sure devices with little or no javascript/CSS abilities don’t make a mess of your carousel component layouts.

What to do with.. VIDEO

Video is fairly easy to handle – if a device cannot display a video, provide a fallback image for the video (so they get an impression of what they can expect), a description of the video, and a link to the video so they can watch it later, or get out their laptop and look at it straight away. You might want to consider using a custom url shortener for your links, to provide some consistency and branding.

Video

Fallback

image

View this image on YouTube: http://www.youtube.com/watch?v=3DSgsON3u8E

(Note that you should also be providing captioning and transcripts for your videos if at all possible to help improve accessibility – these transcripts might also be useful as bonus material in your publications, much like DVD extras.)

Tip

A handy way to get a decent-size YouTube preview image is to go to http://img.youtube.com/vi/$VIDEOID$/0.jpg, where $VIDEOID$ is the ID of the YouTube video (the bit just after http://www.youtube.com/watch?v=)

What to do with.. CHARTS

Using Google Charts or a similar charting tool? They allow you to create really interesting, interactive charts that work on most modern browsers.

Interactive version

//


Static version

image

Using an image to fallback to ereaders that can’t use embedded scripts should work in most cases, as long as the text remains legible at smaller sizes. Google have deprecated image-only charts (though you have until 2015) so an easy solution is to grab a screenshot from the browser version.

Watch out for

  • You can’t push out live data to static charts, so make sure to label and caption charts to avoid confusion.
  • Black and white screen? Make sure there’s sufficient colour contrast, or use patterns instead.
  • Resolution – line graphs may not translate well on low-resolution screens.
  • Again, think of the intention – if your message is very time-sensitive and will date quickly, think about effective ways to cater for that, such as being explicit about the nature of data, and providing ways to find more up-to-date information.

What to do with.. CALCULATORS

Calculators can be useful tools to help personalise a concept for a reader, and tell them a story that’s related to their circumstances. For example, you might be trying to help people save money at home by changing to energy-saving lightbulbs, so you build a widget like the following: Residential Energy Calculator

image

How do you recreate this widget for say, an ereader, or for a device that doesn’t have flash or the ability to add a form?

Let’s look at the intention – we want to educate people about saving money, and we want to make it personal. So for the not-so-fancy devices, we can replace our widget with a table of the most typical results for the average household, to give the reader a reasonable approximation of what savings they could expect – simply create a table or list of the most typical cases, so readers can get an idea of how it would apply to them.

What to do with.. TWEETS

Twitter prefer that you use their embedding tool when publishing tweets on the web, as it enables counters and functionality for the reader. The code supplied from the embed will give you a neat quote for devices that don’t have javascript, so there may not be a need to worry to much about fallbacks.

With script:

Without script:

Are you headed to Books in Browsers IV in October? The schedule has been posted – some great talks! http://t.co/YHCoCiYJfR

– woop.ie (@makewoopie)

Tips

  • Don’t use screenshots, they are ugly and not text.
  • Check if you need to use a certain reference system, as some style guides are bringing out catering for Tweets, e.g. MLA Tweet citations

Leave a Reply

Your email address will not be published. Required fields are marked *