What happens with responsive design across multiple platforms & inputs?

It’s clear we need to define a new metaphor for user action. No longer can it be just ‘click’ or ‘tap’. We need to actually take a look at the physical context in which we would invoke said action. One solution would be to use feature detection such as Modernizr to determine if a particular input method is available and perform some trickery to display the correct terminology, but this seems like an antiquated approach treating the symptoms and not the cause.

Use more generic but contextually aware terms.

The only solution that makes sense, going forward, is to use more generic terms for user actions. We need to start relating these actions to the context in which they are to be applied. Using physical metaphors in the digital space to reinforce a user action. This may even result in is not having to even worry about explaining what a call to action does. For example; people innately know how a light-switch works. So let’s use this existing schema!

This means using ‘push’ for buttons not ‘tap’ or ‘click’. It means using ’flip or toggle’ for switches or toggles and not ‘tap’ or ‘click’ etc. Actions such as drag still hold true as they are already based on physical contexts that we can easily understand. As such, they can be transferred to any context.

So what?

I guess all we need to be aware of is how we are describing the usage of a call to action element to users. If it toggles between two states; then imply that in the design. I’m not saying that user’s are idiots; if something says click and they are on a touch device, the concept is familiar so they can translate that quickly. All I’m saying is that they shouldn’t have to, regardless of how well they can. All that matter is that you make sure users will understand what they have to do no matter what input device they  are using.

Tea round is far too constrained in terms of the inputs (no spaces are allowed) and adding new names / clearing names takes far too long. Not to mention that if you run two ‘spins’ one after another, everyone is still included in the ‘spin’. Mine would be different. So I started to build a skeleton app using javascript and I had it working in an hour or two.

The styling replicates the look and feel of a native iOS app and can also run perfectly well on desktop or tablets.

The end result is an app that looks like a native app; is cached on your device so you don’t need an internet connection – like a native app; and has the same interactions & speed that you would expect from a native app.

So how long before the native app is dead?

Well the only thing stopping it is access to functions within the device itself. Things like the camera (although there are workarounds – see PicUp) or GPS, gyroscope / accelerometer. All you need is a secure API to access that information with the user’s consent (imagine a popup screen similar to the ones you get with Facebook authorisation for apps) and you can say bye bye to a lot of native apps. So how long until this happens? Well, probably a long time.

The app business is worth £billions now so allowing anyone to create their own and not have it pass through an app store (so the creator gets all the money) is unlikely. Also you will lose the curation of apps  so there won’t be any guidelines to adhere to in order to be published. So you could get any old Tom, Dick or Harry publishing a crappy app… like the internet then.

Really though, everything is eventually going to be web based. So it’s just a matter of time.

Check it out

Have a look at the app on your phone or tablet (or even in your browser) and use it.

Try Pickr for free

This is great! Dan recommends that you use $('.bouncy').addClass('bounceInDown'); to add the class with jQuery and this is the simplest method to get you started. In fact this is the method I used when I started my site redesign.

I quickly ran into issues though. Now, it wasn’t anything that animate.css does or doesn’t do. More the fact that there was no way to replace jQuery animations with the CSS3 fancy-pants ones.

“What did you do?” I hear you ask.

Well, I’ll tell you. I wrote a little function that handled adding the classes to any element dynamically. This gave me a little improvement in terms of ease of use and speed. There was still something missing though. I only realised when I had 3 animations that needed to run one after each other, that there was no way to determine when a CSS3 animation had completed so I could run another one. In the interim I set a delay parameter so I could say ‘do this, wait 3 seconds then do this’.

This ‘callback’ functionality does exist and CSS3 animations do indeed trigger an event when they finish, you just need to set a javascript event listener to detect that so you can apply some actions. After a little Googling I added this to my function. This now worked in a very similar way to jQuery’s own animate function so it was very familiar.

Then came the plugin

A few weeks later, Dan (@_dte) mentioned me in a tweet saying that my site was using his animate.css and looked good. I thanked him and showed him my jQuery function that helped. He seemed suitably impressed and asked if he could use it. It was already a public gist on github so I said no problem. That evening I decided it would be even better if it was an actual plugin that could be used in an even similar way to jQuery’s native functions. And so jQuery animateCSS was born.

