Five Things We Learned Building our iPhone Site
by wynn in General / 06.04.08
With our shiny new iPhone site ready for public consumption, we thought we’d share some things we learned while building it.
1. Design from a blank slate
Less is more. On a mobile device (even as one as powerful as the iPhone), users have less screen and typically less time than desktop users. We found it easier to start fresh and ask ourselves what are the most important pieces of the site for mobile users. For MindBites, viewing video lessons is the core activity, so we started there.
Keep it familiar. Familiarity breeds contempt contentment for your iPhone users, especially if they are regulars on your main site as well. We started by simply putting our main site navigation into the iPhone style list menus. As we banged around on the site, we quickly discovered what worked and what didn’t. For instance, long lists work better in a dropdown menu since the iPhone GUI handles them so well.
Stand on some shoulders. Don’t reinvent the jogdial. Find and use mobile sites you like for ideas on how to present your site’s content. Go beyond the home page glossy logo and really use iPhone sites and make notes on what you like and what you find frustrating.
But distinguish yourself. Imitate (even steal) but don’t become a clone in the process. The rise of great iPhone toolkits has made it easy to create great looking sites that look like native iPhone apps. Make sure that someone will remember your site though, and that it doesn’t blend into all the other sites out there that look like a Settings Menu applet.
Innovate! The Mobile Web is still nascent. Try and push the envelope a little.
2. You can use the tools you already know
HTML. Sure native apps are coming, and I’m sure I’ll be dropping more coin in iTunes for some slick looking non-browser based titles, but the success of the iPhone as a platform has been because anyone who can make a web site can make a compelling iPhone site using tools they already know. No special tags, no proprietary plugin aftertaste.
I have seen the future and it is CSS3. As developers, we found it strangely liberating to style the site using cutting edge Cascading Style Sheet features and not have to worry about how it would look in Internet Explorer. Features like multiple background images, border images, and drop shadows shave hours off of some tasks.
3. Take advantage of the device
Handle orientation changes gracefully. One of the cool features of the iPhone is how it flips the screen from portrait to landscape as you rotate it in your hand. Handling these events in your code allows you to adapt the page layout for either tall or wide layouts to provide a better user experience.
Embed video for better playback Most sites don’t do video, but if you do, look into using the
embed element to embed your streamable video content directly on the page instead of linking to it. In either approach, the iPhone will play your content in the iPod media player, however when you embed your video directly, the user is gracefully returned to your site instead of a blank page.
4. Mobile Networks are the new 56k modem
Design for range of speeds, but keep lowest common denominator in mind. Just like you can’t assume all users of your main site have their own fiber line, you need to ensure your site loads quickly for users on slower networks. When serving video, Apple recommends using QuickTime reference videos that allow you to serve different quality media to users on networks of different speeds.
Package up your assets and make every kilobyte count! As developers we like to keep things tidy. Modular files help keep stylesheets and scripts neatly organized. For users on a slow network, waiting on ten separate files to download instead of one large one can be a royal pain. As a Rails site, we used the excellent asset packager plugin to bundle, pack, and zip our styles and scripts.
I like the (CSS) Sprite in YOU! CSS Sprites are better than the Taste of Lymon®! An old animation trick, sprites allow you to preload frames in a sequence. In CSS we can apply the concept to cram all of our icons into one big image instead of thirty itty-bitty images. The savings? Twenty-nine network connections back to the server and seconds off of your load time. We used this approach for the icons in our menus.
5. Test, Use, Tweak, Evolve
Use simulators to test quickly. Technically, you don’t even need an iPhone to develop an iPhone site (shhhh! don’t tell your manager). In the early stages, you can use Safari 3.1 or iPhoney to simulate the site without having to straddle the keyboard and your iPhone dock.
But, there is No substitute for actual lab rats with iPhones. I wouldn’t want to fly with a pilot who hasn’t logged any hours outside the simulator. Your users don’t want to use an iPhone site that hasn’t been tested on the actual device on all types of network connections. Need specimens? Draft iPhone owners from within your community for better feedback.
Agile is your friend - aim for simple, simplify from there, and improve over time. Launch the site as soon as it adds value. We launched our site without allowing users to even login and play their purchased lessons. We added that capability in phase two. In the weeks to come, you’ll be able to buy lessons on the iPhone without even visiting the main site. Stay tuned!
Wynn Netherland is the Mastermind & Pixel Pusher at Squeejee, a Texas Ruby on Rails development company. He loves the creative side of building software, and writes regularly at Locomotivation.