Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

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.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Mobile Development With Drupal

Mobile Development With Drupal
by

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.
m.cbdmarketing.com
mobileanthem.mobi
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
Low CPU / RAM
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
m.example.com
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

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

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
http://www.tera-wurfl.com/explore/
Can still get file open source, just a shade older.

DeviceAtlas
$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

Where?
HTML5 Geolocation
When?
You always know the time
Bad internet connection?
HTML5 LocalStorage
SessionStorage
AppCache
Download a file?
E-Mail!
Text Messaging and VOIP
DotGo
Twilio
Voip for Drupal
Reach People without computers Design Simplicity
Sparcity
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
Hooks
Third party Modules
Compression and caching
Permissions
Services Modules Theming C
O
D
E DEV
Environment Analytics Modules JQuery Mobile Module
Mobile Tools
Wurfl
ImageCache / Image Module
Services Theming Jquery Mobile Theme
HTML5 Base
Omega
Mobile Theme
Meta Tags
Mobile Optimized
Handheld Friendly
Viewport
Subtheming
Device Class Specific JS/CSS
Template Overrides
Doctype
XHTML-MP
Override
http://drupal.org/node/225125 Well Structured Markup
Progressively Enhance
Adapt Content
Compress
Micro JS Libraries
Caching
CDN
Compress / Minify
Minimize HTTP Requests
Don't send unneeded data
Don't waste resources
Lazy Load FireBug
YSlow
Mozilla UA Switcher
JSLint
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