Paul Murphy
Product Designer

Mobile First Media Objects

The media object is an OOCSS module that consists of an image to the left and related content to the right. First coined by Nicole Sullivan, the media object was introduced so developers could abstract this common design pattern into reusable blocks of code that are flexible enough to accommodate many different content types in the right hand column.

The media object pattern

Room for improvement on mobile?

Almost every project I work on uses some form of media object, However as I’m designing and building most of my projects mobile first these days, I find that the default two column design can lead to an overly short line length on mobile devices. This makes for an unpleasant reading experience in some scenarios.

I’ve seen this issue being handled by simply stacking the image above and the content below when available space becomes narrow, but I think we lose the relationship between the image and the associated content by doing this. If all content is displayed in a linear, single column fashion (as is commonly the case on mobile devices) how do we establish a connection between an image and it’s related content?

The challenges of media objects at narrow screen widths. Left, Bootstrap and right, Pattern Lab.

Some suggestions

I’ve been experimenting with adjusting the traditional media object pattern at small sizes so we can maintain the relationship between the image and the content. Take a look at this Pen (you may need to resize your browser window to a narrow width):

See the Pen Mobile First Media Objects by Paul Murphy (@88paulmurphy) on CodePen

Structure or skin?

Some may argue that some elements in the above examples (such as the arrow) are design flourishes and fall under the category of skin or visual styling, and therefore it would be incorrect to add these to the media object default structural styles, but I disagree. Without these small amendments, we lose the context between the two elements at narrow screen widths and the pattern ceases to make sense. For this reason I think these additional styles should be considered integral to the structure of the pattern.

The media object by definition is flexible enough to hold images and content of varying dimensions and types, so the above examples may not be a one size fits all solution. However these are just a couple of different options for media objects that don’t have an overly short line-length and also work on devices regardless of screen width.