Warning: include_once(/home/surtees/designnotes.info/wp-content/plugins/wordpress-support/wordpress-support.php): failed to open stream: Permission denied in /home/surtees/designnotes.info/wp-settings.php on line 306

Warning: include_once(): Failed opening '/home/surtees/designnotes.info/wp-content/plugins/wordpress-support/wordpress-support.php' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/surtees/designnotes.info/wp-settings.php on line 306

Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /home/surtees/designnotes.info/wp-settings.php:306) in /home/surtees/designnotes.info/wp-content/themes/viewport/framework/zilla-admin-init.php on line 16

Warning: session_start(): Cannot send session cache limiter - headers already sent (output started at /home/surtees/designnotes.info/wp-settings.php:306) in /home/surtees/designnotes.info/wp-content/themes/viewport/framework/zilla-admin-init.php on line 16
Designing for the Browser of Today | DesignNotes by Michael Surtees

Designing for the Browser of Today

Browser grids

Gesture Theory on the iPad

Gesture Theory Web

Gesture Theory Mobile

Having spent most of 2010 designing with the interactions of an iPad in mind, I chose to design Gesture Theory’s site with the iPad browser in mind first, desktop browser second and change the context of the site’s use for a mobile browser. Thinking about the iPad first meant killing hover states, killing scrolling (just a personal preference), emphasizing swiping (right to left), killing the home screen (kept it for mobile) and trying to make it lightweight as possible. Something has worked—we have less than a 3% bounce rate. Once the design was ready for the iPad it was a pretty easy configure it to the desktop browser. Right now things work just on tap, we’re trying to get it to swipe but haven’t been happy with the jerky results so far.

For mobile we kept the same content but wanted to change the context. Realistically there shouldn’t be that may times when someone needs to visit Gesture Theory on their iPhone. However if they did, we felt it was because they were going to visit our office in Soho. We made the contact information first with our address and an easy tap to google maps to see where they are in relationship to us. There’s been a lot said about what is and isn’t mobile. For our site we really didn’t feel that the iPad was mobile compared to an iPhone. For a different project that might not be the case. The likelyhood that someone would be walking down the street with an iPad trying to find us is probably not going to happen—with an iPhone (or other smart phone) that’s why they would be using it. Depends on the context. The other thing that we did is we combined a couple of the About sections together. It made sense to scroll on the iPhone compared to swiping. When we do our next iteration of the desktop browser we’ll take a look at what we did on the iPhone.

Aside from the different formats we also had to consider landscape and portrait orientations. For the mobile browser we spent a lot of time with the design to make sure it was flexible in both widths. Things flex to fit in the different formats (at least that’s what we’ve seen so far in testing), for the iPad we kept it the same for now and desktop browsers don’t change. However for those that have a smaller screen we’ve bounced the nav to the top so people don’t miss anything below their fold.

Again all these considerations were based on context. Three months from now the context could change which won’t be much of a problem as we’ve set up a flexible system that can evolve quickly. Just type http://gesturetheory.com into your browser to see how it configures to your device.

Blog Widget by LinkWithin
  • http://twitter.com/mattwagl Matthias Wagler

    Thankx for sharing your insights, Michael. Seems like a solid approach. If you consider to implement swipe gestures you can have a look at a recent iPad expirement (http://blog.intuitymedialab.eu/2010/12/22/ux-lab-how-can-we-enrich-the-reading-experience-on-a-screen). We wrote a swipeable plugin for jQuery. It’s just a starting point but worked really fast because we used CSS transforms. It might help you to get to a good solution…

  • http://researchpaperwriter.net/buy_research_paper pay for paper

    quite interesting. the way you work on it shows you as a serious person so your work can be trustful