This is a story about a Design Student’s adventures in responsive HTML and CSS. Sometimes, not every project has a beautiful end result.
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:
This is what the website looked like whenever we began:
And then, after hours and hours of work in CSS and HTML, the finished website looks like this:
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:
And on the iPad:
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:
Before and After
You can view the entire responsive site at the following link:
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.