Whats new in Version 1.1?

SlideDeck Pro Version 1.1 is out and we’ve added a ton of functionality based off of a lot of user requests and our own ideas. Pro Users, you’ll be getting an update email in your Inbox with a link to the downoad the new version. Lite Users, you’re getting an update too, just visit the Download Page and get the latest version.

What About the Lite Version?

Don’t worry! We haven’t forgotten about the Lite version users. The new 1.1 version of SlideDeck Lite includes all of the Library Improvements listed below and now includes an un-locked stylesheet! You can now place the SlideDeck files anywhere in your file tree, edit the appearance of the SlideDeck, and use skins!

New Ways to Interact with SlideDeck:

• Control Slide Progress – Create a SlideDeck with a multi-step form and control how far your user can progress before answering questions. See this in action on the 90-Day Guitar Guides Quiz. Turn on progress control with the controlProgress option, then move users to new slides with the progressTo() method.
• Hide your Slide Titles – Need more room for your slides? Hide the spines between each slide with the hideSpines option. See this in action on our new Examples Page.
• Auto Play and Cycling – Start playing your slides automatically and even allow them to cycle back around to the first slide after playing through all of them. Turn on Auto Play with the autoPlay and autoPlayInterval option and turn on cycling with cycle option. If a user navigates to a slide or interacts with your SlideDeck with the keyboard or mousewheel, Auto Play stops automatically. You can also pause and un-pause Auto Play manually with the pauseAutoPlay parameter.
• Disable Slides – Have even further control over interaction with your slides. Disable and enable slides on the fly with the new disableSlide() and enableSlide() methods.
• Before and Callback on all slides – Run a function before or after each slide on your SlideDeck with the new before and complete options.

SlideDeck Library Improvements:

• No Flicker Implementation – The short flicker of your un-formatted content before SlideDeck loads bugging you? Us too, so we found a better of implementing SlideDeck to fix it. Download the latest version of SlideDeck and you’ll see the new way of implementing SlideDeck on your website. You can also check out the new way of implementing SlideDeck in the Usage Documentation.
• Firefox half-pixel rendering bug solution – Mozilla Firefox, as great of a browser as it is, has a little rendering quirk that would sometimes cause a single pixel width gap between slides. While this is not something we can fix as its a browser bug, we have changed the way that slides and spines lay next to each other. Now, slides will have padding instead of margin added to their left side to accommodate for the space a spine takes up. You may need to change your slide background images when you upgrade to accommodate for this if you aren’t using a repeating background; just add some padding to the left of the background equal to the width of the spine.

• Easier Interaction – Interacting with a SlideDeck is now easier than ever. Now you can interact with any SlideDeck on a page without having to make sure its assigned to a variable instance first. You can of course still use the old method if you prefer, but this makes it easy to access SlideDecks that may be dynamically created.

  $('#MySlideDeck').slidedeck().next();

  Instead of:

  var MySlideDeck = $('#MySlideDeck').slidedeck();
MySlideDeck.next();

As web users, you are all aware of the horrid things that web designers, developers and advertisers put you through. These are the top 3 things that they need to stop doing!

3. Post-Roll Advertisements

When watching a video, your users are invested (one can hope) and you’d like them to come away from that experience with a positive attitude. Nothing spoils a great video like a post-roll ad the second it’s finished playing. Most of the time, you can’t pause or mute them and they force you to close the window which means: “bye bye potential conversion”. I suppose the good thing about post-roll ads is that your users have no choice but to watch them… That’s a good thing only if you want them to associate your product or service with hatred. Also, post-roll ads are also amazingly easy to ignore once the user figures out how to stop them. It doesn’t take a genius to pause the video two seconds before it reaches the end; in this scenario, your ad will never be seen. Gladly this trend seems to be dying a natural death.

Use Pre-roll instead as it’s less annoying and users typically posses more patience for pre-roll ads than tolerance for post-roll ads. (We’re already trained that way.)

2. Mouse-Over Scrollers

We all know the trend of the horizontal scroller: Images flow from right to left, carnival shooting-gallery style. Some scrollers use the mouse’s position to adjust the scrolling effect and it’s a bad user experience in most cases.

Typically, the user’s mouse naturally wanders. We glide the mouse over the screen when searching for clickable elements and interactions. The “Hover” or “Mouse Over” effect should be used for hinting, not initiation of actions. A mouse click or the scroll-wheel should be used for creating movement, not the movement of the mouse itself, without any deliberate interaction. This issue has become even more important as of late: touch screens like smart phones or the “not so mythical after all” tablets & slate computers don’t posses a way to “Hover” the mouse over an element.

Use hints along with deliberate interactions such as clicking or clicking and dragging to allow user interaction. Don’t make something significant happen just because the user’s mouse happened to glide over that area. (Dropdown navigation gets a pass here because it’s an accepted convention.)

3. Ads Sliding in From the Side of the Window

It has happened to all of us and is my number one peeve right now when it comes to usability. You’re reading a great article or looking for some information on a well designed web page when a square ad starts to slide in from the side of the window. You get angered, distracted, and could care less about the product that is being advertised.

1. That ad was not viewed by you. The ad placed itself in your field of vision… forcefully — not very good at all.
2. When an ad starts to slide in from the side, everyone immediately looks for the “close [x]” button and tries furiously to click it. (They didn’t see your clever advertising message either.)
3. Your users are now trained to snipe anything that moves the minute it peeks it’s ugly head into this shooting-gallery of a web site.

Use inline ads instead. Your users can choose to read them or not, which means they will probably be less frustrated when your message actually gets in their field of vision – voluntarily.

Think about the experience your users have; you wouldn’t be much without them.

What’s your opinion? Give us some feedback in the comments section. What website features do you hate and how would you improve the experience?

Related Reading:
Pre/Post roll ads are on the way out
Slideshows In Web Design: When And How To Use Them

