Mobile Design Plan

Based on all my research, pre-production and thinking on my mobile site I would like to outline the design philosophy behind my mobile site.

Design
The design of the site will be almost identical to the desktop version of the website, using the same colour scheme and graphics. The mobile site is a format change, and should be recognizable alongside the desktop version.

Resolution Considerations
Desktop resolutions are now mostly widescreen, and contain a lot of pixels. Both of my displays are 1920x1080, considered 1080p (Full HD). This is not a luxury afforded by smart phones. They are designed to be small enough to fit in your pocket, and affordable enough. The smart phone competition outside of iphone is very competitive and feature a range of different aspect ratios and resolutions. I looked in to it and they can range from the iPhone 4's 960x640 to 320x480.


I need to optimize the vertical resolution so that the width does not exceed the screen size. Using some code I have managed to find a way to lock the width as well as disable scaling so that a users touch does not accidentally change the view of the website, since it is made for the phone and would become unreadable. That feature is useful for enlarging and shrinking desktop websites on a phone environment.

There is code that can be placed in the header of a HTML document to set the 'viewport' of the device and I will be using this to define resolutions. 320 is the widest I will go to ensure older devices are also supported, much like desktop resolutions can range from large to small.


Touch Considerations
Smartphones navigate and operate around touch, so there are some considerations for the design of the site. With a mouse you 'mouse over' links, and there is usually some effect, but not on a touch device. A mouse over effect would be useless and so doesn't need to be considered.

Also, unlike the refined movements of a mouse pointer, links will need to be 'clicked' with a finger, which is proportionately much larger considering the screen space of phones. Based on my messages with Dave Snider, he recommended the navigation elements be big and in this context it is obvious why. They can't be close together because a finger may touch multiple, and you need it to be big because of the size of fingers.


Code
In my research I have found considerable amounts of useful code and tricks for mobile devices. Especially how to break down columns on a mobile device. My main website will have 2 columns on some pages and so I will want to stack these rather than place them side by side.


Access Considerations
After reading the smashing magazine article on mobile web design I have had a tough time deciding on how to deliver my mobile website. There are multiple options. You can use media queries to detect the 'user agent string', which tells it what device/browser you are using and serves you the correct website for the platform. However, there are several problems with this. One is that User Agent strings change daily, and like Smashing Magazine says only enterprise sites can keep up with these changes. Also, I know people who do not like to be forced to use a mobile version. Choice is a good thing.

There re other method using stylesheets to detect the screen type, but according to Smashing magazine a lot of modern smart phones no longer 'report' themselves as mobile and so the detection may fail. This option feels too flaky for me.

The best option I can see is something that Facebook does and other website. You can register a subdomain (mobile.website.com, m.website.com etc) and let the user access the mobile or desktop version of their own volition. That way the mobile version is accessible on desktop and vice versa. I know Whiskey Media does this, and their mobile design is incredible (and works on both).

I think this is the best option. There are several downsides however. The first being that it essentially means that 2 websites have to be maintained as they are stored in separate directories on the hosting server. I don't think this will be much of an issue for me because a portfolio site is quite static. I will have to update images but that is more easily done then changing code. The other problem is that users have to choose it themselves. This can be somewhat mitigated by placing a link to the mobile version, and promoting the mobile version separately (I will place both addresses on my business cards).


I still have more to learn but with the time constraints I will fit in what I can. With these decisions out of the way it is time to code!