"Mobile Web Development with Drupal", Maksim Pecherskiy: Drupal Camp Twin Cities 2011

Submitted by Heather Brooke… on Sat, 05/21/2011 - 10:21

Nearly half of all website visits now come from mobile devices rather than from traditional desktops and laptops. So developing a Drupal site without considering mobile is now impossible. At Drupal Camp Twin Cities 2011, Maksim Pecherskiy presented a session on “Mobile Development with Drupal.”

Maksim went to DePaul University, then did two years of freelancing. He has done mobile work both with and without Drupal. Now he is at allplayers.com

Here is the session description:

Mobile web consumption is on the rise. Of the 4 billion mobile phones in use around the world, over 25% are smartphones, and over 75% are sms capable. By 2014, mobile internet usage is expected to overtake desktop internet usage. Numerous people today already access the internet exclusively on their smartphones and do not own a desktop/laptop. (dotMobi)

As Drupal developers, designers and themers, it's foolish for us to continue to assume that our work will only be viewed on a laptop or a desktop screen.

Today’s website must deliver a tailored experience to the mobile web user that utilizes unique capabilities only available on such a device—geolocation, screen rotation, etc. Furthermore, this experience must be just as flawless as it is on their full size device. The mobile user expects personalization, interactivity, and most likely will not be paying full attention to your web app as he / she is using it.

The following topics will be covered:

  • What does a user expect when using a mobile site / web application?
  • Planning your mobile web site and its content (either a from scratch mobile site or an add-on to an existing site)
  • A classification of different devices and their capabilities
  • Technical challenges and how to work around them
  • Unique feature sets of mobile devices and how to use them to their full potential
  • Device Detection
  • Mobile web development tools
  • Drupal modules for mobile web

My notes from the session follow after the break.

Websites are not just going to be for computers anymore.

What are we doing today?

  • Why should we care about mobile?
  • Core tenets for mobile development
  • Understanding your users and their devices
  • Your options for building a mobile site
  • Device/feature detection
  • Making the best of mobile
  • Tools you can use

We will only be looking at a few lines of code during the session.

Why develop for mobile?

  • Your client, boss and organization want it
  • Your audience needs it
  • You want to communicate to people others can’t reach

Mobile stats

  • 4 billion mobile phones in use
  • 1.08 billion are smartphones: Nearly one-third only use mobile to access the web
  • About 3 billion use SMS

Core tenets

  • Speed
  • Simplicity
  • Search
  • Understand your users adn admins
  • Understand their devices
  • Draw the line: you can’t support everything
  • Do not send useless bits: No extra http requests, data you do not need. Don’t make the device work harder than it needs to.
  • Create a product, don’t re-imagine one for small screens. Great mobile products are created, never ported.

Understanding your users

  • Who they are
  • Where they are
  • What devices they are using
  • What are they using their devices for?

Device usage varies around the world.

86% of mobile internet users are using their devices while watching TV. What else are they doing while accessing the web while mobile?

Content admins

  • WYSIWYG is not nice to mobile: there can be a lot of extra cruddy HTML that can break the whole page. Teach your admins HTML.
  • Helping your users craft content that looks good across devices
  • Views
  • String to plain text before markup
  • Be in full control of your templates and theme level

Device classes

  • Help you focus on target users
  • Don’t necessarily translate to theme/layout
  • Baseline class = main audience, then work from there
  • Draw the line: which devices will you not support?

Superphones

  • Around 256 MB of RAM
  • 600 MHz and up CPU
  • Min resolution 320x480
  • Sophisticated CSS, CSS3, JS, HTML5

Smartphones

  • Blackberry Bold,Win 6X
  • 320x240 minimum resolution
  • Low CPU/RAM
  • Much more variation in browser standards
  • Not reliable JS
  • Decent, but not great CSS

Easy way to test multiple devices? Go to a Verizon store.

Feature phones

  • Forget Javascript
  • Minimal CSS
  • Lower resolution

Your options

  • Separate domains on Drupal, such as m.moneys.com
    • May lead to linking, bookmarking issues: if a mobile user changes a link with a non-mobile user, can cause problems
    • May have SEO implications
    • Can be done with MobileTools/WURFL
  • Same domain, but switch theme
    • Performance penalty on high traffic sites
    • You can create separate navigation, separate permissions for mobile users
  • Media queries
  • Services

