When I redesigned my website earlier this year I made a decision to optimize it for mobile, but not to build a mobile website. I tested heavily on iOS and Android devices, used Modernizr to make my rollovers work on touch devices, and set up the proper meta tags and touch icons.

In the last few months the type of traffic I get to my blog began to change. I now get more mobile views than all versions of Internet Explorer combined. Mobile is about 2x IE8 traffic, 5x IE9 traffic and 9x IE7 traffic. IE also has 3x the bounce rate as mobile phones and 50% less time spent. iPad traffic alone is higher than IE9.

It was time to put more energy into mobile. I’m glad I waited.

A few weeks ago Zurb announced Foundation, a framework for responsive design and development, and I instantly decided to evaluate it using my site as a guinea pig. Zurb has always produced great products (including Notable which we use heavily at Atlantic) and Foundation is no exception. For anyone new to the concept, responsive design (oversimplification) is the ability of your website to scale and respond with different options for different screen sizes and types of input. One site, everywhere.

Foundation is a responsive grid system where 14 columns flex to fit larger devices and reflow the page to fit mobile devices. You can specify parts of your site to show on phones, tablets or desktop. Out of the box it does a lot, but since I wasn’t starting with a new site, it took some finessing.

Getting Started

First off, my site was already built on top of a sixteen column grid using 960.gs. I had to rename all of my rows and columns to match the Foundation conventions, and completely rewrite part of their grid system to support 16 columns.

Second, Foundation isn’t meant to be the end all be all of responsive design – I had to add a few other libraries to the mix. Respond.js was used to fix issues with older browsers that don’t understand css media queries, the basis for a lot of the magic of Foundation. Respond.js didn’t seem to like the fact that I was using LESS, so I had to strip out the LESS code to make Respond function. Modernizr remained crucial for detecting touch devices and making sure they don’t see rollovers.

Third, I ended up customizing the css to show and hide elements on different devices, change the nav for each screen size and maximize screen real estate for each device.

All in all it was a great, and relatively painless experience. Check it out! You’re looking at it now, so send it to your phone, or just shrink your browser window. Don’t worry, I’ll wait.

I’ve already started using Foundation on a second website, and being responsive from the start has made a huge difference in productivity. Comment below if you have any questions and feel free to share!

Click here to find out more about Foundation.

Update

After launching these updates last month, I went back in a second time and made a few additional enhancements. I wrote a custom responsive images script, removed several javascript libraries that would occasionally conflict with each other, and used the version of Foundation on Github and was able to customize my install to only use the code I need and not the entire library. I also delayed the loading of all social network buttons until after the initial page load, which sped up the perceived load time. All in all I was able to remove nearly 40 server calls and the initial page load is less then 40% of what it was when I first launched my responsive website.

Over the last 5 years at Atlantic I’ve gone from being the sole web designer, to running an amazing creative team made up of designers, developers and project managers. We’ve launched hundreds of websites (this is reality not hyperbole) and at least as many digital marketing campaigns. Everyone involved works at a breakneck pace and there are single weeks when we launch three or four new websites.

This portfolio is the beginning – collecting and showcasing the work we have done over the last 5 years. It’s by no means exhaustive and will continue to grow over time. Special thanks to everyone on my team (and everyone on the WEA D2C team) for making all of this work possible.

DESIGNERS

Edith Levin
Rob Beatty
Lina Gonzalez
Ian Foster
Tiffany Ahee
Amy Stein
Priyanka Batra

DEVELOPERS

Michelle Lamoureaux
Mike Mignano
James DeBlasse
Sean Enright

PROJECT MANAGERS

Jeremy Kutner
Crystal Anderson

Check out the Atlantic Records Prosite here.

Check out the Atlantic Records Digital Media portfolio on Behance.

Today we launched our first HTML5 mobile streaming campaign with Portugal. The Man and Soundcloud. Fans can listen to three songs off the new Portugal. The Man record “In the Mountain in the Cloud” on the band’s mobile website. Fans just need to navigate to the page and enter their email address to listen. Built in house by Michelle Lamoureaux.

Click here to listen to Portugal. The Man on your smartphone.

GarageBand

GarageBand on the iPad is spectacular. Not only is it the only touch app that doesn’t leave me wishing for the desktop version, but it is the first touch app that is clearly superior to its desktop counterpart. It splits up mixing and recording in the clearest way I’ve seen, takes advantage of multitouch and the smart instruments are actually smart. The best thing I can say about this app is I’m in the process of exporting all my Logic recordings to Garageband so I can start using my iPad as my primary recording device.

Download GarageBand

Screens

Screens lets you login to remote Macs and control them using your iPad. It’s a simple IP based setup with no extra software to install and can remember multiple machines. It also has great multitouch functions to make your Mac feel like a touch device.

Download Screens

Stash Pro

Stash is a password protected library for videos, images, documents and a private browser with separate history from Safari. The app has a decoy library, shortcuts to hide the screen (boss mode) and secret gestures that unlock your private stash. Not a replacement for multiple user accounts in iOS, but the best alternative I’ve found.

Download Stash Pro

Air Display

Air Display lets you use your iPad as a second monitor. It requires an installation of a Mac app to connect to your iPad, but is otherwise will auto connect when you open the app. Great for adding extra real estate when using a laptop.

Download Air Display

iSwifter

Say what you will about battery consumption or playback performance, but there are a LOT of sites that require Flash. And even sites that support iOS often have premium content blocked. iSwifter a basic browser that runs Flash (no bookmarks, multiple windows or even history) but it does that one task well. And when it’s a choice between a laggy version of Flash or nothing, I’ll take Flash anyday.

