Typography is 95% of the web… but that’s what it was like when we were surfing the web on Gopher as well and it didn’t mean it was a nice experience. What has greatly improved the uptake of the web is clearly Cat Gif’s and YouTube videos of people hurting themselves: but how do we deal with these on responsive sites?
Before we take a look into this a little further lets define what we mean by media
- Images
- Videos
- Embeds
- iFrames
- Objects
Essentially we are saying anything that is content that is not part of the HTML text is considered to be media.
What is the Media purpose?
From a strategy point of view you should be focussing on the content itself. Ask youself with each of your pages or content types
- Is the media just there for decoration (are they just post thumbnails of stockphotos)
- Does the media add weight to the point of the page (does it help convey the page content purpose)
- Is the media the central point of the content (think Facebook, Flickr, Instagram, YouTube
The answers to those questions will help you decide how you need to approach them from a mobile first responsive design approach.
Decoration
If the media is just there for eye candy then I’d consider leaving it out or changing your approach to images on your site. The image should offer some kind of visual clue as to what the content is focussed on and improve the overall webiste/reading experience.
Contributes to the story
If you are starting from a desktop site you need to pay particular attention to how the media reflows into the mobile viewport and ensure that it still maintains the flow on the content on the page. The media can sometimes appear in a sidebar section relating to the top of the article, but be pushed to the bottom of the article when the single tube of content is rendered.
Also if you’re floating the media to the left or the right on the accompanying text make sure you get the HTML source order correct so you get the related story text above or below the media (depending on which way helps the readability of the content).
Is the story
If you’re looking at something like Flickr or YouTube where the media is the website content then you’re going to want to focus on mobile first and the performance. You need to make sure you’re not serving the same image/video to a mobile device on 3g connection as you are to a 27″ screen on cable internet.
