Five Things We Learned Building our iPhone Site

by wynn in General / 06.04.08

iPhone promoWith 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.

JavaScript (jQuery is the jBomb). We love jQuery. It makes JavaScript suck less - even fun. One handy plugin we used was the jQuery iPhone plugin which neatly wraps up handling screen orientation changes, hiding the address bar, and smoother animations.

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.

11 Comments

  1. Judd, June 5, 2008:

    Looks great, I like the emergency beer opening vid!

    Slick work, I’ll have to check out the jQuery iPhone plugin.

  2. Santa, July 4, 2008:

    thanks a lot for the info.

    I am a bit new to developing website for an Iphone infact never developed an app on the MAC. Is it mandatory to have a MAC system to develop and test a website exclusive for an iphone.

  3. iphone games music, July 19, 2008:

    Nice blog, i have added it to my favourites, greetings

  4. Ron Morris, September 3, 2008:

    Hi,

    I am not yet a developer, however I want to create a mobile Web site for my business. I have an iPhone, so I would like to customize it for that platform. I used a basic .mobi development tool to create a test site, however I will be running videos on my site and what I have now simply takes you to YouTube and leaves you there. Do I need to be a developer to make this happen, should I try to hire one, or is there a simple development tool (fill in the blank) that I could handle to build my iPhone site? Any help would help.

    Ron

  5. Buy iphone, October 10, 2008:

    Very interesting post, i bookmarked your blog, thanks for share
    i will visit your blog later

  6. Jake Rutter, November 12, 2008:

    This is a great resource for web designers looking to create a compatible iPhone page. I wasnt aware there were so many tags and pieces of code that you needed to add to get it working optimally. Thanks!

  7. don, November 16, 2008:

    with the iphone still a small percentage of overall handsets being used for mobile web, isnt it worth designing for other mobile devices at the same time?

    We design sites for FMCG clients - and most of them are now interested in mobile sites. We use handset detection to customise the UI for each device.

    There are a few providers of handset detection out there, including handsetdetection.com as one of the larger ones.

  8. Bittu, July 15, 2009:

    thanks a lot for the info

  9. kaka, July 16, 2009:

    Very interesting things. ‘

  10. Lisa, July 16, 2009:

    Great info!!

  11. rasi, January 19, 2010:

    Great info. Very useful…

Leave a comment

Clip Training