Trying to condense a navigation down onto a mobile screen tends to push the actual content of the site down and out of initial view. Luke Wroblewski has explored some solutions in Mobile First but I’ve developed something that I haven’t come across just yet. In fact, in the process of writing this tutorial, Brad Frost released a great roundup of responsive navigation patterns so I suppose this could be an additional technique to add to his list.

Pull Down to Refresh

Pull down to refresh was a concept first introduced to the mobile world by Loren Brichter in his Twitter app, Tweetie as you can see in the screenshot here. Basically, pulling down on the list view when at the top updates the content. A simple and effective way of removing a button from the interface and a great use of touch screen input. This technique has been widely adopted amongst a range of different apps.

Pull Down for Navigation

You can see where I’m going with this but the whole thinking of replacing a UI element with a natural gesture (scrolling on a touch screen is about as close to a ‘natural gesture’ you can get in technology) is very valuable on a mobile screen.

Demo

Obviously the demo is best viewed on a smartphone device but hasn’t been tested on many Android as I devices I don’t have access to many! Works fine on iPhones. I’ve added the code onto GitHub but I’ve only just started using it. Right now it feels like a different language but please feel free to do whatever you need to do there if you want to improve it or use it for whatever you want to use it for.

Currently this exists as a great solution to single level navigation only. I haven’t tried to solve the second (and possibly third) level navigation just yet as I wanted to get this idea out as soon as possible.

Step 1

The HTML

<nav id="mobile">
	<ul class="group">
		<li><a href="#">Home</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Twitter</a></li>
		<li><a href="#">Dribbble</a></li>
		<li><a href="#">A Longer Navigation Item</a></li>
	</ul>
</nav>
<div id="site">
<header>
<nav id="main">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Twitter</a></li>
		<li><a href="#">Dribbble</a></li>
		<li><a href="#">A Longer Navigation Item</a></li>
	</ul>
</nav>
</header>
<div class="container">
	<h1>Pull Down for Navigation Demo</h1>
	<p>Content here</p>
</div>

As you can see we have two nav elements. One is the main navigation which will be hidden at mobile widths and the other is the mobile navigation which will be hidden at all other widths and only shown when the browser window becomes too narrow.

Step 2

The CSS

#mobile { visibility: hidden; background: #21BBE1; position: fixed; z-index: 100; width: 100%; }
#mobile ul { margin: 0; }
#mobile ul li { width: 50%; float: left; }
#mobile a { color: #fff; padding: 15px 1.5em; display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.25); text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#mobile li:nth-of-type(2n-1) a { border-right: 1px solid rgba(255, 255, 255, 0.25); }

#site { position: relative; z-index: 200; }

The first thing you’ll notice is the mobile navigation (#mobile) isn’t hidden by display: none; but by visiblity: hidden. This allows the jQuery code to work out what the height of the element is as we’ll want to move the page up by that amount to hide the navigation on load.

The #site div has to have a higher z-index than the navigation in order for it so slide over the top and the #mobile nav has fixed positioning so it doesn’t move it when scrolling.

/*
Media Query Goodness --------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {

	/* Hide the main nav for mobile widths */
	#main { display: none; }

	/* Make the mobile nav visible for mobile widths */
	#mobile { visibility: visible; }

}

Above shows the code for displaying the mobile menu on mobile sized screens and hiding the main menu.

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

	/* Add the "Pull Down for Navigation" bar, all controlled via CSS including the text */
	header:before { width: 100%; display: block; content: "Pull Down for Navigation"; padding: 0.75em 1.5em; margin: -1em -1.5em 1em; color: #878787; text-shadow: 0 1px 1px rgba(255, 255, 255, 1); border-bottom: 1px solid #a6a6a6; background-origin: content-box; text-indent: 22px;
		background-color: #e3e3e3;
		background-image: url(images/pull.png), url(images/down.png);
		background-position: right center, left center;
		background-repeat: no-repeat;
	}

}

Using a media query with device-width allows us to target mobile devices specifically and add a bar at the top with the text “Pull Down for Navigation”. As the vast majority of smartphones use touchscreen inputs I think it’s appropriate to word in this way as that’s exactly what you’ll be doing. As you can see, the whole bar is controlled through CSS including the text through the use of the content property.

Step 3

The jQuery

