CSS Technique: Sticky Nav

I like sticky navbars. I think they work. And they’re an elegant solution to ensuring the user always has a way to hit other pages on your site. Turns out, sticky navbars can be pretty easily coded through CSS, which is great because that means it’s not too convoluted.

I found a pretty nifty tutorial at a site that goes by the name of “AvexDesigns“. And hey, what do you know, he has a sticky navbar! A pretty nice one at that…

Screen Shot 2013-12-09 at 3.34.40 PM

The tutorial he has up makes creating a sticky navbar sound pretty darn simple. Essentially you tag a navbar with an ID and give it a couple attributes while making sure your header ID has the appropriate attribute.

Are you ready for it?

#navigation {
position: fixed;
z-index: 10;
}

#header {
margin-top: 50px;
}

And that’s it! Pretty easy, right?

Looking at the code on Avex Designs shows that he follows his own tips…mostly. It’s odd, but he put the z-index: 10 bit under the header ID instead of his nav ID. Going into Google Chrome’s “Inspect Element” and disabling the z-index shows that it’s working as intended though, since items will scroll on top of the navbar with it disabled.

Screen Shot 2013-12-09 at 3.42.15 PM

 

The navbar is tagged with the “fix position” attribute though, which, when disabled, does make it not-sticky. So that’s nice to know. I think the reason this designer put the z-index attribute under header instead of nav is that he has some other stuff up there at the top that he wants to keep above everything else as well (like the Avex image).

News Site Critique: The Verge

I’ve been a fan of The Verge for a while now. I hear a lot of folks say that they’re pretty far ahead of other sites in terms of delivering news and web design, and I’d say that those people are mostly right (though I’m not a big fan of them tooting their own horns a whole bunch, Polygon).

Here’s the homepage:

Screen Shot 2013-12-09 at 3.52.08 PM

 

Underneath that is a long collection of blocks for other stories. The design at The Verge is pretty good when it comes to what you see first. The important stories are at the top and are inundated with color. The less-important stories are located lower. The navigation is at the top and is a sticky nav, which is useful. It’s clear what each area is for, though I’d think that there could be more differentiation for the different types of stories. Maybe color-coding.

Going to another page:

Screen Shot 2013-12-09 at 3.52.23 PM

 

And you get this side bar which is pretty darn useful. Each story contributes to a “storystream” that includes other stories of a similar nature. The headlines (the stories in the colored area on the front page) are also included.

The footer at the bottom is also pretty inclusive for navigating to different parts of the site.

Screen Shot 2013-12-09 at 3.52.36 PMAlong with including all of the social media links, the footer includes a secondary search bar which is useful.

 

Wrapper’s Delight: JQuery & JavaScript

I decided to take a look at The Telegraph’s story, “Wrappers delight,” by Richard Preston. The interactive site examines the success of Scottish sweet company, Tunnocks

Image

My favorite thing about the site is the design. The boldness in color and clarity of the photos grabs the readers’ attention, and gives them the initial reaction that the site is aesthetically pleasing.  It was a good designing decision not to add too many other fancy designs, as to not overwhelm the eye.  

Image

The way the text was arranged with simple and clean, with a white and black color scheme. An impressive feature of the site is the static background photos and the scrolling overlayed text. Paired together, it gives the user the illusion that both are moving on the page. 

Image

The way the text is broken up between pictures really encourages the user to scroll to continue reading the story. The text scrolls up or down at the move of your mouse, which allows the content to either conceal or reveal the next photo in the story, which also adds to the user experience. 

Here I could see the I see some of the different divs in the website that signal the change of photos….

Image

…as well as which effects were JQuery functions were coded. 

Overall all, I enjoyed the site because it the information was presented clearly without much distraction and yet, still being visually pleasing and interesting. 

jQuery and JavaScript: Too Young To Wed

Too Young To Wed was a project by National Geographic, with focus on child marriage around the world. I like this website because it’s a good combination of photos, text, videos, and SNS. Creators of the site put all the information in one big page, then allowed the visitors to navigate elements across different pages using one sidebar.

Screen Shot 2013-12-09 at 3.38.04 AM

This is first page that pops up when opening the site link. When scroll down a little bit…

Screen Shot 2013-12-09 at 3.38.15 AM

the main photo stays, but a new block of text shows up and eventually covers the main photo.

While looking through the page’s codes, I could hardly see HTML code. Instead, I found a long list of jQuery and JavaScript codes, such as these:

 

 

Screen Shot 2013-12-09 at 3.37.20 AMScreen Shot 2013-12-09 at 3.37.52 AM

 

I’m guessing the website also used jQuery for iPad users, since one of the codes is specifying iPad plugin in jQuery. And with JavaScript, the creators made the scrolling down and fixed images possible. When clicked on blue links next to <script src>, each link took me to JavaScript-specific comments such as var.

