Innovative Construction
- Category: Web design
- Industry: Construction
- Responsibilities: Responsive web design and development with HTML5, CSS3 and media queries
- Launched: September 16, 2011
- View This Project: www.iciofamerica.com
Project Summary
I had designed Innovative Construction's first website over 5 years ago - so when I was asked to design and develop a fresh new site for them in mid-2011, I jumped at the chance.
Innovative Construction specializes in high end, quality construction for hospitality, commercial, and residential properties. The primary goal of the new site was to find a way to really focus on their project galleries and display their work in a big, bold way.
Right from the start of this project, I knew I wanted to go big with the images and backgrounds, but I also knew I wanted the site to work on smaller scale devices. It was a perfect excuse to use a “responsive web design” for the site, with fluid images and a fluid grid, along with a helping of Media Queries, to allow the site's layout to reflow and respond to different devices and browser sizes - from the large screen layout to a mobile friendly layout for handheld devices. I also opted to take a “mobile first” approach in many cases and do my best to deliver as little content to small screens, only turning on large background images for larger screens using CSS3 media queries.
Of particular note on the site are the individual gallery pages, which use a Lightbox gallery for the images and a giant background photo that makes uses of the CSS3 “background-size” property to achieve the scaling-background type effect I was aiming for.
The site is built with HTML5 and a generous helping of CSS3 to achieve some of the visual effects and transitions (as well as the media queries, of course).
The new site can be seen at iciofamerica.com. Be sure to check it out on various devices or resize your CSS3-ready browser to see the site reflow and see the responsive styles take over.