OMG! Rails Rumble!
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.
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:
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.
<link href='/assets/114.png' rel='apple-touch-icon' sizes='114x114'> and its ilk
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.
As you can see, the
<head> element provides a baseline for a vast amount of the user’s experience.
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.
Come on, you never expect your users to see an error page, right? I mean, your code is pefrect!
The legal things
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.
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!
Props where props are due: Most of the head tags were included because the great folks behind HTML5 Boilerplate suggested them.