Drupal 2 go. Sandra Schröpfer DrupalCity Berlin September 2011

Transkript

1 Drupal 2 go Sandra Schröpfer DrupalCity Berlin September 2011

2 Vorwort: Warum Geld und Zeit investieren ins mobile web?

3 Jede Sekunde werden weltweit:

4 Jede Sekunde werden weltweit: 4 Menschen geboren

5 Jede Sekunde werden weltweit: 4 Menschen geboren 6 Smartphones verkauft

6 Jede Sekunde werden weltweit: 4 Menschen geboren 6 Smartphones verkauft 9 PCs verkauft (mit Netbooks und Laptops)

7 Jede Sekunde werden weltweit: 4 Menschen geboren 6 Smartphones verkauft 9 PCs verkauft (mit Netbooks und Laptops) 36 Handys verkauft

8 Es wird erwartet, dass spätestens 2013 mehr Smartphones als Computer verkauft werden.

9 87,2 Millionen Mobiltelefone wurden im 1. Halbjahr 2011 allein in Westeuropa verkauft.

10 Rund ein drittel der Geräte Werden aktuell auch zum Surfen im Netz genutzt.

11 Facebook beispielsweise generiert ein viertel inzwischen der Zugriffe auf Ihre Webseite über Mobilgeräte. Dies entspricht 100 Millionen Nutzern weltweit.

12 Gründe für den Erfolg

13 Gründe für den Erfolg Große Bildschirme und Touchscreens, welche Maus und Tastatur ersetzen, vereinfachen die Bedienung

14 Gründe für den Erfolg Große Bildschirme und Touchscreens, welche Maus und Tastatur ersetzen, vereinfachen die Bedienung Vollwertige Internetbrowser machen das ganze Web nutzbar

15 Gründe für den Erfolg Große Bildschirme und Touchscreens, welche Maus und Tastatur ersetzen, vereinfachen die Bedienung Vollwertige Internetbrowser machen das ganze Web nutzbar UMTS und Flatrates mit sinkenden Preisen machen die Nutzung bezahlbar und schnell

16 Gründe für den Erfolg Große Bildschirme und Touchscreens, welche Maus und Tastatur ersetzen, vereinfachen die Bedienung Vollwertige Internetbrowser machen das ganze Web nutzbar UMTS und Flatrates mit sinkenden Preisen machen die Nutzung bezahlbar und schnell Apps und konstruierte Mobilseiten steigern das Nutzungserlebnis (Darstellung, Bedienung,...)

17 Wegweiser durch den Technik-Dschungel

18 Bildschirmbreiten

19 Bildschirmbreiten In Deutschland haben über 40% der Mobilgeräte eine Bildschirmbreite von 240px

20 Bildschirmbreiten Weitere 30% habe eine Bildschirmbreite von 176 px

21 Bildschirmbreiten Europaweit sind die drei am meisten verbreiteten 240px, 176 px sowie 128px. Formate

22 Vorinstallierte Mobile Browser

23 Vorinstallierte mobile Browser Android Browser Blackberry Browser Blazer Firefox for Mobile Internet Explorer Mobile Iris Browser Myriad Browser Nokia Series 40 Browser Nokia Series 60 Browser Obligo Browser Opera Mobile Polaris Browser Safari Skyfire Mobile Browser uzard Web WebOS Browser... Webkit Webkit Netfont Gecko Trident Webkit Webkit Webkit Webkit Webkit Webkit Webkit Webkit Webkit MoRDAC Webkit

24 Vorinstallierte mobile Browser 18 Browser Weitere können aktuell installiert werden.

25 Vorinstallierte mobile Browser Für den europäischen Raum erreicht man die meisten Nutzer durch Optimierung auf einen Webkit Browser (z.b. Android), den Internet Explorer (Trident) sowie Firefox (Gecko)

26 Vorinstallierte mobile Browser Für den Amerikanischen Raum kommen zusätzlich der Blackberry Browser sowie Blazer (Palm) dazu.