When it comes to hosting your website, there are three main options available to you: Dedicated Hosting (A physical computer just for you.), A Virtual Private Server (Where many dedicated-style servers are emulated in software and exist on one physical machine.), or Shared Hosting (Where many websites share one server, the server’s settings and its horsepower.)

Dedicated hosting is obviously the most powerful option, but it’s not affordable for smaller projects and can require regular maintenance. Shared hosting on the other hand, is typically better for a small site or blog. The price of shared hosting is usually very affordable, but it comes with a few conditions. How severe these conditions are is what separates the good hosts from the bad.

Below are what I believe are the top 5 most important things to consider when choosing a shared hosting provider.

5. The Control Panel

Some web hosts give you full access to your control panel, and some don’t. Railsplayground (which lets you host PHP sites too) gives you full control panel access and allows you to have a lot of control over your settings, email addresses, ftp accounts, and databases. 1and1 shared hosting on the other hand, leaves much to be desired (in general, phrases like “one click install” are a sign that host is catering to the “moms and pops” out there). Some hosts also allow you to create multiple control panel accounts, allowing you to give people access to their own control panel account and domains.

4. Advanced Server Access, Namely SSH

SSH or Secure Shell is the “Scary Black Screen” that you might see some system administrators using. As a designer, novice developer or website owner, you might not see the importance of this screen; but it’s important. Not having SSH access for your IT/Development team is like taking your car to the mechanic with the hood welded shut. There’s only so much troubleshooting that can be done without the scary black screen. SSH access will also allow you to give your developers an environment that they are familiar with. Familiarity means less mistakes, and increased turnaround times.

3. Reliability

When many sites are running on the same server, it is entirely possible that one of these sites will be swamped with traffic from Twitter or Digg and that will more than likely tackle your site to the ground. Before you know it you’ll get an email from one of your friends saying “your site is down!” MediaTemple’s Grid Service is a great way to ensure that if you need the extra horsepower, you can provide it easily; while Grid Servers are technically shared hosting, they will automatically scale in real time to ensure that your site stays online. The above Chartbeat alert is not something you want to see.

2. Complete PHP and .htaccess support

PHP is the brains of your Wordpress blog or the engine behind your contact form; your visitors might use it to to send you their resumes or upload photographs to your community driven site. If you don’t have the right privileges, you may not be able to adjust the maximum upload file-size or adjust other settings that you need for your site to run just right. These settings are often adjusted by configuring the .htaccess file (say: dot-h-tee-access or just h-tee-access). Lower cost web hosts often lock the settings that can be tweaked by this file for security reasons, and that typically forces you to compromise… a lot. This can lead to more troubleshooting hours for your development/integration team.

1. Customer Support

If your host is good and your development team has treated you well, your site should run smoothly with very little maintenance. Problems do occur occasionally, and if you can’t reach your host for support or you have to wait 24 hours for a response, then they are not the host for you. Customer support is paramount when your access to the service you are paying for is remote.

Here Are Some Hosts That I’ve Dealt With Personally:

Hostgator Shared Hosting “Baby Plan”

• Very reasonable pricing
• Only one control panel account
• Good control panel access
• SSH can be enabled, but it’s limited and must be requested through a support request process.
• Phone support will keep you on hold for a long time, and emails have a 12 hour turnaround in my experience.

MediaTemple “Grid Service”

• More expensive than others
• Excellent control panel access
• Full SSH access without letting you do dangerous things  (Dangerous things can be requested manually through support)
• Phone support is prompt, thorough and summary emails are sent after support calls

RailsPlayground “Developer Hosting”

• Very reasonable pricing
• Ability to host RubyOnRails applications with static instances
• Ability to create multiple control panel accounts
• Good SSH access (One SSH account per control panel account)
• Email support is so prompt that I’ve never had the desire to try phone support

Choosing a host is quite tricky unless you know what to look for. If you know what to look for, then don’t compromise on quality. Those few dollars per month aren’t worth the trouble.

Related Reading:

• Why You Should Avoid Shared Web Hosting
• VPS Hosting For Your Business
• Blogs On Shared Web Hosts: Right Idea?

A couple months ago I wrote about the importance of using social media. This post will show some of the new and current trends in social media, specifically facebook and twitter. Sure, it’s great to throw an icon in the footer of your site to attract followers, but what about actually using social media to provide dynamic content or increase conversions!? The examples below can provide value to your site and your users.

Facebook- Badges
Facebook offers some really cool & simple badges including fan badges, customizable profile badges and photo badges.

Twitter  – Buttons
Pretty basic but these little guys look pretty good.

Facebook – Comments Box
Commenting made easy! This widget allows users to comment directly on your site. Use it after posts, or simply as a comment wall. Check out the tutorial video here

Twitter – Profile Widgets
This customizable widget pulls in your tweets and allows you to specify color, dimensions and preferences.

Twitter – Search Widget
This thing is awesome! Specify keywords, hashtags, @mentions, location, and / or logic, time, even attitude! Enter your search query and watch the content flood in.

Twitter – List Widget
Create a user list from a targeted group of users and display their tweets on your site.

Twitter – Retweet, Facebook – Share
Use tweetmemes retweet badge or facebooks share badge to spread articles and other interesting content. Get retweeted by a big name on twitter and watch your pageviews skyrocket!

Facebook – Fan Box
Have a facebook page for your business? Allow users to become a fan without leaving your site! You can even include your page’s stream in the widget.

Facebook Connect – Single sign on
Increase user registration rates dramatically by allowing your users to register using their facebook account. Not only does this provide an easy registration for them, it accesses their profile picture and other information such as their friends, activity and more!

There is a lot of information out there. Thanks to open API’s provided by companies such as facebook and twitter, this information is readily available and for the most part free. It is important that this information is used wisely and responsibly. If content is irrelevant and invaluable to users, it will eventually drive them away. However if used effectively, social media can drive traffic, add value and increase conversions within your business. Social media will not make you rich over night but can add valuable content and features for your users. But please use responsibly, no one wants to tweet out their upcoming dentist appointment (at least I hope not).

