My Notes on Luke Wroblewski’s presentation – Designing Mobile Web Experiences

So we’re almost done with the Web App Masters Tour, just two more presentations to go, and I don’t want to sound biased when I’m saying this but Luke’s was, to me and because of my current focus, positively the best presentation up to now. I was so excited to listen to all this immediately appliable stuff!

Thanks to Luke Wroblewski again for sharing all that information. It was also very nice meeting him on a more personal leve, he is a great guy.

Here are my notes on his talk:

  • Use of PCs decreased 20% most likely because of smartphones and tablets.
  • Sign-ups on mobile are important! 16% of Twitter sign-ups are via mobile.
  • A mayor use of Facebook and Twitter is done through the mobile website
  • Consider mobile capabilities like location detection
  • Start using new coding technologies
  • Embrace mobile constraints like limit of space and variation on signal availability
  • Mobile use cases
    • Lookup/Find
    • Explore/Play
    • Check In/Status
    • Edit/Create
  • In mobile, you should design navigation first, content second
  • Keep navigation minimal, give content all the attention on the screen
  • Every time you assume somebody is not going to do something on mobile, they do.
  • Don’t dumb stuff down for mobile
  • Navigation elements – Should be kept to a minimum and maintained in the simplest form possible. Sometimes the best solution is as simple as an anchor link.
    • Avoid fixed navigations on web, there’s no right way to do it: You have to sacrifice performance and it’s really hard to accomplish.
    • Avoid back buttons, they’re always already someplace else and will end up confusing users.
  • We generally have partial-attention users, and partial attention requires focused design.
  • Have clarity and focus on the really important elements of your content.
  • Care about touch-based interactions – even BlackBerry and Nokia are heading there now.
  • The recommended minimum size of touch targets is 44 pixels.
  • No hover menus on mobile
    • Are these elements important enough? Put them on screen
    • Require an on tap action
    • Bring them out on swipe
    • Make it a separate screen
    • Or just drop it!
  • Hover CSS covers devices with indirect manipulation.
  • Set a viewport to create a better experience.
  • Try not to use images, take advantage of CSS3.
  • Think in terms of fluid layouts: Your users can flip their device and your layout must adapt to this change.
  • Reduce your elements; it makes things simpler for everyone on your team.