27 Vorinstallierte mobile Browser Asien wird zusätzlich vom Polaris Browser sowie vom uzard Web Browser dominiert.

28 Die Umsetzung

29 Ansätze

30 Ansätze Theme Switching: spezielle Module erkennen das verwendete Anzeigegerät und wechseln dementsprechend das Theme

31 Ansätze Theme Switching: spezielle Module erkennen das verwendete Anzeigegerät und wechseln dementsprechend das Theme CSS-Switching: im gleichen Theme wird eine separate CSS-Datei angelegt für Mobile Anzeigegeräte (Beispiel: zen.info)

32 Ansätze Theme Switching: spezielle Module erkennen das verwendete Anzeigegerät und wechseln dementsprechend das Theme CSS-Switching: im gleichen Theme wird eine separate CSS-Datei angelegt für Mobile Anzeigegeräte (Beispiel: zen.info) Redirection: Nutzer mit mobilem Anzeigegerät werden auf eine separate URL geleitet

33 Erweiterungen

34 Erweiterungen Mobile Payment: Module erlauben es, Micropayment bzw. Bezahlung über beispielsweise SMS oder Anruf einzubinden

35 Erweiterungen Mobile Payment: Module erlauben es, Micropayment bzw. Bezahlung über beispielsweise SMS oder Anruf einzubinden Mobile Publishing: Module erleichtern das Erstellen von neuen Einträgen über Mobilgeräte (z.b. Mobile Media Blog)

36 Erweiterungen Mobile Payment: Module erlauben es, Micropayment bzw. Bezahlung über beispielsweise SMS oder Anruf einzubinden Mobile Publishing: Module erleichtern das Erstellen von neuen Einträgen über Mobilgeräte (z.b. Mobile Media Blog) SMS-Connections: Module verbinden SMSNachrichten mit Aktionen einer Drupal-Seite

37 Drupal 2 go Wege der Umsetzung

38 Multisites

39 Multisites Multisite-Installation mit Änderungen an der settings.php -Datei

40 Multisites Multisite-Installation mit Änderungen an der settings.php -Datei Gleiche Datenbank wird angesteuert

41 Multisites Multisite-Installation mit Änderungen an der settings.php -Datei Gleiche Datenbank wird angesteuert Anderes Drupal-Theme wird angesprochen

42 Multisites Multisite-Installation mit Änderungen an der settings.php -Datei Gleiche Datenbank wird angesteuert Anderes Drupal-Theme wird angesprochen Trennung der Seiten via URL (z.b. drupal.org und drupal.mobile) oder Block mit Umschalter

43 Modul: Mobile Plugin

44 Modul: Mobile Plugin Bringt das komplette Wohlfühlpaket mit allen interessanten und wichtigen Funktionen sowie weiteren nice-to-have -Features mit

45 Modul: Mobile Plugin Bringt das komplette Wohlfühlpaket mit allen interessanten und wichtigen Funktionen sowie weiteren nice-to-have -Features mit Unter anderem: Device Detection, YouTubeReplacements, automatisierte Bildgrößenreduzierung, Silbentrennung für längere Worte, verschiedene URL-PfadOptionen,

46 Modul: Mobile Plugin Bringt das komplette Wohlfühlpaket mit allen interessanten und wichtigen Funktionen sowie weiteren nice-to-have -Features mit Unter anderem: Device Detection, YouTubeReplacements, automatisierte Bildgrößenreduzierung, Silbentrennung für längere Worte, verschiedene URL-PfadOptionen,

47 Frontend/Themes

48 Anforderungen und Grundlagen

49 Anforderungen und Grundlagen Alle vorgestellten Optionen laufen ausschließlich auf Drupal 6

50 Anforderungen und Grundlagen Alle vorgestellten Optionen laufen ausschließlich auf Drupal 6 Es werden keine speziellen Anforderungen an Server oder Technik gestellt

51 Anforderungen und Grundlagen Alle vorgestellten Optionen laufen ausschließlich auf Drupal 6 Es werden keine speziellen Anforderungen an Server oder Technik gestellt Es ist kein weiteres Fachwissen nötig als eh zur Erstellung einer Drupal-Webseite gebraucht wird

