OMG! Rails Rumble!

Brad Grzesiak

Last weekend, three Bendyworkers and a Swink-person (Swink-ee?) participated in the Rails Rumble, a competition to build a web application in just 48 hours. Rather than hacking on the backend like I usually do, I ended up almost exclusively forging the frontend. In doing so, I came to further appreciate the sheer immensity of tasks required to polish a website until it shines. In short: turns out, UX is hard. But we’re pretty happy with the results. Behold: OMG! You Gotta See.

The <head> tag

Oh, the head tag. A lot can go in the <head> tag. Aside from the obvious <title> and CSS tags, I found myself finessing the contents of the <head> tag to do exactly my bidding. Here it is in all its (slightly edited) glory:

<head>
  <meta charset='utf-8'>
  <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
  <meta content='on' http-equiv='cleartype'>
  <title>Omg</title>
  <meta content='True' name='HandheldFriendly'>
  <meta content='320' name='MobileOptimized'>
  <meta content='width=device-width, initial-scale=1' name='viewport'>
  <meta content='' name='description'>
  <link href="/assets/application-[hash].css" media="all" rel="stylesheet" type="text/css" />
  <link href='https://www.gstatic.com/freebase/suggest/4_0/suggest.min.css' rel='stylesheet' type='text/css'>
  <link href='/assets/57.png' rel='apple-touch-icon'>
  <link href='/assets/72.png' rel='apple-touch-icon' sizes='72x72'>
  <link href='/assets/114.png' rel='apple-touch-icon' sizes='114x114'>
  <script src='/assets/modernizr.js'></script>
  <meta content="authenticity_token" name="csrf-param" />
  <meta content="[elided]" name="csrf-token" />
</head>

Let’s go through these one at a time, skipping the obvious ones:

<meta charset='utf-8'>

Even though we’re sending the charset and Content-type in an HTTP Header, we just driving it home here. Sometimes browsers just don’t want to listen to reason.

<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>

For those needing to use Internet Explorer, but wanting a better web experience, they can install the Google Chrome Frame extension. This tag makes sure the Chrome Frame is turned on.

<meta content='on' http-equiv='cleartype'>

This requests Mobile Internet Explorer to turn on Microsoft’s ClearType technology.

<meta content='True' name='HandheldFriendly'>

The HandheldFriendly tag lets our Palm- and Blackberry-wielding friends have a better experience.

<meta content='320' name='MobileOptimized'>

This one is for the Microsoft PocketPC.

<meta content='width=device-width, initial-scale=1' name='viewport'>

This one is actually quite important for most mobile devices these days. It tells the mobile browsers to render the page simply at the width of screen without any smart zooming. Smart zooming is amazing for sites that aren’t yet mobile-optimized. Since OMG! You Gotta See was designed primarily for mobile screens, we want to opt out of that functionality.

<link href="/assets/application-[hash].css" media="all" rel="stylesheet" type="text/css" />

I’m including this just to call out the [hash]. In reality, this is actually a 16-byte hexadecimal number that represents a hash of the CSS file. Automatically generated and incorporated by Rails, this helps browsers recognize when they need to ask the server for a newer version of the site’s style, increasing responsiveness.

This one is important to us, too. We envision OMG! You Gotta See to be used almost exclusively on mobile platforms and especially in situations where the user wants to quickly enter some data and put their phone away. By including these link tags, we provide a custom icon for users who choose to save a bookmark onto their homescreen.

<script src='/assets/modernizr.js'></script>

Modernizr, simply put, is the swiss army knife of determining browser capabilities. It also adds a shim for (ahem)misbehaving browsers.

As you can see, the <head> element provides a baseline for a vast amount of the user’s experience.

SCSS

By leveraging SCSS, we were able to make a modular design that responded to differently sized screens and differently abled browsers. For example, we wrote our base design targeted for a 320x480px screen. As you increase the size of the screen both horizontally and vertically, the design changes. Sometimes it’s subtle, other times it can be dramatic. A simple example of horizontal changes is the footer, whereas the front page exemplifies the vertical responsiveness. You can see how our responsive SCSS affects our home page with this handy tool.

SCSS also lets us easily use browser extensions and browser hacks for things like inline-block, rounded corners, and sticky footers.

Error Pages

Come on, you never expect your users to see an error page, right? I mean, your code is pefrect!

We all know this isn’t always true. Let’s just say that they only ever show up due to events beyond our control. In any case, we made sure to provide a Not Found and a General Error page.

humans.txt

As seen on Humans.Txt, we are people, not machines. This is something we can get behind, so we made our own humans.txt page.

We’re collecting your data on OMG! You Gotta See. You don’t have to give it, but we appreciate it when you do. To reciprocate that trust, we remixed the Rails Rumble Privacy Policy into our own policy and the Heroku Terms of Service into our own ToC. This might not seem like much… in fact, it might seem scary. But we tweaked these two documents to make sure our users are protected from us. We don’t intend to do anything nefarious with your data, but we wanted to put in writing that intention for your benefit.

Following Up

We know there are plenty of features that people want added to OMG! You Gotta See. Of course, we can’t implement anything until judging is over, but we have a UserVoice site setup so we can hit the ground running with the most popular requests. Please add your feature requests and (surely there won’t be any of these, but I’m including it for completeness…) bug reports.

Conclusion

We put a lot of love into OMG! You Gotta See. It’s a tool I’ve had the random occasion to use a number of times already, and I find it the perfect solution to my friends’ ignorance. :)

We’d also appreciate your vote for the Rumble!

References

Props where props are due: Most of the head tags were included because the great folks behind HTML5 Boilerplate suggested them.

Category: Development
Tags: Rails, Ruby
Have a thought or comment? Hit us up on twitter @bendyworks or on Facebook.