Media queries

  • JavaScript and HTML? Doesn’t change with a media query.
  • They rely on CSS support which isn’t available in feature phones
  • Image gets delivered in standard size, then gets resized using the CPU
  • Hidden image tags still downloaded
  • Hidden CSS backgrounds still downloaded (unless you hide parent)
  • Perfect for HTML email
  • Suggested read: http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold

Not sure I agree with this, but interesting take.

Services

Build outside of Drupal framework

  • Perfect if your site is working on exposing a public API
  • Building and managing services is challenging
  • You can use jQuery Mobile, Sencha Touch (one-sixth the size of jQuery Mobile), Zepto.js
  • Don’t have to hack Drupal to do workarounds

Service and feature detection

Server-side

Server-side user agent detection not always correct

WURFL

  • Wireless universal resource file
  • Free and open source
  • Comes in Tera-Wurfl MySQL flavor
  • Works great with MobileTools
  • Ridiculous amount of details per user agent
  • tera-wurfl.com/explore

DeviceAtlas

  • $99/year and up
  • Guaranteed updates
  • Analytics

Client-side

Modernizr!

  • Won’t work on devices with no JS
  • An extra file to send
  • Checks if device is capable of numerous CSS3/HTML5 features
  • Allows you to provide fallbacks
  • Attaches classes to HTML elements

Think outside the box!

Catch your user in their context

Where?
HTML5 geolocation
When?
You always now the time
Bad internet connection?
  • HTML5 LocalStorage
  • SessionStorage
  • AppCache
Download a file?
Email!
Text messaging and VOIP
  • DotGo
  • Twilio
  • Voip for Drupal: interact with site with VOIP, let site interact with users with VOIP

Reach people without computers

Design

  • Simplicity
  • Sparcity
  • Fewer options than desktop: accordion views useful
  • Everything needs a purpose: don’t put decorative photos on page
  • Search is very important as the gateway to a site
  • Collapsing divs are nice
  • User is interacting with their thumb: small links are bad
  • User is possibly very distracted
  • Minimize need to type

User interaction

SuperPhones

  • No right click
  • Tab, tap and hold, double tap
  • Swipe and flick actions
  • Screen size and zooming
  • Font size

Smart/feature phones

  • Move along links sequentially
  • Hard to tell what is actually a link
  • Screen size and font size

Your tools

Why Drupal does the trick

  • Easy to extend
  • Theming/subtheming
  • Hooks
  • Third-party modules
  • Compression and caching
  • Permissions

Modules

  • jQuery mobile module
  • Mobile Tools
  • Wurfl
  • ImageCache/Image module: use mobile size presets

Theming

  • jQuery mobile theme
  • HTML5 Base
  • Mobile theme
  • Meta tags
    • Mobile optimized
    • Handheld-friendly
    • Viewport
  • Subtheming
    • Create base class
    • Device class specific JS/CSS
    • Template overrides
    • Doctype
    • XHTML-MP

Code

  • Well-structured markup
  • Progressively enhance
  • Adapt content
  • Compress
  • Micro-JS libraries
  • Caching
  • CDM
  • Compress/minify
  • Minize HTTP requests
  • Don’t send unneeded data
  • Don’t waste resources
  • Lazy Load: load a little bit of content, while user is looking at it, load in more in background

Coding tools

  • FireBug
  • YSlow
  • Mozilla UA Switcher
  • JSLint
  • iPhone Emulator
  • Android Emulator
  • BB Emulator (if you can get it to work)
  • YoSpace Smartphone Emulators

Analytics

  • Google Analytics for Super Phones
  • Recent support for non-JS
  • BB-Clone with WURFL

Summary

  • Think outside the box
  • Speed is king
  • Simplicity is queen
  • Search is their kid
  • Understand your users / their devices
  • Do not send or request without need
  • Experiment. You will be surprised.

My take

This went by super fast. A lot of content to take in. The philosophy in this presentation was definitely that you should develop sites specifically for mobile. The challenge is when you are just one person handling a multitude of web responsibilities for an organization, do you have the time to develop specific content just for mobile? Yes, you get a better result with a mobile-specific strategy, but if you have limited time, is it better to go with, say, a responsive web design strategy, where your content is repurposed for small screens? Is something better than nothing?

Archives