This is a wonderful video and well worth sharing, I loved the concept and the way it was presented with the robotic prototype. For technology dreamers and innovators such as Fabien Hemmert (a PhD student at the Design Research Lab, in cooperation with Deutsche Telekom Laboratories) it all starts there. He shares a fascinating talk on TED about the future of Mobile phones and technology behaving more human-like and although the video is brief and this might be quite far into the future the results are mind boggling.

Fabien talks about making digital content graspable, and how to get the digital to the physical. I’ll let him explain as he does a far better job, but I really wanted to share this quote as it made alot of sense to me as we progress into the future of mobile touch and technology.

Humans should get more technical in the future, rather technology get a bit more human.

Note:
I found this video whilst browsing to one of my favorite sites, TAT. If you’re not aware of TAT The Astonishing Tribe AB, you should be. They are an extremely innovative growing group of engineers, visual artists and interaction designers who eat, sleep, and breathe user interfaces. The do lots of cool things and to describe a couple of them I wouldn’t miss (a) Astonishing and free Android wallpapers (b) The future of screen technology

This is a quick and dirty way to display Google Maps in Android. Its really not that hard and after learning how to do this you can easily start thinking about how you want to architect your Android App using the different bundles that come with google (Maps are only one of them!!).

Fire up Eclipse / Create your Project

Easily set up your own project here => I am using GANEYMEDE eclipse, which is the international version of the popular Eclipse IDE. If you don’t have the Android SDK you can download it from here and you can download Eclipse from here.Also make sure you have the latest version of Java => download it from here.

Your first step is to create the project within Eclipse (I will not get into how to install Android onto your computer) so refer to the screenshot.

GET YOUR MAPS API KEY

With the Android SDK release v1.0, you need to apply for a free Google Maps API key before you can integrate Google Maps into your Android application. Please follow the simple steps below on how to obtain your key. You may also refer to Googles detailed documentation here. You can also refer to Google’s detailed documentation on the process here.

Since you are testing the application on the emulator locate the SDK debug certificate located in the default folder of "C:\Documents and Settings\\Local Settings\Application Data\Android". The filename of the debug keystore is debug.keystore. For deploying to a real Android device, substitute the debug.keystore file with your own keystore file.

To make things simple just add (debug.keystore) to a folder in C:\ (for example, create a folder called "C:\Android").

Using the debug keystore, you need to extract its MD5 fingerprint using the Keytool.exe application included with your JDK installation. This fingerprint is needed to apply for the free Google Maps key. You can usually find the Keytool.exe from the "C:\Program Files\Java\\bin" folder.

Issue the following command to extract the MD5 fingerprint.

keytool.exe -list -alias androiddebugkey -keystore "C:\android\debug.keystore" -storepass android -keypass android


Modify your android manifest.xml file

The manifest file describes the components of the application — the activities, services, broadcast receivers, and content providers that the application is composed of. It names the classes that implement each of the components and publishes their capabilities (for example, which Intent messages they can handle). These declarations let the Android system know what the components are and under what conditions they can be launched.

Displaying your map

Next to display the Google Maps in your Android application, modify the main.xml file located in the res/layout folder. You shall use the element to display the Google Maps in your activity. In addition, let’s use the element to position the map within the activity:

Make sure that you have applied your android api key

Modify the MapActivity class

Lastly all you need to do is modify the MapActivity class in your #src folder. (Maps.Activity.java)

package com.ahadbokhari.GoogleMaps;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapView;
import android.os.Bundle;

public class MapsActivity extends MapActivity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

    @Override
    protected boolean isRouteDisplayed() {
        return false;
    }
}

The above steps are all you need to actually display the maps in your emulatore. Press F11 in Eclipse to deploy the application onto an Android emulator. If you are experiencing problems then look over these three troubleshooting steps below:

Make sure that you add the package in your AndroidManifest.xml file.

Make sure you have internet permission (if you see nothing but grids in the emulator.) in the AndroidManifest.xml File.

Lately i have been thinking alot about Mobile Design trends and the arising need to have a mobile version of your website or blog even. With over half of the world using handsets and smart phones mobile design is certainly a skill to be picked up, or at least should be implemented by other designers/developers so that mobile content viewers can also surf your website on their phone.

Fact is that many companies do not have a mobile presence and the ones that do have done a poor job of rendering their pages across different screen sizes and devices. Can you blame them? Well yes and no – but in my opinion if you are hell bent on getting your mobile site up and ready then you should do it the right way, or don’t do it at all. It would be unrealistic to think you can just throw a website out there and expect it to work perfectly–it takes a certain amount of planning and work.

You might be thinking “Why should i waste my time designing a site for the mobile phone. I have to design for so many screen sizes and devices, it sounds like a nightmare – much worse that designing a site for traditional desktop browsers + IE. The fact is creating a good experience for users of mobile devices is easier than you think.

Wml and Xhtml