To use it is pretty easy.

Basic

$('#your-id').animateCSS('fadeIn');

With callback

$('#your-id').animateCSS('fadeIn', function(){
    alert('Boom! Animation Complete');
});

With delay (in ms)

$('#your-id').animateCSS('fadeIn', 500);

With delay AND callback

$('#your-id').animateCSS('fadeIn', 1000, function(){
    alert('Boom! Animation Complete');
});

If you want to hide an element when the page loads and then apply an effect, it might look something like this:

<style>
    .js #your-id {
        visibility:hidden;
    }
</style>

$(window).load( function(){
    $('#your-id').animateCSS('fadeIn', 1000, function(){
        alert('Boom! Animation Complete');
    });
});

Remember to use a .js (or .no-js depending on how you role) so that the element still displays for non javascript users (and Google previews).

Again, the plugin is available here: https://github.com/craigmdennis/animateCSS/

That’s it guys. Have fun.

Let me start by saying that I am not a developer, I am a designer who dabbles in jQuery and as such my code will probably not be the cleanest or most efficient but it gets the job done.

I will also assume you have some basic knowledge of jQuery.

View the demo

Recently I had to create a sophisticated jQuery interface initiated by clicking an icon and showing a div then fading it away upon leaving the div. The problem was the shape meant that when a user moved the cursor from the icon to the div they briefly left the confines of the div and as such the div would fade out. This was a problem and the solution seemed to be the Hover Intent plugin which allows the mouse cursor to leave the div and re-enter it within a certain number of ms (milliseconds) and not fade out the div (or whatever action you have written).

This is great right? Well yeah, but this only works when you hover over an element to begin with. What happens when you want to initiate the initial action on a click instead of on hover? This was my problem.

My solution:

So lets set up Hover Intent set up to work on hover with a mega-menu. Below is just the jQuery, you can see the html and CSS in the demo if you want to or download the source files here.

$(document).ready(function(){
$('body').removeClass('no-js'); // Removes the class 'no-js' from the body to let us know javascript is enabled
function slideTheMenuDown() { // This function is called by hover intent 'over:'
$(this).find('.subnav').slideDown('fast'); // Slide the menu down
}

function slideTheMenuUp() { // This function is called by hover intent 'out:'
$(this).find('.subnav').slideUp('fast'); // Slide up the sub menu
}

$('ul.topnav li').hoverIntent({
sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
interval: 100,   // number = milliseconds of polling interval (we want this to be initiated on click rather than hover)
over: slideTheMenuDown,  // function = onMouseOver callback (required)
timeout: 500,   // number = milliseconds delay before onMouseOut function call
out: slideTheMenuUp    // function = onMouseOut callback (required)
})
});

Now that we have Hover Intent working on hover all we need to do is wrap the function slideTheMenuDown in a click event. When Hover Intent reacts to a hover event, there is no action until the associated click event has triggered (basically until you click nothing happens). The result is no animation until you are hovering over the desired element and are also clicking it. Sweet right?

This is what it looks like

function slideTheMenuDown() {
    $(this).click(function() { // We wrap the action in a click event
        $(this).find('.subnav').slideDown('fast') // Slide the menu down on click
    });
});

That’s it, you’re done.

I have added a few embellishments such as adding an active class to the parent li so when you hover onto the submenu, the hover state sticks on the top level menu item.

Get the menu style as a psd from Premium Pixels

View the demo

What did people remember from them? Why did they go to them? Research shows that people enjoy village fetes because of the sense of community, fun and prizes.

Designed to give the user a feeling of fun and community, Shoutbox creates ‘bubbles’ in a variety of shapes and colours based on sound input. Any sound can be used such as a single voice, many voices or instruments. The louder the input; the larger the bubble and the longer the length of the sound; the faster the bubble moves across the screen. In addition, whenever there is a collision between the bubbles, the sound used to create the bubble is played back. Sound attracts people, drawing them together and developing an ad-hoc community wherever it is deployed.

