Osvaldas Valutis · Blog

Drop-Down Navigation: Responsive and Touch-Friendly

Osvaldas Valutis — Tue, 02 Apr 2013 14:22:08 +0300

What if you need a multi-level navigation? In most cases, you design a drop-down menu using unordered lists. But what do you do to make it usable on small and/or cursorless screens? By usable I mean being able to use hyperlinks on parental anchors and open them with a double-tap (which is a native act on touch devices), also being able to close the drop-downs by tapping anywhere outside them to avoid flashing and other huge usability faults but having a usual bulletproof drop-down menu on desktop screens at the same time. A while ago I came up with quite a simple technique. I have been successfully implementing it into my projects as there is no room for one-sided techniques anymore.

The Problem

...is a drop-down on touch screen because there is no cursor and you cannot hover on the navigation items! It gets even worse if you have links on parent menu items. Once you click them, the drop-down shows up for a second and then immediately disappears because the browser has just opened the link of an anchor you pressed! That sucks. As well as using hash symbol for parental link href's: as a consequence, you cannot use normal URLs, the page sometimes may scroll up after the link is clicked, the drop-down may flash, you won't be able to shut it off, etc. Sorry, that is not a problem anymore – it is solved in this post! Watch my very first video montage to get the idea:

Music audio by DJ Betas.

Talking about responsiveness, there is a plenty, plenty of responsive navigation solutions out there. I admit, I have hardly gone deeper into any of these, but still my favorite one is David Bushell's off-canvas navigation. It is awesome. However, as for my personal projects I fit the usual one-button responsive navigation pattern. The same one goes here as well.

Composition

The technique consists of three main parts:

Simple drop-down navigation based on HTML and CSS;
Responsiveness implementation using media queries;
Adoption for touch screen devices with the help of a super tiny jQuery plugin.

Now about everything in turn…

HTML and CSS drop-down navigation

Firstly, simple markup of multi-leveled unordered lists with a little bit of HTML5 flavor. My example consists of two levels. Two is not the limit, you may have infinite levels on your next super project.

<nav id="nav" role="navigation">
	<a href="#nav" title="Show navigation">Show navigation</a>
	<a href="#" title="Hide navigation">Hide navigation</a>
	<ul>
		<li><a href="/">Home</a></li>
		<li>
			<a href="/">Blog</a>
			<ul>
				<li><a href="/">Design</a></li>
				<li><a href="/">HTML</a></li>
				<li><a href="/">CSS</a></li>
				<li><a href="/">JavaScript</a></li>
			</ul>
		</li>
		<li>
			<a href="/">Work</a>
			<ul>
				<li><a href="/">Web Design</a></li>
				<li><a href="/">Typography</a></li>
				<li><a href="/">Front-End</a></li>
			</ul>
		</li>
		<li><a href="/">About</a></li>
	</ul>
</nav>

Now let's just give a sense to the HTML above with the CSS below. Presenting only the principle parts of CSS. Full code – later in the demo.

Do not be surprised by Show / Hide navigation anchors. I am going to hide these for now using #nav > a selector and flick on later in the next step.

#nav
{
	/* container */
}
	#nav > a
	{
		display: none;
	}
	#nav li
	{
		position: relative;
	}

	/* first level */

	#nav > ul
	{
		height: 3.75em;
	}
		#nav > ul > li
		{
			width: 25%;
			height: 100%;
			float: left;
		}

	/* second level */

	#nav li ul
	{
		display: none;
		position: absolute;
		top: 100%;
	}
		#nav li:hover ul
		{
			display: block;
		}

User interface behavior on non-touch screens is based on the result of position: relative and position: absolute manipulation. On touchscreens it still fails at solving the problem, but we will make it right later in the 3^rd part of the post.

Responsive drop-down navigation

Let's pour some responsiveness in. 640 pixels is my choice for a major breakpoint at which with the help of a single media query, the navigation shrinks to a button (icon). Therefore, the menu can only be called out by pressing the button.

@media only screen and ( max-width: 40em ) /* 640 */
{
	#nav
	{
		position: relative;
	}
		#nav > a
		{
		}
		#nav:not( :target ) > a:first-of-type,
		#nav:target > a:last-of-type
		{
			display: block;
		}

	/* first level */

	#nav > ul
	{
		height: auto;
		display: none;
		position: absolute;
		left: 0;
		right: 0;
	}
		#nav > ul.active
		{
			display: block;
		}
		#nav > ul > li
		{
			width: 100%;
			float: none;
		}

	/* second level */

	#nav li ul
	{
		position: static;
	}
}

CSS pseudo selector :target makes it easy to toggle menu as the anchor's href attribute coincides with CSS ID selector name. Therefore, as you might have understood, the first anchor of #nav > a is responsible for showing and the second for hiding the menu.

Touch-friendly drop-down navigation

The most important things go in the end: let's finally solve the problem described in the very first paragraphs of the post. Here comes the promised super lightweight jQuery plugin which I called DoubleTapToGo.js and it is only 550 ridiculous bytes in size when minified.

When you tap the parent item for the first time, DoubleTapToGo prevents the browser from opening a new URL but allows that if tapped once again in succession. If there is an intermediate tap(s) between the first one and the second the counter resets. Quite simple principle of operation, isn't it? It may be hard to believe but this solved all of the flaws I have mentioned before.

Considering the markup above, the plugin should be only applied to the items that are parents – in order to avoid double-tap requirement on drop-down-less items:

$( '#nav li:has(ul)' ).doubleTapToGo();

This is it! Complete fulfillment, full code and working example – all in the demo:

