Category Archives: Category five

ReverbNation: hovering media player

RN_homepage

One of my favorite music for finding featured free music is ReverbNation.com. It’s got a very clean design with plenty of white space and I love the greyscale color with the red-orange highlights. When it comes to CSS techniques, the media player at the bottom of the page is a really clever element. It allows the user to start a song then scroll elsewhere on the page while keeping that song playing. If they want to stop the song, skip ahead or back, all the controls are right there at the bottom of the page.

RN_below the fold

 

The user can even navigate to a new page in the reverbnation.com domain and keep the song playing, giving the user a lot of freedom. But all of that is way over my head. When it comes to the simpler CSS implementation, I like that they tacked it at the bottom of the page instead of the top. The top of your browser window is already dominated by your browser navigation, URL, your tabs, and ReverbNation’s own page header.

RN_media player

By thinking to put the media player at the bottom, it’s still in the familiar horizontal layout like we expect from iTunes et al., but it stays out of the way so the user can focus on material on the page. It’s a really clever design principle to consider when working on future designs.

Helpful Design: The New York Times

Site link: http://www.nytimes.com/interactive/2013/04/14/nyregion/mayoral-candidates.html

For my first webpage, I utilized the style of a New York Times article that was doing something similar. Instead of profiling a Task Force, this article was profiling the mayoral candidates of the election in the city. Here’s the main page:

Screen Shot 2013-12-09 at 4.23.38 PM

Now my original plan was to emulate the entire style of the site, character profiles and all. Instead I ended up emulating the design, making my site include mugshots with white backgrounds (we worked with the resources we had) and keeping things minimalistic. 

Another design choice I picked up was this:

Screen Shot 2013-12-09 at 4.23.53 PM

 

It may be hard to tell from the screenshot, but the site is essentially as long as there are candidates. So you don’t actually navigate to different pages when looking through the page. I did the same with mine, though I believe that the way the NYT did theirs was a little more effective having code that made the page-loading much more efficient than mine. 

I didn’t include maps on my site either, which is a shame but I don’t think we had access to regional information for each candidate. It would have been interesting to show where each Task Force member lived or knew within Columbia.

Still, emulating the NYT’s style left me with a site I was happy with. 

Living Galapagos: Video background

The interactive site, Living Galapagos by the University of North Carolina at Chapel Hill uses  CSS to create a video background to add a subtle but interesting touch.

galapagosAlthough you can’t see it in this screenshot, the background is actually a moving image. I’m not sure if it’s a video or .GIF or how it works, but the waves, leaves and lizards all move. I think this is a fun touch that makes the website come to life. Here is the HTML and CSS:html

css

Both the HTML and CSS look relatively simple. You just add a “div class=video-background.”

The box that holds the first video is transparent, but when you click the play button the video loads and is viewed at full opacity. If you click “Stories” on the navigation bar, a similarly transparent menu pops up where you can choose other videos to watch.  If you click “Learn,” you see an interesting mix of infographics and social media and most interestingly, two games that are designed to help users learn about the Galapagos.

I love how this site uses good design and many different kinds of “junits” – there is text, video, photos, infographics, tweets, Instagrams, and more.

Drop-down navigation bar: Reason Clothing website

Reason Clothing is one of my personal favorite clothing brands, so I visit its website quite often. And one feature that I really like from this website is the drop-down navigation bar.

Screen Shot 2013-12-09 at 3.15.27 AM

When a viewer clicks on a part of the navigation bar with small plus sign next to it, the hidden menu shows. In this screenshot, I’ve clicked on “Shop +” menu, and it showed sub-menus such as ‘View All’, ‘Tees’, ‘Hoodies&Crews’, etc. Once the hidden menu shows up, the plus sign next to “Shop” changed to the minus sign. I like this feature because it allows the website’s visitors to shop easier and faster even though it’s just a simple drop-down menu. Also each menu word in the main navigation changes its color from white to red once clicked, so viewers can always remember what tab they’re looking through while they’re browsing the site. HTML code for this part is as follows:

Screen Shot 2013-12-09 at 3.15.49 AM

The main navigation and the drop-down menu are combined as one division named “multi-level-nav”, but then each one is divided into divisions named “tier-1” and “tier-2”. Then each menu is listed with <ul> and <li>, just as we use to make a navigation bar for assignments from this class.

