Case Study: Making the BLK HRT Splash Page
We've been doing a lot of "theory" work on this site lately, so I wanted to put some of our lessons to use in the real world. Recently, I was approached by Logan Seidlik of Logan Seidlik Creative & Design to develop a splash page for BLK HRT Salon & Supply. He wanted a simple site with minimal animation. He supplied the graphics and images and asked me to put it together for him. It was a simple project so I thought I would turn it into a case study.
Setting Up The HTML
The image above shows two things. On the left is Logan's design, and on the right is what I saw when I looked at it. I've talked about the "box model" of websites before. All websites are just boxes inside boxes. While these boxes are not exactly how they look once we complete development, it gives us an idea of what to build for. We need a "main" wrapper, with a heading, a picture, a paragraph, a button, and then two links. Let's code that.
At first glance this HTML looks fine, but we are going to run into an issue styling those three links at the end. Since the "two links" are for social media, and "a button" is a button, let's put the "two links" in a list, and give them both classes.
So far it doesn't look like much, so let's get adding some CSS.
Getting Started With CSS
The first thing we need to do is see what kind of fonts we're using for this site. Thankfully, the site is using both Montserrat and Open Sans fonts, which can both be found on Google Fonts. We can either link to them or import them. Linking will allow other styles to load but may cause "font flicker" (also known as "Flash of Unstyled Text"), while importing stops the other styles from loading. Since this is a really simple site, we're going to import them.
Next we are going to set up some CSS custom properties (variables). Most of the colors on this site are pretty simple, with there only being green, black and white. We will also add our fonts to this:
(You're probably wondering what --green2 is, and why it's so different. It's an rgba value and we are going to use it for some transparency later.)
Next we will be resetting our CSS styles so that the site looks the same across all browsers:
Before we go further, we're going to add one more thing. Few sites do this, but I like to do it to make sites a little more "custom". You can add a highlight background and body copy colour to text. I added it to this site, as well as the BLK HRT website. Here's where we are so far (and no, the text isn't "missing", it's just white. Try highlighting it!).
And now we are all set up! Let's get to the fun stuff!
The "Fun Stuff"
If you tested the code above, you wouldn't be able to see the text because it's all white. Let's add a background to the
<body> tag so that the text will show up again. We'll fully cover the page with the background image, and we will set the body to be the full size of the screen with vh.
Next, if we look at Logan's design, we see all the content is aligned in the middle of the page, both vertically and horizontally. Horizontally is easy, but vertically is tough. To do this we are going to use CSS' transform styles. We will move the element 50% from the top and left, and then transform it -50% back. This will put it right in the middle of the screen.
Now that we have the background in place, let's start styling the heading. We aren't doing anything too fancy here, except using the CSS variable. We will also style the image and paragraph here, since it's fairly straight forward.
Next we are going to style the button. This is one of the few "interactive" pieces of the site, so we want to make it a little more inciting for the user to use. When the user hovers or focuses on the button, we want the text color to change from white to green. For this, I went with a simple color transition that changed in a linear fashion for 0.25 seconds:
Finally, let's style those social media links. This one isn't very complicated either.
Putting it all together (Part I)
We've done a lot here, so let's put it all together and see how it looks
Looking good! But there's one more piece we need to add. Logan told me not to get too fancy with this site, but he didn't say I couldn't have some fun with it. The "BLK HRT" logo has an underscore, so let's animate it!
Animating the Underscore
We can't animate a .png photo like this, and while we could animate an SVG, this isn't a good case for an SVG. Instead, since we can't animate it, we need to animate something around it. The obvious answer is to style the :before or :after pseudo-elements. Unfortunately, we are using an
<img> tag, and that's one of the few elements that do not allow pseudo-elements. To work around this, we can wrap the
<img> in a
<figure> tag. We'll have to jive around some of our CSS then, so let's update everything:
Now it just looks like the underscore is gone. To make it reappear we need to add some animation to it. Sadly, we need to include vendor prefixes so it works in old Safari browsers. Our animation will be named "blink" and will loop infinitely, every 1.5 seconds.
Putting it all together (Part II)
Okay. Now that we have an animation, how does it look with everything else?
That looks awesome!!! So we're done, right? Not quite. If you have a small screen, you're probably having trouble seeing everything. One trick we could do is use a media query that checks if the window height is big enough to show all the content, to un-transform the content. However, normally screens aren't that short unless the user is on mobile (or in this case, a pop-up window), so let's check for a narrow screen instead. In this case, I'm checking to see if the screen is less than 800px wide:
Logan sent me a separate design for tablet and mobile, with some smaller fonts and some size adjustments, so I actually ended up using two different media queries instead.
Putting it all together (Part III)
We've put a lot into this site so far, so let's do a quick recap of all the CSS3 technologies we used:
- font @import
- custom properties (variables)
- vh measurements
- media queries
While not all of these are technically CSS3, each has a new element that can be brought to the design table. We can now use custom fonts, change styles on the fly, easily have full screen background images, animate our CSS and design for mobile. So, without any further discussion, here is the final product!
Realistically, it probably took me longer to write this article than make the site. While we used some new CSS technologies in this case study, we didn't get too crazy with it and left things fairly simple. This was a good example of how you don't need thousands of lines of code to make a good website, and you don't need all that much HTML either.
After we launched the site, I added one more line to help CSS properties polyfills work in older browsers, like IE and old Safari.
Now it should work across all browsers!
That concludes the case study of the BLK HRT website. What did you think of it? Do you have any questions? Feel free to ask them in the comments and I'll do more of these in the future if you enjoy them!