A Sassyass Site for my Sassyass Friends

I finished something. Holy crap, in this hectic chapter of my life where I’m working 7 days per week, I actually finished something. I made a website for my friend’s coffee cart business, Sassyass Coffee. Fair warning: this is mostly a techie post. I’m going to talk about making the site, not about delicious coffee.  🙂

Seriously, I built it and finished it and then I even launched it. Look, I have proof. Here’s a screencap.

Sassyass Coffee website

The primary strength is its flexibility. You can see it on a device of any size.

Seriously, this is a real website that I finished. Mark your calendars. It’s a one-pager, but it works, dammit! I guess this is where I nerd out over what I did. There are a few little tricks in this one, so it’s worth a look.

First of all, it’s responsive

That’s the latest new craze for the cool kids… or so your marketing department would have you believe. It’s actually been around for years now. Many us web developers have been pointlessly trying to get our jobs to step out of 1995 and use something that isn’t covered in rust, but there has been no joy. Until recently, there hasn’t even been hope. But now Google is adding points for site that are mobile-friendly, which is a nice way of saying that old-school sites are going to lose points. If you’re wondering how your site stacks up, you can drop the url into this tester by Google.

Mobile-Friendly test for sassyass.coffee

Yay! Perfect score!

For web developers at a day job, this means that we get an urgent message from the marketing department demanding that we should immediately “make the site responsive” for better SEO and conversions and synergy and stuff. Also, they found a JavaScript snippet on a marketing blog this morning and they want us to load it into the head of the company site before any content comes along so converters can convert more conversions. Oh and by the way, we need to do something about our page load time because Google’s page speed test is giving us a bad score. Something about 200K of JavaScript loading into the head…

Of course, you can’t just make a site responsive. You have to build it that way from the beginning, preferably with mobile as a first priority. Demanding that an old-school site suddenly become responsive is kind of like handing someone a can of spray paint and telling them to convert a truck into a motorcycle. Sometimes you can get away with a sort of sledgehammer approach to sort of make it work in the short term, but in the end you have to rebuild.

But hey, at least the marketers are listening to us now, right? Well, not really. This whole “responsive” thing is brand new, and changing up is all their idea! Yay!

CSS3 transitions

I’ve worked in a few places where jQuery is exclusively used to move things around, because that was normal when the UI was written. But we don’t have to do that anymore. We can do some swanky things with CSS3 transitions. Anything that needs to slide around gets a special class called trans-left or trans-right or trans-padding or whatever. Whenever those CSS properties are changed, the elements take a bit of time to change instead of just popping into their new positions. For example, if an element changes its padding when you click something, it will take a quarter-second to change if you use the class from the snippet below.

.trans-padding {
    -webkit-transition:padding .25s linear;
    transition:padding .25s linear;
}
/* NOTE: CSS uses whole seconds instead of milliseconds. */

That stuff handles most of the movements on the site, but the scrolling from the navigation is still handled by jQuery’s .animate() method. (This thing scrolls to sections instead of navigating to different urls.) I probably could have managed things with vanilla JavaScript, but jQuery just has too many useful methods to ditch it just yet. I’m using jQuery 2.x, by the way, because it’s smaller, it’s better, and IE8 can go to hell.

Anyhoo… the neat bit here is the .menu-open class, which gets added to the body. That controls… well, you know. That one class is added and subtracted with JavaScript, and CSS takes care of moving things around. So the UI can be affected by the size of the window or by JavaScript, but the heavy lifting is always done by CSS.

Throttled resize functions

I’m using Ben Alman’s throttle/debounce plugin to run some functions on resize without blowing up the browser. With that, I keep things down to once per quarter-second. I’ve also got some JS variables set to match my CSS breakpoints, so I can keep things in sync. For example, I have a sticky footer with a dynamic height. That’s handled by my resize function. No matter what kind of content I need to put into the footer, it will all be okay. And if I need to remove the .menu-open class when we get to the smallest size to reset the UI, then that’s okay too. Those variables are at the top of the JS file, so they’re easy to change in just one place if I ever want to change the CSS breakpoints.

Nifty icons with Font Awesome

One thing I’ve always hated doing is finding some way to plop a Facebook or Twitter icon into navigation. I usually ended up with background image sprites, which were fine until something needed to be changed. Then it was back to Photoshop, or maybe Illustrator and then maybe also Photoshop… ugh. But now we have icon fonts, and they’re supported pretty well aside from older versions of Internet Explorer, which can of course go to hell.

There are various icon fonts available for just any old person to use out there on the Interwebs. (There are paid ones too, but I don’t mess with those.) For this project I chose Font Awesome. It brings in bunches of icons as a font, so they can be styled for color and size and whatever else you would style text for. It’s extremely handy for social media icons.

My only complaint is that web browsers still don’t agree on file formats. It’s kind of like video, really. We have to serve up several different versions of a font and the browser will just fail until it gets to the one it can use. This is harmless, but it does leave errors in the console. Sadness.

But whatever. The font files aren’t that big and the browser only loads the one it needs. I could have hosted them myself, but I suspect that Font Awesome’s CDN gets a lot of use so I just linked to that in the hope that most folks would have it cached already. There are other advantages to a CDN, especially when we’re talking about jQuery, but that’s another article.

Inuitcss

Lastly, I feel a need to give some props to the framework I used. It’s called inuit.css, and it’s fantastic. It was developed by a very helpful fellow named Harry Roberts. You might know him from his blog, csswizardry. I strongly suggest that you check out his blog if you haven’t already. There’s a reason why people hire this guy for consulting gigs. And while we’re learning stuff from friendly experts, we would also benefit from reading anything that Nicole Sullivan writes. It’s also a good idea to follow her on Twitter. Her handle is @stubornella. Fun fact: if you look in the docs for the media object in inuitcss, it’s credited to Nicole. She made the Internet a better place when she invented that particular gem.

/*------------------------------------*\
 $MEDIA
\*------------------------------------*/
/**
 * Place any image- and text-like content side-by-side, as per:
 * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 * E.g.:
 *
 <div class=media>
     <img src=http://placekitten.com/200/300 alt="" class=media__img>
     <p class=media__body>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div>
 *
 * Demo: jsfiddle.net/inuitcss/cf4Qs
 *
 */

But back to Harry and inuitcss. I could go on and on about why it’s so cool and why I generally prefer it over Bootstrap for most situations, but someone else does a much better job of explaining it so I’ll just recommend his article. I’ll also point you to the inuitcss kitchen sink, so you can see all of the goodies contained within the framework. With inuitcss, you end up with a much smaller CSS file than Bootstrap produces. But to be fair, I still use Bootstrap quite a bit. Sometimes I’m just experimenting with JavaScript and I don’t want to mess with design. For those occasions, Bootstrap is a big help.

So… I guess I’m done now. Be sure to check out sassyass.coffee if you’re going to be in Charleston South Carolina. They’re going to be operational soon and I have a feeling that they’ll become a standard subject of tourist photography. I mean, who wouldn’t want to show off an espresso machine on a bicycle?