As much as I would have liked to complete this solution with only CSS, it isn’t quite possible. What’s basically happening in the jQuery is that we’re getting the height of the mobile navigation and then moving the site up by that number of pixels. Follow the comments in the jQuery code to see how it works.

<script type="text/javascript" charset="utf-8">

    function checkWidth () {

    	// Get the height of the div and set it in a variable called mabileNavHeight to access later
    	var mobileNavHeight = $('#mobile').height();

        // Check to see if the browser width is less than 480px wide
        if ($(window).width() < 481) {
    	    $('#site').css({
    	    	// Change the CSS top value of #site to whatever mobileNavHeight outputs
    	  		top: mobileNavHeight + 'px !important'
    		});
    		// Scroll the window the height of mobileNavHeight
    		$(window).scrollTop(mobileNavHeight);
        }

    	// Check to see if the browser width is more than 480px wide
        else if ($(window).width() > 480) {
    	    $('#site').css({
    	    	// Make sure the top value of #site is 0 so we don't see the space for the mobile nav
    	  		top: 0 + 'px'
    		});
    		// Scroll to the absolute top of the page
    		$(window).scrollTop(0);
        }
    }

    $(document).ready(function(){
        // Check the window size when page loads
        checkWidth();
    });

</script>

Advantages and Disadvantages

Advantages:

• Keeps the navigation at the top
• Allows content to move up the page and become the focus
• Uses simple touch based input

Disadvantages:

• No solution for further levels of navigation
• Maintaining two separate menus (although not a problem if dynamically generated)

Conclusion

It’s clear that there isn’t a one-size-fits-all approach to responsive navigation design so this is just another alternative. What I love about responsive web design is that there is no ‘right’ or ‘wrong’ way. In this case it’s the context of how it’s used that’s important, much like all design.

Update: I’m getting reports of it both working and not working on Android devices. Unfortunately I don’t have any way of testing on an Android device currently so would it would be great if someone can help test and get it working for more devices. Thanks! Grab the code from GitHub.

Update 2: Matthias Kretschmann on Twitter has informed me of some good news:

@tkenny just a small heads up that your pull for navigation example works fine under Android 4 in Browser, Chrome beta & Opera

— Matthias Kretschmann (@kremalicious) February 28, 2012

Having been inspired to get ‘Hardboiled‘, I’ve started playing around with a few cool techniques and exploring how to make the content accessible in less capable browsers while giving the best possible experiences to the ones that support the latest advancements in CSS. I’ve taken Benjamin’s CSS lightbox gallery and built upon by adding a few hover effects for the gallery grid itself and a 3D rotation for the lightbox content, all with the use of CSS.

View Demo

The :target Pseudo-Class

First, let’s look at how the lightbox actually appears without JavaScript and only CSS with the use of the :target pseudo-class. If you’re writing CSS, you’re already using pseudo-classes as you’ll be familiar with :hover, :visited and :active.

