Update – 10/9/2014

This post has been moved to Design DriveThru.

Ever use Spotify? It’s been around for many years now but just two months ago it landed here in Philippines – making everyone curb their Aegis hunger and making Spinnr spin out awesome gimmicks.

Circular images everywhere

No doubt that the traditional rectangle image has lost its edge literally. CSS border-radius enabled designers to carve the sharp edges into rounded corners. And take it to the extreme, the corners vanish and the shape becomes a circle.

Spotify’s app presents album and artist covers in a circular manner with the same picture faded in the background.

This is what we’ll recreate using HTML and CSS.

What we need

1. The purpose

   Our purpose in this study is to show that content structure comes first than visual design.

   First of all, I am suggesting that most images are representations of something more substantial – like words. They are figures that help the readers visualize the subject of the text. Think of the Bible – it simply stands alone with all those text and it’s a bonus to have illustrations (images as helpers to texts will be another topic).

   Dammit. I just want you to show me HTML and CSS.

   • Should the image be portrayed independently from the title? Meaning, do we have to translate/describe the image thru a caption?

     If yes, we’ll use the img element

   • Do we simply need it for visual design purposes – in other words – without images, could we still convey the important information about the title and its functionality to link to a page?

     If yes, then we’ll use any existing element that the content structure will provide.

   Let’s choose the latter.

2. The image

   In our study, we’ll use our favorite 90s pop band, Eraserheads (it’s OK even if Buddy’s uninterested). What we need is the most recent representation of the band’s togetherness.

   

   Source: Day Cabuhat’s Instagram

The tools

HTML and CSS are our main tools to replicate Spotify’s Album cover style. Here is the complete concoction:

[codepen_embed height=”399″ theme_id=”1820″ slug_hash=”liuax” default_tab=”result”]See the Pen Spotify’s Album Cover by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]

To explain each detail of the approach:

• The structure (HTML)

  Not to be confused with layout, the structure pertains to the arrangement of content according to importance – what do you see first, what do you see last?

  Given the purpose of using the images for visual design (and to not contain any independent information like a caption), our markup does not contain any img element.

  • We used a element to link to the item’s (album or artist) main page.
  • We “named” it class="item-link" to describe the component’s nature – it is an item link however you would look at it.
  • We added the class artist-item-link to be more specific about the class of that component. This would be useful by having a hook on all items which are artists (and albums for that matter).
  • As for id="artist-eraserheads", we need this to serve a specific thing only for the Eraserheads item – an image cover for this matter.
  • span class="label" enables the component to be flexible enough. It separates the linking mechanism from the text label. This makes the two independent from each other when it comes to styling.

• The style (CSS)

  The stylesheet can be further broken down into two, namely: style layout and style theme. Style layout is basically size and positioning while style theme is typography and colors.

  First, we start with the most generic item, item-link.

  • item-link contains everything, so we define its dimensions at 20rem (16px * 20 = 320px). It also acts as the base layer that has the background-color.
  • We attach a before pseudo-element to item-link to contain the background-image that is transparent (which makes the background-color underneath blend in).
  • Then we attach an after pseudo-element to contain the foreground image. It becomes circular by applying border-radius: 50%.
  • Since the foreground image’s size is smaller than the container (set at 90%), we need to position it at the center by using the technique of absolute positioning the element at 50% top and 50% left and offsetting it with negative margins half the size of the dimensions.

    Too much mumbo-jumbo? Here’s what I’m referring to:

[code lang=”css” title=”CSS”]
.item-link .label {
position: absolute;
top: 50%;
left: 50%;
margin-top: -45%; /* To offset, must be negative and half of the height */
margin-left: -45%; /* Must be half of the width */
width: 90%;
height: 90%;
}
[/code]

Lastly, we attach the actual background-image using the id of the artist.

Browser Compatibility

• border-radius
• background-size
• pseudo-elements
• opacity
• rem units

Notes

• You may use an image smaller than the container dimensions – say a 180 x 180px image; background-size: cover would ensure that the whole container gets covered by the image but it will be pixellated since the image will be stretched to fill-in.
• Using a too large image would be wasteful of bandwidth and is not optimized for mobile device usage; use just the right size based on the container size, image quality and file size.
• Lastly, we demonstrated we can achieve a relatively complex visual design by simply using only what needs to be there – in this case, the link and the label. We did not put any additional div which we, otherwise, would if we based the HTML markup on visual design (instead of treating them independently).