Start a FREE 7 day trial! Get training videos and books, plus expert support:  

Live Blogs from Joomla, Drupal, Wordpress Events

Mobile First by Luke Wroblewski at DrupalCon Denver

lukew highresLuke Wroblewski gave a keynote address at DrupalCon Denver called Mobile First. He talked about the upcoming mobile revolution and how it will affect all of our interactions with the web.

This was the best keynote I can remember seeing at a tech conference. Whether you use Drupal, Joomla WordPress, this presentation is well worth watching if you couldn't make it in person.

You can watch and download the presentation from https://www.lukew.com/presos/preso.asp?26.

Introduction

Web products should be designed for mobile first.

Facebook, Google are both taking this attitude. Eric Schmidt from Google calls this "The high-volume end-point of three concurrent trends":

  1. Network connectivity. We can go online anywhere.
  2. Devices are now rich in processing power. The devices we carry around in our pockets are way more powerful than what NASA used to send a man to moon
  3. Cloud-based solutions. We can take our data and interactions with us.

An Abobe chief says the mobile revolution is bigger than the PC revolution. There are at least three major benefits of mobile:

  1. Growth = opportunity
  2. Constraints = focus
  3. Capabilities = innovation

There are 371k babies born per day but that's dwarfed by the number of mobile devices sold every day: 378k iPhones, 700k Android phones, 200k Nokia. 143k Blackberries.

Desktop computing had a 20 to 30 year run of dominance. Mobile is now taking over. In 2009 50% of new connections were from Mobile devices.

We should no longer thing of the personal computer as the large box under your desk. The personal computer is now the computer you always have in your pocket.

Some stats on mobile connections in different countries:

  • Asia and Africa: 50+% mobile
  • India: 49%
  • UK: 22%
  • US: 50+% by 2015.

Mixi is the biggest social network in Japan. It's traffic is changing fast:

  • 2008: 14%
  • 2012: 85%

Mobile users also do more:

  • Yelp: 8% of users on mobile. They do 40% of all searches. Click here for Yelp stats.
  • Zillow: Viewers look at active listings 45% more often on mobile.
  • Facebook: Initially they wanted just a mobile version but realized that it could be better than the main site. Facebook sees more users on their mobile website than all their native apps combined. Click here for Facebook stats.

Mobile Requires You to Focus

Until now, 1024x768 was normal. The new size is 320x480 for mobile and it forces you to lose 80% of the site. That's awesome! "When you get rid of 80% of the stuff, you only keep the stuff that people want."

Compare Southwest.com desktop vs mobile:

swcom

mobile

Flickr went from 60+ options on the desktop to 6 for mobile. Mobile sites actually deliver what your visitor wants as opposed to what you feel you must present. Partial attention requires focused design. One thumb, one eyeball. https://xkcd.com/773/ shows what we give people vs what they want:

xcd

Speed is key for mobile. 'Nobody wants to wait while they wait" says Instagram. They perform action optimistically in case you need them. Load times matter. 40 percent of people will abandon your site after 3 seconds.

speed

Where do People Use Phones?

84% of people use their mobile phones at home. 39% of folks admit to using smartphones in the bathroom (that makes 61% of people into liars. Phone in the bathroom stats here).

  • Tablets are still a couch / bedtime device.
  • Desktops are workday devices.
  • Smartphones dominate outside the workday, particularly in the morning.

Mobile Provides New Functionality

Lots of cool functionality: https://vimeo.com/1540283

Mobile provides many more ways to accurately track location than does desktop.

Touch is taking over from keypads on mobile. A keypad is just another layer stopping us from getting to content. Administrative debris keeps us from accessing content. Scroll bars, navigation buttons can just be "debris" for touch-based system. Just touch an item or move it out of the way.

We still design many touch items too small. We all have fat fingers. Touch targets should always be 44 pixels or larger.

Shopping is the next mobile boom. Tesco wants to become number one grocer without building brick and motors. They allow you to use QR codes to order groceries https://www.youtube.com/watch?v=fGaVFRzTTP4.

Images are now valid input. Mobile can understand and use images, produces, text and more in image form: https://www.youtube.com/watch?v=h2OfQdYrHRs

Take a photo of someone and identify them automatically.

If you're on the desktop, you're primed for disruption by mobile-first companies.

 

Start a FREE 7 day trial! Get training videos and books, plus expert support:  

License

All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means:
  • You can re-use these tutorials.
  • You can modify these tutorials.
  • You must link back to our original tutorial.
  • You can't use these tutorials commercially.
Click here to read the full license.