Demo

Be sure to test it on your smartphone or tablet – type this into the address bar: osvaldas.info/u/tnav

Final words

I have ran tests on both Mac and Windows versions of the latest Chrome, Safari, Firefox and Opera browsers as well as on IE9+, Safari of iOS 6, Chrome of Android 2.2/4.2, IE9-10 of Windows Phone 7-8, Opera Mobile. Worked everywhere as it should.

As always, looking forward to getting a feedback from you in the comments or via @osvaldas.

Audio Player: Responsive and Touch-Friendly

Osvaldas Valutis — Thu, 27 Dec 2012 14:26:55 +0200

A couple of months ago I built a jQuery plugin that replaces <audio> element with a little of custom HTML code. By adding some CSS you get a whole new player which looks the way you want and has the same functionality as the default player. There is no direct way to style the element. But the HTML5 DOM has methods, properties, and events for the element and thus makes it quite easily manipulable.

To sum it up, the plugin enables indirect styling of <audio> element. That's why I built it. I wanted the player to fit the design theme for one of my present projects – IP telephony for business (VOIP). The audio element serves for IVR (Interactive Voice Response) function where clients can built their own voice responders / menus, make audio records and rehear them.

A couple of weeks ago I wrote an in-depth article about the plugin for Codrops, which I recommend for people who think of themselves as less experienced in the field. Receiving some helpful feedback there, helped me to improve the player. Obviously, this is not the end and I will be looking for your feedback here as well.

Features

Before deciding to build a plugin on my own, I did a little research on existing alternatives. I had clear and strict requirements: (1) it must be lightweight, customizable and right; (2) it must solve contemporary problems like touch and responsive; (3) it must not solve problems I don't have yet. However, nothing passed through the filter. As the matter of fact, the player I built is:

Responsive.
To achieve this, full responsibility falls on your CSS. My example is responsive. You can have a non-responsive player as well, but that is not recommended. Responsiveness is an important sign of a good web experience.
Touchable.
Touchableness is an important sign of a good web experience as well. Having these two, you are device and screen independent. And that is a half job done!
Adaptive.
When the browser does not support the audio element entirely or any of the provided audio files, the player then gracefully degrades to a one-button (Play/Pause buttons only) <embed /> element based player which will use a third party plugin (mostly Quick Time on Mac, Windows Media Player on Windows) to play the audio file. Another possible scenario: JavaScript disabled in the browser. Browser's default player takes action then. And that is totally fine.
Native.
The player is in no way directly native. The plugin accepts audio element's attributes (src, autoplay, loop, preoload) and tags (<source>). Besides that, "autoplay" and "loop" attributes are inherited on the previously mentioned fallback case.
Usable.
The essential Play / Pause and playback progress controls, Volume On / Off / Up / Down controls and indication of how much of the audio is preloaded (buffered).
Image-less.
This depends on your CSS as well. The looks of my player is all CSS, not a single image file used. Having that and sizing everything with em units, enables the player to be scaled and zoomed.
Flash-less.
So long, Flash. You are unwanted here.

Lightness.
The minified version of the plugin is just 4KB ~~large~~ small.

Usage

Add the audio element, set the attributes you need and add source(s). The more different sources you add, the more users will be able to listen to your audio (because none of the audio formats are supported across all browsers). Three examples:

<audio src="audio.wav" preload="auto" controls></audio>

This will just preload the audio.wav file and won't play it until user clicks Play button. Other preload values (none, metadata) will not preload the file.

autoplay the file when it loads and then loop it in this way:

<audio src="audio.wav" preload="auto" controls autoplay loop></audio>

Specify multiple audio formats to solve the previously mentioned problem:

<audio preload="auto" controls>
	<source src="audio.wav" />
	<source src="audio.mp3" />
	<source src="audio.ogg" />
</audio>

Mystic controls? It is a boolean attribute which does not influence the plugin in any way, but ensures that browser's default player is displayed and displayed with controls when JavaScript is disabled.

