drupal goes mobile

@girlsattech

DRUPAL GOES MOBILE

Mobile Site Considerations

• Breadcrumbs

• Switcher Links

• Navegation

• Entry Points

• Images (tinysrc)

• Preserving the Brand

• Reusing Native Design Patterns

Switching Between Mobile and Desktop Browsers

Switching Between Mobile and Desktop Browsers

Looking at Headers

Looking at Headers

Para mas información: RFC2616

Switching Between Mobile and Desktop Browsers

• Build it yourself

• Use Device Database Recognition

• Detection on the Client Side

Build It yourselfExample….

Use Device Database Recognition

WURFL(Wireless Universal Resource File)

• XML

• Características y Capacidades para una variedad de dispositivos Móviles

• Open-source

DeviceAtlas

• No es open-source

• Proveido por dotMobi

• Licencias Comerciales y para Desarrolladores

Detection on the Client Side

• Javascript

I. High-end Touch

II. Algunos Hign-end Non-touch

Detection on the Client Side

• Media Queries

Screen Width Based Mobile Groups

Drupal Mobile Plugin Module

• Mobile Theme Enabled

• Site Building

• Not enabled for users by default

• User-Agent by default

• Mobile Group by default

• WURFL

• Not available yet for drupal 7

Mobile Tools

• Browscap

• Site Configuration

• Dual Domain Experience

• Theme Switching

I. Browser Recognition Alone

II. Domain Alone

Mobile Tools

• Mobile Role based Permission System

• Permissions Not activated by default

Mobile Theme

• An other switcher for detecting devices

• It depends entirely upon Browscap Module

• There is no domain mapping,

device grouping, or creation of custom blocks.

Mobile Template and Libraries

• iWebKit

• Nokia Web Templates

• JQtouch

• Jquery Mobile

• Sencha Touch

• Fusion Mobile(Drupal)

Testing

Using Desktop Clients

User - Agent Switcher (Mozilla/ Safari)

Mobile Emulators

Iphone/ Ipad (Xcode)

Android (Avds-Android Virtual Devices)

BlackBerry

Nokia Series 40 and Symbian^3

Windows Mobile

Testing

DeviceAnywhere

Testing

• Perfecto Mobile

• mobiReady

• W3C Validators

• http://validator.w3.org/mobile/

• Testing with real Handsets

Gracias por su Atención

@girlsattech

@zezzi