In the early days of mobile web devices the only web pages you could surf on the mobile web were WAP (Wireless Application Protocol) enabled web, which were driven by WML (Wireless Markup Language).

The good news is that nowadays most web browsers can read Xhtml based websites. When designing for mobile devices keep in mind that there are actually two flavors of Xhtml:

1. XHTML => the same, basic XHTML rendered by desktop web browsers
2. XHTML-MP => Mobile Phone Xhtml Format

The difference between these two languages is that XHTML-MP consists of slightly fewer elements and tighter restrictions. These differences exist to make it easier for the mobile device to parse and render a web document, but writing XHTML-MP markup shouldn’t introduce any significant changes to your process for writing regular XHTML.

I’m sure you feel much more comfortable knowing that you can actually design mobile websites with simple markup language and style it with bear minimum CSS! Out of the many web designers and even developers i have talked to recently, not many knew it was actually that straight-forward

Understanding Screen Sizes

Obviously this is an area of concern to designers coming from a web background. As we all know different mobiles have different screen sizes respectively with the most common ones listed below:

1. 128 x 160 pixels
2. 176 x 220 pixels
3. 240 x 320 pixels
4. 320 x 480 pixels

The images shows a good range of mobile screen areas that you should design for.

- The iPhone is 320 pixels wide by 480 pixels high.
- Most Nokia N Series are 240 pixels wide x 320 pixels high.
- Older Nokia devices are 176 x 220 with the exception of the 8800.
- Blackberry device is 240 pixels wide x 320 pixels high.

There are also exceptions to the average screen-sizes available but I won’t cover them as they are used on much older devices.

A look at the big players of Mobile Design

Image courtesy of MobiForge
If you look at the above screenshots of the mobile versions of the three big players (Twitter, Gmail, Facebook)in the market you will notice that:

• Their interface is a bear minimum. They have stripped down their mobile versions to cater to the mobile web universe.
• The developers have left out features that you most probably wont need on the go. If you check the mobile version of Facebook you can clearly see what they feel you need. I would guess that Facebook mobile version is the one to check out, because they have so many popular features available to their users.
• The three mobile versions have used CSS to give some basic styling to their mobile pages.

At the end of the day its all about getting what your users need on the mobile quickly and effectively, whilst concentrating on the features that are most important.

Domain names for your Mobile site – What works best?

This is a highly debatable topic. Should you use a .mobi domain or use a sub-domain i.e. m.example.com. I would feel this is entirely up to you but consider the following points:

1. Use a separate domain all together (www.example-mobile.com): I don’t think this is a good idea as most people have trouble remembering one domain name rather than two.
2. Use a .mobi top level domain (www.example.mobi): This is also an option, but again you would have to pay for the .mobi domain. It would be wise to do a search on the pros and cons of .mobi domains as there is alot of information out there.
3. Use a sub-domain (m.example.com): This is the preferred method by many designers and developers out there. Facebook, Twitter and gmail all use a sub-domain for their mobile versions, so why can’t we. Its less expensive and you can manage your domain easily without much fuss. However if you were to receive alot of traffic then then you might want to consider another method here.
4. User Agent Detection: Don’t do anything and let the server direct you to the best version. This is perhaps the most interesting option from a technical point of view and is also the most elegant from a user’s point of view. Unfortunately it’s the approach that’s most prone to issues.

Conclusion and References

Its entirely up to you how to architect your mobile site and it can be tricky, but not nearly impossible. Using basic Xhtml and Css you can create your stripped down mobile pages offering the features and content you would like your users to view. Try and single out what you want to display and start by sketching the basic interface on a piece of paper before you start. At the end of the day we all know that a certain amount of research and planning goes into a developing a successful mobile presence.
I’ve listed some references below to help you get a good start:

1. Mobi Forge – Lots of content examples of code and an overall great learning resource
2. Mobi Ready – The ready.mobi testing tool evaluates mobile-readiness using industry best practices & standards
3. Device Atlas – The world’s most comprehensive database of mobile device information.
4. Sqidoo – Mobile Web Design resources
5. Little Springs Design – Even more Mobile Design resources and links to relevant articles
]]> http://blogspot.fluidnewmedia.com/2009/03/a-deeper-understanding-of-mobile-design/feed/ 2 http://blogspot.fluidnewmedia.com/2009/03/started-a-new-category-on-my-blog-mobility/ http://blogspot.fluidnewmedia.com/2009/03/started-a-new-category-on-my-blog-mobility/#comments Tue, 10 Mar 2009 12:33:11 +0000 admin http://blogspot.fluidnewmedia.com/?p=1220

Today i started a new category on my blog called “Mobility.” I truly believe that the web and the mobile platforms are very similar to each other, hence what you have on the web you can have on the mobile.

I’m looking to post stuff about Google Android, Telcom Industry and UI design and tricks for mobile design. Should be alot of fun, so hover on back after a little while and see what i have to say!

]]> http://blogspot.fluidnewmedia.com/2009/03/started-a-new-category-on-my-blog-mobility/feed/ 1