Related articles by Zemanta

• Twitter’s Answer To Facebook Connect (techcrunch.com)
• 8 Very Useful Facebook Apps For Bloggers (shoutmeloud.com)

IE6 is bad for user experience. Set your users free, drop IE6 support and encourage them to upgrade to a modern browser, it will take more than Google to make this happen. In my last post I covered briefly the IE exploit that hit some large companies, notably Google. I also talked about Google’s decision to drop support for IE6 on March 1st for the Google Doc’s Suite and Google Sites. Covered in this post are the benefits of dropping IE6 to you as a website owner, why putting IE6 to rest would mean a better user experience for all, and more reasons to stop supporting the browser.

Why this is beneficial to you as a website owner

When it all boils down, dropping IE6 support saves you time, and that saves you money. In addition your designers will have more freedom in their design and interaction, your developers will be less stressed and frustrated not having to spend hours debugging for IE6. In addition to saving you time, money and making your team more happy, you now have more modern development options available to you, allowing you to enhance your user’s experience. As I have mentioned before, the web is an ever changing environment, new technologies are created everyday. Some stick around and others don’t, but those that do typically rely on modern browser technology and future focussed; they look ahead and not back. As an added bonus you are also helping your users improve their experience and security on the web, the more people that drop support for IE6, the quicker the transition to modern browsers will be.

Better User experience for all if it is dropped

Here are some things not possible in IE6, that are possible in other modern browsers:

24-bit PNG buttons with drop shadow using alpha transparency. Notice the IE6 button has a light blue background applied when using alpha transparency

Full use of 24-bit PNGs: We can now use awesome alpha transparencies. Want a drop shadow on that container… easy. Want a glow on that button… easy. No need to get those images to line up perfectly with background colors, or the need to create new images when background colors change.

Use of child selectors in CSS: With CSS2 child selectors we can write CSS rules to apply to direct children. ex: #content > p only selects the p’s in the element with the id of content. Less “hooking” is required, cleaner markup.

Use of attribute selectors: We can use CSS2 attribute selectors to apply styles to elements with a specific attribute. Again, this means less hooking our markup with classes and id’s. ex: img[alt="ThumbNail"] only selects images with an alt of ThumbNail. No need to add a class to select this element.

Multiple classes: We can reference multiple classes in CSS. ex: .container.left.first only selects elements with the class container, left and first given to it. In IE6 this works sometimes but is extremely buggy and unreliable.

IE6 Hacks gone: one example: no more having to overwrite or hack out that pesky double margin bug IE6.

IE6 is also a slow at processing Javascript, as well as not being able to utilize alot of the newer methods and libraries. IE in general is slower than most other modern browsers, we can definitely notice IE8’s lacking in smooth animations and effects.

Why you should stop supporting IE6

If you stop offering support for IE6 you are helping move the modern web forward. You are giving your users a better experience by having the ability to use new techniques and technologies to enhance your site and their experience while using it. Here is an option you could use to encourage your users to upgrade to a newer browser: ie6update.com. When you make the decision to drop IE6 support, sign up at idroppedie6.com and feel good about it.

Conclusion

There are a lot of awesome technolgies and techniques out there for you to take advantage of when building or updating your website. Don’t be dragged down by an old and inefficient browser. Set yourselves and your users free by dropping IE6 support and having your team take full advantage of modern technologies. Improve your user’s experience and encourage them to browse the modern web more securely and efficiently. If you have dropped support for IE6 go ahead and post a comment on how this has let you improve your user’s experience.

Cheers!

Related Articles

• Google Is Dropping IE6 Support – So Should You – Part 1
• 10 Cool things we’ll be able to do once IE6 is dead
• Modern Browsers for Modern Applications

A webpage usually has some sort of order the designer tries to guide the user through. There are plenty of ways and elements involved in getting the user to read through the content, but I’ll focus on some pretty simple and standard ways to create contrast in order to push the message of the site and hopefully accomplish the company’s goals.

Contrast through Color

Color is probably the first thing that comes to mind when thinking about contrast. Especially important with typography, color contrast creates a visual distinction between elements and dictates what is “important” to read and what is “more important” to read.

Sure, the word “VIRGIN” will grab your attention, but there’s no doubt that hot pink stands out beautifully on that pure white.

You can’t get more contrast than black and white. A quick glance at the site and it’s very clear what the message is.

The color contrast created with the background makes the foreground content area well framed and easy to read.

Contrast through Size

Large fonts, images and elements are quickly noticed by users. While over sized elements are a more recent development in the web community, it operates on the basic principles of contrast: big things stand out when placed next to small things.

Text doesn’t get more readable than this. There’s a reason newspapers use large, black, serif fonts.

Quommunication carries it’s style of large bold fonts throughout the site. It becomes a clear indication of content sections.

With imagery as powerful as Jesus Christ, it’s no mistake that a huge space was dedicated to his portrait to tell the user exactly what the site is about and focus the user on the message.

Contrast through Depth

Depending on the style of a site, there can be many visual planes, but typically there’s a background, foreground and something beyond that for elements with drop shadows, indentations, grunge elements and more. These virtual layers are great because the designer can push elements closer to the user.

Campaign Monitor creates shadows and lighting to push their screenshot forward and present their product in a professional and elegant way.

Fun elements like these are one of the first things scanned by the user because they push past the foreground.

Those giraffes appear closer to the user even without a drop shadow. They may not have a message, but they do enforce the feeling and mood of the site.

Conclusion…

There are many other ways to use these techniques, as well as other ways to create contrast in your pages. However, these techniques only work in moderation since they’re only effective through visual differentiation. If there’s nothing but 72pt gray text on a white background, nothing stands out and it becomes hard to read. Elements only look dark when they’re next to something light… elements only look big when they’re next to something small.

Helpful Resources

