Let's Build: A Consultancy Website - Part 25

Coding the About page (Continued)

Part 25 of my Let's Build: A Consultancy Website series continues on the About page.

The design calls for a brief call to action and image of Alyssa herself for people to better identify who they might be working with. This section is treated like a bio of sorts but offers a citation and quote from Alyssa herself.

Coding this section is fairly straight forward but I had to get creative with positioning the image of Alyssa so it both looked like the design and scaled decently for other devices.

Serving retina-ready images as background images

My goal for all background images is to create a sass mixin for retina-ready screens. At specific resolutions, different images will be served to the user so they appear sharp no matter what device you use.

That mixin I mentioned looks like the following code:

@mixin image-retina( $filename , $extension, $width , $height ) {
  background-image: url($filename + '.' + $extension);

  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    & {
      background-image: url($filename + '@2x.' + $extension);
      -webkit-background-size: $width $height;
    }
  }
}

Putting this to use looks like this:

#myElement {
  @include image-retina('path/to/image','png', 1000px, 500px);
}

We pass a few arguments through to the mixin and in return it outputs media queries and other CSS specific to devices with a higher pixel ratio (retina).

You'll notice I pass the path to the image separately from the image extension. Doing this assumes you have another image at retina size with a @2x attribute added to the filename. Some "prep" is required for this all to work nicely but you can make it adapt to your workflow and cover all your tracks when it comes to retina screens.

Download the Source Code for this Project

Source Code

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13
• Part 14
• Part 15
• Part 16
• Part 17
• Part 18
• Part 19
• Part 20
• Part 21
• Part 22
• Part 23
• Part 24