A Responsive Retrofit: Frostic School of Art

Frostic School of Art HomepageA long, long time ago, in a gala… I mean when I was but a mere student of graphic design, I designed a really cool website for the Frostic School of Art along with fellow student, Max Millermaier. When it was time to build the site, I was hired on after graduation to do so. So in the summer of 2009, I was so psyched to launch, what at the time was, a bleading-edge, video-background website. Fast forward four years and the site was starting to feel sluggish, dated and disjointed.

A few months back I started thinking the Frostic School of Art’s site was a prime candidate for a makeover. I didn’t want to completely remake the site. Instead I decided it just needed to take advantage of the latest trends and technology. I dropped the dreaded use of Flash for videos and replaced them with HTML5 video, thanks to BigVideo.js.

iPhone screenshot of Frostic School of Art websiteThe next step was to make it mobile friendly. I’m a huge fan of responsive websites and have dabbled with them for a while now. I recently did a project that used the Skeleton boilerplate and found it to be very easy to use and produce great results with. I set off to re-write the whole site on top of the Skeleton. It wasn’t a small task, but in doing so I removed a lot of messy and redundant code. Like I said, the original site was made in 2009. A lot has changed in the Web world, and I’ve learned a lot too. Now the site looks awesome whether you’re on a desktop, a smartphone or a tablet.

Another goal I wanted to complete during this process was clean up. Over the years, files, directories and content became a mess. By starting from scratch, I was able to cleanup a lot of the mess. Now the end user should have an easier time getting around the site and finding what they’re looking for. There’s still some work to be done, but it’s already improved leaps and bounds.

Overall, I’m quite pleased with this retrofit. It’s not always an easy task to take an existing site and slap on a responsive framework. I suppose in a way, I didn’t really do that. I more or less rewrote the site, staying within the design guidelines of the original, but replacing almost all of the underpinnings. It was interesting to revisit a design from four years ago, and I’m happy with the results. What do you think?

Screen Shot 2013-05-15 at 2.48.09 PM

Making Google forms your own

One of the greatest features in Google Docs is the forms. In just a few minutes you can be up and running with a form that accepts user input and automatically fills that information into a spreadsheet. It’s super easy to set up and that’s why I’ve been using them for a number of tasks both at work and in my personal life. I’ll soon be marrying the lovely abbyabbyabby and we wanted to do online RSVPs. I immediately knew a Google form would do the trick with little-to-no work on my end. The problem was how the final product looked.

default style of my RSVP Google Form

Because both Abby and myself are designers, we weren’t comfortable directing people to such an un-styled form. “No problem,” I thought, figuring one of the many provided templates from Google could do the trick. I looked over the options, and while there are many they actually were worse than the default look.

some themes for Google forms

I was at a loss. I tried messing around with the embed code a bit but it was just an iframe pulling in the URL to the form. A few Google search attempts finally turned up this wonderful post about how to style Google Forms. It was perfect, easy to understand and provided me with the absolute control that I wanted. Below you’ll see what my final form looks like. It’s quite a bit better looking than the original. With my new-found trick  my future projects with Google forms will look just as good.

the final RSVP form with my styling