The New Nellies Look -  Preview Pages


Background.


Taking the Nellie brand out of it’s current flash environment and converting it to an html5 environment was quite the undertaking.
 
Nellie’s current flash site oozes with personality, my main goal was to make sure that the new HTML5 site would also convey the same playful personality. Unfortunately this would be quite difficult without using animation.
 
As you may or may not know, flash as a web developing platform died a swift death about two years ago thanks to Steve Job’s refusal to include it on Apple devices such as the iPhone and iPad. Large companies that were using flash quickly revamped their sites to use HTML5 and Javascript animation.


Going forward.


As you can see, in the new Nellies All Natural site build we were able to include an animated header. We were able to use some of the graphic assets that are currently being used in the flash site. Keep in mind, our goal wasn’t to completely recreate the flash site and all of it’s animations but to upgrade the site to new web design standards while maintaining some of the original look. Instead we created a header that infuses some of the charm from the flash site into this new more modern format. This process is extremely time consuming as each element needs to be animated by hand. We used cutting edge techniques that very few developers are capable of in order to bring the site to life. 

We also animated other elements –
1.       The Nellies logo bounces subtlely after the page loads
2.       As you scroll down to the story section Nellie fades into view.
3.       As you navigate to the products section the products fly into view.
4.       When you roll over the products in the products section they pop-out
5.       When you navigate from page to page there is an animated preloader
 
We believe that all these subtle animations help sell the playful nature of the Nellies brand.
 
Another thing to note is how the use of white really makes the site feel clean and fresh. Something that was sorely missing from the flash site.
 
New Home Page - http://draft.webstager.com/Nellies/index.html

New Products Page - http://draft.webstager.com/Nellies/internal.html

Mobile - If you would like to move forward with this direction there is still a good amount of work that needs to be done. First and foremost the site needs to be optimized for mobile viewing. This process called “Responsive Design” is also time consuming as each element of the site needs to be reformatted in order to look correct on a wide range of devices – iPhones, iPads, Android phones and Tablets etc…