- Category: Web design
- Industry: Personal project, demonstration
- Responsibilities: Design, logo design, HTML5 and CSS page builds, responsive design
- Launched: June 7, 2011
- View This Project: www.forgottenpresidents.com
This website was created as part of a demonstration by Envision Technology Advisors to showcase Disaster Recovery for Virtualized Environments. Since attendees at the events where this demo would be shown would be using a variety of devices, from phones to tablets to laptops, etc., I decided that using a “Responsive Web Design” approach for this project made alot of sense. Besides, I was itching to try out this approach and this gave me the excuse I needed!
Having previously experimented a little with Responsive Web Design and a Fluid Grid, I knew that to do this properly, you needed to design for this responsiveness from the very start. Trying to retro-fit a site and make it responsive is a great deal more difficult than if you plan for it from the earliest stages of a project. That early planning is what I did here.
Since this was meant for demo purposes, I wanted to choose a subject matter that would play well with a variety of audiences - from fellow web designers and developers to CEOs and CTOs, etc. The concept of “Forgotten Presidents”, focusing on some of our country's lesser known Commanders in Chief, was what I ended up going with, in large part because I was excited for the visuals this direction opened up to me (historic feeling typefaces and textures) and the availability of content that I could use under a Creative Commons license (from the White House's website). I was also interested in this subject, using this as an excuse to not only play with a new web development technique, but to also learn a bit about some US Presidents that I had previously known little to nothing about.
The website is built with HTML5 and a fair helping of CSS3, including the media queries that help make the responsive design possible. It also uses some jQuery on the homepage to randomize and rotate the “Forgotten Five” Presidents, a key requirement for the demos that this site was initially used for, as well as to scale the main titles. For this effect, a great plugin called FitText was used, courtesy of Paravel.
You can see the little site at www.forgottenpresidents.com. Be sure to check it out on multiple devices to see the responsiveness of the layout.