Download iSwifter

Textastic

While I’m not convinced Textastic is the ultimate code editor for the iPad, it works. It stands out when tweaking CSS or Javascript for a site meant to run on the iPad. It would be difficult to code an entire site in the app, but for editing up files via (s)ftp or dropbox this app let’s you make simple changes on the go.

Download Textastic

Flud

When Pulse was first released I loved it. The interface was different, it was easy to use, but over time I found myself using it less. The interface for Flud is VERY similar, but it’s ability to easily add rss from Google and auto categorizing content by type have won me over. It’s probably is more of a Pulse version 2 than it’s own idea, but better is better.

Download Flud

Zite

Zite is one of my favorite RSS readers two reasons – it’s simple to set up, and customizes your content the more you use it. My problem with TweetMag and FlipBook (both stunning apps) is I spend more time getting the app set up properly than using it. Zite hooks seamlessly to Google Reader and Twitter and automatically creates categories and stories based on what you already follow and groups them automatically.

Download Zite

Air Video

This app requires a little setup, installing a free video server on your mac, but allows you to stream almost any video from your Mac to your iPad. It can play back most videos, even non-supported video formats like FLV. You can have it play back as it encodes or save an encoded version on your Mac for realtime playback later.

Download Air Video

Muji Notebook

Notebook is great for sketching wireframes and taking notes – I rarely use paper for these tasks anymore. The interface is understated (in a good way) an it has a virtual screen that protects the iPad from receiving input from your palm while writing. Unfortunately, the handwriting recognition is terrible, see WritePad for this.

Download Muji Notebook

Sketchbook Pro

This is THE drawing app for the iPad. It has multitouch shortcuts for menus, powerful brushes and pinching / sliding to control the size and transparency of your selected tool. It’s downsides are the lack of a good blending tool and the limit of 5 layers.

Download Sketchbook Pro

Honorable Mentions

Twitter for iPad – This is my favorite Twitter client on any platform. It may not be the most advanced, but it’s the easiest to use and allows you to get through a mass of tweets easier than any other app. It also makes great use of multitouch allowing you to drag on a tweet with two fingers will show a full conversation, or pinch and zoom on a tweet will reveal a users profile. Download Twitter

MyFav.es – Although this is a web based service, it’s a great visual launcher for website bookmarks. Visit MyFav.es

Aweditorium – A new image based music discovery service. Clicking on thumbnails of bands reveals music and videos by the selected artist. It doesn’t make it easy to find a specific artist, but you will stumble onto great new music. Download Aweditorium

Last Monday, Atlantic Records launched our first campaign with entertainment check-in service Get Glue and Trey Songz. Get Glue helps fans tell their friends what they are watching, listening to, or reading and earn stickers for doing so. Fans who check-in to the Get Glue widget on Trey’s website, or through one of the Get Glue apps, will get one of three Trey Songz stickers: “Love Faces”, “Team Trey” or “Trey’s Angels”. Get Glue lets fans redeem virtual stickers for physical stickers upon collecting 20 stickers across all Get Glue promotions.

Within a few days Trey Songz skyrocketed to the #1 musician on the service, and the #3 entertainment property overall with nearly 10,000 check-ins.

Check out the Trey Songz profile on GetGlue.com.

Check-in to the Get Glue on TreySongz.com.

Tonight Atlantic Records, Ustream and Cisco EOS are broadcasting “Killers, Lasers, Papers” – a live multi-artist concert from SXSW. The show is being streamed live from KillersLasersPapers.com as well as the official websites for each of the artists involved – Donnis, B.o.B, Janelle Monae, and Wiz Khalifa. Each artist is playing a full set, with interviews in-between performances and realtime photos streaming to the homepage of KillersLasersPapers.com. All five sites live on the Cisco EOS platform and were produced by the Atlantic and WEA design/dev teams.

The mobile website for Trey Songz was mentioned in a Billboard article last August about artists connecting directly with their fans. It specifically mentions the events functionality that allows fans to tweet about and checkin to shows from within the mobile site.

The Trey Songz site was also featured on the homepage of Mobile Awesomeness along with mobile sites from Rdio, Aol, Bing, and Hertz – not bad company to be in.

Check out the Trey Songz page on Mobile Awesomeness.

And finally, the 3OH!3, Paramore and Shinedown mobile websites are featured on the Adobe mobile website. All three sites can be found in the entertainment section of m.adobe.com.

See 3OH!3, Paramore and Shinedown featured on the Adobe mobile website.

We’ve launched a few dozen sites on the framework with features focusing on location, immediacy and availability (supporting iOS, Android, Palm OS, Blackberry 6+, Nokia Maemo and Windows Phone). All sites have the basics like photos, videos and news from the artist – with extra features like full length audio and video on Flash enabled devices. We’ve also included twitter feeds, photos the artists take with their own phones, fan photos and calling via IVR for artists who participate.

But it’s the event features that we’re really excited about.

Since nearly all smartphones are geo enabled we’ve added some exciting new location based features. When a fan first hits the site, we ping their location and will show a lightbox with nearby tour dates (if applicable) as well as links to buy, retweet or even check-in via Foursquare without leaving the artist’s site.

On the tours page, we allow fans to filter shows by distance, see directions to the show, a map of the venue, nearby hotels, transportation, entertainment and food. Bands like 3OH!3 are even giving discounts and running exclusive promotions based on these Foursquare check-ins.

Check out the Trey Songz mobile site here.

Read the Adobe press release (and my quote in it) here.

Or check out a video of the Trey Songz site here:

Read the full article here.