With the release of iTunes 7.7 you can browse through the new iPhone application store which presents more than 500 free and commercial iPhone applications.

With the announcement of the iPhone everyone was happy to have a large screen (480×320 Pixels) that makes it possible to easily access and use mobile applications and web sites. Thus, the iPhone brought mobile applications to the main stream and more and more application developers are recognizing the potential of the mobile web and change their focus from web to mobile.

Extending your web applications to become mobile aware can be done in several ways. Adapting your design or stylesheets to become better accessible with mobile browsers like Opera Mini or Safari is one way. Completely restructuring your content and creating a separate mobile web application or a native mobile application another way. The latter provides the advantages of a better support for the target platform and its characteristics. For example, it is now easier to access standard web pages with your iPhone but for a better ease of use and usability a reorganization of content elements is necessary because the screen size limitations are inherited in the mobile world and require adaptions. To conclude, developing separate mobile applications should be the preferred way, although a lot more effort is required for the implementation.

Going through the iPhone app store I recognized that there are no standard ways of designing an application. Presenting a consistent feeling like in the desktop world is hardly achievable. To get some impressions I created some iPhone application screenshots that show a variety of possibilities to present your web application on the iPhone.

What are the best practices for iPhone applications?

• Present your logo at the top of the application on every screen?
• A search icon at the top right next to the logo? A search bar at the top in the standard Apple style?
• Main navigation at the bottom with text and icon?
• Content items in a vertical list form with arrows at the right pointing to more details?
• A horizontal simplified navigation?
• Wisely chosen default values and an advanced settings section to make adjustments?
• Using standard iPhone design elements? E. g. iUI tries to simulate it.
• Simplified content elements, one column, avoid scrolling?
• Avoid borders surrounding content?
• Content overlays for full screen maps?
• Sign in, log in, log out, profile links at the top right?

Of course, all web applications are different and mobile applications can be different too but facilitating standard methods of designing an application and using typical layouts can provide a consistent feeling between applications on the target platform. This makes your users happier, too.

Integrating a nice-looking map in your web application is a painless task with the help of powerful APIs like the Google Maps API. Within minutes you can present your geospatial information on an interactive web map and everything should be fine but let’s dig a little bit deeper in this issue to find the best practices and to avoid some obvious mistakes.

I created a set on Flickr with over 50 screenshots of web maps to provide a quick overview of ways to integrate them in your application.

If you have to handle spatial data, first, you should ask yourself the following questions (Source: M. Hockenburry).

• Who is the user?
• What is the task?
• What technologies are appropriate and why?
• What is the role of spatial information and location?
• How do we represent that information and why is that representation effective?

There is no universal solution to present spatial information and the goal is to find the best suited for your application’s needs. Let’s do a classification to distinguish the different integration methods.

Static vs. Interactive

A static map does not provide any kind of interactivity (e.g. moving around, clickable interface or mouse wheel support). By clicking on a static map, a full-screen interactive map can be presented for advanced features.

Content

Is a plain map view without additional information sufficient? Does it makes sense to use a single marker or multiple markers to show data on top of the base map?

Distribution

If multiple data items are shown, how is their distribution? Is it even or are there hot spots with many items on the same place and thus a clustering is required? E. g., maps can get messy and unusable if dozens of geotagged photos refer to the same place.

Screen size (full screen vs. partial)

A map can be shown in a full screen mode or as a small additional page element in a sidebar or within the main content area.

Fixed width / flexible width

Is the map resizable and adaptive regarding different browser screen sizes?

Content overlay

Is content presented dynamically as an overlay on top of the map or in an area next to it?

Controls

Is it necessary to provide controls for different layers or zoom options? For example, offering a satellite, a hybrid, a street and a terrain view.

Consistency

Do all the maps behave in the same way? For example, zooming can be done with the mouse wheel on every map.

Technology

What kind of technology is used? A static image, a JavaScript-powered map or a Flash map?