• Become a Master Designer: Rule Three: Contrast, Contrast, Contrast
• The Principle of Contrast in Web Design
• The Showcase Of BIG Typography
• Showcase Of Clean And Minimalist Designs

We are pleased to announce that we are kicking off a new project with VMIX Media, a leader in the online video space. We are working side-by-side with the VMIX team to create some new elements for their video and rich media management platform solutions.

Our partnership with VMIX is a perfect combination of teamwork, innovation and creative thinking. Working in close collaboration with their internal team, we are designing the structure and flow of some advanced new functionality, to ensure each new unique use-case has an easy and enjoyable experience with the platform.

We feel that the technology behind VMIX is best-in-class and are excited to be working with them to create a top-notch design for the new features in the system.

We’ve been working hard on getting a WordPress plugin created for easy, code-free implementation of SlideDeck on your WordPress blog or website. We are currently holding a private beta to help us work the kinks out before releasing it to the public and need your help!

Signup for the SlideDeck WordPress Plugin Private Beta

We need people who will be willing to install the WordPress plugin and give feedback to us on any bugs you encounter, features you would like to see, or comments you have on the way the plugin works. Once we select the first beta group, we’ll send you an email with setup instructions.

A few weeks back you may have read some articles regarding Google, Adobe and others being victims of an IE exploit. Microsoft recommended its users stop using IE6 and IE7 now due to a security loop hole (original Microsoft Security Advisory). I am sure this only encouraged Google to finalize their decision to drop support for IE6 on March 1 for the Google Docs Suite and Google Sites, the rest to follow later in 2010, we hope IE7 will be soon to follow as well. There are a lot of issues with IE6 and I am sure many developers could support me in saying that it is an inefficient browser and a time sink for current development standards. This is a 2 part series, focusing on some details and information first and following up next week with the benefits of following in Google’s footsteps in dropping IE6 support. 

Why is Google dropping IE6 support?

Google states that they are dropping support for IE6 primarily for its shortcomings with modern web technologies, which is a darn good reason. I cannot help but imagine that their recent hit with the IE exploit was a contributing factor here as well. In their official announcement regarding the IE6 support drop, they argued that the web is an ever changing thing and that older browsers cannot support newer web technologies efficiently, or in some cases at all. And I could not agree more, because it is true.

Some IE6 tidbits

IE6 was released on August 27, 2001… that is over 8 years ago, that is a lifetime in tech. I am still amazed and baffled that people still use this browser, especially with newer versions available. I know that when it came out it was cutting edge, but web technologies are constantly changing and progressing, and if you do not keep up then you get left in the dust.

The IE6 market share has been consistently dropping, and contiues to do so. With roughly 10% of the market share today; the numbers are slightly less in US and Europe. One of the main reasons the market share is still as high as it is, for such an archaic browser, is that when it was originally released a lot of developers took advantage of the many proprietary Microsoft technologies not part of formal browsers.

What does this mean? Well – here in 2010, the same people that took advantage of those technologies are stuck with them, not being supported by anything but IE. IE6 does not comply with modern web standards and is insecure as stated by Microsoft themselves. It is an old and unsafe browser, trying to fight with sticks and stones in the Iron Age of the web.

What dropping IE6 could mean for the web

The first thing that comes to mind is a better and more fulfilling user experience. Along with the increased growth of more modern technologies. Look at Google for example, they are just now finally dropping support for IE6. Imagine what their services might have been like, if this had occurred 1 year ago, 2 years ago. More sites dropping IE6 support would allow modern technologies to flourish. Sites would become more lean and sexy, able to use some newer development technologies available for efficiently, which I will talk about in part 2 next week.

Website owners would save time and money on their development costs. Designers could be set free and not be put in an IE6 shaped box. It would mean more secure browsing, good for businesses, schools, etc. Sure there are many companies that would need to update their intranet to not rely on IE’s proprietary technologies, but they will need to sooner or later.

Why you should drop it too

Better user experience, better security, help you save money, help to encourage its passing… There are many companies that have already dropped support for IE6. We here at digital-telepathy have. While we will still develop for it if absolutely necessary by the needs of the client, it won’t go without a recommendation against it and around 20% additional development time quoted. If more sites, larger ones like Google, drop IE6 support, then I can see websites start to flourish and the user experience all around start improving. Supporting IE6 only encourages users and companies to still use it.

Conclusion

IE6 is an old and inefficient browser. Come and help encourage IE6 users to get a better user experience by dropping support for IE6. Check back next week for Part 2 of this post where I will share with you in further detail:

• Why this is beneficial to you as a website owner
• Further details why you should drop IE6 support too
• Better user experience for all if IE6 is dropped
• and more

Resources

• Browser Stats
• Google’s Announcement
• Microsoft’s Warning
• Microsoft’s Security Advisory
• Google says Bye-bye to IE6 (geardiary.com)
• Opposition to Internet Explorer 6 snowballs (v3.co.uk)
• IE flaw gives hackers access to user files, Microsoft says (infoworld.com)

Great looking fonts are not reserved for those beautiful, sometimes elaborate, headers. Put some thought into your choice of base fonts, the default fonts on your website. Do not just settle for Arial, Verdana and Georgia only. Why put so much effort into designing and finding the perfect, awesome, totally unique display font for your website if you are simply going to settle for one of the defaults to support it? An amazing display font and a matching, great-looking typeface for the body creates a complete and polished final design. Dig deep and do some research on some amazing font stacks. It is a treat to stumble onto a website that uses a creative font stack to create a comprehensive experience and polished presentation.

A website’s font stack has the power to create a character and personality that is not obtainable with the basic font choices. The first website that brought this to my attention was dropbox. While using their web app one day, I noticed they use a single typeface on their website that I have never seen before. They had taken ownership of a look that is not obtainable without this unique font choice. This font was so intriguing that I dug in a little deeper to explore. Turns out, their font stack was quite creative. Segoe UI was being used as the primary font and the appearance of this font is quite a treat for anyone having that on their computer. I noticed another example of the effect of body fonts when I viewed facebook for the first time on a PC and not my Mac. Facebook was not the same without Lucida Grande. The experience and design of websites is not of the same caliber when fonts that are bland and have been used for so many years on the web are applied when better fonts are available.

