Presentation given during Drupalcon London 2011 on creating mobile websites with Drupal.

1. Bridging the Gap Between Desktop and Mobile Publishing with Drupal Drupalcon London 2011Tom Deryckere twom

2. Selling Mobile Support for low end devices Transcoding desktop sites HTML5/CSS3 Closed Solutions Open Standards Highly Customized apps or websites Android People recall WML 2 years iPhone Browser Focus on High End OperaMini Audience already solved Nokia/symbian Android Audience easily impressed Small room WML WTF? Tables Only Speaker Many high end devices Many specialists Big room

7. Wurfl

13. Today 10.49% mobile traffic

14. Slow but steady increase in mobile traffic

15. CPC is higher for mobile

17. We deliver the same content for mobile and desktop

18. Seamless experience

19. Custom Akamai (caching) configfile

20. Device detection using user agent string matching

21. Mobile Theme

22. Template overwrites

23. Targetting high end devices

24. Get rid of default js and css

27. The many faces of mobile Mobile Testing NativeApps vs (responsive) Design Web Apps and Online / Offline Media Queries Usability & Navigation Javascript Frameworks jQuerySencha Touch Sproutcore Web Standards HTML5 & CSS3 Location Based Apps Product Development Cross-Platform development Multi-platform distribution Mobile SEO

28. …get a strategy Before thinking technology …

29. Support for which devices? Cross platform? Free service? App store revenues? Content repurposing? Graphics intensive? Content Driven? Existing knowledge? Current technology? Budget? Linkable? Which functionality Strategy Technology

30. Strategy Technologies Dedicated iPhone App for sale in the App Store iOS / Services Optimize reach by cross Platform Native App Appcellerator/PhoneGap / Services Browser based webapp for high end devices HTML5/CSS3/Drupal Browser based webapp all devices XHTML/Drupal Multi-platform website Responsive/Adaptive design

31. STAGES OF CREATING A MOBILE PROJECT

32. This Session: Drupal as a mobile CMS Theming Layer Services Panels Look at Drupal Core components Views Multi-Sites Caching Context

33. Adoption within the Drupal Community

35. Theme switching

36. Redirecting (+cookies)

37. Mobile Themes

38. Integration with other modules

39. Context

40. Panels

41. Views

43. Architecting for mobile

44. CREATING AN APPLICATION WITH DRUPAL BACKEND

46. Focus on availability of content

47. Consistency of design across platforms is important

48. No specific contextual mobile functionality

49. Value device reach more than designMobile specific Website size

51. Fluid CSS

52. Context ModuleEasy setup Large reuse of existing infrastructure Multi-content distribution No mobile first approach Desktop-focused default themingbehaviorneedsmany changes to fit mobile context Hard tocreate real mobile “experiences” or contextualapps

53. Use Case: Product Company Focus on getting crucial information available on mobile devices - Product information - Contact details - Use cases No specific contextual functionality - User tasks are similar as on desktop Need for very high usability and nice design - Good responsive design must attract customers Mobile specific Website size

55. 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

56. Use Case: Big Hospital Highly-contextual mobile site - Navigation through campus - Make simple appointments through mobile - Shared content store - Strip down some desktop functionality Complex Information Architecture Reuse of content needed - Doctors’ contacts - Divisions - General information Mobile specific Website size

57. 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

58. OVERVIEW ARCHITECTURE App Responsive Separate templates

59. Your Drupal friends (and enemies) Context Panels Theming layer Views MobileTools

60. Context Module

61. Context http://drupal.org/project/context Provide a way to configure parts of your site based on certain parameters. Flexible way to configure blocks on your website E.g.: Configure blocks in your regions based on URL

62. Context: Mobile Context Provided by Mobile Tools

63. Naming conventions Use naming conventions (mobile_<name_desktop_context>) Disable non mobile contexts using ~mobile_* Or Mobile context rule

64. Desktop context

65. Caveat What if the region names are not corresponding? => Small plugin that loads the regions of the mobile theme when the context starts with “mobile”

66. Views

67. Views Often very heavy on the “tables” Requirement to provide a mobile view on the same path as the desktop view e.g. /overview

68. Use multiple displays with same path Configure access restrictions

69. Panels

71. Create variant

72. Mobile selection rule

73. Save panel

74. Create your mobile panel (as usual)

75. Theming override Cleanup CSS / JS Offen struggle with contrib modules Create separate mobile theme

77. Rounded corders

78. Flexible grids

80. Local storage

81. Geo

83. 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

84. Using Mobile Tools to configure mobile theme Tell whento switch theme 1 Select the mobile theme 2 Additional mobile headers 3

86. Set viewportto device width

87. Do notallowzooming<link rel="apple-touch-icon" href="”sites/all/themes/northpoint_mobile/webclip.png>

88. Configure Redirection Choice to have site on two domains or one domain Add URLs 1 Enable Redirection 2 Add Exceptions 3

89. 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

90. Caching Device detection? Caching often happens outside Drupal!

92. In hook_boot() device can be detected

97. Blackberry Simulators

100. Test on task completion

102. Questions?

103. Thank you tom.deryckere@gmail.com http://twitter.com/twom http://www.mobiledrupal.com http://london2011.drupal.org/conference/sessions/bridging-gap-between-desktop-and-mobile-publishing-drupal