Foxy Loxy Responsify

Posted by on Apr 11, 2013 in Blog Posts | No Comments
Foxy Loxy Responsify

This is a story about a Design Student’s adventures in responsive HTML and CSS. Sometimes, not every project has a beautiful end result.

pixel

In Professor Hogan’s Graphic Design class: 387 Interactive and Responsive Web design. My partner, Andy Walunas, and I were required to “Responsify” the website of a local coffee house, cafe, and print shop called Foxy Loxy:

FoxyLoxyCafe.com

This is what the website looked like whenever we began:

foxyloxylivesite

And then, after hours and hours of work in CSS and HTML, the finished website looks like this:

foxyloxyresponsivesite

What? Yes, that’s right. I didn’t accidentally upload the same image twice, but don’t be fooled by the similar appearance! See, the new website is responsive!

What that means is that Andy and I pulled out all of the HTML, images, content and type from the original page, and then reconstructed the structure of the divs in such a way that, through the power of media queries, the new site can tell whenever the page is resized, and it adjusts the way it looks accordingly.

For example, this is what the website now looks like on iPhone:
iPhone-5-Black-White-MockUp

And on the iPad:
ipadfoxy

We also took the time to retreat all of the type on the pages, so that we could make the type responsive. The old menu, for example, was simply an image of text. The new menu is all live text with responsive dot leaders.

Check it out:

beforeandafter

Before and After

You can view the entire responsive site at the following link:

Responsify Foxy Loxy Cafe

Just resize your browser windows to see the responsive capabilities in action.

To learn more about Responsive design I highly recommend the book Responsive Web Design by Ethan Marcotte from the ‘A Book Apart’ series.

 
Return to Top ▲Return to Top ▲