Tag: html

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

Opinion: Reset Buttons Suck

Have you ever filled out an online form only to lose it all by a poorly placed reset button? Why do these buttons even exist? I can’t think of a time I’ve ever filled in a whole form only to say, “hey, I didn’t really want any of that information, let me erase it all at once.” Luckily in recent years it seems less and less forms have these annoying buttons but they still exist. I’m calling for everyone to check their forms right now. Go ahead, I’ll wait… If you’ve got a reset button on your form, it’s time to reconsider that choice.

A reset button is just a bad user experience. A user can easily change the information they’ve entered without having to delete it all in one click. I’d say almost no one intentionally hits that reset button. It’s probably an accidental click while thinking it was the submit button. Having that button in place is doing more harm than good. Do your users a favor and leave off that reset button. That way you don’t have to needlessly frustrate your users and you have the added benefit of a cleaner, less cluttered form.

Linking done right

Links are one of the most basic parts of HTML. They’re everywhere and usually pretty useful. One thing I really hate to see is bad linking practices. A link named “click here” tells me nothing. For all I know you’re trying to lure me into downloading a virus or some phishing scam (or perhaps worse, Rick-roll me). Here are a couple quick tips on how to link effectively:

  • Name your link something that makes sense. You want to clue the user into where they’re going. “Online Registration Form” makes much more sense than something generic like “click here.” It’s irritating and even scary to not know what you’re getting into and by giving your links good names, you can instill a sense of trust and legitimacy in your site. As an added bonus, well named links should help your search engine scores.
  • Surprises are a bad thing. If you’re linking to a PDF or a video file and it’s going to trigger something to download or open a plugin, you should tell the user this beforehand. A simple icon in front of the link or a description like “(PDF)” after a link can really improve user experience. People like to know what to expect and it’s easy to tell them. At the very least put a description in the title attribute so a user can get an idea while hovering over the link.

It’s really pretty simple but by keeping these things in mind we can make a better, friendlier web.

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