Default Avatars with Username Initials

Snippet Ruby on Rails Bootstrap CSS

Last updated Feb 19, 2016

Many apps are moving away from static image default user avatars and instead building more personalized images using the initials from the Username. The most notworthy company to make the switch to initial avatars was Google and it really makes a big different in the ascetics of their apps. Other notable companies that have implemented these hip new avatars include Fiverr, Shopify, and Yahoo, just to name a few. And after this lesson, you can too!

Initial style avatars have several benefits for the app developer.

  • More personalized for users, i.e. better engagement
  • No default images to deal with, 100% CSS based.
  • Cooler looking comment feeds
  • More responsive for mobile. Again, it’s just CSS.

Lesson Resources

We’re using Rails 5 on the backend here, but that’s pretty much irrelevant. This can be implemented on any backend easily by just using some identifier from your user, such as the first two letters of their username, email, or first and last name.

Lesson Checkpoints

1. CSS Styles for the Avatar

Rather than use a PNG image for the avatar, we are going to design it purely from CSS. First, lets make a circle. All we need is a div with equal width and height and a 50% border radius.

avatar.html


<div class="avatar-circle“>
  <span class="initials”>JD</span>
</div>

avatar-style.css


.avatar-circle {
  width: 100px;
  height: 100px;
  background-color: $brand-special;
  text-align: center;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

Now here’s a little CSS tip for aligning the text perfectly within its parent container. We set the position to relative, then we set the top position at 25% of the parent (25px in this example), then set the font-size and line-height to 50% of the parent (or 50px). This should always work perfectly with a monospaced font family, but you may need to make some slight tweaks with other fonts.


.initials {
  position: relative;
  top: 25px; /* 25% of parent */
  font-size: 50px; /* 50% of parent */
  line-height: 50px; /* 50% of parent */
  color: #fff;
  font-family: "Courier New", monospace;
  font-weight: bold;
}

2. A Sassy Mixin for Responsive Avatars (Optional)

Since this design relies on a fixed set of ratios to determine sizing, we can programmatically create new CSS classes that will look great at any size. Use the mixin below to create responsive avatar sizes that will maintain the perfect proportions. You can also add to this mixin for further customization, such as different color varieties.

avatar-style.scss


@mixin avatar($size) {
    width: $size;
    height: $size;
    background-color: $brand-special;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;

    .initials {
      position: relative;
      top: $size*0.25;
      font-size: $size*0.5;
      line-height: $size*0.5;
      color: #fff;
      font-family: "Courier New", monospace;
      font-weight: bold;
    }
}

.avatar-circle      { @include avatar(100px); }
.avatar-circle-sm   { @include avatar(50px); }
.avatar-circle-lg   { @include avatar(250px); }

 

multiple avatar sizes mixin

3. HTML and Ruby Code to Display the Avatar

Since we’re using Rails, were going to add the avatar to a partial so we can easily reuse this code throughout our application. Our app has a User with a username attribute. We are simply going to grab the first two letters of the username by using a range on the string between the first two characters, then making them uppercase. 

views/users/_avatar.html.erb


   <div class=“avatar-circle”>
     <span class="initials”>
       <%= user.username[0..1].upcase %>
     </span>
   </div>

If your rails app allows users to upload their own images, then you might want to throw in some conditional logic to display the correct type of avatar. This can easily be achieved with a helper method like so.


module UsersHelper

  def show_avatar(user)
    if user.image?
      image_tag(user.image_url, class: 'avatar-circle')
    else
      render partial: 'shared/avatar'
    end
  end

end

users_helper.rb

Then you can just call the following in your view files


<%= show_avatar(@user) %>

That’s it. You now have default User avatars that are on par with Google! 
 

Comments