Exploring Moon Bears

The website that I have chosen to present on is moonbear.animalasia.org. This website, titled Exploring Moon Bears is an outcrop of the Animals Asia Foundation, which seeks to end cruelty to animals in Asia. The website that I chose is highly interactive and informative, which thoroughly discusses the conditions that moon bears are facing in China, primarily from the expanding rates of deforestation, along with the demands of the pharmaceutical industry. The website operates on html5; however, this website was funded through the new technologies of Microsoft, particularly Internet explorer. It seems as though IE is trying to reinvent itself and show how it has become compatible with html5, and even adds further features. The website illustrates great uses of interaction, flows, and multi uses of mediums: video, photos, and music. Exploring Moon Bears was a joint effort on part of IE and AAF (Animals Asia Foundation) to cross-market and promote one another. Viewing the source code: the css style sheet was quite confusing at first, since it was expanded to a version that was more appropriately suitable for speed; however, JT explained that in order to better view the css script, we needed to use a tool; such as dirtymarkup.com, which allows to minify (the process of removing all unnecessary characters from a source code without changing its functionality. The design of this website was marketable for IE purposes, but it was also interactive and informative for reasons put forth by AAF. Cross promotion worked on both ends.

Here is where people can be interactive and learn about Moon Bears. This is Jasper’s moment

Grovemade.com | Keeping Tech Natural Made

Coolest Website

Grovemade.com

Grovemade is a design team that handcrafts iPhone and iPad cases made with wood materials such as bamboo, maple, and walnut. When first entering the grovemade.com website, the viewer first sees the brand’s logo, which resembles an old-fashion stamp you might see on a shipping box crate filled with artisan cheese. As soon as the site loads, a carousel of images fill up the majority of the browser depicting some of the products Grovemade has designed. Each scrolling image has a link that corresponds to that product and is easy to find and purchase.

The reason Grovemade.com is such a cool website is because it is simplistic, beautiful, interactive, and logical design. Most of the information is provided on one page and utilizes the “scrolling link” technique for its tabs (about, featured, story, team, workshop, and connect). Once a tab has been selected a “transparent fixed bar (or banner)” appears at the top of the browser. The banner includes all the info tab options, as well as a “scroll to the top” link, making this site very easy to navigate.

My favorite feature is located in the “team” section, in which there are a series of profile pictures with no words. Once you click on a photo, a box appears, giving a brief bio of that team member. In addition, there are arrows in which to go forwards or backwards in the “team carousel.” What I think is very cool is that once you have reached the end of the line, the line of photos moves up and the “bio box” moves down (kind of like a typewriter). From visiting the site numerous times, I have also discovered that the team photos are shuffled and never in the same order.

This site is written in HTML 5 and provides extra support for older browsers. The creators have utilized javascript and rocketscript. There are at least three different types of stylesheets to accommodate some of the more technical pages (support, corporate, shop). Most of the code contains “div” tags, images, and pop-ups. The only criticism I have for the developer of Grovemade.com is that the code is not laid out in the most readable way (almost every line is located at the far left of the code, with no indent). However this site seems like it would be an easy design to create for almost any business and is worth understanding. If I had a product to sell online, this is the design I would want to use.

designers info: http://www.pbaston.com/about/