Dropbox font stack
{ ‘Segoe UI’, arial, verdana, ‘lucida sans unicode’, tahoma, sans-serif; }

The rough animated gif examples below show the differences between a basic base font choice and the font choice the design team eventually made. The difference can be see much better if you check out any of these websites in your browser and change the font with FireBug or any of the built in inspectors. It is much more obvious

Apple

This is a section of Apple’s Mac Page. The typeface Apple uses is “Lucida Grande”. This type face has a bit more personality than their competitors, Arial. It all has friendly characteristics with the softer curves and less ridged letter forms.

iGoogle

Google chose to use Arial as their base font. They probably made their choice for a number of reasons, but Google’s content focused, down to business mentality works well with Arial.

Dropbox

Dropbox uses Segoe UI which comes with new versions of Windows. Not everyone will have it, but it is a treat to see it if you do. Has similar characteristics as the humanist sans-serif Lucida Grande with softer curves, but also has a great looking italicized style.

Now, I am not saying Arial, Verdana and Georgia should be forgotten, but we are supposed to be creative as designers. I am setting a personal goal to try and use creative font stacks that will be both a treat for most users, degrade gracefully, remain functional and be appropriate for the client. Please, no Comic Sans or Papyrus, even if you think you are James Cameron.

Related articles by Zemanta

• Guide to CSS Font Stacks: Techniques and Resources (smashingmagazine.com)
• Web Typography 2009 (slideshare.net)

I recently wrote a guest post about 2010 design trends on the influential web design blog, WebDesignerWall. In the post, I introduced the idea of Design Simplicity. Here is a brief introduction to the article. Read the full article here.

HTML5 Video, not HTML5-format Video…

Recently I’ve been hearing a lot of buzz about HTML5 Video, and my biggest gripe is that people are referring to it as if it’s a format. Let’s get that straightened out right now. There is no such thing as an HTML5 Video. There is such a thing as an HTML5 compliant browser playing back video using the <video> element instead of Flash, Windows Media Player or QuickTime. Now that the misunderstanding is all cleared up, let’s move on to the considerations you might make as a content distributor or an end user.

Why Does (almost) Everyone Use Flash to Serve Video?

It’s YouTube’s fault really. Before YouTube became the leviathan it now is, people used QuickTime, Windows Media Player and even Real Player to distribute videos online. This was imperfect as in those days, most Windows users didn’t have QuickTime, most Mac users didn’t have Windows Media Player, and everyone hated Real Player. Although YouTube was not the first to use Flash as a video player, they definitely popularized it.

Using a Flash player allows you to design your own player controls and features, interrupt the video with ads, and attempt to mask the source video file, making it difficult for viewers to download the video and share it with their friends; the full-screen viewing option was also a perk of using Flash as a video player.

In the days of an Internet that was free of ad supported videos, crowded with dial-up modems, and accompanied by Zip Disks, it was a great thing for people to be able to download your video and share it with their friends. Today things have changed.

Sites like YouTube, Hulu, cnet.com, nbc.com and others depend on Flash as a mechanism to serve pre-roll ads and insert commercial breaks into the videos/television shows you watch; they love Flash. It’s important to note that some clever individuals have devised ways to download YouTube videos, so you can watch them on your desktop without a browser or Flash. One recent implementation is to change the y in YouTube to a 3 and the site http://www.3outube.com/ will give you a download link for the video you were watching. These hacks are usually closed by YouTube after they become popular.

Why Does Apple Seem to Hate Flash?

Apple delivers the full web experience on its iPhone and more recently, the iPad. However some argue that Flash is missing from this experience, and are hopeful that Apple will add Flash support to the iPhone OS. Apple has a real conflict of interest here; many users would love to use their iPhone to view Hulu or another TV network’s website, but the issue is that Apple already has a commercial distribution method for TV shows: iTunes. Here’s an example of a company that does not love Flash.

How Does This Affect the End User

For the most part, the end user does not know any better, and with Flash penetration being close to 100% (meaning that most computers have it installed) it remains to be the most reliable way to get a video to your user. If you use a Flash player to serve your video file, chances are that your user will see the video and be able to play it back with no trouble.

Why Do We Even Care About HTML5?

Flash is owned by Adobe, and it’s closed source which means that they control it from beginning to end. HTML is an open standard that previously lacked the ability to play back video files natively, but HTML version 5 aims to change that. Not using flash to embed video will appeal to the purists out there, but it may not even matter to the end users. From a technical standpoint, HTML5’s native <video> element will allow many of the same features as a typical Flash based player, but without the overhead of an additional plug-in and the increased memory use that comes with it. With HTML5 we will be able to create video players that load more quickly, have completely custom controls, and offer better accessibility than Flash players can.

What Browsers Support Native HTML5 Video Playback?

Currently the latest versions of Firefox, Chrome & Safari support HTML5 video playback, however Firefox does not yet support the video formats being used by YouTube in their HTML5 beta note that they don’t show HTML5 videos when the video has ads. Internet Explorer 9 (which is still in a closed beta) is said to have excellent support for HTML5 however it’s not public yet, so only time will tell if the HTML5 support is what we all hope it’ll be.

In summary, HTML5 is the future and videos online are here to stay, but the truth is that Flash has carved out a nice home for itself in the delivery of commercial video content and they like it that way. The content creators are happy about it too! I doubt that end users desiring a purer experience are either plentiful or persuasive enough to change that anytime soon. So if you are a content creator, let your users know that you are aware of HTML5’s native video playback ability, but keep that Flash player for as long as you can, as it practically guarantees your users will see your videos.

It’s also important to remember where Flash came from. Flash excels at creating rich vector animations, interaction with sound, and is backed by a powerful scripting language. Websites like Albino Black Sheep host thousands of Flash-based games that would not be possible without the power of Flash. Today the most common use of Flash is as a video player, but it’s an amazing platform for accomplishing so much more than playing back video files and serving ads.

Related Reading:

Video on the Web: http://diveintohtml5.org/video.html
Vimeo’s HTML5 beta: http://vimeo.com/blog:268
YouTube’s HTML5 beta: http://www.youtube.com/html5

“Pop” is a pretty common request in design. While it’s not the most descriptive edit, I typically translate it into adding more contrast to an element. That can be done in lots of different ways, but here are some easy ways to give a more physical feeling to your screenshots or photos.

A Physical Piece of Paper

These shadows have a realistic shape that makes the screenshot look like an actual piece of paper. The realism created with these shadows is what attracts the user’s attention.

http://www.getzcope.com/

http://www.reinvigorate.net/

The Small Bottom Shadow

These are a subtle and easy way to give your screenshots a feeling of depth. This technique makes the screenshots appear to be on a foreground above everything else.

http://paramoreredd.com/

http://www.cobblestonecn.com/

The Angle

Don’t just angle screens for fun, the great thing about these is that they can direct a users attention in a particular direction. While ImageSpark makes it easy to scan from their selling point to the images, eWedding angles the screens to keep the focus on the center image.

http://www.ewedding.com/

http://www.imgspark.com/

The Apple Reflection

Apple made this technique popular, but Panelfly takes their own spin on it and blurs the reflection. The reflection gives the feeling of something being clean and smooth, but still with a certain degree of realism to grab the user’s attention.

http://www.apple.com/

http://www.panelfly.com/

Glowing Background

If you want your screens to “pop” why not have some serious contrast with a light screen on a dark background. The glows in the background give a real physical spotlight feel to focus the user on the screenshot.

http://www.mailchimp.com/

http://www.ohmedia.ca/

Conclusion…

Does that mean every single screenshot, image, icon, button and header text should have these sort of treatments? Of course not. These examples “pop” because of the contrast they make between real world objects (in this case the screenshots) and graphics (gradients, fonts, etc.). These examples are effective because they draw the user in to focus on the product without having to over-design. These different lighting effects also create depth, and present the screenshots in the foreground.

As a portfolio, software, e-commerce site, screenshots are the product and therefore it’s important to show them to users in an effective way. Judging a book by it’s cover may be wrong, but it’s what people do, so win them over with a well presented product.

Related Articles

• Design To Sell: 8 Useful Tips To Help Your Website Convert
• Pattern Tap Headers
• 5 Simple Tricks To Bring Light and Shadow Into Your Designs

We are thrilled to be working with Joie de Vivre hotels. Bill, Chuck and I recently flew up to San Francisco to meet with their team and experience a few of their amazing hotels. If you are not familiar with JDV, they are a boutique hotel company founded by Chip Conley. They have hotels throughout California including San Francisco, Orange County, Los Angeles and Sonoma. Each hotel is unique in style and character.

The entrance to Hotel Adagio

We began our experience and strategic process by booking different hotels throughout San Francisco. I stayed at the Phoenix Hotel, Bill at the Adagio and Chuck at the Laurel Inn. When we met with the JDV team we shared our booking and hotel-stay experiences as first time guests (Myself) and long-time brand enthusiasts (Chuck) . We will be working with them to increase hotel bookings and improve the user experience of selecting and comparing hotels. We are currently working on strategy and information architecture to create a seamless process that facilitates this need for all user types.

Joie de Vivre is an ideal client for us in that they share our  passions for design and user experience. We are really excited to partner with them and help them grow and evolve their website to match the joy and experience that their unique hotels bring to their customers.

We are very excited to announce that we are working with Penn State University to strategize and redesign a new site for Penn State World Campus. World Campus is their online education program that offers students the ability to earn a Penn State Degree or certificate from anywhere in the world. Students are taught by the same instructors that teach in the campus environments and can choose form over 50 undergraduate and graduate programs.

Our creative squad recently flew out to Happy Valley in State College, PA to kick off the project and meet with the Penn State team. We worked closely with their core team in multiple strategy sessions and met with a large group of stakeholders that will be involved with the project as well. We returned to San Diego with tons of valuable information, excitement, and bellies full of Penn State’s creamery ice cream (some more than others…Staci).

Face to face time with clients is invaluable to us and we always like to get to know our clients in person as we kick off a project. It lends to a healthier, more engaging relationship throughout the project and helps produce great results. We pride ourselves on having great clients and it is not surprising that many of these relationships become great friendships as well.

We are really excited to be working on the World Campus project. Online education is growing rapidly and we are thrilled to be working with such a respectable university to improve the learning experience with students worldwide.

SlideDeck Pro jQuery Library is now on sale for a limited time only for $99 – that’s $200 off the regular price! Ring in the New Year with style by giving your website a refreshing new way to communicate – and do it now on the cheap! With SlideDeck Pro you get:

• Complete Customization – Design SlideDeck to blend perfectly into the design of your website. Customize presentation options, sizes, shapes and interaction options.
• Advanced Interaction Methods – Allow your visitors to browse your SlideDeck with additional interaction methods like the mouse scroll wheel and keyboard arrow keys.
• No SlideDeck Branding – No more “Powered by SlideDeck” bug!
• Free Upgrades – Get all upgrades to 1.x versions for free!

If those additions weren’t enough to whet your appetite, we’re also working on some great new features that you’ll have access to at no additional charge when we deploy them to the public:

• 4-way Navigation – Navigate within slides vertically
• Decision Tree – Setup interaction logic between slides to make your SlideDeck slides respond differently depending on user input. Great for quizzes, polls, complex form processes and more!
• Analytics – Track how far users are getting in your SlideDeck and where they are abandoning your forms
• Wordpress Plugin – Available to all users of SlideDeck, both Lite and Pro - easy integration into your blog or Wordpress managed website without needing to write a single line of code!

Get SlideDeck Pro for $99 now!

You might have heard someone mention unobtrusive JavaScript, a colleague, employee or friend, and you may not know what exactly they were referring to. My hope is to explain what it is, give some very general examples to help you better understand it, and explain why you should be using it for your website(s).

What is Unobtrusive JavaScript?

Unobtrusive JavaScript, in a nutshell is, JavaScript that is detached or separated/external from your site’s content or structure. Separating your behavior (JavaScript) from your structure /content has the same principle of separating your site’s presentation (CSS) from your site’s structure/content, it allows for more consistency and scalability for your website.

What does Unobtrusive JavaScript look like?

Here is a very general example of the difference in obtrusive JavaScript and unobtrusive JavaScript using the jQuery library. Below are examples of 2 ways to do an FAQ toggle, when the question is clicked the answer would show/hide.

Obtrusive (or in-line) JavaScript:

As we can see in the obtrusive method, an onclick event has been added to each FAQ question that shows or hides the FAQ answer. If we ever wanted to change the onclick to something else or adjust it in anyway(adding a slide or a fade), we would need to update it for each of the 3 FAQs here. Now imagine if these same or similar FAQs with the same event were located on 5 different pages of your site. That would be a lot of code to update.

Unobtrusive JavaScript (using jQuery):

HTML structure:

JavaScript located in an external file:

This snippet gets run when the content/structure of your site is loaded, it will be added to every link with the class of faqQuestion. If you need to update the event, or change the event type, you can make that change once, and it will be changed for every link with the class of faqQuestion. So instead of changing the onclick of all links multiple times you only need to change once. Your JavaScript is not meshed together with your HTML, it is now separated, you can see how much lighter the HTML is and how all your logic is contained in 1 chunk.

What are the benefits to using Unobtrusive JavaScript?

• Separation of behavior and structure/content - keeping your HTML markup clean helps make page load times faster, makes updating the code easier and keeps all your logic out of your content.
• Single file that can be cached - your JavaScript file can be cached and accessed rapidly.
• Ease in future development and making updates - your logic is in one place, hopefully organized and clean, which speeds up the process of adding and updating code.
• Saves time in updating - you do not have to wade through HTML markup or make changes to multiple files. If you have one behavior you need to update, you only need to change it once.
• Saves money – in that it saves time; time equals money, need I say more
• Keeps up with standards, current trends and best practices - your development team should be doing this already. Being familiar with the newer technologies, easier coding methods, upcoming changes to the web etc. You would not want your mechanic to be working on your new BMW M5 if the last car they worked on was an ‘88 Civic.
• Allows for ease of scalability - increase in volume and scope with less cost.

Almost all current JavaScript libraries encourage unobtrusive JavaScript practices, but whether or not you or your development team is implementing them in this method is another matter. jQuery and Prototype have great features for writing unobtrusive JavaScript, they virtually hold your hand.

So if you haven’t considered unobtrusive JavaScript, or felt that it would take too much time, reconsider. Anyone that might work on a site you build in the future will appreciate it. It can take time to switch over or get familiar with it, but trust me, it will be worth it. Ask your developers if they think unobtrusive JavaScript is important, if they don’t, consider looking for new developers.

Post a comment and let me know how unobtrusive JavaScript has improved (or not improved) your website development. I would love to hear from you.

Some Helpful Resources:

• Behavioral Separation (alistapart.com)
• Unobtrusive JavaScript – Rules to Work By (ajaxian.com)
• Easy as Pie: Unobtrusive JavaScript (phazm.com)
• Getting Started with jQuery (sixrevisions.com)
• jQuery Lesson Series: Introduction to Selectors (woorkup.com)

These are the days of the redesign. Maybe its is due to the fact that your site design was created 3 years ago and your needs have grown and changed since then or maybe you now find yourself looking to further increase the way your website benefits your business goals and makes you money. Whatever the  reasons, your current site has probably become a bit of a Frankenstein creation with new pages, additional calls to action, and outdated information. But before you jump into a redesign there are steps that you should take  to make sure that you learn everything you can from your current site and plan properly so that your redesign will be effective and beneficial to your company.

The following information is based on some of the many strategies that we, as a company, employ in order to test, study, and understand our clients current websites. The information that we can gather from these studies allows us to not only plan for the business goals of our clients but to adapt those to the usage habits and needs of the target audience and the existing site users. As I mentioned these are only a few of the possible ways that you can learn from your existing site before you retire it, but they will definitely get you on your way.

1. List your entry and conversion points

A thorough site audit is necessary before any redesign project. Its easy to overlook how large your site may have become or to forget why you added certain pages, features or content to the site. Your main goal in auditing the site is to build a list of entry and conversion points. The entry points to your website will of course include your home page, but it is important to identify landing pages or sub-pages that may be directly linked to from your marketing campaigns, partner sites, banner ads etc. Not only do you want to make sure that you don’t abandon these external links, but you will want to learn about these funnels (we’ll get back to that). As for conversion points, you can simply look at conversion points as any page where a call to action will meet a business goal or sales goal of your company. These can be sign up forms, sales calls, download links, etc. These conversion points are usually measured by the confirmation page that follows the call to action, indicating a successful conversion.

2. Update your analytics to watch these funnels

Website funnels, simply put are the path or paths that lead from entry points on the website and “funnel” down to a conversion point. Funnel tracking is used to measure how effective a particular process is at leading your visitor down an intended path and then converting that visitor. It can provides a detailed process analysis and can show where in that process you have problems (also called barriers) which prevent your visitors from converting as you would want them to.

Now that you have identified entry and conversion points on the site you can create funnels in your analytics monitoring to identify potential problems in your site. If you don’t have analytics set up for your site this is a must and would be very beneficial to learn from prior to creating your new site. Here is a guide to setting up analytics in Google analytics to help get you started.

In adittion websites like Chartbeat allow you to watch real-time analytics to help give you a better understand of when people are using your site and how certain events or marketing efforts effect your site usage statistics.

3. Observer how people are using your current site

One of the most interesting ways of learning what your users need and how you can improve their experience is to watch them using the site. Usability testing with video cameras and one-way mirrors is great, but cost prohibitive for most, especially if you are redesigning an outdated site and just want to learn what you can from your existing one.

There are alternatives available that can provide you with some great information and insights. Sites like Clicktale allow you to view analytics, study heatmaps and actually watch video recordings of real user sessions. You can see mouse movements and learn from where they went and what they interacted with. This data can provide you with valuable insights into what the users are noticing, what they are missing and even what they are getting distracted by on your current website.

You can test new user demographics or a list of tasks using sites like UserTesting.com that will allow you to request specific demographics or task sets and croudsource their available testers to provide you with valuable feedback and recorded sessions.

4. Ask your users what they want

This is one that is very often overlooked. Whether its loyal, repeat users or first-time users, they are your target, they are who you are trying to reach, so why not ask them. One of the greatest pitfalls that you can encounter in a web design project is getting too close to the subject matter. Its easy to overlook the simplest usability flaws when you look at a site every day, and miss something in the plans for a redesign because you think that it is a given. Simple polling of your users can often teach you volumes about their needs and pains.

In person interviews would be great but we operate in a very virtual world.  There are many sites that exist specifically to allow you to collect feedback from your users.  Get Satisfaction provides a whole suite of tools and features to help you manage your customer satisfaction. They specifically offer widgets that allow you to add that little “feedback” tab to your page that you probably seen a lot in the web application world. If you want to tap into new audiences, Feedback Army offers a community of testers to provide you with answers from a new set of eyes that probably have not seen your site before.

5. Learn from your past

Many people and companies get very attached to their website and lose sight of the fact that it should constantly be refined, and tweaked to respond to user needs and should in fact be redesigned every few years or more often in certain industries.  While you should always be willing to overhaul your entire web presence, you should not be so anxious to do so that you miss the opportunity to learn from what you have. In doing so you not only will discover valuable information that will help you create a great new website, you will establish new habits and tools that will help you constantly improve your new web presence and keep it (and your company) growing.

Bonus: Learn from you!

Have approaches or tools that I didn’t list here? Please share you strategies and experience by commenting and telling us how you approach the task of learning from your current site to improve on what you create the next time around.

You asked for it and we answered in record time! We have just released SlideDeck Lite, a free version of unique our presentation software for download. SlideDeck Lite is a limited version of the feature-rich SlideDeck Pro. It’s a great way to give the product a try and immediately improve the performance of your website.

As I mentioned in my original post, the goal of SlideDeck, is to make it easier for users to digest and understand the content of a website. We created the software to replace the web’s current model of text heavy services pages, unclear product tours and confusing process diagrams with a fun, quick and beautiful way to interact with websites.

Here are a few ways you can use SlideDeck Lite to enhance your user experience:

• Product Tours
• Service Descriptions
• Explaining Complex Processes
• How-To Tutorials
• Feature Rich Slide Shows
• Landing Pages
• Sharing Ideas

SlideDeck is currently available as a JavaScript library plugin for jQuery. Download it and try it out.

Using CSS sprites isn’t a new technique, but I still see many developers not taking advantage of it. I’ve spoken before about the value of providing an experience to your user that makes sense, and we know that everyone appreciates speed. CSS sprites can give your website both of those things.

A Sprite on Deviant Art used for Navigation and More

CSS sprites is a very simple concept: instead of having many small images, we place all or most of those small images on a larger image and use it in many places.

Why Sprites Matter

By taking advantage of CSS sprites, the user will never have to wait for individual images to load. Once the main “sprite” has loaded, all the other related images in the sprite are loaded as well. Load time is reduced as your browser has to fetch less things; if your browser needs to load 50 tiny images, it still has the overhead of 50 requests. CSS sprites reduces this number greatly. The image to the right is a sprite I made using 13 individual icons from the FamFamFam Silk Icons Set. As a sprite, they are 4.51 kilobytes in size (4,620 bytes), however the thirteen icons total 7.95 kilobytes (8,144 bytes) if their individual file sizes are totaled. When considering the pre-loading effect, the file-size savings, and the fact that your browser only has to make one http request instead of thirteen, the benefits are very clearly illustrated.

The Technique

If you’ve got a CSS sprite that is applied to a button on your web page, that sprite could contain all three states for the button: normal, hover (for when the mouse is over it) and down (for when the user clicks the button). If you store all three states of the button in one sprite, then move the position of the Sprite depending on your desired look, there will be zero loading time and the user will never experience a disconnect from their browsing experience from the button flickering while the hover state image loads. When experiencing this disconnect, a user will typically report, “The button disappears when my mouse touches it, then it comes back!”, but with CSS sprites that will not happen.

A real word example

This button taken from the Pathway Genomics site is a perfect example of a good CSS sprite. The actual element that houses the button is only large enough to display one of these states at a time, and when you hover over the button, the sprite image is shifted “one button’s height” up and the other state is shown instead. The effect serves to provide visual feedback to the user, while ensuring that all the involved images are present and ready to go. There is also an added bonus of reduced file-size which makes the web experience snappier.

The bottom line is: CSS Sprites will make your site load faster, reduce the chance of a flicker when a button changes state, and reduce the chance of your users hitting any speed bumps in an otherwise smooth experience, and at the end of it all, we should all care about our users and their experiences.

CSS Sprite Generators

• http://spritegen.website-performance.org/
• http://csssprites.com/

CSS Sprite Tutorials

• A list Apart: CSS Sprites: Image Slicing’s Kiss of Death
• CSS Tricks: CSS Sprites: What They Are, Why They’re Cool, and How To Use Them