ABOUT NORTHPOINT■    Founded in 2003■    Headquartered in New York with a second office in Boston■    100 employees split ...
MOBILE	  PENETRATION	  ■    Facebook: 200M mobile users, 2x more active than Desktop users■    Twitter Mobile: 50% of tota...
ADOPTION	  WITHIN	  THE	  DRUPAL	             COMMUNITY	  
DRUPAL	  AS	  A	  MULTIPLATFORM	  CMS	   ■    Drupal not only targets Desktops, but also tablets and mobile devices ■ Flex...
WHITEHOUSE.GOV	  Tom CochraneDirector of New Media Technologies                                               5Executive O...
TIMESHUTTER	  •  A	  travel	     photography	     iPhone	  App	  that	     allows	  user	  to	  view	     SFs	  major	    ...
DRUPALCON	   •  hPp://palanOr.net/    blog/mobilizing-­‐    drupalcon-­‐chicago	                                7
PUBLISHER	  •  Publisher	  App	  •  http://drupal.org/   project/services•  hPps://   github.com/   workhabiOnc/   drupal-...
STAGES	  OF	  CREATING	  A	  MOBILE	                  PROJECT	                 • Target audience               • Targeted ...
ARCHITECTING YOUR MOBILE       DRUPAL SITE
“APP”	  VS	  MOBILE	  WEBSITE	  iPhone/Android/… App                Mobile Website                  Drupal supports both s...
CREATING	  AN	  APPLICATION	  WITH	  DRUPAL	  BACKEND	                                          12
CREATING	  A	  RESPONSIVE	  ■    Media Queries TEMPLATE	  ■    Fluid CSS■    Use Drupal Build Modes■    Context Module    ...
CREATING	  A	  MOBILE	  AND	  DESKTOP	                  TEMPLATE	   ■    Create a theme specific for mobile and desktop ■ ...
MULTISITE	  INSTALLATION	  ■  Create   a theme specific for mobile and desktop■  Maintain   separate configurations for mo...
OVERVIEW	  ARCHITECTURE	                                             Separate templates &App     Responsive   Separate tem...
IMPLEMENTATION:CREATING THE MOBILE SITE    STEP-BY-STEP APPROACH
STEP-­‐BY-­‐STEP:	  FROM	  DESKTOP	  TO	                  MOBILE	  
Mobile Template Set-Up   Device Detection     Redirection    Select Layout  Content Adaptation
MOBILE	  TOOLS	  ■  http://drupal.org/project/mobile_tools■  Basic Functionality    –    Device detection    –    Device r...
Mobile Template Set-Up   Device Detection     Redirection    Select Layout  Content Adaptation
MOBILE	  TEMPLATE	  SET-­‐UP	  Create your own mobile theme or start from existing contributions Fusion Mobile            ...
USING	  MOBILE	  TOOLS	  TO	  CONFIGURE	             MOBILE	  THEME	                        Tell when to switch theme     ...
MOBILE-­‐SPECIFIC	  HEADERS	  ADDED	          BY	  MOBILE	  TOOLS	      <meta name = "viewport" content = "user-scalable=n...
HIDE	  SCROLLBAR	  USING	   JAVASCRIPT	  WIDGET	  
Mobile Template Set-Up   Device Detection     Redirection    Select Layout  Content Adaptation
DEVICE	  DETECTION:	  READ	  USER	                 AGENT	  STRING	  ■     Simple detection       ■    Parse user agent str...
MOBILE	  TOOLS	  CONFIGURATION	  
Mobile Template Set-Up   Device Detection     Redirection    Select Layout  Content Adaptation
REDIRECTION	  SCHEME	  SHOULD	  BE	              SIMPLE	    http://m.domain.tld or                           http://www.do...
CONFIGURE	  REDIRECTION	  •  Choice	  to	  have	  site	  on	  two	  domains	  or	  one	                                   ...
OVERRIDE	  REDIRECTION	  ■  Give   users control■  Add   override arguments to your URL    ?device=desktop    ?device=mobi...
Mobile Template Set-Up   Device Detection     Redirection    Select Layout  Content Adaptation
CONFIGURE	  MOBILE	  LAYOUTS:	             BLOCKS	  ■  Using Blocks configuration page    ■  Configure blocks appearing in...
CONFIGURE	  MOBILE	  LAYOUTS:	      CONTEXT	  MODULE	  
Mobile Template Set-Up   Device Detection     Redirection    Select Layout  Content Adaptation
CONTENT	  ADAPTATION	  ■  Different adaptations are possible for mobile devices    ■  Video adaptation    ■  Image resizin...
IMAGE	  RESIZING	  USING	  IMAGECACHE	                                              ImageCache                            ...
CONFIGURE	  YOUR	  BUILD	  MODE	  Fields                 Formatter
Mobile Template Set-Up   Device Detection     Redirection    Select Layout  Content Adaptation
Q&A	  	  AND	  TESTING	  
TESTINGUsability Testing   Test all your targeted devices        Performance Testing  Evaluate your    Simulators        ...
KNOW	  YOUR	  DEVICES	  UPFRONT!	  ■  Enables                     good client communication. No surprises at the end■  Kno...
STAGES	  OF	  CREATING	  A	  MOBILE	                  PROJECT	                 • Target audience               • Targeted ...
Enough talk!Show me thedemo!
46
DRUPALCON	  •  Appcelerator	  Otanium	     framework	      – Pure	  JS	  as	  a	  cross	        plahorm	  API	  using	  a	...
Time Shutter San Francisco A Drupal-Powered iPhone App        NIH Mobile User Group            April 13, 2011
ISL	  ConsulOng	  •    Founded	  in	  1993	  •    Privately	  held	  web	  services	  firm	  	  •    New	  York	  Partner	 ...
CollaboraOon	  •    Drupal	  Development	         –    Ankur	  Rishi	         –    Jeff	  Turner	         –    Robert	  Hin...
Time	  ShuPer	  San	  Francisco	  •  A	  travel	  photography	  iPhone	  App	     that	  allows	  user	  to	  view	  SFs	 ...
Time	  ShuPer	  San	  Francisco	  App	  2	  •  Offers	  something	  different	       –  Old	  photograph	  superimposed	  on...
+
LiPle	  Lesson	  •  Solr	  Power	      –  IniOally	  had	  a	  “Related	         Images”	  box	  driven	  by	         manu...
Big	  Lessons	  •  Drupal	  immature	  for	  mobile	  “transacOons”	       –  Services	  module	  provides	  framework	  b...
Time	  ShuPer	  Next	  Steps	  •  Live	  IntegraOon	      –  Upload	  images	  directly	  via	  login	           •  Create...
QuesOons?	                  omar@islco.com
PUBlisher	    •  Kyle	  Browning	  –	  Kyle@workhabit.com	    •  Workhabit	    •  Publisher	  App	    •  iOS	  and	  Andro...
Appendix	  
Background on publisher app                              81
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Building mobile-sites-with-drupal
Upcoming SlideShare
Loading in...5
×