In my opinion it is often the best way to show a static fixed-width map in a sidebar that can be used as an entrance point for a bigger (full screen) map that is interactive, provides many controls and eventually content overlays. A static image of a map is good to quickly highlight the geospatial nature of the information while a large map can deliver the full power of web mapping, enabling to aggregate, search and filter geo data.

If you want to learn more about spatial applications, check out the excellent course notes “Design of Spatial Applications” provided by Mathew Hockenberry of the MIT Media Laboratory. He makes aware of the fact, that it is not always the best idea to present geospatial information on a map. Often it is clearer for a user and better to understand if a textual representation is used.

| View | Upload your own

Ok, finally I spent a full day on developing an own Wordpress theme for my blog and did everything I always wanted my blog to be able to. It should already be the third bigger iteration while blogging. The reasons have been the following.

Old Posts Without Future

I recognized that old posts not facing the front page anymore disappeared and got no more interest. So the new site cares a lot about older posts. I used the Related Posts plugin to refer to posts with similar tags, cleaned up the navigation, so the archive and the categories are more visible and easier to access. There is now one sidebar just showing links to find other posts of your interest, through search, categories, tags or by the rating of AideRSS.

The home page is now like a portal where you can explore stuff. Only on this page you see the widget sidebar and the footer with the recent posts, comments and recent twitter messages.

Content is King

It was not just supposed to be a redesign, it was clear to have the goal to write better and more interesting posts. Shorter with more unique aspects and better use of lists and font styles. I reduced the amount of categories to focus on the things everyone expects, entrepreneurship and technology and one catch the rest category miscellaneous. Good content will arise out of the fact that our mobile startup involves doing a lot of research about various topics and along the way our experiences and failures should be in the interest for other entrepreneurs. This blog should now exactly support this goal. A regular schedule is also planned from today on!

Widget Clutter

Widgets are nice but if the sidebar is longer than 5 full blog posts something is wrong. I decided to use one widget sidebar just on the front page at the right. So all content pages are freed of flashing Twitter messages and disturbing click-me-now buttons. I added the MyBlogLog widget to see who is visiting my page, an interesting concept and I will check it out for some months.

Search Engine Optimization

One of the biggest problems I recognized was the fact that I never cared about search engine optimization. A big mistake because thinking about SEO improves also your site concept and the way you write you blog posts which at the end should increase your search traffic. The All in one SEO-Pack Plugin is great and is super simple to install and use. From now on page titles are SEO-friendly and many optimizations are done under the hood to make Google & Co more likely to give higher rankings (e.g. care about double content).

Check also out the definitive guide for Wordpress SEO. The new single post pages have no surrounding clutter like the widget sidebar or the Twitter messages, so the keyword density is a lot higher and the ranking should improve. The URLs are also more SEO-friendly. Instead of including a date scheme, the format %category%/%postname% is used.

A Design Supporting the Content

My old wordpress theme was a typical big header two-column design. Nothing really exciting and the blue colors got more and more disturbing. The new design focuses on simplicity, the content is king. The post titles and the context of each post are now easier to recognize, achieved by improving the title area of a single post. You directly see the date, the category the post belongs to and the tags.

Tagging the World

On my old blog tagging was not really used. I assigned them but you could only see them after the content of a single blog post. Now you can see them directly under the title for each post and a tag cloud shows the most important tags in the sidebar. Related posts are also recognized by the used tags. Tagging brings semantic to posts that you should facilitate.

Personality

Blogging is presenting an own perspective on various topics, so it is an individual thing. I totally redesigned the header area to be more unique and easier to recognize. The inperspektive logo is now part of the new branding and it sets the main colors and supports the name of the blog. www.inperspektive.com is the new main address, without a subfolder /blog or different domain names.  Next to the logo there is a simple navigation presented as a sentence. The blog has no complex structure and sub pages, it is all about the individual posts. Still, I needed to refer to the About and the Resources page and wanted to express the importance of subscribing to this blog.

What do you think? More content will follow in the next weeks.