Original Mobile Mockup
Mobile Site Menu
Story Page with Weather
Thumbnail Images
Creating mobile templates for our papers is one of the coolest projects that I have had the privilege to work on. So where do I start? Our goal was to design a mobile template that was optimized for the iPhone. Currently the only other phone that will display these templates well is the G1. The Blackberry Storm default browser sucks but I’ve been told that the Opera Browser displays the templates okay. Hopefully Blackberry will start making a standards complaint browser with full JavaScript compatibility soon.
I worked with a team on this one and my role initially was to just create a mock-up of what I thought the design and layout should look like. The original design I created actually didn’t change very much. The navigation bar went through quite a few revisions and we eventually just threw everything into a menu overlay. I was really loving this project and I wanted to keep tight control over the design so I helped with the XHTML and took full control of the CSS.
Let me just say how awesome it is to design for a specific browser. Safari allowed me to use CSS3 features like advanced selectors, drop shadows and rounded corners. Never having to care about what it would look like on Internet Explorer is a dream come ture!
The top bar uses a sprite to create the background and buttons which turned out pretty cool. One image I want to mention is the one I use to create the rounded corners and shine on story/gallery image thumbnails. The thumbnails get loaded as a background image and an empty span gets floated over top with a transparent png. The png has white rounded corners, a shine and inner shadow to make the thumbnails look like those glossy iPhone icons that we all love.
This project was a blast and I’m hoping to make improvements to the design in the future. This also makes me want to design for the iPhone full time. I just wish I knew Objective C so I could make some cool apps. Wait… no… I actually don’t want to know C. That would make me a “developer” and then I’d never see Photoshop again.
