If you get the app and take a look around, you will really notice layout improvements that have helped the content breathe a lot better. In using the mobile site, I really got frustrated a lot with how often links were sandwiched together (last image in gallery below) to where it was almost always an issue of having to go back and try to click the link you actually wanted. With the app, you get a lot more of what you would need to browse through your friends, news feed, profile, wall – all that good stuff – with much less effort.

Facebook app home screen

Another thing I really enjoy using now is the Photos section. Once you click into an album, the images get about as large as possible on the screen, with navigation that appears over the image once you touch the screen. Comments also float over the image, which is nice to see, since that also allows for the image to really be the hero.

Of course there are a few pitfalls users have been noticing, but these issues are still being confirmed with Facebook.

For one, you can’t access your Inbox to send or receive messages. And there isn’t support for Events, either.. Jason Kincaidon TechCrunch

Fan page link doesn't work

However, I don’t think these small gripes are at all overshadowing the other steps they have taken to improve the use of their site. I am not the most frequent user of Facebook, but as far as what I do use it for I’m definitely happy with the changes. Of course, we always love to hear your personal experiences, so please share if you have any suggestions for future updates, or comments on the existing app.

Even with a full featured browser, physical size limitations demand a custom interface.  Navigating a desktop site with your finger instead of a mouse is possible(and works quite well).  The main issue comes from the need for speed.  A mobile site can greatly benefit the user experience by decreasing page load times, simplifying navigation menus, and displaying media in an optimized format.

We recently began using WPtouch for our mobile site and it has performed quite well.  The pages load much faster over Edge/3G, the navigation is easily performed with your finger, and the images are resized to fit the smaller screen.  However, we would like to take it to another level and that is why we have begun developing a custom system.

A review of our web site traffic shows that over 10% comes from an Android device.  This is obviously slanted since we report on Android news, but it shows how significant it can be.  Once our mobile site is redesigned and we release an update to our news widget, I think the mobile traffic could account for 25% of the site.

Example Mobile Sites

In order to design a good mobile site, it is important to review what others have already done.  This is a good way to play around with different ideas and look for improvements that can be made.  I did a little search and came up with five mobile sites to look at.

Geek Squad Mobile Site

Geek Squad
http://m.geeksquad.com/

About:  Geek Squad is the computer repair service offered from Best Buy.  Their mobile site allows you to review services offered, check the status of a repair, locate a store, and contact them.  I’ve never used their service, but I worked for CompUSA many years ago.  When customers checked their PCs in for repair, some would call several times a day to check the status.  Allowing customers to view the repair status from their phones is a huge benefit.

I like:

• Large buttons for menu navigation
• Good use of jQuery for animations and to reduce entire page reloads
• Call Us button launches the phone dialer
• Search located at top

Needs improvement:

• Lacking features of full site – blog, promotions, and self-help tools
• iPhone beta branding – site should just be HTML compliant for all smartphone browsers

College Humor Mobile Site

College Humor

http://wap.collegehumor.com/

About:  College Humor is a comedy site that offers content geared towards the university aged demographic.  Their desktop site is media intensive with many original videos.

I like:

• Good backlog of videos in a mobile format
• Images and videos are formatted for mobile screen size
• Simple design – fast load time

Needs improvement:

• Navigation menu is at the bottom of the page
• They offer a custom iPhone site, but nothing for Android
• No Search option

The Onion Mobile Site

The Onion
http://mobile.theonion.com/

About:  The Onion is my favorite, fake news network.  Their site has many features forms of media including articles, video, radio, and a store.

I like:

• Good use of space – many categories fit in a small space
• Radio clips that work with the Android player
• Images formatted to fit the mobile screen

Needs improvement:

• No search feature
• News articles lack paragraph structure – hard to read
• Navigation menu at the bottom of the page
• Lacks much of the content found on the desktop site
• Missing videos

Volkswagen Mobile Site

Volkswagen
http://www.vw.com/mobile/iphone/

About:  Volkswagen is an automobile company based out of Germany.  Their mobile site allows you to get information about their current lineup of vehicles, locate a dealer, and call for emergency help.

I like:

• Call Emergency Assistance launches the dialer
• Find a Dealer page has large numerical buttons for easy touch input
• Large buttons on Our Cars listing
• Nice full screen image gallery with touch controls

Needs improvement:

• Take iPhone out of the URL
• Image gallery needs to be reloaded in landscape mode to see full screen images
• Weird formatting issues – car details page does not load correct in landscape mode

A List Apart Mobile Site

A List Apart
http://m.alistapart.com/

About:  A List Apart is an online magazine for people who make websites.  Topics cover content, culture, and design.  Updates are published twice a month.

I like:

• Simple design – quick load times
• Nice authors detail page
• Top level navigation bar
• Excellent formatting – articles are easy to read

Needs improvement:

• No search option
• Weird formatting issues – images squish text in landscape view

Default widget view, 4x1 white space, displaying one entry

New Default Skin

The regular widget is still a 4×1 sized block that shows the latest post from Android And Me, but with a few small changes. Like I said earlier, the whole thing is now white which should help readability and just looks a bit cleaner. It also has a relative time stamp (e.g. “2 hours ago” – just to make sure you know just how behind you are). It also has a read more link – click anywhere in the entry to jump to the post on our mobile site. Clicking anywhere across the top of the widget will launch it into full screen mode.

Full screen mode, displaying the five most recent entries

Full Screen Mode

In full screen more, the widget displays the most recent five posts, all with timestamps and in alternating row colors. Again, the posts all have a read more links for jumping to the full article on the mobile site. In the bottom corner, there is a button for loading up the next five entries right in the widget. Also in full screen mode there is a small space in the top right corner for site announcements, anything we want to make ‘sticky’ to make sure as many readers as possible can see it, like when we launch a new bounty.

Mini widget displaying snippet of latest post

1×1 Mini Widget

One new feature dreamed up was the option to flip the widget into mini mode. The widget crunches down to a 1×1 piece of real estate (side note: in doing research for these drafts to make sure my sizing was correct and feasible I found plenty of help online, like Widget Design Guidelines, a page from the official Android Developers site). At best, the mini widget will only be able to display a few words of the most recent headline, but, combine that with a time stamp and its a decent amount of info for such a small space. Again, clicking any part of the entry will launch the mobile site, while clicking the top of the widget will launch full screen mode (as shown above).

Notification alert icon displaying two missed posts

Notification Alert Mode

Home screen way too crowded? Even too cramped to fit the 1×1 mini widget? Got you covered, with the notification alert mode. This mode would let the widget run silently in the background and then just display an icon (and optional alert, tone, light, etc) each time the site is updated. If you don’t catch it right away, the icon will just compile the number of entries you missed.

Full screen mode, with an active announcement

Conclusion

So far, this has been a really fun project for me. I’ve been using the RSS widget for about a week now so it was interesting to take that knowledge into a design process and just play around with it some. I think the new skin and display options should help the widget find a place in any phone setup, whether you’ve got space to spare or only want the bare minimum. As I worked on the drafts, more ideas for new features kept popping up (including the comments, even more display options, etc), but I figured I’ve already bitten off more than enough for one update, and I thought it would be fun to get some input from our readers before we committed to anything. What new features would you guys like to see? Is there anything we’ve completely overlooked?