Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Mobile Development With Drupal

Mobile Development With Drupal

Maksim Pecherskiy

on 10 December 2011

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Mobile Development With Drupal

Mobile Web Development
With Drupal Maksim Pecherskiy Went to DePaul University
2 Years of Freelancing
Mobile with and without Drupal.
Now at AllPlayers.com What Are We Doing Today? Just a few lines of actual code
You'll be ok, I promise
Questions welcomed 1/3 are the only
means of internet access Speed Simplicity Search Do Not Send Useless Bits Understand Your Users And Admins Understand Their Devices Draw The Line Create a product, don’t re-imagine
one for small screens. Great mobile
products are created, never ported. Core Tenets Understanding Your Users Where They Are
Who They Are
What They're doing
User Type != Device Type Super Phones Around 256 MB Ram
600 MHz and up CPU
Min Resolution 320x480
Sophisticated CSS / CSS3
Sophisticated JS
Many support HTML5 Smart Phones Blackberry Bold, Win 6x
320x240 Minimum Resolution
Much more variation in browser standards
Not reliable JS
Decent, but not great CSS Dumb Phones or Feature Phones Forget Javascript
Minimal CSS
128x240 Resolution Your Options Separate domain, on Drupal
May lead to linking, bookmarking issues
May have SEO Implications
Can be done with MobileTools / WURFL

Same Domain, but switch theme
Performance penalty on high traffic sites

Media Queries and Responsive

Services Media Queries JavaScript and HTML?

They rely on CSS Support which isn't always available in feature phones

Image gets delivered in standards size, then gets resized using the CPU


Hidden image tags still downloaded

Hidden CSS Backgrounds still downloaded (unless you hide parent)

Perfect for HTML E-Mail 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, Zepto.js
Don't have to hack Drupal to do workarounds Device and Feature Detection Server Side WURFL
Wireless Universal Resource File
Free and Open Source
Comes In Tera-Wurfl MySQL Flavor
Works great with MobileTools
A ridiculous amount of details per UA
Can still get file open source, just a shade older.

$99/Year and Up
Guaranteed Updates
Analytics too 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 the <HTML> element
http://modernizr.com Server side UA detection not always correct Making the best of Mobile Think Outside The BOX! Catch your user in their context

HTML5 Geolocation
You always know the time
Bad internet connection?
HTML5 LocalStorage
Download a file?
Text Messaging and VOIP
Voip for Drupal
Reach People without computers Design Simplicity
Everything needs a purpose
Search is very important as the gateway to a site
Collapsing divs are nice
User is interacting with their thumb
User is possibly very distracted
Minimize need to type Why Drupal Does The Trick Easy to Extend
Theming / Subtheming
Third party Modules
Compression and caching
Services Modules Theming C
Environment Analytics Modules JQuery Mobile Module
Mobile Tools
ImageCache / Image Module
Services Theming Jquery Mobile Theme
HTML5 Base
Mobile Theme
Meta Tags
Mobile Optimized
Handheld Friendly
Device Class Specific JS/CSS
Template Overrides
http://drupal.org/node/225125 Well Structured Markup
Progressively Enhance
Adapt Content
Micro JS Libraries
Compress / Minify
Minimize HTTP Requests
Don't send unneeded data
Don't waste resources
Lazy Load FireBug
Mozilla UA Switcher
Iphone Emulator
Android Emulator
BB Emulator (if you can get it to work)
YoSpace Smartphone Emulators Google Analytics for Super Phones
Recent support for Non-JS
BB-Clone with WURFL Think Outside The Box
Speed is King
Simplicity is Queen
Search should always be an option
Understand Your Users / Their Devices
Do Not Send or Request without need
Experiment. You WILL be surprised. Maksim Pecherskiy
@MrMaksimize 773 - 677 - 7755
max@allplayers.com 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
Your Tools How Technical will this be? Why Develop for Mobile? Your clients / boss / organization want it
Your audience needs it
You want to communicate to people others can't reach
You want to play!
Mobile is on the rise as a way for people to access all kinds of information Content Admins

WYSIWYG is not nice to mobile

Helping your users craft content that looks good across devices

Markdown 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? Andrew Kucharski Andrew Kucharski
@akuharski 773 - 525 - 8255
andy@promethost.com @akucharski @MrMaksimize
Full transcript