52 Anforderungen und Grundlagen Alle vorgestellten Optionen laufen ausschließlich auf Drupal 6 Es werden keine speziellen Anforderungen an Server oder Technik gestellt Es ist kein weiteres Fachwissen nötig als eh zur Erstellung einer Drupal-Webseite gebraucht wird Alle Erweiterungen sind nur gering verwendet, da oft die normalen Webseiten ausreichen

53 Theme: mobile

54 mobile Theme im Zen-Style

55 mobile Theme im Zen-Style Alle Regionen sind untereinander gesetzt (page.tpl.php)

56 mobile Theme im Zen-Style Alle Regionen sind untereinander gesetzt (page.tpl.php) Einzig drei verwendete Dateien im standard

57 mobile Theme im Zen-Style Alle Regionen sind untereinander gesetzt (page.tpl.php) Einzig drei verwendete Dateien im standard Die Drupal7-Version soll separate TabletTemplates sowie BildResizing mitbringen

58 Theme:.mobi

59 .mobi Baut auf das Modul Mobi Loader auf (bisher nur in devversion vorhanden)

60 .mobi Baut auf das Modul Mobi Loader auf (bisher nur in devversion vorhanden) URL.mobi leitet auf hinterlegtes mobitheme

61 .mobi Baut auf das Modul Mobi Loader auf (bisher nur in devversion vorhanden) URL.mobi leitet auf hinterlegtes mobitheme Klares Theme mit Änderungsoption für Hintergrundfarben der Regionen

62 Theme: mobile Garland

63 Theme: mobile Garland Wesentlich umfangreicher ausgestattet mit vielfältigen Template-Dateien und Anbindung an das ColorModul

64 Theme: mobile Garland Wesentlich umfangreicher ausgestattet mit vielfältigen Template-Dateien und Anbindung an das ColorModul Bringt schon Styles mit (inclusive rtl), sodass das Theme beim Einschalten schon fertig aussieht.

65 Theme: mobile Garland Wesentlich umfangreicher ausgestattet mit vielfältigen Template-Dateien und Anbindung an das ColorModul Bringt schon Styles mit (inclusive rtl), sodass das Theme beim Einschalten schon fertig aussieht. Arbeitet zusammen mit dem Modul Mobile Plugin

66 Theme: mobile Garland Wesentlich umfangreicher ausgestattet mit vielfältigen Template-Dateien und Anbindung an das ColorModul Bringt schon Styles mit (inclusive rtl), sodass das Theme beim Einschalten schon fertig aussieht. Arbeitet zusammen mit dem Modul Mobile Plugin Seit zwei Jahren ungepflegt und keine Drupal7Unterstützung in Anbahnung

67 Theme: Nokia mobile Theme

68 Theme: Nokia mobile Theme Ähnlich dem Garland Mobile Theme

69 Theme: Nokia mobile Theme Ähnlich dem Garland Mobile Theme Ausschließlich gepflegte Drupal6-Version

70 Theme: Nokia mobile Theme Ähnlich dem Garland Mobile Theme Ausschließlich gepflegte Drupal6-Version Meistverwendet da am umfangreichsten

71 Theme: Nokia mobile Theme Ähnlich dem Garland Mobile Theme Ausschließlich gepflegte Drupal6-Version Meistverwendet da am umfangreichsten Anbindung an Mobile Plugin

72 Theme: Nokia mobile Theme Ähnlich dem Garland Mobile Theme Ausschließlich gepflegte Drupal6-Version Meistverwendet da am umfangreichsten Anbindung an Mobile Plugin Funktionen bis hin zu Touch-Unterstützung

73 Drupal Mobile Lösungen zum Ausprobieren: drupalcity.redsight.de User: drupalcity Passwort: 2011

74 Quellenverzeichnis drupal.org statistika.de seo-strategie.de The facebook blog apple.com Wikipedia mobile-seo.de mobile-netz.de Statistisches Bundesamt Deutschland StatCounter HorizonStats