More Magazine Art Director Heather Sears and I worked together to create an engaging image driven and responsive website to promote More + Fitness Magazine's Women's Half Marathon for 2012 and 2013. The site is built as a one pager with scroll-to menu, and is fully responsive in the navigation layout as well as images (small images are loaded if your window size is below a certain width). This feature is especially important because of our introductory full screen image slider, keeping in mind some viewers might have 21-27" screens.
Full Features:
- Full-screen intro slideshow with touch swipe
- CSS3 / Canvas translucent Custom menu box shape
- One pager with smooth scroll menu to page sections
- Responsive layout technology. Automagically adapts to optimal view for computers, iPads (tablets), and iPhones (smartphones).
- Responsive image size detection on full screen background. Computers get high res images, mobile devices get smaller.
- Custom fonts. Cufon image-based font replacement.
- Flickr photo import w/ lightbox viewer. Dynamically pulls photos from flickr album and opens in a lightbox slideshow.
- Social Media widgets. Embedded facebook feed widget.
- Technology: HTML5 Boilerplate, CSS3, responsive media queries, javascript, jQuery, AJAX/JSON plugin integration.
- Cross-platform tested. IE8+, Firefox 3.6+, Chrome, Safari 5+.
Art Director
Heather Sears & Esther Kim
Copywriter
Evelyn Schmidt
Client
Meredith Corporation