The final step – calling the plugin (by including jQuery and the plugin files in the document if that hasn't been done previously) on the audio element:

<audio src="audio.wav" preload="auto" controls></audio>
<script src="jquery.js"></script>
<script src="audioplayer.js"></script>
<script>
	$( function()
	{
		$( 'audio' ).audioPlayer();
	});
</script>

The plugin has some optional parameters. The most important one is called classPrefix. The passed value becomes a class name for the parent element and class name prefix for child elements. Other options may only be advantageous for languages other than English. Example with default values:

$( 'audio' ).audioPlayer(
{
	classPrefix: 'audioplayer',
	strPlay: 'Play',
	strPause: 'Pause',
	strVolume: 'Volume'
});

HTML

As I mentioned in the very first paragraph, when the plugin is called, the <audio> element is replaced then with some HTML:

<div class="audioplayer audioplayer-stopped">
	<audio src="audio.wav" preload="auto" controls></audio>
	<div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>
	<div class="audioplayer-time audioplayer-time-current">00:00</div>
	<div class="audioplayer-bar">
		<div class="audioplayer-bar-loaded"></div>
		<div class="audioplayer-bar-played"></div>
	</div>
	<div class="audioplayer-time audioplayer-time-duration">&hellip;</div>
	<div class="audioplayer-volume">
		<div class="audioplayer-volume-button" title="Volume"><a href="#">Volume</a></div>
		<div class="audioplayer-volume-adjust"><div><div></div></div></div>
	</div>
</div>

There are some class names, which are assigned to the parent element when:

audioplayer-playing – audio is being played:
<div class="audioplayer audioplayer-playing">
audioplayer-stopped – audio is being stopped:
<div class="audioplayer audioplayer-stopped">
audioplayer-muted – volume is muted:
<div class="audioplayer audioplayer-muted">
audioplayer-novolume – no volume adjustment is available:
<div class="audioplayer audioplayer-novolume">

Important: when the audio element is not supported or none of the given audio files are compatible with the browser, the player switches to Mini mode, which basically reduces the player to Play/Pause button (because "embed" element is limited in terms of manipulation):

<div class="audioplayer audioplayer-stopped audioplayer-mini">
	<embed src="audio.wav" width="0" height="0" volume="100" autostart="false" loop="false" />
	<div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>
</div>

Reminder: using classPrefix options on the initiation of the plugin you can replace every audioplayer occurrence with your own value in the HTML and so to have different looks of multiple players on the same website.

Now, everything depends on how you will style the player using CSS. I will skip this part here and go directly to demo, but you can read my article on Codrops about the styling anytime.

Demo

As mentioned hundreds of times before, my player is responsive and isn't even dependent on Media Queries. I have a made a scheme which explains the layout:

The parent element .audioplayer is position: relative; whereas the child elements .audioplayer-* are position: absolute;.

Demo

Grab the plugin: audioplayer.js (uncompressed; 8KB) or audioplayer.min.js (minified; 4KB).

Feedback

I tested the player and it works fine on the latest Safari, Chrome, Firefox, Opera both Mac and Windows versions. The player works well on Internet Explorer 9, 10 and gracefully degrades to mini mode on earlier versions. I have also been lucky with iOS 6, Windows Phone 7 and Android 4.2 default browsers. However, the earlier Android versions does not support "audio" nor "embed" elements, so the player won't work there at all.

What was your experience, got any thoughts, insights or built your own look? Feel free to send me a tweet or leave a comment below. Thanks!

P.S. do not confuse the plugin with the media centre or so. It was not built to have playlists or display album covers.

Responsive jQuery Masonry

Tue, 18 Sep 2012 10:41:35 +0300

…or Pinterest-style layout. jQuery Masonry is a jQuery-based plugin for a dynamic grid layout built by David DeSandro. What it does is “arranges elements vertically, positioning each element in the next open spot in the grid” and what you get is “minimized vertical gaps between elements of varying height”. Sounds too higgledy-piggledy? Remember the social network you quit a while ago because of the obvious reasons, whereas your wife/girlfriend still uses it on a daily basis and you can't get her off from this? Bull's eye, that's Pinterest. So this time, as said before, Pinterest-style layout made responsive.

Sheepy Me is a website where I constantly combine time-tested techniques and new trends. As for the blog where pictures act big in both ways, Pinterest inspired layout (a trend, popularized by Pinterest) probably was the best choice for listing items attractively. Although, JavaScript-based layout is not a good practice and should be avoided while CSS is capable to do this instead. This time, so far, it's not. Will take a look closer at this later in the post anyway.

jQuery Masonry is not the only plugin and method for achieving the same effect, but it was the one actually working as well as working in the way I prefer. In responsive way. We're at the nice times when not thinking responsively is a bad habit and non-responsive techniques are considered as, to put it mildly, poor ones. jQuery Masonry is responsive-friendly, but that's not enough and some extra work is necessary in order to make it all meaningful.

The Grid

Three-column grid is when screen width is higher than 640 pixels. Two columns – when screen width is equal to or less than 640 pixels, but is more than 320 pixels. And one column – when screen width is equal to or less than 320 pixels. The scheme may be easily adjusted to any other manner.

Setting It Up

Apart from the obvious include-jQuery-first, let's see how actual things look like before bringing them to the world of responsiveness.

HTML structure is the simplest thing here. The further content goes into .item elements. Thinking of better semantics, it would be nicer to go with unordered list. At Sheepy Me I used <ul>'s for comments, date and tags to present into .item's. To avoid any conflict and keep CSS clean, div's was the only choice.

<div id="wrapper">
	<div id="list">
		<div class="item"> ... </div>
		<div class="item"> ... </div>
		<div class="item"> ... </div>
		<!-- ... -->
	</div>
</div>

CSS is a little bit more specific as it puts our layout to fluid mode. Instead of ritual px, I use em (based on browser's default size 16px, 100%) and % to define sizes and so to achieve complete flexibility across the browsers, screen sizes and people habits.

#wrapper
{
	max-width: 60em; /* 960 px */
	margin: 0 auto;
}
	#list
	{
		width: 103.125%; /* 990px */
		overflow: hidden;
		margin-left: -1.562%; /* 15px */
		margin-bottom: -1.875em; /* 30px */
	}
		.item
		{
			width: 30.303%; /* 300px */
			float: left;
			margin: 0 1.515% 1.875em; /* 15px 30px */ 
		}

What's interesting, I did a small workaround to solve the problem of horizontal margins by setting the width of #list to more than 100% and left margin to the negative value. Though jQuery Masonry manages horizontal spacing automatically, the workaround gracefully degrades when JavaScript is disabled in the browser.

Finally some JavaScript. Only shameless initialization of the plugin for now.

$( window ).load( function()
{
	$( '#list' ).masonry( { itemSelector: '.item' } );
});

Pouring In Responsiveness

Now that we have a working formation, let's teach it to adapt to savage environments: small and constantly changing screen sizes as well as zooming without remorse. However, the zoom is not handled well enough due to the absence of bulletproof active zooming detection.

HTML stays the same, but CSS code gets a makeup – media queries. The first of them transforms the grid to two-column one, whilst the second to the simple one-column layout.

#wrapper
{
	max-width: 60em; /* 960 px */
	margin: 0 auto;
}
	#list
	{
		width: 103.125%; /* 990px */
		overflow: hidden;
		margin-left: -1.562%; /* 15px */
		margin-bottom: -1.875em; /* 30px */
	}
		.item
		{
			width: 30.303%; /* 300px */
			float: left;
			margin: 0 1.515% 1.875em; /* 15px 30px */ 
		}

@media only screen and ( max-width: 40em ) /* 640px */
{
	.item
	{
		width: 46.876%; /* 305px */
		margin-bottom: 0.938em; /* 15px */
	}
}
@media only screen and ( max-width: 20em ) /* 640px */
{
	#list
	{
		width: 100%;
		margin-left: 0;
	}
		.item
		{
			width: 100%;
			margin-left: 0;
			margin-right: 0;
		}
}

What's for JavaScript, function setColumns(); initially counts the number of columns accordingly to the screen width. $( window ).resize( setColumns ); does the same, but when window is resized. jQuery Masonry, luckily, has an option named columnWidth. Putting under (for value) a function actually solves the problem.

$( window ).load( function()
{
	var columns	   = 3,
		setColumns = function() { columns = $( window ).width() > 640 ? 3 : $( window ).width() > 320 ? 2 : 1; };

	setColumns();
	$( window ).resize( setColumns );

	$( '#list' ).masonry(
	{
		itemSelector: '.item',
		columnWidth:  function( containerWidth ) { return containerWidth / columns; }
	});
});

That's it! Sheepy Me is a real life example of the whole experience. Besides that, I made a separate demo which consists only of the relevant code and helps to focus on the technique itself.

Demo

CSS-only solution?

Kushagra Agarwal suggests to do without JavaScript and use CSS's column-* properties instead. So how CSS code would change? #wrapper remains the same, but the rest:

#list
{
	width: 100%;
	overflow: hidden;
	margin-bottom: -1.875em; /* 30px */
	-webkit-column-count: 3;
	-webkit-column-gap: 1.875em; /* 30px */
	-webkit-column-fill: auto;
	-moz-column-count: 3;
	-moz-column-gap: 1.875em; /* 30px */
	-moz-column-fill: auto;
	column-count: 3;
	column-gap: 1.875em; /* 30px */
	column-fill: auto;
}
	.item
	{
		margin-bottom: 1.875em; /* 15px 30px */
		-webkit-column-break-inside: avoid;
		-moz-column-break-inside: avoid;
		column-break-inside: avoid;
	}

@media only screen and ( max-width: 40em ) /* 640px */
{
	#list
	{
		-webkit-column-count: 2;
		-webkit-column-gap: 0.938em; /* 15px */
		-moz-column-count: 2;
		-moz-column-gap: 0.938em; /* 15px */
		column-count: 2;
		column-gap: 0.938em; /* 15px */
	}
		.item
		{
			margin-bottom: 0.938em; /* 15px */
		}
}
@media only screen and ( max-width: 20em ) /* 320px */
{
	#list
	{
		-webkit-column-count: auto;
		-moz-column-count: auto;
		column-count: auto;
	}
}

Demo

How lovely is that, even with those vendor prefixes. It would absolutely be the best technique, if it hadn't the following limitations:

Not supported by IE9 and below;
Different rendering among supported browsers. Safari and Chrome does in one way, whilst Firefox and Opera in another. And both manners doesn't seem to be logical enough.

Conclusion

column-* isn't fully standardized yet across web browsers. jQuery Masonry is a JavaScript thing. Two evils. You can stay with just one of them. You can combine them, by attaching jQuery Masonry only to IE9-and-below or JavaScript-less users and applying CSS columns for the rest. Whichever your decision is, just make sure it's best for your users.

A Book Apart: Design Is A Job

Osvaldas Valutis — Mon, 03 Sep 2012 12:24:41 +0300

The book Design Is A Job is not the first book from that wonderful A Book Apart collection I have read. But it's the book from the whole series that I want to talk about first, because it analyzes a different aspect of design as a profession, as a daily bread. Your design is useless if you are unable to sell it, if you can't convince people that your solutions are in the right place and at the right time. So finally there comes Mike Monteiro from Mule Design to tell you how to do that and shares his best from 11 years experience.

First of, this book was not written for people who expected 137 pages of wish-wash how clients are bad and how they want to suck you till the last drop of blood. Vice versa, the author would repeat himself a few times that "there are no bad clients" and you, you are the one and only blacksmith of your own fortune. I was lucky enough to notice one of 400 million made-per-day-tweets (2012 statistics ) with this perfect statement which perfectly closes this completely vacuous topic: "a lot of 'clients from hell' are 'designers who fail to communicate'".

Reading the very first paragraphs may make a false impression. Personally, I found the 1^st chapter a little bit prosaic. Luckily, it was just the first one and then things got far more entertaining. I think the author would agree that it wasn't very exciting, but it was necessary and a correct way to start this victorious bénéfice. While the foreword writer Erik Spiekermann describes the author as "a living bullshit detector", I'd add that Mike should turn his studio into a mediation-of-designer-to-client agency which, I have no doubt, would be leading agency in the field. Probably because Mike did not completely move away from making things and did not dedicate himself to clients. He stayed somewhere in the middle, successfully balancing between two sides.

Analyzing clients takes the lion's share of the book. From the very first handshake or phone call, to finally paying for work. Mike does not wrap the words in wool. He writes in style. Here's a classic situation how to smell the ruse:

You know that douchebag at the bar who walks up to your friends and says "You know, I usually date models...". Yeah, that guy. The client services version of that is "You know, we've got some really big name agencies who'd love to get this job". Great, go call them. Don't work for someone who tries to make you feel they're lowering themselves to work with you, even as negotiation tactic. Good work comes from mutual respect.

Having said that, Mike also perceives how important self-treatment is. If you do not respect yourself, no one else will. Designers, first of all, are thinkers, innovators and so problem solvers. Technical work is the last thing you need to do.

Beware of clients who have waited to call you until they have a perfect diagram of what they need and want you to color it in. If they're not coming to you for strategy and problem-solving, they're not coming to you for design, they're coming to you for production. And if you take on production work, you don't get to call yourself a designer.

I would exclude the 7^th chapter as the most important for me personally. I will read it every time (until I finally memorize it word by word) before presenting my work to clients. Presenting your work in a room could be a crucial moment. Coincidence or not, but I had been watching Mad Men series and reading this book at the same time. At some point, it was like watching this book based movie. Double effect.

Stop trying to get your clients to "understand design" and instead show them that you understand what they hired you to do. Explain how choices you've made lead to a successful project.

Something that is obvious but not always visible – I remember myself being this immature:

Don't waste client's time walking them through what they can already see. Your job is to explain how what they're looking at is the best way to achieve their goals.

Design Is A Job could be useful at every aspect of your professional life. Well, obviously, except pushing pixels and writing a markup. It's perfect if you are a freelancer or own an agency. It's still great if you work at agency. It's indispensable if you build websites. It's still relevant if you make logos or do other graphic work. Recommended.

Gestures-Sensitive Slideshow: Responsive and Touch-Friendly

Osvaldas Valutis — Tue, 22 May 2012 22:34:00 +0300

I'm not quite sure, but it was probably 2006 (correct me if I'm wrong) when with the birth of jQuery the very first non-Flash slideshows/sliders appeared on Web. Before that time, writing JavaScript was a horrible pain and therefore websites were boring, Internet wasn't that attractive as it is nowadays. Because nobody wanted to spend a week writing a thousand-lines code just to have something that does not work properly on any browser! Luckily, things have changed: JavaScript had become practical and that had heavily influenced the whole craft. Now things have changed even more: you can't ignore mobile & tablet devices, you must have your content accessible on any modern device.

The Problem

While working on a client project called Dizaino Virtuvė (Design Kitchen), I wanted to present interior portfolio in appealing and more appropriate way than what usually resides under the slideshow term. Not to mention accessibility on touch devices. So I thought: after all, moving mouse or sliding finger on screen is much easier than clicking or tapping arrows for dozens of times, right? Voila!

The Solution

The technique is based on some lines of HTML, CSS, JavaScript and (whole) jQuery framework. Unlike responsive and touch-friendly tooltip, I made it plugin-like so that you can call plenty of the slideshow instances from wherever you want.

Notice that the slideshow is returning what means anchors do not perform their primary function on touch devices. Consequently, this type of slideshow may not fit in every situation. Anyway, if you have a specific purpose, as it is in my case, the technique should serve well.

HTML

The structure couldn't be simpler: container and unordered list. What about content? It's totally up to your imagination: it could be anything from pure images to tables. An example with images:

<div id="slideshow">
	<ul>
		<li><img src="1.jpg" alt="" /></li>
		<li><img src="2.jpg" alt="" /></li>
		<li><img src="3.jpg" alt="" /></li>
		<li><img src="4.jpg" alt="" /></li>
		<li><img src="5.jpg" alt="" /></li>
	</ul>
</div>

CSS

I think you have just felt what the CSS code is like only by looking at the HTML above, but just in case, here's what to start with:

#slideshow
{
	width: 100%;
	height: 500px; /* slideshow height */
	overflow: hidden;
	position: relative; /* or absolute, but not static */
}
	#slideshow ul
	{
		width: 9999%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
		#slideshow li
		{
			height: 100%;
			float: left;
			margin: 0 20px; /* spacing between items */
		}

JavaScript

The plugin, actually, is very tiny, however, it has too many lines to paste them here. Paradox. So I made gestured-slideshow.js available in the next tab of your browser.

There's no surprise you can call slideshow instance(s) in this way:

$( '#slideshow' ).gesturedSlideshow();

Captions, shadows, rounded borders, gradients, textures, animations and other loud phrases, for sure, are the way to style your next slideshow, but I decided to keep my demo calm and technique-focused. For that, for implementation and for more, check the demo, please:

Demo

Wait, but what about a non-returning slideshow? Yes, hopefully in one of my further posts! If you've got any thoughts on returning one, feel free to share them: leave a comment or tweet me.

Offscreen. The people behind bits and pixels

Osvaldas Valutis — Wed, 18 Apr 2012 15:53:00 +0300

As our industry grows up, many of us seem to forget the human side of digital. There still hides a story of real people behind every interface.

With this really nice idea and a real sentence, Kai Brach starts the first issue of his magazine named Offscreen. The quote also explains what it is all about. It's about people behind bits and pixels. And by word people I mean not just people who design websites and other related digital products, but also designers who live in this and are deeply passionate about web & design. Therefore, it is even more interesting!

The first thing which falls into eyes is that the magazine wasn't printed on that cheap flashy thin paper. I did not expect this, because all of at least the web-related magazines that I bought before – were. So the feel of naturalness is probably the first thing which helps Offscreen to stand out from the rest. But this would be nothing without a good, really good content…

From the very first pages it becomes apparent how many people were included in writing, designing and making of this magazine: contributors, sponsors, interviewers. Therefore it isn't a magazine of one person, but it's more like a voice of community. May it be a paradox, but you won't find no stupid advertisement or banner carelessly dropped on article to make it harder to read for you. Advertise in style – that's how external things are presented there.

The magazine itself is also an example of perfect typography, artistic graphic elements. A special attention is paid to small details.

Unique stories-interviews of individuals play the biggest role in the magazine. I did like that there were only a few people mentioned, who I knew and heard about their works before. Actually, first when I saw Dan Cederholm's name on the front page, I thought this was going to be just another read about people I have already heard of. Nothing like that. From roughly 50 contributors I knew only 7 of them before. Now I know all fifty! Apart from interesting Dan's shares about Dribbble, you will read not less interesting as well as funny stories about creator of Pictos Drew Wilson, former interactive designer of Last.fm Hannah Donovan and so on, and so on.

The magazine also presents some sections, such as A Day In The Life Of where few designers reveal their schedule of a usual workday; On The Desk Of where selected designer shows his/her most important stuff; etc. Looks like Offscreen has everything to be an exclusive journal in the field. It really has that cozy mood.

Lots of photos in the magazine makes it fresh and playful!

Offscreen is the latest read on paper I have recently read. I found it very interesting and looking forward to receiving the second issue when it comes out or, as said, in the middle of 2012. Because I enjoyed it so much, I decided to write this blog post and support this nice initiative of Kai in this way.

I would like to end up this humble review by quoting a thought I found in the page number nine:

Every time dad tells me his idea, it's a reminder to step away from the machine and pay attention to the world.

Jack Cheng

Letterpress Business Cards

Osvaldas Valutis — Sun, 25 Mar 2012 11:12:00 +0300

Business cards, for me personally, for a long time were like a phenomenon from prehistoric times. Just like wired phones or cassette players. And there's no need to look deeper why so, because bad design is always obvious. It just happened that all of the business cards I saw in my life were so crappy, that I have been always questioning myself why people share these ugly sheets of paper with one another.

Before

In the last few years as the Internet has reached its new heights in terms of information sharing, it also became very popular among graphic designers to share and sell their business card designs online. I believe that this direct competition has helped to improve the look of business cards all over the world, because if you want to be noticed, you must produce a good design. I would lie if I'd say I was blind and did not see what was happening. These gorgeous, funny (I'm CEO, bitch!) and typographic cards have been spreading like a virus. As the matter of fact, I finally designed my very first business card. It was mine and had a feel of my personal website at that time.

Now

Along with the redesign, I also redesigned my personal business card for an obvious reason. After dealing with big printing houses, their poor customer service, thin paper and cheap paint, I simply decided to search for quality services. Actually, I did not need to search, because I had met Saulius Dumbliauskas via Twitter a couple of years ago and knew he has been running a small letterpress studio called Elegante Press in Kaunas, Lithuania.

Being charmed by their works, I designed my wish in Photoshop and sent them the image asking if they were able to bring this on my table. From the vary of options (sizes, types of paper, colors, edge painting, etc.) offered, I picked probably the most simple approach as this was my primary idea of simplicity and sent off the final PDF. I did choose one color, radiant white 430gsm paper.

After two weeks I received the package. The first impression was very promising, really lovely and careful presented. I liked how one of the cards was put out of the inner package in the front, so that when you open the parcel with shaking hands of curiosity, you can finally calm down and start enjoying the result immediately.

But most importantly, what about the cards? Clear letterpress effect. Precisely reproduced model from PDF that I sent. Thick paper, which you can touch and feel its surface. The cards are just fantastic. The people that I shared the cards with, were extremely delighted. They obviously felt special, therefore they won't throw it away to the first trash bin available. It's all about the small details.

If you are designing your personal business cards, invitations, stationery – make it special, leave an impression. And again, huge thanks to Elegante Press for the remarkable result!

More Noticeable HTML Bookmarks

Osvaldas Valutis — Fri, 23 Mar 2012 16:12:00 +0200

I have always been interested in elegant yet helpful techniques that in some way extend or rewrite native browser functionality and therefore help making websites a bit more better than they could be. The last time I shared a technique for mobile-friendly and responsive tooltip, which indirectly extends functionality of title attribute in HTML. This time: thoughts and a piece of code for, as titled, more noticeable HTML bookmarks with jQuery.

Actually, it's nothing new, nothing that you could not do or think of on your own. Just sharing thoughts and code of what I have come up with while working on UX purposes.

The Problem

Let's say you have an anchor that links to a particular location (which is actually location of the respective HTML element) on the same or other page of your website. Fine if the element is surrounded with a huge amount of the famous white space, fine if it is in the user-focus area and therefore easily noticeable. But, what if, in the worst case, it is a tiny little object squeezed among larger ones? Actually, I have a pure example here...

There is a small newsletter form in the footer of this website and I would like to encourage you subscribing to my newsletter if you haven't yet. If I bookmarked it in the old way I am pretty sure you would hardly notice the form in a second or two. In web design this is a huge amount of time which means a lot when it comes to engaging users to your product. Fortunately, I think I have an intuitive (yeah, click it) technique for you, so you can design a bit better product.

How It Works

When a page is loaded or an anchor is clicked, the script looks up for an element in HTML by id whose name has been provided via fragment identifier on page-load or href attribute value of an anchor when clicked. If the element exists, the browser then just smoothly scrolls to the location of the element and shakes it horizontally if it has an attribute/value data-bookmark="nudge" defined.

So, it's not only the shake that helps to notice the target, but also, the animated scroll itself makes easier to understand where you are on the page, whether you are being thrown to the top or bottom. I think your users would thank you for that.

Code

Here's a piece of JavaScript code, which is responsible for doing what mentioned above except the nudging.

$( document ).ready( function()
{
	function notice( selector )
	{
		var el = $( selector );

		if( el.length < 1 )
			return false;

		$( 'html, body' ).animate( { scrollTop: el.offset().top }, 500, function()
		{
			if( el.attr( 'data-bookmark' ) == 'nudge' )
				el.nudge();

			if( window.location.hash != selector )
				window.location.hash = selector;
		});
	}

	$( 'a[href*="#"]' ).click( function( e )
	{
		var current_url = window.location.toString().replace( /#(.+)/i, '' ).replace(/\/+$/, '' ),
			new_url		= $( this ).attr( 'href' ).replace( /#(.+)/i, '' ).replace(/\/+$/, '' );

		if( new_url == '' || new_url == current_url )
			e.preventDefault();

		notice( $( this ).attr( 'href' ).replace( /(.+)#/i, '#' ) );
	});

	if( window.location.hash != '' )
		notice( window.location.hash );
});

Now that we have the the first part done, still there is one unknown – a function called nudge. The way I applied it may automatically mean it is a native method of jQuery. Unfortunately not, but why not to extend the library so that we can use this function in a vary of situations later?

No matter how your element is positioned, the function adapts and keeps it in a default state when shake is complete.

jQuery.fn.extend(
{
	nudge: function()
	{
		this.each( function()
		{
			if( $( this ).is( ':animated' ) )
				return false;

			var obj		 = $( this ),
				pos		 = obj.css( 'position' ),
				left	 = obj.css( 'left' ),
				left_int = parseInt( left ) || 0;

			if( left_int != 0 && left.search( '%' ) > -1 )
				left_int = obj.parent().width() * left_int / 100;

			if( pos == 'static' )
				obj.css( 'position', 'relative' );

			setTimeout( function()
			{
				obj.stop( true, true )
				   .css( 'left', left_int + 'px' )
				   .animate( { 'left': left_int - 5  + 'px' }, 50 )
				   .animate( { 'left': left_int + 10 + 'px' }, 100 )
				   .animate( { 'left': left_int - 10 + 'px' }, 100 )
				   .animate( { 'left': left_int + 10 + 'px' }, 100 )
				   .animate( { 'left': left_int - 10 + 'px' }, 100 )
				   .animate( { 'left': left_int + 5  + 'px' }, 50, function()
				   {
					   obj.css( { 'position': pos, 'left': left } );
				   });
			}, 500 );
		});
	}
});

Finally, let's just write some typical HTML code, for example:

<a href="#newsletter">Subscribe to newsletter!</a>

<!-- here goes some "stranger" code -->

<form id="newsletter" data-bookmark="nudge">
	<!-- ... -->
</form>

I recommend using data-bookmark="nudge" wisely and nudge only what is really necessary. Do not shake huge elements. This may look and feel inadequate and lame.

Demo

Info For Dummies or How To Implement

Just put both JavaScript's in existing JS file or create a new one and include in HTML. See the example above and modify your HTML if necessary. That's it, couldn't be more simple.

Post Scriptum

Because I defined nudging function as an extension/method of jQuery, next time I am going to fully justify my behavior by putting it in more use. What about shaking user login form when wrong username/password entered? Yes, that's Apple-inspired.

Database-driven Routing in CodeIgniter

Osvaldas Valutis — Sat, 18 Feb 2012 14:10:00 +0200

CodeIgniter is simple yet elegant, open source PHP framework developed by EllisLab. They also built the well-known ExpressionEngine by using CodeIgniter as a base. So that probably just proves, how powerful the framework is as well. Nevertheless, it is extremely easy learnable. Basically, their User Guide is all you need to craft easy websites.

I chose CodeIgniter over Wordpress because wanted to have my website customized as much as possible and be able to control it all over. This post is probably an exception as I won't be blogging much about server-side things. But this time I just wanted to share a small, but very useful technique that I came up with (a year ago) after long hours of unsuccessful googling.

The Problem

Actually, it's not a problem, not a bug of the framework. It just have this annoying 'feature' that each time you want to add a page/controller, you must define it in application/config/routes.php file by adding a line like this:

$route[ 'journal' ] = 'blog';

It means that Blog controller is executed when someone visits /journal URL. Although array key accepts Regular Expressions, that does not rescue the situation: you still have to edit the file to enable your controllers. Awfully uncomfortable. It limits your abilities to make website dynamic and control pages somewhere in your super-duper backend. But what is the smart way enable the database-driven routing in CodeIgniter?

The Solution

The whole technique consists just of a small MySQL table and a few lines of PHP code. How it works? The table holds our URL → Controller records whereas the code fetches them and lists array entries (like mentioned above) dynamically. It also makes sure that further URL levels are directed to the base controller (or folder).

Database Table

Add the table `app_routes` to your MySQL database:

CREATE TABLE IF NOT EXISTS `app_routes` (
  `id` bigint(20) NOT NULL auto_increment,
  `slug` varchar(192) collate utf8_unicode_ci NOT NULL,
  `controller` varchar(64) collate utf8_unicode_ci NOT NULL,
  PRIMARY KEY  (`id`),
  KEY `slug` (`slug`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1;

PHP Code

Replace the code in application/config/routes.php with the one below:

$route[ 'default_controller' ]	= 'main';
$route[ '404_override' ]		= 'error404';

require_once( BASEPATH .'database/DB'. EXT );
$db =& DB();
$query = $db->get( 'app_routes' );
$result = $query->result();
foreach( $result as $row )
{
	$route[ $row->slug ]					= $row->controller;
	$route[ $row->slug.'/:any' ]			= $row->controller;
	$route[ $row->controller ]			= 'error404';
	$route[ $row->controller.'/:any' ]	= 'error404';
}

Feel free to change the values of default_controller and 404_override to what you need or already have. That's it! Now you have a database-driven routing in CodeIgniter enabled!

Example

Let's say you have a controller (class) named Portfolio, but prefer to make it reachable not by very long /portfolio URL, but by shorter /work. Simply add a database entry and you're done:

INSERT INTO `app_routes` (`slug`, `controller`) VALUES ('work', 'portfolio');

Last Bits

Managing routes via MySQL queries is pretty the same as editing the routes.php file. To make this type of routing meaningful, you should develop a tool for your backend that allows to manage `app_routes` table. Have a look at mine for an idea:

Responsive and Mobile-Friendly Tooltip

Osvaldas Valutis — Thu, 16 Feb 2012 10:48:00 +0200

Tooltip is a splendid invention. Small detail in web design that plays a big role when it comes to user experience. Usually, tooltips are used to present a tiny amount of hidden content (mainly explanatory, so-called tips), that pops up when user moves a cursor over or clicks (less common) on a special target.

When working on my personal website, I was in need of a tooltip. I decided not to limit it just on a typical definition of a tooltip, but also make it a better occurrence using CSS and jQuery technologies.

Key Features

It's responsive. It relies on a maximum width value when viewed on large screens, adopts to narrow environments and picks the best viewable position relatively to the target (top, bottom; left, center, right);
It's mobile-friendly. It pops up when a call-to-action button is tapped and disappears when tapped on the tooltip itself;
It's HTML formatting capable. Need to write some words in italic or so? No problem, this will work out.

CSS

To begin with, let's build the look of our tooltip. No fancy styling, just major properties so you can clearly see how it works (all of the sexy things will take part in the demo below).

#tooltip
{
	text-align: center;
	color: #fff;
	background: #111;
	position: absolute;
	z-index: 100;
	padding: 15px;
}

	#tooltip:after /* triangle decoration */
	{
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid #111;
		content: '';
		position: absolute;
		left: 50%;
		bottom: -10px;
		margin-left: -10px;
	}

		#tooltip.top:after
		{
			border-top-color: transparent;
			border-bottom: 10px solid #111;
			top: -20px;
			bottom: auto;
		}

		#tooltip.left:after
		{
			left: 10px;
			margin: 0;
		}

		#tooltip.right:after
		{
			right: 10px;
			left: auto;
			margin: 0;
		}

JavaScript

$( document ).ready( function()
{
	var targets = $( '[rel~=tooltip]' ),
		target	= false,
		tooltip = false,
		title	= false;

	targets.bind( 'mouseenter', function()
	{
		target	= $( this );
		tip		= target.attr( 'title' );
		tooltip	= $( '<div id="tooltip"></div>' );

		if( !tip || tip == '' )
			return false;

		target.removeAttr( 'title' );
		tooltip.css( 'opacity', 0 )
			   .html( tip )
			   .appendTo( 'body' );

		var init_tooltip = function()
		{
			if( $( window ).width() < tooltip.outerWidth() * 1.5 )
				tooltip.css( 'max-width', $( window ).width() / 2 );
			else
				tooltip.css( 'max-width', 340 );

			var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
				pos_top	 = target.offset().top - tooltip.outerHeight() - 20;

			if( pos_left < 0 )
			{
				pos_left = target.offset().left + target.outerWidth() / 2 - 20;
				tooltip.addClass( 'left' );
			}
			else
				tooltip.removeClass( 'left' );

			if( pos_left + tooltip.outerWidth() > $( window ).width() )
			{
				pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
				tooltip.addClass( 'right' );
			}
			else
				tooltip.removeClass( 'right' );

			if( pos_top < 0 )
			{
				var pos_top	 = target.offset().top + target.outerHeight();
				tooltip.addClass( 'top' );
			}
			else
				tooltip.removeClass( 'top' );

			tooltip.css( { left: pos_left, top: pos_top } )
				   .animate( { top: '+=10', opacity: 1 }, 50 );
		};

		init_tooltip();
		$( window ).resize( init_tooltip );

		var remove_tooltip = function()
		{
			tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
			{
				$( this ).remove();
			});

			target.attr( 'title', tip );
		};

		target.bind( 'mouseleave', remove_tooltip );
		tooltip.bind( 'click', remove_tooltip );
	});
});

HTML Example

<abbr title="User Experience" rel="tooltip">UX</abbr>

View demo

How To Implement

Put the CSS code anywhere in existing CSS file or create a new one. You can also insert it in HTML file in head by wrapping the code with <style> and </style> tags.
Put the JavaScript code in existing JS file or create a new one. You can also insert it in HTML file in head or, better, body by wrapping the code with <script> and </script> tags.
Assign the attribute rel="tooltip" and title="Enter your tip here" to any of body tags in HTML file where you want the tooltip to pop up when called. Set title value with your tip (use <strong>, <em> etc. to distinguish text fragments, but avoid block elements).

Also, be sure that you already have jQuery library included.

That's it! Simple enough. If you've got any suggestions or insights, feel free to share them: leave a comment or send me a tweet.