Building mobile-sites-with-drupal

3,630

Published on

This was presented by Kieran Lal, the technical director for business development of Acquia in SV Drupal User Group.

This is a review 5 different implementations of how to mobile experiences with Drupal. In this session he reviewed guidelines for architecting a mobile site. He then reviewed the 4 mobile app implementations including: mobify, Drupalcon Chicago app, Whitehouse app, Timeshutter SF, and the soon to be released Publisher app.

Register for more interesting sessions this year on:
http://www.meetup.com/DrupalGroup/

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,630
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
142
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Building mobile-sites-with-drupal

  1. 1. ABOUT NORTHPOINT■  Founded in 2003■  Headquartered in New York with a second office in Boston■  100 employees split between offices■  Content Solutions Focus ■  Re-platforming CMSs ■  Mobile Websites and Applications ■  Information Architecture and Content Strategy ■  Search Engine Optimization (SEO) ■  Website and Microsite Development ■  Community Development / User-Generated Content platforms ■  Website Scalability / Performance Management ■  Content Syndication and Video Serving ■  Scalability■  Generously loaned content for Stages of creating a mobile project 1
  2. 2. MOBILE  PENETRATION  ■  Facebook: 200M mobile users, 2x more active than Desktop users■  Twitter Mobile: 50% of total active users, 40% of all tweets■  Opportunities 4 ■  Only21% of Google’s largest Millions of Terabytes per month advertisers have a website that is optimized for mobile 3 ■  Communicate directly with consumers 2 ■  Social Networking ■  E-Commerce 1 ■  Additional Advertising Medium ■  Gaming 0 2009 2011 2014 2012 2013 2014 Mobile traffic prediction 2
  3. 3. ADOPTION  WITHIN  THE  DRUPAL   COMMUNITY  
  4. 4. DRUPAL  AS  A  MULTIPLATFORM  CMS   ■  Drupal not only targets Desktops, but also tablets and mobile devices ■ Flexible content model & templating engine allows Drupal to target multiple devices ■  Advantages of using Drupal as a multiplatform CMS ■  One content store for multiple platforms ■  Available tools ■  Mobile Tools ■  WURFL ■  Fusion Mobile ■  Context Module ■  Services 4
  5. 5. WHITEHOUSE.GOV  Tom CochraneDirector of New Media Technologies 5Executive Office of the President
  6. 6. TIMESHUTTER  •  A  travel   photography   iPhone  App  that   allows  user  to  view   SFs  major   landmarks  with   “then  and  now”   image  transiOons   and  slideshows   6
  7. 7. DRUPALCON   •  hPp://palanOr.net/ blog/mobilizing-­‐ drupalcon-­‐chicago   7
  8. 8. PUBLISHER  •  Publisher  App  •  http://drupal.org/ project/services•  hPps:// github.com/ workhabiOnc/ drupal-­‐ios-­‐sdk   8
  9. 9. STAGES  OF  CREATING  A  MOBILE   PROJECT   • Target audience • Targeted devices Strategy • Business goals • … • Focus groups Product Development • Defining functionality • Product flow • … • Usability • Information Architecture IA/Design • User Experience • Navigation • Reusability • Scalability Architecting • Extendability • Simplicity • … • Drupal module development Implementation • Contrib modules • Extending • … • Device testing • Functional testing Testing • Usability testing
  10. 10. ARCHITECTING YOUR MOBILE DRUPAL SITE
  11. 11. “APP”  VS  MOBILE  WEBSITE  iPhone/Android/… App Mobile Website Drupal supports both strategies!
  12. 12. CREATING  AN  APPLICATION  WITH  DRUPAL  BACKEND   12
  13. 13. CREATING  A  RESPONSIVE  ■  Media Queries TEMPLATE  ■  Fluid CSS■  Use Drupal Build Modes■  Context Module •  Easy setup •  Large reuse of existing infrastructure •  Multi-content distribution •  No mobile first approach •  Desktop-focused default theming behavior needs many changes to fit mobile context •  Hard to create real mobile “experiences” or contextual apps
  14. 14. CREATING  A  MOBILE  AND  DESKTOP   TEMPLATE   ■  Create a theme specific for mobile and desktop ■  Share functionality across mobile and desktop •  Easy to setup •  Large reuse of existing infrastructure •  Multi-content distribution •  No mobile first approach •  Desktop-focused default theming behavior needs many changes to fit mobile context •  Hard to create real mobile experiences or contextual apps
  15. 15. MULTISITE  INSTALLATION  ■  Create a theme specific for mobile and desktop■  Maintain separate configurations for mobile and desktop •  Room to create a highly-optimized mobile experience •  Large reuse of existing infrastructure •  Multi-content distribution •  Harder to setup and maintain
  16. 16. OVERVIEW  ARCHITECTURE   Separate templates &App Responsive Separate templates separate configuration
  17. 17. IMPLEMENTATION:CREATING THE MOBILE SITE STEP-BY-STEP APPROACH
  18. 18. STEP-­‐BY-­‐STEP:  FROM  DESKTOP  TO   MOBILE  
  19. 19. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation
  20. 20. MOBILE  TOOLS  ■  http://drupal.org/project/mobile_tools■  Basic Functionality –  Device detection –  Device redirection –  Theme switching –  Detection of device groups –  Mobile user roles –  Force full view | mobile –  Set custom homepage –  Custom number of FrontPage nodes –  Hide mobile browser scrollbar –  Viewport header –  Provide mobile build modes –  Provide mobile contexts –  Provide panel context
  21. 21. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation
  22. 22. MOBILE  TEMPLATE  SET-­‐UP  Create your own mobile theme or start from existing contributions Fusion Mobile Nokia Mobile jQuery Mobile A Cloudy Day Mobile
  23. 23. USING  MOBILE  TOOLS  TO  CONFIGURE   MOBILE  THEME   Tell when to switch theme 1 Select the mobile theme 2 Additional mobile headers 3
  24. 24. MOBILE-­‐SPECIFIC  HEADERS  ADDED   BY  MOBILE  TOOLS   <meta name = "viewport" content = "user-scalable=no, width=device- width, maximum-scale=1.0" />! -  Default iPhone viewport is 900px -  Set viewport to device width -  Do not allow zooming <link rel="apple-touch-icon" href="”sites/all/themes/ northpoint_mobile/webclip.png>!
  25. 25. HIDE  SCROLLBAR  USING   JAVASCRIPT  WIDGET  
  26. 26. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation
  27. 27. DEVICE  DETECTION:  READ  USER   AGENT  STRING  ■  Simple detection ■  Parse user agent string and search for “iPad”, “Android”, “Nokia”, “Blackberry” ■  Only information about the device manufacturer■  Advanced detection ■  User device library to match user agent string with ■  Contains more information like Screen Size, device capabilities ■  http://drupal.org/project/WURFL
  28. 28. MOBILE  TOOLS  CONFIGURATION  
  29. 29. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation
  30. 30. REDIRECTION  SCHEME  SHOULD  BE   SIMPLE   http://m.domain.tld or http://www.domain.com http://www.domain.mobi
  31. 31. CONFIGURE  REDIRECTION  •  Choice  to  have  site  on  two  domains  or  one   Add URLs domain   1 Enable Redirection 2 Add Exceptions 3
  32. 32. OVERRIDE  REDIRECTION  ■  Give users control■  Add override arguments to your URL ?device=desktop ?device=mobile ?device=auto ?device=<device-group> http://mobile_tools.local?device=desktop
  33. 33. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation
  34. 34. CONFIGURE  MOBILE  LAYOUTS:   BLOCKS  ■  Using Blocks configuration page ■  Configure blocks appearing in your Desktop regions ■  Configure blocks appearing in your Mobile regionsDesktop Mobile
  35. 35. CONFIGURE  MOBILE  LAYOUTS:   CONTEXT  MODULE  
  36. 36. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation
  37. 37. CONTENT  ADAPTATION  ■  Different adaptations are possible for mobile devices ■  Video adaptation ■  Image resizing ■  Text summarization (e.g.: provide shorter versions) ■  Functional adaptation (e.g. reducing number of form fields)
  38. 38. IMAGE  RESIZING  USING  IMAGECACHE   ImageCache presets ImageCache configuration for mobile logo
  39. 39. CONFIGURE  YOUR  BUILD  MODE  Fields Formatter
  40. 40. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation
  41. 41. Q&A    AND  TESTING  
  42. 42. TESTINGUsability Testing Test all your targeted devices Performance Testing  Evaluate your Simulators Speeds can vary from 70-135 designs and   iPhone simulator /Android Kbits/s while new 4G improve Simulator standards will allow for peak  Test on task values up to 100 Mbit/s   Blackberry Simulators completion   Opera Mini Simulator  Evaluate usage Device banks   Nokia Remote Access   Commercial solutions available
  43. 43. KNOW  YOUR  DEVICES  UPFRONT!  ■  Enables good client communication. No surprises at the end■  Know what to develop for■  Know what to test■  Different projects will have different listsDevice   OS   Resolu6on   Browser   js   CSS-­‐ css-­‐rounded-­‐ Fonts   Media  Queries   Template   Gradient   corner   Replacements  Iphone3G   iOS   320x480   Webkit   High  end  iPhone4   iOS   640x980   Webkit   High  end  Samsung   Android   480x800   Webkit   High  end  Galaxy  Tourch  9800   BB  v6.x   360x480   Webkit   High  end  Nokia  C6   Symbian^3   360x640   Webkit   Low  end  BB  Pearl   BB  v4.6   360x400   BB  4.6   Low  end  9100  …   ..  
  44. 44. STAGES  OF  CREATING  A  MOBILE   PROJECT   • Target audience • Targeted devices Strategy • Business goals • … • Focus groups Product Development • Defining functionality • Product flow • … • Usability • Information Architecture IA/Design • User Experience • Navigation • Reusability • Scalability Architecting • Extendability • Simplicity • … • Drupal module development Implementation • Contrib modules • Extending • … • Device testing • Functional testing Testing • Usability testing
  45. 45. Enough talk!Show me thedemo!
  46. 46. 46
  47. 47. DRUPALCON  •  Appcelerator  Otanium   framework   – Pure  JS  as  a  cross   plahorm  API  using  a   custom  VM  •  Offline  storage,  DB  •  Integrate  with  DC   website,  sync  content  •  Build  a  reusable  library  •  Views  datasource  –   JSON  •  Embedded  reviews     47
  48. 48. Time Shutter San Francisco A Drupal-Powered iPhone App NIH Mobile User Group April 13, 2011
  49. 49. ISL  ConsulOng  •  Founded  in  1993  •  Privately  held  web  services  firm    •  New  York  Partner  ClearMetrics  •  Built  ~  50  Drupal  sites  •  Major  clients   –  Fortune  500  firms:  Chevron   McDonalds,  Thomson,  Yahoo!   –  Non-­‐profits  like  Common  Sense   Media,  NewsTrust,  PSR   –  Winner  of  numerous  awards   including  BOTI,  AdTech,  WMA   –  Diversifying  into  products   •  Skillscan   •  Chevron  Toy  Cars   •  Woody  Allen  audio   •  Time  ShuPer  
  50. 50. CollaboraOon  •  Drupal  Development   –  Ankur  Rishi   –  Jeff  Turner   –  Robert  Hinrichs   –  Judy  Chun  •  iPhone  Development   –  Ricky  Tsao   –  Mark  Ferree  •  CreaOve  Director   –  Catharine  Oshiro  •  WriOng   –  Dinah  Darvas,  Beth  Edelman,  Karen  Payne,   et.  al  •  Photography   –  Michael  Maloney,  Kerry  Ho,  et  al.  •  Old  Postcards   –  Edward  H.  Mitchell,  Pacific  Novelty  Co.  and  a   dozen  other  firms,  1900-­‐1920  •  Old  Map   –  David  Rumsey  Map  CollecOon  
  51. 51. Time  ShuPer  San  Francisco  •  A  travel  photography  iPhone  App   that  allows  user  to  view  SFs   major  landmarks  with  “then  and   now”  image  transiOons  and   slideshows  •  Geo-­‐coded  map  with  color   locaOons  •  Original  guidebook  capOons  •  Users  can  take,  store  and  share   own  photos  made  at  locaOon  •  Picked  as  a  "New  and   Noteworthy"  release  on  the   iTunes  App  Store  home  page  •  Free  •  50,000+  downloads  
  52. 52. Time  ShuPer  San  Francisco  App  2  •  Offers  something  different   –  Old  photograph  superimposed  on   camera  view  align  user’s  shots   •  The  App  scales  images  for   transiOons   –  New  shot  with  old  image  to  email,   post  on  Facebook,  TwiPer,  Flickr  •  Scalable  technology   –  Drupal-­‐powered  content   management  to  make  adding   places  to  create  new  Apps  easy   –  Currently  3  App  versions   •  SF  Free  iPhone   •  SF  Paid  iPhone  ($1.99)   •  SF  iPad   –  New  York  version  in  May  2011  •  CompeOOon   –  Whatwasthere.com  (iPhone  App  too)   –  Historypin.com   –  LookBackMaps  (iPhone  App  too)  
  53. 53. +
  54. 54. LiPle  Lesson  •  Solr  Power   –  IniOally  had  a  “Related   Images”  box  driven  by   manually  adding  the   relevant  images   –  Using  Solr’s  “More  like   this”  feature  provided   equally  good  results   •  With  a  liPle  tweaking,  and   while  imperfect,  well   worth  the  Ome  savings  
  55. 55. Big  Lessons  •  Drupal  immature  for  mobile  “transacOons”   –  Services  module  provides  framework  but  not  real  integraOon   •  ParOally  why  1.0  is  a  self-­‐contained  App   •  Kyle  Browning’s  Ptools  module  (Drupal  iOS  SDK)  tries  to  improve  on   processing  for  iPhone  over  XML  RPC  or  JSON  servers  •  Mobile  theme  support  also  very  limited   –  Drupal  loads  the  whole  node  not  just  elements  you  need   –  Hopeful  about  jQuery  mobile  module  •  Mobile  is  a  completely  different  design  sensibility   –  Need  to  begin  with  a  ver$cal  320  x  480  screen   –  Thumb  vs.  mouse  or  keyboard  to  control  App   –  LiPle  control  over  context  (sunshine  kills)  •  TesOng  even  more  important  than  on  a  website   –  Less  control  over  environment  leads  to  more  problems  •  Fortunately  an  App  is  soxware  and  updates  easily  
  56. 56. Time  ShuPer  Next  Steps  •  Live  IntegraOon   –  Upload  images  directly  via  login   •  Create  your  own  maps  and  views   •  Download  images  directly  to  refresh  items  live   –  Will  require  some  sort  of  CDN   –  Download  enhancements  from  within  Apps   •  XML-­‐feed  based  plus  images  (in  App  purchases)   –  MulO-­‐lingual  versions   –  iPad  2.0  version   –  Android  version  (due  May  2011)  •  Partnerships  
  57. 57. QuesOons?   omar@islco.com
  58. 58. PUBlisher   •  Kyle  Browning  –  Kyle@workhabit.com   •  Workhabit   •  Publisher  App   •  iOS  and  Android  libraries  Integrate  with   Drupal  WebServices   •  Uses  binary  communicaOon  instead  of  JSON   or  XML  
  59. 59. Appendix  
  60. 60. Background on publisher app 81
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×