Honestly, it was hard to understand every code for this website because there are so many different JavaScript and jQuery comments. But I think this website used two systems very well for great reader usability: a reader can look through the main story of this website just by scrolling down, which is very convenient.

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.

Javascript: Polygon

Screen Shot 2013-12-09 at 6.25.27 PM

 

The Javascript in Polygon’s website is pretty cool, but is also a little distracting to me. I think that is the borderline that Java always straddles. When you first get to the page, the screen shot above is what you see, but as you scroll down you get to the actual page.

Screen Shot 2013-12-09 at 6.25.47 PM

 

I like that it seems like we have a cover page and are moving into a book, but I don’t think it necessarily matches with the rest of the website. The code is below.

// Check cookie outside DOM ready so there’s no flash
if (!$.cookie(‘console_launch_cover_both_nov-2013’)){
$(‘body’).addClass(‘polygon-cover-running’);
$(‘#polygon-fp-cover’).show();
$(‘#polygon-fp-cover’).height($(window).height());
} else {
$(‘#polygon-cover-teaser’).show();
$(‘#polygon-cover-teaser’).on(‘click’, function(e){
e.preventDefault();
$.removeCookie(‘console_launch_cover_both_nov-2013’, { path: ‘/’ });
document.location.reload();
});
}
$(function(){
var windowHeight;
var coverScrollDistance;
var mostRecentScrolledPosition;
var handleResize = function() {
windowHeight = $(window).height();
coverScrollDistance = windowHeight / 3;
var $cover = $(‘.m-fp-cover’);
$cover.height(windowHeight);
};
var coverSetup = function() {
var $cover = $(‘.m-fp-cover’);
var coverElement = $(‘.m-fp-cover’).get(0);
var $wrapper = $(‘.l-global-wrapper’);
var $body = $(‘body’);
handleResize();
$body.addClass(‘polygon-cover-running’);
$cover.height(windowHeight);
var mostRecentScrolledPosition = 0;
var wasAdded = false;
var wasRemoved = false;
var scrollHandler = function() {
mostRecentScrolledPosition = $(window).scrollTop();
setCoverPosition();
}
var setCoverPosition = function() {
// If we’ve scrolled more than the height of of the window than behave normally
if (mostRecentScrolledPosition > coverScrollDistance) {
if(!wasRemoved){
$body.removeClass(‘polygon-cover-running’);
$wrapper.removeClass(‘polygon-cover-running’);
$cover.css({‘margin-top’:’0′, ‘display’:’none’});
$wrapper.css(‘margin-top’, coverScrollDistance);
$.cookie(‘console_launch_cover_both_nov-2013’, ‘true’, { expires: 30, path: ‘/’ });
wasRemoved = true;
wasAdded = false; // reset this
}
} else if (mostRecentScrolledPosition >= 0) {
// This is where we move the cover
coverElement.style.top = -(mostRecentScrolledPosition * 2)+”px”;
if(!wasAdded){
$cover.css({‘display’:’block’});
$wrapper.css(‘margin-top’, ‘0’);
$wrapper.addClass(‘polygon-cover-running’);
$body.addClass(‘polygon-cover-running’);
wasAdded = true;
wasRemoved = false; // reset this
}
}
};
$(document).scroll(_.throttle(scrollHandler, 50));
$(‘.m-scroll-instructor’).on(‘click’, function(e){
e.preventDefault();
$(‘html,body’).animate({
scrollTop: windowHeight / 3
}, 800);
});
};
if(!$.cookie(‘console_launch_cover_both_nov-2013’) && !Vox.Environment.touch()) {
handleResize();
$(window).resize(_.debounce(handleResize, 300));
coverSetup();
} else if (Vox.Environment.touch()) {
$.cookie(‘console_launch_cover_both_nov-2013’, ‘true’, { expires: 30, path: ‘/’ });
}
if (navigator.msMaxTouchPoints > 0) {
$(‘.m-fp-cover’).css(‘position’, ‘static’);
}
});

‘Forty Days of Dating’ Design

I came across this website through facebook and spent a couple hours reading the entire thing. I’m not sure if that is directly related to the design, but it definitely didn’t hurt. The basic premise is that two friends date for forty days and document every day of the experience. The website is completely beautiful. Each day of dating has it’s own page that opens up, there is a sticky nav at the top and when you hover over the flowing list of days each one shows what day it represents.

Screen Shot 2013-12-09 at 6.38.53 PM

 

When you click on each day you get an interview with the couple and there are usually doodles, photos, gifs, or videos.

Screen Shot 2013-12-09 at 6.41.34 PM

 

I thought this website was really cool because it’s not necessarily a piece of journalism (although you do learn a lot about relationships and it is non-fiction) but I think this general idea for a design could be easily used on a news website. I like the way it condenses and opens up, it feels as though you are unfolding an accordion as you read. Overall, this is a really cool way to design a longer-form story.