Watch a video of Shoutbox »

The aim was to create a stamp that promotes renewable energies. While traditionally a graphic design brief I tried to make the process of informing people more tangible.

The stamps use thermochromic ink which, when heated, turns transparent. Two different colours are layered to create a nice effect. Body heat is enough to activate the process. When the ink is activated it turns transparent and reveals a QR tag underneath. The QR tag is then captured by a mobile device and automatically directs it to a mobile site. The site contains contextual information related to the specific stamp as part of a photo sharing social network

The inherent social aspect allows for real discussions about problems and solutions. With the rise in connected devices and the increase in mobile cameras, the concept relies on existing technologies. QR tag readers are available on any mobile device and can be downloaded for free. Many mobile devices are being sold with readers already installed and if this continues then the uptake of QR tag usage would naturally increase.

My dissertation is about internet security and internet privacy issues. The fact that they are both such large parts of everyone’s online experience and yet they seem to constantly battle against each other for supremacy. Can there be harmony or is there an inherent paradox between them meaning they can never function in equilibrium?

As part of the dissertation process interviews were conducted, one of which with the global IT manager of Premier Oil, to establish what issues are involved in business as well as consumer experiences and what guidelines they have to adhere to. More importantly if any of them are working or not.

Read my dissertation here ›

Yesterday at work I stumbled upon an idea that I haven’t seen before when dealing with pure CSS drop-down menus. The general premise is to use an unordered list within an unordered list activated on hover of the parent li. This is pretty standard (but won’t work in IE6 due to hovers only being available on anchor tags) and was no problem to implement:

View the demo ›

The HTML

<ul id="menu">
  <li><a href="#item1">Menu Item 1</a></li>
  <li><a href="#item2">Menu Item 2</a>
    <ul>
      <li><a href="#sub1">Sub Menu Item 1</a></li>
      <li><a href="#sub2">Sub Menu Item 2</a></li>
      <li><a href="#sub3">Sub Menu Item 3</a></li>
    </ul>
  <li><a href="#item2">Menu Item 3</a>
</ul>

The CSS

ul#menu {list-style:none;}
ul#menu li {display:inline; float:left; width:200px;}
ul#menu li a {background:#CCCCCC; display:block; padding:5px 10px; text-align:center; text-decoration:none;}
ul#menu li a:hover {background:#333333;}
ul#menu li ul {display:none; position:relative;}
ul#menu li:hover ul {display:block;}
ul#menu li ul li a {background:#333333;}
ul#menu li ul li.overlay {position:absolute; top:-26px; left:0;}

The problem?

The problem you will notice is that as soon as you start to hover over the sub menu items, the main menu item returns to it’s native, non-hover state. This is a problem as this affects the aesthetic quality of the menu and goes against the expected action.

The solution

The idea I had to solve this problem was to add anextra list element at the top of the sub menu unordered list and absolutely position it over the item on the main menu when the cursor hovers over the sub menu. Again this action is only supported by IE7 and above.

1. The list item will have a class ‘overlay’ applied to it so as it can be uniquely identified.
2. The list item will have the same text and same link destination as the main menu item.
3. position:relative; needs to be added to the sub menu unordered list in order to add position:absolute; to the class ‘overlay’
4. The position of the class ‘overlay’ needs to be the negative value of the sub menu list items. So if your list items are 20px in height, the class ‘overlay’ needs to have top:-20px; applied to it.
5. For some reason float:left; needs to be applied to the sub menu unordered list for the effect to work properly in IE7.

Have a look at the code below and check out the demo

The HTML

<ul id="menu">
  <li><a href="#item1">Menu Item 1</a></li>
  <li><a href="#item2">Menu Item 2</a>
    <ul>
      <li class="overlay"><a href="#item2">Menu Item 2</a></li>
      <li><a href="#sub1">Sub Menu Item 1</a></li>
      <li><a href="#sub2">Sub Menu Item 2</a></li>
      <li><a href="#sub3">Sub Menu Item 3</a></li>
   </ul>
  </li>
  <li><a href="#item3">Menu Item 3</a></li>
