Mobile Me
I finally realized that there were too many good links I've forgotten.
Several friends have created their own start pages. There are online services that do this for you – basically a way to have online bookmarks. It’s a good idea. I don’t always work on one computer or with one web browser, and keeping bookmarks synchronized is not feasible. So a personal start page is a nice solution. It also allows you to design what it looks like and organize the content to fit precisely to the way you work – if you’re so inclined.
I finally realized that there were too many good links I’ve forgotten. I’ve used Facebook and this blog and my web browser to save links that I felt were worthy of remembering, but that’s too many places. I don’t always browse my bookmarks or read old posts, so the links are forgotten. By creating a personal start page, I can always have these links at hand. I’ll remember to return to these sites and see what’s new. And my personal page can accessed wherever I have an internet connection.
Which brings me to the next part of this endeavor. My connection to the internet is often my phone. So I should have the page bookmarked in a way that’s easy to get to. The iPhone provides a great way of doing that. You can create a button on the home screen of the phone that will link you directly to a web page. It’s like a bookmark, only better. And it works for any web page. Unfortunately, the default icon that the iPhone creates for a web page is a very tiny thumbnail of that web page. This is basically useless. I don’t understand why they didn’t just use the site favicon. Apple did provide for something very similar to a favicon. If you place a 57x57 pixel png file named “apple-touch-icon.png” in the root directory of your site, the iPhone OS will use that image as the icon for your bookmark button. The OS will even round the corners of the image and apply the “shiny surface effect” to the icon. More about how this works can be found in this blog post by Drew McLellan.
Of course, bookmarking my personal start page is only the first step. To do this right, my start page should appear properly formatted for mobile viewing when I am on my phone. The iPhone will display normal web pages, but they are not the most convenient for the small screen. When it comes to mobile web pages, one of the best examples is the ESPN website. They did an amazing job creating a first rate browsing experience for mobile viewers. Their site is complex, so they serve up a completely different set of pages to mobile viewers. I am creating a single page. I’d like to accomplish my goals using CSS.
ESPN will serve as a useful case study for a mobile site. I suggest using a development tool to load their mobile web pages on your computer and inspecting the code. They’ve done nice work. However, to differentiate the look of a site for different devices using CSS, I suggest starting with an article from A List Apart that was published earlier this year. They break down the basics. David Storey also has a good post about developing for the iPhone on My Opera.
I still have work to do, but the beginnings of my mobile stylesheet are in place. It seems to work like a charm. I’m going to have fun when I start developing mobile websites for clients.