Giant Bomb
One of my favourite websites is Giant Bomb, a site about videogames. They have an in-house engineering and design team that is constantly improving the site and developing tools for staff and users. As a subscriber I have access to their mobile site, which is a smart phone optimized version of the regular site.
The desktop website is fairly wide and expands depending on the resolution. The navigation bar is long, and the content is wide to make use of the space. There are multiple columns and large images throughout, which would prove difficult to fit on a mobile screen.
For their mobile website the design has been streamlined significantly. The logo and navigation are much smaller and simplified. The navigation is broken out below the logo now and account management now sits along side it. The main content now fits in to a long central column with more focus on the 'featured' content (in this case a thumbnail leading to a video, with a description). They apply the mobile site by using a subdomain, m.giantbomb.com and this allows them to give people the choice between mobile and desktop layout.
The site is fast, adaptive and efficient. I contacted Dave Snider, one of the main designers for Whiskey Media (the parent company) and asked him about advice he had for mobile development. Here is what he had to say:
"If you're trying to build a site that works across desktop and mobile resolutions you might want to check out some of the fun things that can be done with media queries. The real advice is to just keep it simple. Use flat colors and big buttons."
Very to the point but solid advice none the less, I feel. I will be taking his advice to heart, since the mobile site he helped design is one of the best out there.
Coding
He linked me to a site called Zomigi, which had some very useful tips regarding media queries which can be used to change elements of design by requesting different style sheets dependent on the design etc. It talks through the process of choosing what to eliminate in a mobile design or when designing for different resolutions. It shows how you can deliver different content for different size screens.
Source: http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/
I also found another article detailing media queries to produce mobile layouts, which is very interesting.
Source: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Design
On the design front, I found a website that contains a showcase of many mobile layout. There is a good variety and gives me plenty of ideas for the potential of my website.
A lot of them feature elements that Dave was talking about. Flat colours and big buttons. This seems the most sensible route.
Source: http://www.lovelyui.com/