</ul>

The CSS

ul#menu {list-style:none;}
ul#menu li {display:inline; float:left; width:200px;}
ul#menu li a {background:#CCCCCC; display:block; padding:5px 10px; text-align:center; text-decoration:none;}
ul#menu li a:hover {background:#333333;}
ul#menu li ul {display:none; position:relative; float:left;}
ul#menu li:hover ul {display:block;}
ul#menu li ul li a {background:#333333;}
ul#menu li ul li.overlay {position:absolute; top:-26px; left:0;}

This is the basic principle. View the demo to see it with some styling.

View the demo ›

Please feel free to comment with any improvements or criticisms.

My Setup

• TV – LG 42LH7000
• Surround System – Logitech Z5500
• PC – Windows 7 Media Center PC

A few common problems and solutions

Problem: Loss of signal when changing inputs on the TV or when PC goes to sleep.

First thing first – With everything off, connect the Media Center to the TV with an HDMI lead. This is important because Windows 7 has old drivers for the nVidia GeForce 8200 and has problems with HDCP so your TV needs to be on and set to the correct HDMI input before you turn your PC on. This is known as the ‘HDCP handshake issue’ and is quite common. It results in a loss of signal when changing TV inputs or when the PC goes to sleep.

If, like me, you have an nVidia card then fear not as they have fixed this problem with a driver update. Go to nvidia.com and select ‘Automatically find drivers for my NVIDIA products’ and download the latest version. Mine was 130MB. Install this and reboot.

Unfortunately if you are using an ATI card there is no driver fix. The only thing you can do is download an application that disables and re-enables the HDMI connection fooling the device to re-initiate the handshake. This can be mapped to a keyboard shortcut.

Problem: No sound through S/PDIF

There are many reasons for this to happen. If you are using the Asus V3M28 motherboard then you have to switch the default audio output to be S/PDIF.

Remember to look in the sound setting to make sure that ‘allow programs to take control of this device’ is checked.

If you use VLC and can’t get S/PDIF to work or it’s stuttering, in the options set the sound output to Wave32.

There is also a problem with the S/PDIF VIA audio when the computer goes into sleep mode as when it resumes, the connections seems to be ‘dead’. A work around for this is to write a small bat file and have it run on resume which disables and enables the sound device. I think this may have been fixed in a recent Windows Update.

Getting the best experience

Media Broswer

To make the best of your Windows Media Center experience, download Media Browser. It’s a plugin for Media Center that provides you with cover art for Films and TV series, meta data for all the IMDB ratings and synopsis as well as having it’s own plugins such as themes and more information about the actual files themselves (such as 1080p or 720p or DTS audio or AC-3). It uses http://thetvdb.com/ and http://www.themoviedb.org/ to get all the information. It also provides user generated backdrops that fill the screen with scenes from whatever is selected.

You can also add multiple locations for media. For example I have films stored on my local machine and on an external hard drive. Add both locations and they show up under one category listing that I can name. So I have HD, DVD & TV. One of the plugins allows you to add film trailers to the menu.

Shark007 Codec Pack

Couple this with the Windows 7 Shark007 codec pack, you can watch any format of video on your Media Center. This is pretty straight forward to install as it uninstalls any other codec pack you might have on your system. Check the ;use Shark’s recommended settings’ to get the best setup.

NOTE: If you are using S/PDIF then in the audio tab you will need to check ‘Use pass-through (Dolby Digital)’ in the section titled ‘FFDShow S/PDIF pass-through’.

Once you have installed the codec pack and set it up, you can use Media Browser on your Media Center Extender device to stream all your content to it – this includes .mkv files. The way you do this is by opening the Media Browser configuration utility, clicking ‘advanced’ and selecting the tab mentioning extenders. Now all you have to do is add ‘.mkv’ to the list on the left as well as ‘.avi’ and any other format you want to play on your extender or just untick ‘use Transcode 360′.

NOTE: Because the Media Center had the codec to play it, you can even stream HD content to your Xbox 360!

Media Center Studio