So I can see it’s not too complicated to have this drop-down menu, and it definitely adds a lot to the site’s usability. This simple addition of hidden navigation helps the visitors to look through the brand’s products with only few clicks from the main page of the site.

CSS Image Hover effect: Grey to Color.

Link to the site: http://www.jeremyholmesstudio.com/

What I like about this website is its design on image thumbnails. As you can see from the screenshots below, these grey thumbnails turn into color when you move the mouse over the image. I like this effect because it creates a sense of movement as if the users are “revitalizing” the image.

Screen Shot 2013-10-30 at 1.39.36 PM

(When you move the mouse over the image…)

Screen Shot 2013-10-30 at 1.39.50 PM

I looked into the website’s HTML, and found out it actually used javascript as listed in its <head> section. I would assume it helps the hover effect. The “id” for black and white images are “project_thumb”. and for the original color image the “id” is “cardthumb.”

<script type=”text/javascript”>
$(document).ready(function(){
createHover();
});
function createHover() {
$(“.project_thumb”).unbind(‘mouseenter’).unbind(‘mouseleave’); // reset the hover to prevent doubling
$(“.project_thumb”).bind(“mouseenter”,function() { // create hover
$(“img”, this).fadeTo(10, .1); // Sets the opacity to 70% on hover
}).bind(“mouseleave”,function(){
$(“img”, this).fadeTo(10, 1.0); // Sets the opacity back to 100% on mouseout
});

</script>

 

The actual HTML for the black and white image contains this part that is related to the hover effect:

<div id=”item_3627254″ name=”3627254″ page=”1″ spot=”-1″>

<div id=”pr_contain_item_3627254″>

<a href=”/The-Green-Guide-for-Horse-Owners-and-Riders” onmouseover=”this.className=’hover’;” onmouseout=”this.className=’nohover’;” id=”p3627254″ rel=”history” name=”jeremyholmesstudio” onfocus=”this.blur()”>

<div class=”loader_holder” id=”load_3627254″>

<img src=”/_gfx/loadingAnim.gif” style=”opacity: 1;”>

</div>

<div class=”cardimgcrop notitle_notag” id=”cardthumb_3627254″ name=””>

<img src=”http://payload66.cargocollective.com/1/5/190228/3627254/prt_184x184_1344956617.jpg&#8221; border=”0″ rel=”testprt_1344956617.jpg” style=”opacity: 1;”>

</div>

</a>

</div></div>

 

 

And in the CSS stylesheet, “project_thumb”, “cropimgcrop” and “cardthumb” are defined:

 

 

.project_thumb {
    float: left;
    margin: -5px 0px 32px 31px;
    padding: 0px 0px 0px 0px;
    position: relative;
    text-align: left;
}

.project_thumb .hover {
    cursor: pointer;
    text-decoration: none;
}

.project_thumb .nohover {
    text-decoration: none;
}

.project_thumb:hover .cardimgcrop img {
    opacity: 0;
    filter: alpha(opacity=0);
}

.cardimgcrop img {
    opacity: 1;
    filter: alpha(opacity=100);

    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

.project_thumb .hover .thumb_title span {
    text-decoration: none;
}

.project_thumb .cardimgcrop:active {
    margin: 0px 0px 0px 0px;
    border:0px solid #ffffff;
    -moz-box-shadow: 0px 0px 0px #888888;
    -webkit-box-shadow: 0px 0px 0px #888888;
    box-shadow: 0px 0px 0px #888888;
}

.project_thumb.active .cardimgcrop {
    border: 0px solid #2d86ff;
    -moz-box-shadow: 0px 0px 0px #888888;
    -webkit-box-shadow: 0px 0px 0px #888888;
    box-shadow: 0px 0px 0px #888888;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

.project_thumb.active .thumb_title span {
    text-decoration: none;
}

.cardimgcrop {
    background: #ffffff;
    border: 0px solid #ffffff;
    margin: 0px 0px 0px 0px;
    padding: 0 0 0 0px;
    position: relative;
    min-width: 184px;
    min-height: 134px;
}

.cardimgcrop.notitle_notag {
    margin-bottom: 0px;
}
#cardthumb_3627254 {
    background-image: url(https://dl.dropbox.com/u/13148572/JHStudio_Web/btn/projects/horsecolor_btn.jpg); 
margin: 0 0px 0 0px;}

The coding is quite complicated as the designer created different parts of image using photoshop. So it’s important to have everything sorted out in mind and create correct <div> to arrange them, and matching CSS to define the effect.

The Kitchen Community: Beautiful Minimalistic Interactive Design

I love this site. I found it by chance (googling interactive html websites, go figure). I like this site because it is simple, versatile, and easy to navigate, while still being beautiful and having a clear and visually appealing design.

Image

The main page has a photo background, and information, which can be navigated with left and right arrows, which when clicked create an interesting effect of sliding the page over to reveal the next page.

The page also has a transparent top horizontal menu bar. When you hover over each link, a menu box appears.
Image

All of the navigation and menu bars, while there are many, are transparent and float nicely over the background image, creating a slick and minimalistic design — even for a site with a lot of content on it.

Some of the menu items appear as a slide-up box which you can “open” and “close”. This is a nice little interactive technique that allows users to see small bits of information without leaving the original page.

Image

Image

Other menu item content comes up as a black “popup” window within the page, with an additional black overlay. This is a nice interactive feature because it doesn’t feel like you are moving to new content, and the black-out effect makes it easy to focus on the information at hand. An X at the bottom of the box makes navigation easy to understand how to bring you back to the main page.

Image

Clicking one of the menu items will bring you to a new more text heavy page. This is set up similarly with a floating transparent box over a background image. The interesting effect here is that you  scroll only the text box, while the background image remains fixed.

Image

I think any of these elements would provide useful interactive navigation for our next website. By creating minimalistic and simple navigations and information boxes, the rest of the site is allowed to be very visual and colorful.

For the HTML/CSS, their coding was very convoluted and not tagged or noted (something I will be sure to do more, looking through this code to try to find distinct elements was not fun…).

However, here is some of the coding that I found for doing some of the box overlays. (I know, it hurt my brain to look at it too)

<div></div>’, gallery_markup: ‘<div> \ <a href=”#”>Previous</a> \ <div> \ <ul> \ {gallery} \ </ul> \ </div> \ <a href=”#”>Next</a> \ </div>’, image_markup: ‘<img id=”fullResImage” src=”{path}” />’, flash_markup: ”, quicktime_markup: ”, iframe_markup: ”, inline_markup: ‘<div>{content}</div>’, custom_markup: ”, social_tools: false }); }); }); /* ]]> */ </script> <script type=”text/javascript”> /* <![CDATA[ */ jQuery(document).ready(function($) { // setup mediaelementplayer $(‘video’).mediaelementplayer( /* Options */ ); // setup overlay for external page $(“.wp_lightbox_url_content_trigger”).overlay({ expose: ‘#789’, onBeforeLoad: function() { // grab wrapper element inside content var wrap = this.getOverlay().find(“.contentWrap”); // load the page specified in the trigger wrap.load(this.getTrigger().attr(“href”)); } }); // setup overlay actions to a href $(“.wp_lightbox_html_overlay_trigger”).overlay({ expose: ‘#789’, onLoad: function(content) {}, onClose: function(content) { if (navigator.userAgent.indexOf(“Firefox”) == -1) { var count = 0; $(“video”).each(function() { $(“video”)[count].player.pause(); count = count + 1; if (count > 20) { return false; } }); } } }); }); /*]]>*/ </script>

Mammoth Media CSS

Mammoth Media is a website dedicated to visual storytelling. The general feel is a sense of adventure and originality.

The first page on the site prompts users to watch a short video meant to give them a feel for the kind of work the company creates. It is a brief compilation of clips from a variety of their projects set to the tone of relaxing music. At the end it offers the opportunity to click on other work.

Image
One of the features of this website that I particularly like and wanted to learn for my assignment was how to have my photos become transparent when I scrolled the mouse over it though I could still see the picture. It also displays the title of the project. The only thing that I would criticize is the fact that clicking on the photo box itself does not take you to the page.
Image
Another element I like about this design is that the side navigation bar is fixed and everything that scrolls is constrained to the box with all of the projects. The elements are right next to each other, but the organized grid makes it so that it doesn’t look overwhelming. Overall this is an easy to use site with great CSS that makes it visually appealing and easy to function for users.