Media Objects

What are media objects?

A media object is a container that displays an item, such as an image, audio, or video, next to descriptive text or other content. Created by Nicole Sullivan in 2009, media objects allow for clean and efficient layouts that involve fewer lines of code. 

Media objects are common user interface (UI) features on social media sites or in comment sections where they present an icon or photo alongside commentary. However, media objects are relatively flexible; instead of text, they can include bulleted lists or other media objects.

Developers use application development platforms to design and build software applications and website builders to develop sites for companies. They use these platforms to input and display UI code to create media objects and other containers.

Elements of media objects

When developers code a media object, they have many options for items to include in the layout. A media object can contain any of the following elements:

• Images. A photo or avatar is a common addition to a media object. These images can be in various file types, including JPG, PNG, and GIF. 
• Video: To create additional interest in a media object, the developer can embed MP4 files.
• Audio: It’s possible to attach an audio file, which can be played, paused, or stopped within the media object.
• Heading text: Not all text in a media object has to be the same size. Instead, developers can use a line of bigger, bolder heading text above the body text. 
• Body text: Most media objects include descriptive text on the right or left side of the image, audio, or video file.
• Nested objects: Developers can nest media objects within media objects. 

Types of media objects

App and website builder tools handle media objects in slightly different ways, but a few common presentations of media objects exist. 

1. Standard or basic media object. This type of media object is the most frequently used. It looks like a rectangular box, typically with a square or rectangular image on the left and text on the right. 
2. Aligned media object. Developers add code that specifies vertical or horizontal alignments. While a media object is typically top-aligned, it can also be center-aligned or bottom-aligned. The developer can also set the image to the left or right of the text.
3. Nested media object. This approach often occurs in comment threads. One media object sits slightly indented underneath a parent media object, giving the appearance of nesting. A string of nested media objects can continue indefinitely.
4. Listed media object. These involve two or more media objects with the same alignment, giving the appearance of a list.

Benefits of media objects

As part of object-oriented CSS, media objects have become foundational to many websites and apps. Some of the reasons for their popularity include:

• Ease of use. Media objects save developers hundreds of lines of code, sparing them time and frustration when creating user interfaces.
• Flexibility in layouts. With many options for included media and various alignment possibilities, media objects give web developers more choices.
• Predictability of patterns. Internet users have grown accustomed to the media object container from seeing it used across the web in blog comment sections and popular social network platforms. This pattern’s high visibility lends a sense of familiarity to users, especially on social media.

As you create a visually stunning app, don't forget to take mobile optimization into consideration.