You can link directly to a place on a page by adding a page anchor (#) with the ID of an element to the end of the URL:

http://url.com/#info1

You probably already knew that but what you may not know that you can affect the style of the element that is linked to via the :target pseudo-class. The following code would only be seen if a user clicks on a link with the target ID in:

#info1:target { background-color: red; }

In the case of the demo, we’re using any list item with an ID that has been ‘targeted’ to display the lightbox li[id]:target. Pretty standard CSS is then used to display the lightbox on the page, even with a dark transparent overlay through the use of opacity.

The Animation

If we leave it at that, it’s pretty much the same as a standard lightbox or modal window so we’ll set it apart with a fun animation. Here is how we’ve created the animation with the help of keyframes (WebKit only for now):

@-webkit-keyframes lightbox {
	0% { -webkit-transform: scale(5) rotateY(-270deg); }
	100% { -webkit-transform: scale(1) rotateY(0deg); }
}

On it’s own, the code above won’t do anything so we need to reference it against the element(s) we want to animate.

li[id]:target div { -webkit-animation: lightbox 0.75s cubic-bezier(0,0,0,1); }

As you can see, the animation is called lightbox and that’s the first part of the animation property, followed by the duration and the timing function.

It’s very simple. We’re telling the div (the white box with the blue heading in the demo) to transform 5 times bigger with scale(5) and from a rotated position of -270 degress with rotateY(-270deg). Then when the animation ends after 0.75s we want it to reset to it’s actual size and rotation. The browser will create the animation in between (which is affected but the cubic-bezier timing function above).

Less Capable Browsers

The good thing about this is that browsers that don’t support CSS3 will fallback to an accessible version without the fancy animations thanks to the use of the page anchor and Modernizr.

We do this by testing to see if CSS transforms aren’t supported and then adding CSS using the .no-csstransforms class. Why are we testing for a lack of CSS transforms and not CSS animation? It’s mainly to do with :target pseudo-class support which we can’t test for with Modernizr. It isn’t supported by older browsers, specifically IE8 and below but it is supported in all browsers with support for CSS transforms (as far as I know).

I’ve taken that one step further by creating an equal to or less than IE8 condition comment and <noscript> to make sure it is displayed the same in IE without JavaScript.

<!--[if lte IE 8]>
<noscript>
<style>
    #information li { overflow: visible; position: relative; margin: 0 auto; margin-bottom: 25px; background: #fff; width: 600px; padding: 30px; height: auto; list-style: none; }
    #information li div a.close { position: relative; background: transparent; padding: 0; color: #0090e2; font-size: 12px; font-weight: normal; left: 0; top: 0; }
</style>
</noscript>
<![endif]-->

We also want to replace the ‘x’ (the close button in the lightbox) with ‘Back to top’ text for lesser browsers to aid usability. We do that with a bit of jQuery and a test for no CSS transforms with Modernizr.

if (!Modernizr.csstransforms) {
	$(document).ready(function(){
		$(".close").text("Back to top");
	});
}

Issues

There are a couple of issues I need to point out:

• Double scrollbar when the lightbox content exceeds the height of the screen resolution
• Animation is possibly slow on older machines (needs more testing)
• Loads all content, whereas JavaScript solutions online load content when requested
• If a browser has JavaScript turned off and doesn’t support CSS transforms, no content will be displayed. This is a problem with using Modernizr as a JS solution for browser feature testing.

I recommend this should only be considered as a demonstration of CSS3 3D animations unless you don’t have much content in the lightbox, similar to the demo.

I’ll be looking to improve it all the time. In the meantime, let me know what you think and if you can offer any improvements or ideas please let me know in the comments.

Here are two of the most negative comments:

Demonstrations of CSS3 are lame. What, 10% of the internet uses a browser capable of showing this stuff. What a waste of time.

That’s a pretty slick trick! I just wish I could use it now and not have to wait 3 years for the general public to catch up with their browser updates…

I work on corporate websites in my full time job and I use CSS3 all the time. In fact I’m using that spinning icon technique in a site redesign I’m working on at the moment and their usage stats show IE at 67.1% for the last month. However, that number is trending down and usage stats for other browsers are increasing including Chrome, Safari and Firefox. This is not unique to this one site. Every corporate site I’ve checked is showing same characteristics with their users. Chances are, if this is happening in the corporate world, the stats will look even better in other industries.

It’s true, visitors with current versions of IE won’t see the example used in my tutorial but with good use of CSS3 you can enhance interaction for users of newer browsers and people who are upgrading. Browser usage is trending towards newer browsers if you look at the stats. For example, a year from now people who had older browsers and have upgraded their browser (or been upgraded by someone else) will start to notice these enhancements possibly giving them a sense of discovery. They may even notice them more than someone who hasn’t upgraded because they saw it IE first (still fully accessible of course) and then saw it in a modern browser. Certainly not a bad thing.

However, the average visitor who still uses older browsers will still see a fully accessible version of your site and they won’t check sites in multiple browsers to see what the differences are. That just doesn’t happen outside of the web design and development community. In the case of the tutorial in question, everything looks the same initially, so everyone is still getting the same access to content, just the interaction has been enhanced for more recent browsers. That’s the key. As long as everything is still accessible, start embracing CSS3 or you’ll get left behind.

So what’s the problem? I’m very much a fan of the single line approach to writing CSS as seen below. It allows elements to sit under each other nicely, making them easier to find. Good commenting also helps.

The downside of vendor prefixes is declaring the same value more than once. Combine this with the single line approach above and you can see it starts to get messy with every CSS3 declaration on the same line. This will only get more difficult to read, with more CSS3 properties used.

I’m a designer so I can’t have my code looking messy and ugly, especially when you’re working on sites you know your workmates will be working on some point too. My solution is to keep the regular old CSS on a single line but split CSS3 onto separate lines defined by vendor prefixes. Not exactly earth-shattering but now it’s cleaner and much easier to read and edit all those declarations of the same property. They all sit under each other making them easier to compare to one another. I also start with the shortest at the top working my way to the longest, again just keeping everything consistent, neater and easier to read.

It even works well with extra CSS3 properties.

I take the same approach if I’m using rgba for the background colour of an element. The first declaration is for older browsers such as IE which ignore the rgba line.

Over to You

How do you deal with keeping your code beautiful and using multiple CSS3 vendor prefixes?

Update: As a few people have pointed out in the comments as well as a tweet from @nathansmith, you should be putting the vendor prefixes first and the final spec version last. See CSS-Tricks‘ comprehensive explanation.

… it seems that 2D translations are not hardware-accelerated. But, since any 2D translation is equivalent to a corresponding 3D translation with the same translations in the x and y and no translation in the z axis, it is easy to use a hardware accelerated translate3d(x, y, 0) transform instead of a non-hardware accelerated translate(x, y) transform.

So the next time you find yourself grumbling about declaring the same thing four times, once for each browser, remember that the pain is temporary. It’s a little like a vaccine—the shot hurts now, true, but it’s really not that bad in comparison to the disease it prevents. And in this case, you’re being vaccinated against a bad case of multi-year parser hacking and browser sniffing. We suffered through that long plague once already. Prefixes will, if used properly, ward off another outbreak for a long time to come.

However, CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can create much better sites than we ever could with CSS before. Here are a few examples of how CSS3 can improve the web.

Polaroids – View Demo

Despite not being around today, polaroid images are still iconic and because of this is still a great way to display photos. It’s simple enough to display a basic polaroid image using a white border on all sides with a thicker border for the bottom but we can enhance it with CSS3. As you’ll see in the demo, viewed in the latest versions of Safari, Firefox or Chrome, you can add an extra layer of depth with the addition of drop-shadow and transitions.

img {
	border: 15px solid #fff;
	border-bottom: 65px solid #fff;
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
}

img:hover {
	-webkit-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
	-webkit-transform: rotate(1deg) scale(1.05);
	-moz-transform: rotate(1deg) scale(1.05);
}

A subtle shadow gives the impression that is sitting on a flat surface and by scaling and increasing the size and positioning of the shadow on a hover state we can create the illusion that it has been raised slightly from the surface.

Buttons – View Demo

Why do buttons exist in web design? The web is an interactive medium and buttons are a form of interaction, they are easy to understand as a metaphor for real, physical buttons we use everyday on things like computers, mp3 players, televisions and any other electronic devices we use on a daily basis.

The key to making the buttons behave more like real physical buttons using CSS3 is using code such as shown below for the second button. To achieve a circle with CSS3, set a width and a height and define border-radius as half of those values.

button.two {
	width: 30px;
	height: 30px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	text-indent: -9999px;
	border: 1px solid #696969;
	background: #696969 url(power.png) no-repeat 6px 5px;
}

The active state uses CSS3′s gradient ability to create a gradient that goes from dark at the top to a lighter colour at the bottom. To further emphasise the depression of a button, a CSS transform is applied, scaling down the button slightly. To maintain the background image of the power button, include it in the background property and separate the gradient values with a comma.

button.two:active {
	-webkit-transform: scale(0.97);
	-moz-transform: scale(0.97);
	background: url(power.png) no-repeat 6px 5px, -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.13, #696969),
		color-stop(0.72, #2a2a2a)
	);
	background: url(power.png) no-repeat 6px 5px, -moz-linear-gradient(
		center bottom,
		#696969 13%,
		#2a2a2a 62%
	);
}

The recessed border also uses CSS3 gradient to get the full effect. The border class is applied to a div containing the button.

.border {
	margin: 0 auto;
	height: 42px;
	width: 42px;
	display: block;
	background-color: #fcfcfc;
	-webkit-border-radius: 21px;
	-moz-border-radius: 21px;
	border-radius: 21px;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.13, #fcfcfc),
	    color-stop(0.72, #c0c0c0)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #fcfcfc 13%,
	    #c0c0c0 62%
	);
	-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
}

View the demo in the latest versions of Safari, Chrome or Firefox.

DVD Animation – View Demo

CSS3 has an animation module which is plenty of fun to play with especially as you’ll be able to do things with CSS that you weren’t able to do before.

a:hover img[alt*="Disc"] {
	-moz-transform: translate(50px,0) rotate(330deg);
	-webkit-transform: translate(50px,0) rotate(330deg);
	transform: translate(50px,0) rotate(330deg);
}

Here the animation is being used to animate the DVDs as as you hover over the link that encapsulates bot the cover and the disc.

img[alt*="Disc"] {
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

Anyone who follows the work of Andy Clarke will likely have seen the DVD animation of the homepage of For a Beautiful Web. The above code demonstrates how Andy implemented this effect. At this point I want to highlight what you can do when you see something interesting on the web. All you have to do is have a look at the source code to see exactly how it works and learn from it to see how you could use it in the future. Now I’m not saying copy someone’s work but adjust it to your or your client’s needs.

Zurb also have an excellent demonstration of a similar effect which the wrote for Smashing Magazine.

BONUS: 3D Book Animation – View Demo

This one is for WebKit based browsers only so fire up the latest version of Safari or Chrome to see it in action and is based on this example found on the Surfin’ Safari blog. I’ll let you hunt around for code to see how it works as discovery is half the fun of learning about CSS. If you have any questions let me know in the comments and either myself or one of our great readers will help you out.

Font Embedding

Font embedding has become the saviour of typography on the web. Without it, we would still be stuck using the usual array of ‘web-safe’ fonts such as Arial, Georgia and Verdana. Not that there is anything wrong with them, just designers needed more choice and variety is the spice of life as they say. In fact web-safe fonts certainly played their part in forcing designers to create readable body text as they’re all very readable at smaller sizes.

@font-face

Advantages:

• Easy to setup (see previous post)
• Behaves exactly the same as regular text
• Even works in IE6+ (albeit through Microsoft’s proprietary format)

Disadvantages:

• Limited use of fonts due to no form of copy protection

TypeKit

Advantages:

• Huge selection of commercial fonts to choose from
• All the benefits of @font-face but with copy protection

Disadvantages:

• You don’t own the font for use in Photoshop designs etc.
• Relies on JavaScript
• Isn’t free (although it isn’t expensive)

Typotheque

Advantages:

• Doesn’t use JavaScrip, only CSS
• All the benefits of @font-face but with copy protection

Disadvantages:

• Seemingly expensive

Cufon

Advantages:

• Works across all browsers

Disadvantages:

• Requires JavaScript
• Can’t select text

sIFR

Advantages:

• Works across all browsers

Disadvantages:

• Requires Flash

Font Discovery

WhatTheFont

Have you ever found a great font but don’t know what it is? I frequently get asked what font I’ve used for the Inspect Element logo. Well now you can snap a screenshot and upload it to WhatTheFont which will return a list of the best matches of fonts. There have only been a couple of times where it hasn’t found the font I’ve been looking for but has worked flawlessly otherwise.

MyFonts

MyFonts gives you the ability to view an extensive selection of fonts with custom text before you buy.

FontShop

Online font store founded by extremely well respected typographer and designer Erik Spiekermann.

I Love Typography

You won’t go wrong by following I Love Typography to keep up with what’s going on in the world of Typography.

Education

Typedia

As the name suggests, Typedia aims to be an encyclopaedia of Type by blending the world of crowd-sourcing and social media and community. Not only is this a great place for font discovery but also a great place to learn about typography.

Free Fonts

Fonts available for @font-face embedding

You can’t just start using any font on the web. You have to respect individual licenses so this is a great resource displaying all fonts that have been specifically approved for @font-face embedding. The list is kept up to date as more fonts are added.

The League of Moveable Type

The League of Moveable Type, an open-source type movement, is very much a quality over quantity collection of free fonts.

exljbris Font Foundry

Similarly, exljbris Font Foundry is a collection of a few absolutely great fonts. All fonts are created and released by Jos Buivenga.

dafont

On the other end of the scale, dafont contains a huge number of fonts but finding a good font is like looking for a needle in a haystack. There are a few good hidden gems to be found though.

Font Squirrel’s Free @font-face Kits

A number of free fonts for you to download complete with the CSS you need to use the fonts on your site.

One more thing…

Don’t forget to check out Elliot Jay Stocks’ 8 Faces magazine when it launches as all signs point to it being excellent.