Now you have Media Browser set up, you don’t really need the video section of the Media Center menu. It’s kinda annoying having something that you no longer need there and so Media Center Studio comes to the rescue. This provides a WYSIWYG interface for manipulating the Media Center menu to your heart’s content. I went minimal and just have tasks, TV, Music & Media Browser.

The remote

Most people tend to forget about this part of the setup which is strange as it possibly the most important. It is your point of contact with the system so you want it to feel as natural as possible and to be effortless. I recommend one of the Logitech Harmony remotes – they are learning universal remotes and much more. You can program button configurations so you use the up, down, left & right buttons for the Media Center but still use the volume up & down for the TV without having to select various inputs. It also has macros so with the press of one button you can turn all of your devices on and set them to the correct inputs! Excellent! I have the Harmony 550.

Other useful things

There are many more things that can be customised in Media Center and a great resource for find them out is http://www.hack7mc.com/

This is unlikely to change soon but the differences are becoming fewer and fewer. To make the most of this you need to choose a browser in which to make your design / functionality work the way you want it to and then compromise fix it in Internet Explorer other browsers.

Let there be light!

The main thing to realise is that all browsers are not created equal. Older browsers lack support for new technologies (CSS3 / HTML5) and render pages in sometimes odd ways. They also tend to be less forgiving with various structural models and dynamic scripting languages like JavaScript. Something often forgotten is that some users may decide to turn off features in browsers or may be impaired in a manner which affects their browsing habits.

Examples include:

• disabling JavaScript
• disabling images
• not using a mouse
• using a screen reader
• using a text-to-speech device

Now while it is near impossible to include in a design every aspect that could affect the way someone experiences a website, there are things that can be done to improve the experience where possible.

Graceful degradation

“Graceful degradation means that your Web site continues to operate even when viewed with less-than-optimal software in which advanced effects don’t work.”

– Fluid Thinking, by Peter-Paul Koch

Graceful degradation is finally being addressed as the wrong way to approach the problem – design utilising the most advanced features of a browser and where a browser is not capable of implementing those features, a compromise needs to be made. The testing of older browsers is often done towards the end of the development cycle. More often than not this results in a less pleasing site for those using older browsers. This mainly affects IE6 which is still widely adopted throughout the corporate world. Using this approach focuses on using the latest technologies and not considering the experience for people with older browsers, disabilities or with certain functionalities disabled.

So how do you add bells and whistles to a site while maintaining  focus on usability and experience? The answer is in the design process. By first focusing on what ‘everyone’ will see and use, you can address the broadest issues. Bear in mind that a good experience with a site does NOT mean pretty pictures (although they can help) and a person can have a good experience on a simple site, for no other reason than being able to do what they want to do with ease and no interference.

Progressive enhancement

Leading on from core usability is the inclusionof  features to improve the experience for those people who are able to experience them – this is known as ‘layering’, starting with semantic  (X)HTML, wrapped in some CSS and finally some JavaScript on top.

“Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.”

– Wikipedia

There is a far more tasty explaination using an M&M that defines the same point:

“Start with your content peanut, marked up in rich, semantic (X)HTML. Coat that content with a layer of rich, creamy CSS. Finally, add JavaScript as the hard candy shell to make a wonderfully tasty treat (and keep it from melting in your hands).”

– Aaron Gustafson

Good for SEO too?

When you write rich, semantic (X)HTML you are making life easier for search engines to index your site. It is written in a predictable, organised fashion and as such means the search-bots are more likely to pick up on any extra information as well as index it in the way it is intended. If you think about a search-bot ‘seeing’ in a similar way to a screen-reader, they generally only read text and links and with progressive enhancement you have given them both the best opportunity to get the most out of your site.

In practice…

It’s difficult to keep this in mind when you want to use newer technologies to make your life easier. CSS3’s rounded corner declaration or shadow facility would be great, but what happens when you meet a browser that doesn’t support it? As long as the contrast of text to background is suitable and the corners are not an integral part of the design then they will just have square boxes and normal text – something that doesn’t affect their experience too much and won’t affect the usability in any way.