Launching our own Website from a Rugby Pitch in France

Last February, I was invited to train for a few weeks with a professional rugby team in France. Like any eager rugby player would, I jumped at the opportunity to spend two weeks along the west coast of France, just outside Brest in a town called Plouzane. While the opportunity was great, the timing left something to be desired. Our agency, 19 IDEAS, had the “Addy’s” (American Advertising Awards, Buffalo Chapter) coming up while I would be gone, and I was just recently tasked with rebuilding our new website in time to launch before that event. This meant the couple weeks of training with the team, gym time, and attempting to explore part of France would be combined with churning out our new company website with a design I had yet to see. I’d have a couple busy weeks ahead of me, but challenge accepted.

Being a developer, having an open mind when a designer hands you a comp, and understanding the necessity to embrace new challenges comes with the job. If we’re not pushing ourselves and doing things that we previously didn’t feel comfortable with, then we’re simply not worthy of working in this constantly evolving field.

 

wayne and garth

 

When I heard that it was time to review what the design team had built for our own website redesign, I was anxious to see what I’d be working on for the next couple weeks (visualizing myself sitting in a French cafe on my laptop, eating crepes, and drinking something delicious). What I saw scared me. If you’ve ever written html and css, or worked on a modern website, you’re familiar with frameworks, grid systems, semantic markup, media queries, different units of measurement (pixels, point, ems, rems, percentages etc.), the list goes on… all the helpful bits that make our jobs a little easier, letting us choose the right tool for the right application. Well, this application was a bit different, and put my creative thinking to the test.

The site they designed isn’t what your typical website looks like. It was a long, highly typographic, print-like design that needed pixel-perfect precision from every word. I realized that the following weeks’ work would not be quite what I expected, nor what I was used to.

Normally, when laying out text for a site, we aren’t too concerned with text length, line breaks, or the exact position of fancy typographic elements like ligatures, ascenders, and descenders. This is because the web has become pretty fluid – we don’t know who will be coming to our sites, on what device, at what size, over what connection or if that page’s content will change over time, so we build with flexibility in mind, and allow a bit of freedom in regards to typesetting.

In the case of our new site however, the copy wasn’t going to be changing, and these weren’t just long strings of words spanning multiple lines and breaking whenever they wanted to. These were big, bulky words, positioned with intent, and defining what we do – words you might be searching for, chock-full of all sorts of SEO goodness, and I was not going to have much flexibility on how laid out.

 

Putting Function Behind Design

We didn’t want to just all-out replace the text with images which, (while making my job much easier) would have no real meaning to search engine crawlers, screen readers, or the many other tools out there for users with different disabilities. Sure, your average person can look at a picture of the word “DESIGN” and conclude that the colors in that image are arranged in a way that looks like letters, and the letters are aligned to spell out a word, and that word is “DESIGN”, and that word “DESIGN” has some sort of meaning to us. Great, we’ve addressed the perfect user scenario! But what about when our user isn’t perfect? What if our user has a slow computer and that image of the word “DESIGN” doesn’t load by the time they reach that section? What if our user has issues with their eyesight and needs help from a screen reader to make out what the words on the page are? What if our user isn’t a user at all, but rather a google spider crawling our site for words and content that might be important to people searching for our services? When using images to represent words, there is no guarantee that your message will be accurately conveyed outside of your “perfect user” scenario, and that is where my task begins.

While our homepage may look like a random assortment of words, our designers did their best to keep things inside of a 12 column grid (with some exceptions), so against my initial inclinations to abandon any and all frameworks, I brought my old friend Bootstrap 3 along for the ride, and added a layer of typography classes on top of it. While bootstrap tends to handle most situations pretty well with its several responsive breakpoints, it just wasn’t quite enough for the situation I was dealing with. Differentiating between 1170px wide and 970px wide wasn’t going to cut it. If I was going to do any justice to the typographic craftsmanship of our design team, I needed more breakpoints, more classes, and more control, especially at smaller resolutions.

Three font families, every weight/variant under the sun, and their alignment with each other couldn’t be compromised at any screen-width. If you’re curious about what the class structure I came up with to accomplish this looks like, take a look at the page source on our homepage – or take the easy way out and have a glance at the screenshot below:

 

markup-classes

Meanwhile in France…

While the thought bubble above my head clearly showed me comfy and cozy, snacking on macaroons in that cafe I mentioned earlier, I soon realized this couldn’t have been further from reality. There was nothing cozy, nothing romantic, and nothing particularly “French” feeling (other than being unable to understand the coaches/teammates during training sessions) about my few weeks working abroad. I stayed in Plouzane, which for all intents and purposes is a farm town, and I was staying with two English guys on – you guessed it – a farm. A pig farm to be precise. Perfect!

 

 

Crash pad for the next couple weeks. #farm #france #plouzane #rugby #pigs #cows #smellsbad

A photo posted by Brian Battenfeld (@brianbattenfeldphotography) on

So for the next two weeks I woke up early to eat breakfast and work on the website, worked out, came back to eat lunch and work on the website, then back to training, back for dinner, and a late night working on the site again. Rinse. Repeat. It was an exhausting couple of weeks for sure, but with each day that passed, the website was taking a more concrete form and things were looking promising. I’d be lying if I sat here and told you that it was all work, no play, and that I became a dull boy. Between the late nights, early mornings, and practice/training schedules I was able to get out and see some of my surroundings. 

We had a day trip down to the coast:

Waves in Brest #waves #water #coast #france #brest #rocks #travel #wind

A photo posted by Brian Battenfeld (@brianbattenfeldphotography) on

Ate ice cream at their favorite post-practice restaurant (don’t be fooled – the diet of a professional rugby player is not always what you would imagine.  These boys love their KFC):

That strict diet of professional rugby players… #kfc #icecream #friedchicken #france #plouzane #rugby #diet #fitness #nutrition

A photo posted by Brian Battenfeld (@brianbattenfeldphotography) on

Watched some 6 Nations at the local pub:

Toulon – Brive #rugby #top14 #brest #france #beer #weekend #friends #happiness #toulon #brive

A photo posted by Brian Battenfeld (@brianbattenfeldphotography) on

And a last couple days in Uckfield,England, staying with some friends after my flights got a bit messed up:

Brighton pier. #Brighton #pier #water #sky #sunset #ocean #England #clouds

A photo posted by Brian Battenfeld (@brianbattenfeldphotography) on

Royal Brighton Pavilion #brighton #england #sky #sillhouette #color #pavilion #travel #architecture #iphone #clouds #sunset #goldenhour

A photo posted by Brian Battenfeld (@brianbattenfeldphotography) on

In the end, fueled by coffee, Nutella, and rugby-induced adrenaline, this little setup got me to our deadline:

french-laptop-setup-1024x768

The site looks great, everyone was happy, and I came back to the states just in time for one of our monthly family dinners – the likes of which you can read about over here.

While travel, rugby, and web development are three of my favorite things, it’s rare that I spend two straight weeks doing them all simultaneously. The experience was great, and until I have the chance to share my next interesting adventure at 19 IDEAS with you all, head over to our blog and see what the rest of our team has been up to lately. You won’t be disappointed.

%d bloggers like this: