January – woorkup.com 2010

Archive for January, 2010

How The iPad Could Change The Face of The Web

Sunday, January 31st, 2010

When in 2007 Apple launched the iPhone not only reinvented the phone but it also introduced a revolutionary user experience that has changed definitively the way to browse the Web with a mobile device then before.

In that same period, I remember browsing the Web with a Nokia or Windows Mobile phone was an arduous undertaking: webpages was unreadable on small screens on portable devices, slow to render in mobile browsers and all available options that allowed users to fit pages to screen (for increasing readability) was ridiculously worse than the problem they was trying to fix.

With the iPhone, Apple has changed the rules of use and enjoyment of online contents with smartphones by creating an user experience that allows users to see everything at a size that’s readable and has forced its competitors to a rapid run-up to copy that model. The big success of the iPhone has also imposed, for the first time, to internet companies, online newspapers and bloggers to pay a big attention to mobile version of their websites: according to AdMob December 2009 Mobile Metrics report, iPhone OS dominates the market of smartphones generated traffic with a share of 51%.

This scenario led to a change of perspective in designing websites for mobile phones: it is not the devices that needs to adapt to the page layout, but is the page structure that needs to be designed for the specific device. The large diffusion of websites optimized for iPhone is the most concrete example of this trend characterized by one-column layout, simpler navigation bars with biggest tabs and links that perfectly fit with the iPhone’s touch interface (read also this post: Best Practices To Develop Perfect Websites for iPhone and Mobile Devices).

What could happen in the next months with the launch of iPad? Without doubt, the large screen lets users browse standard web pages in a easier way than on iPhone, so there will not be particular problems to see every website. That will change is probably the way to interact with web pages by exploiting the potential of multi-touch interface as has already happened for iPhone and iPod Touch games (take a look at Gameloft N.O.V.A. presentation on iPad during the Apple Keynote) and this will significantly influence and innovate the structure of web pages and their features.

And what about the lack of Flash on the iPad (link on iPhone and iPod Touch)? I think the Apple’s choice drastically limits the access to many websites but it could be, hopefully, a big opportunity to accelerate the slow process to switch to the HTML 5.

Tags: cover
Posted in Technology | 13 Comments »

IM StreetScene Is The Next Video Generation Street View

Saturday, January 23rd, 2010

We all know Street View, the Google service that provides 360° panoramic views for many streets in the world. Immersive Media is working on an evolution of Street View that provides 360°, full motion, interactive video experience. Potential applications of this revolutionary technology are many (games, documentaries, military training) and, without doubt, will change dramatically the way to interact and explore 360° worlds end environments. Here are some awesome demonstrations of ImmersiveMedia technology.

StreetScene

Haiti earthquakeHaiti Eartquake 360° Video Experience

Posted in Technology | 6 Comments »

The Death of Tag Clouds

Wednesday, January 20th, 2010

In 2004, the Web 2.0 philosophy introduced a new paradigm for the Web that also marked a huge change of direction in the approach to design websites than before.

The main guidelines of the new trend in web design was simplicity, minimalism, central layout, bigger text, bold logos, gradient and reflection effects, which constitute the fundamental basis for a viral revolution of the face of the World Wide Web.

The community of web designers greeted with big enthusiasm the new “2.0” model and the result was a general run to restyle “old style” websites according to the new rules.
Tag Cloud was probably one of the most popular elements which characterized that period in web design. That kind of data representation, which uses different font sizes or colors to highlight the relevance of a tag, was an original and new way to list visually tags related to the content of a website and its diffusion and success was immediate.

I have to be honest, I never found really useful tag clouds for browsing a website and finding what I’m looking for concerning a specific tag. Well organized navigation bars and search engines are the better solutions to browse and find everything you need on a website. I think tag clouds work fine with a small number of tags but in most cases, with big lists of tags, they become really difficult to read (this is mainly due to the difference of size between words) and can generate confusion and redundancy especially when similar tags are present.

For example, I am an avid reader of Mashable and I noticed some redundancy in its tag cloud that make it unclear. Here is a screenshot of Mashable’s tag cloud. As you can see redundancy are due to similar terms such as “advertiser – advertising”, “blog – blogging”, “list – lists”, “games – video games”, “social networking – social network”, “video – viral video”.

These duplicates don’t add any valuable information but generate only “noise” and confusion.
The problem of redundancy in tag clouds is widespread on a lot of websites and is mainly due to lack of content optimization. The solution is to provide a better organization of contents or avoid to use that kind of “misleading” tag clouds.

Another very important aspect that discourage the use of tag clouds is users don’t read each single tag but scan the content with the effect that only words with bigger size text capture their attention while smaller size words are ignored. In this way, for the final user, not all contents of a website will have the same “value” and “relevance” and this altered perception can adversely affect the site penalizing the enjoyment of some contents.

My conclusion is tag clouds are not really useful and necessary elements for providing a easier browsing experience to your users. I suggest you to avoid using them on your websites, adopting instead other solutions that allow users to find easily what they are looking for such as well organized navigation bars and internal search engines. This is the death of tag clouds. What’s your opinion? Every opinion is appreciated!

Posted in Web Design | 83 Comments »

Emerging Techniques Every Web Developer Should Know

Saturday, January 16th, 2010

The Web is evolving fast: new features, formats, user needs, continuously change the way we interact with websites. In this post I want to suggest you some interesting emerging techniques every web developer should know in order to build modern web applications.

HTML 5 Offline Application

The HTML 5 specification introduces a lot of new features that radically improve the way users interact with websites and web applications. With HTML 5 developers can build easily offline web applications by using a SQL database API and an offline application caching API for storing data locally (by using a client-side SQL database) and allowing applications are available even when users are offline. This technique use a .manifest file and JavaScript to get an update of the cached files when is not available a connection to the server.

You can enable offline application caching by using the manifest attribute on the html tag:

<!DOCTYPE HTML>

<html manifest="cache-manifest">

You have to create a .manifest file that specifies which files are to be cached offline. Here is a typical structure of a manifest file:

CACHE MANIFEST

index.html

about.html

style.css

logo.png

...

NETWORK: server.cgi

According to the W3C Working Group Note about Offline Web Applications topic, server.cgi should never be cached in order to continuously get updates from the server.

Apple Developer Connection provides a full detailed, step-by-step guide to help you learning how to buit modern offline web applications. You can read the full guide here.

oEmbed

oEmbed is basically an open format for allowing an embedded representation of a URL on webpages. Facebook probably has one of the most popular implementation of oEmbed API. For example, when you copy a link from YouTube, Vimeo, Flickr, into your status bar, Facebook converts this link into a movie or image embedded on your profile.

Previously on Woork Up I wrote this interesting post “Learning oEmbed: Convert Links Into Embedded Content” where I explained how to use oEmbed API to implement a Facebook-like link-to-embedded-content feature. The tutorial is really simple, easy to customize and reuse on your projects. A working example is also available.

HTML 5 contentEditable

The HTML 5 contentditable attribute allows to make editable the content within a HTML element with the contenteditable state set to “true”. This attribute is useful for example for easily developing edit in-place features or advanced rich text editors without using third party resources. All major browsers (IE, Firefox, Safari, Chrome) implement this attribute and here is a sample usage:

<div id="editableLayer" contenteditable="true">...</div>

You can use document.execCommand to add some basic features to your custom editor simply adding this code in the head tag of your webpage:

<script language="javascript">

function formatText(cmd){

    document.execCommand(cmd, null, null);

}

</script>

This is the result:

Try to change the code within this layer

Here is an example of button to format the selected text:

<button onclick="formatText('bold');">

The previous code is only an example. I suggest you to use unobtrusive approach for separating HTML structure from JavaScript code (in this case the onclick event).

OAuth

oAuth is an open protocol that implements an authorization model for allowing websites and web applications to publish and access data stored in third party websites without sharing user login information. Yahoo! Developer Network provides an interesting and detailed tutorial that illustrates how to create an OAuth application for accessing Yahoo! services.

If you want to implement OAuth protocol on your application also take a look at the following links:

Implement OAuth for Google
Implement OAuth for Twitter
Implement OAuth for Yahoo

Tags: Popular
Posted in Web Design | 46 Comments »

Best Practices To Develop Perfect Websites for iPhone and Mobile Devices

Sunday, January 10th, 2010

2010 will be the year of consolidation of internet usage via mobile devices. According to internetnews.com, which reports a Gartner analysis, mobile device sales will rise (9%) in 2010. This scenario will impose to internet companies, online newspapers, bloggers, to provide mobile versions of their websites to simplify the fruition of their contents and enlarge their audience. In this post I prepared a roundup of code snippets inspired to some mobile versions of popular websites (such as Facebook, Flickr, The New York Times, Digg, Google, …) that illustrate some HTML best practices to develop perfect websites for iPhone and mobile Devices.

Facebook Touch for iPhone

Let’s start with Facebook Touch for iPhone (touch.facebook.com). The iPhone version of Facebook is characterized by single-column structure (with fluid width) that contains three main sections: header, main content and footer.

The header section contains the top bar, which includes the notification icon, Facebook logo and search, and the menu bar that contains four links (home, profile, friends and inbox).

The main content section contains information about the current page (home, profile, wall, info…).

The footer section contains links to select language, switch to full site, logout, and copyright information. This kind of HTML structure (single-column, fluid width, three main sections: header, main content and footer) is widespread in mobile web design because it allows to organize content in a way that fits perfectly most mobile screen sizes. Here is the sample HTML code you can use to implement this layout:

<div id="header">

<div id="topbar">...</div>

<div id="menubar">

<ul>

<li><a href="home.html">Home</a></li>

<li><a href="profile.html">Profile</a></li>

<li><a href="friends.html">Friends</a></li>

<li><a href="inbox.html">Inbox</a></li>

<ul>

</div>

</div>

<div id="content">

<div id="page_menu">...</div>

<div id="page">...</div>

</div>

<div id="footer">...</div>

<div id="header"> contains <div id="topbar"> (notification icon, Facebook logo and search) and <div id="menubar"> (home, profile, friends and inbox).
<div id="content"> contains <div id="page_menu" (wall, info, photos) and <div id="page"> (current page loaded, in this case the Wall of my Facebook profile).

Flickr Mobile

Flickr mobile (m.flickr.com) also implements a single-column layout that presents the same characteristics of Facebook Touch layout (one column, fluid width, three main sections: header, main content, footer).

The header section contains Flickr logo, sing-in information and the navigation bar.

The main content section contains information about the current page (in this case the Flickr home page).

The footer section contains some information about Flickr and links to switch to original site, download the iPhone app, report abuse and sign-out.

Here are some suggestions to implement a perfect navigation bar for mobile devices. I suggest you to use tab-based navigation, tabbed links with relative width and the display CSS property set to block.

Here is the typical HTML code to implement a standard navigation bar:

<div id="nav">

<ul>

<li><a href="/activity">Activity</a></li>

<li><a href="/you">You</a></li>

<li><a href="/contacts">Contacts</a></li>

<li><a href="/more">More</a></li>

<ul>

</div>

And here is a sample CSS code:

#nav ul li {

   float:left;

   width:25%;

   text-align:center;

   ...

}

   #nav ul li a {display:block;}

The New York Times Mobile

Now let’s take a look at the mobile version of The New York Times newspaper (mobile.nytimes.com).

The HTML structure is a little bit more complex than the previous websites but it maintains the same characteristics and sections of Facebook and Flickr layouts (one column with, fluid width, three main sections: header, main content, footer).

The header sections contains The New York Times logo, date, weather, financial information and the search field.

The main content section contains latest news. Below the main content section there are other sections organized by topic (Technology, U.S. News,…) with a list of links.

The footer section contains links to download the iPhone app, send feedback, copyright information and an user login form.

Just a note for sections below the main content section. You can use the <h3> tag for section titles and the <ul> tag for the list of links.

<h3>Technology</h3>

<ul>

><li><a href="link_1.html">Title 1</a></li>

><li><a href="link_2.html">Title 2</a></li>

><li><a href="link_3.html">Title 3</a></li>

<ul>

Time

The layout of the mobile version of Time (mobile.time.com) is similar to The New York Times.

The header section contains Time logo and a button with a link to switch to standard site.

The main content section contains a list of Top Stories. Below this section there are other sections organized by topic (U.S., Quotes of the Day, Photo Essays,…). You can use the <h3> tag for section titles and the <ul> tag for the list of links.

The footer section contains links to Help, About Time, Subscribe to Time, CNN International, and copyright informations.

Digg

The mobile version of Digg (m.digg.com) is clean and minimalist.

The header section contains a top menu (digg logo, Topics, Login) and a navigation bar.

The main content section contains the most recent stories (digg counter and title) and pagination buttons.

The footer sections is really simple and just contains the link to the regular version of Digg.

Here is the sample HTML code you can use to implement a Digg-like layout for mobile devices:

<div id="header">

<div id="h_menu">...</div>

<div id="nav">...</div>

</div>

<div id="stories">

<div class="story">...</div>

</div>

<div id="pagination">...</div>

<div id="footer">...</div>

Just for curiosity, the mobile version of Digg uses tables for the website layout! Here is the code used for the top menu:

<table>

<tr>

<td class="h-logo"><a href="/"><img src="/img/logo.gif"/></a></td>

<td class="h-menu">

<a class="settings" href="/topics">Topics</a>

<a class="button" href="/login">Login</a>

</td>

</tr>

</table>

As you see, it uses the <table> tag to separate links in the top menu. Using tables for design the structure of HTML pages is not a good practice but, I have to admit, in some cases is simpler and quicker than creating floating elements.

Mixx

The HTML structure of Mixx (i.mixx.com) is similar to Digg but it’s simpler.

The header section contains Mixx logo and the navigation bar.

The main content section contains a list of stories. No footer is present.

Google Mobile

The mobile version of Google is a great balance between simplicity and perfect usability.

The header section contains the navigation bar and Google logo.

The main content section contains the search field and short messages with the latest news about Google services.

The footer section contains links to iGoogle, Settings and Help.

It’s interesting to take a look at the multi-level navigation bar present in the Google home page. When you click on the link “more” it appears a list that contains links to other Google services. The following image illustrates an example of typical HTML structure you can use to implement a multi-level navigation bar like that:

Here is a sample HTML code you can use to implement a multi-level navigation bar simply using nasted <ul> tags:

<div id="header">

<div id="nav">

<ul>

<li><a href="/web">Web</li>

<li><a href="/image">Images</li>

<li><a href="/News">News</li>

<li>More

<ul>

<li><a href="/Maps">Maps</li>

<li><a href="/Readers">Readers</li>

<li><a href="/Translator">Translator</li>

</ul>

</li>

</ul>

</div>

</div>

Bing Mobile

The mobile version of Bing (m.bing.com) tries to replicate the simplicity of Google mobile, but the alignment difference between some elements make the page less neat than the Google home page (the bing logo is aligned to left, navigation bar and search field are centered, location settings and “Bing for iPhone” message are aligned to left, footer links are centered).

Mashable Mobile

I want to conclude this roundup of websites with the mobile version of Mashable (mashable.com) that can be useful to take inspiration for the mobile version of your blog.

The header section contains Mashable Logo, search field and the navigation bar with links to main channels.

The main content section contains a list of most recent posts.

The footer section contains copyright information and a link to switch to standard site.

Frameworks for iPhone Developers

Here is a small list of my favorite Frameworks to develop websites for iPhone:

IUI is a User Interface Framework for Safari development on iPhone that allows you to make WebApps that look and feel like iPhone native application.

jQTouch is a jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.

jQuery iPhone UI is a JavaScript library for prototype iPhone interface on web pages.

Tags: Popular
Posted in Web Design | 33 Comments »

Facebook for iPhone 3.1 Is Good, But Not Good Enough For iPhone Battery

Thursday, January 7th, 2010

Yesterday I downloaded the new version of the Facebook application for iPhone 3.1 that introduces new useful features such as address book synchronization and push notifications. Now you can synchronize all contacts of your iPhone Address Book with the list of your friends on Facebook and receive instant notifications when someone leave a comment or send you a message on your Facebook profile. I think this application is great, useful, I like the interface and the simplicity of use. But I noticed two serious problems that can discourage its use.

Synchronization fails

After synchronizing my address book I noticed some errors with pictures and data of my friends. Many pictures and Facebook profile URLs was wrong and they linked to people I never meet and not present in my list of friends on Facebook. I “discovered” this error after synchronizing my iPhone with iTunes, so I had to change manually all wrong information related to my contacts.

Push notification kills iPhone battery

Push notification is a very useful feature. Every time someone send you a message, wall post, friend request, friend confirmation, comment, you’ll receive a short message on your iPhone (it’s like an SMS notification). The big problem is that this feature kills iPhone battery in less than three hours. So, if you can’t recharge frequently your device I suggest you to turn off push notifications from Settings > Notifications:

If you don’t want to turn off all notifications, you can deactivate some of them from Settings > Facebook > Push Notifications:

Are you using this application? Have you encountered similar problems? Let us know!

Tags: spotlight
Posted in Apps | 10 Comments »

Awesome Examples of Creative Infographic Illustrations

Sunday, January 3rd, 2010

Information graphics are visual representations of data that help to explain complex information quickly. Here is a collection of 16 awesome examples of creative infographic illustrations for your daily inspiration.