Die mobile digitale Bibliothek Ein Überblick zu responsive web design für mobile Endgeräte.

1. MarcLettau-Poelchen,intrandaGmbH07.10.2015
Die mobile digitale Bibliothek
Ein Überblick zu responsive web design für mobile Endgeräte.
1

2. MarcLettau-Poelchen,intrandaGmbH
Wo soll es hingehen?
Der Grund:
• Warum mobile Internetseiten immer wichtiger werden.
2
07.10.2015
Lösungen:
• Möglichkeiten eine Internetseite für mobile Endgeräte zu
gestalten.
Praxis:
• Wie verhält sich eine mobile Internetseite.
Die Zukunft:
• Was tun wir für die Mobilität des intranda viewers?

3. MarcLettau-Poelchen,intrandaGmbH
Warum mobile Internetseiten immer wichtiger werden.
Der Grund
3
07.10.2015

4. MarcLettau-Poelchen,intrandaGmbH
4
07.10.2015
Im Jahr 2014 nutzten 54% der Deutschen das Internet mobil.
Im gleichen Jahr nutzten 69% der regelmäßigen Internetnutzer
mobile Netze für die Internetnutzung.
Quelle: http://de.statista.com/statistik/daten/studie/197383/umfrage/mobile-internetnutzung-ueber-handy-in-deutschland/

5. MarcLettau-Poelchen,intrandaGmbH
Historie
• Mit Einführung von UMTS nahm das mobile Internet 2008
Fahrt auf und es mussten neue Wege gefunden werden, die
Inhalte einer Seite auch mobil für den Endnutzer verfügbar zu
machen.
• Viele setzen dabei auf eine mobile Version ihrer Seite.
5
07.10.2015

6. MarcLettau-Poelchen,intrandaGmbH
Entwicklung mobiler Bandbreiten
6
07.10.2015
1 kbit/s
10 kbit/s
100 kbit/s
1000 kbit/s
10000 kbit/s
100000 kbit/s
GSM EDGE UMTS HSDPA LTE LTE-Advanced
100.000 kbit/s
25.000 kbit/s
14.400 kbit/s
384 kbit/s
220 kbit/s
9,6 kbit/s
1990 2006 2008 2011 2012 2014
In den vergangenen 3 Jahren ist die Bandbreite für mobiles
Internet um das Siebenfache gewachsen.

7. MarcLettau-Poelchen,intrandaGmbH
Historie
• Mit Einführung von UMTS nahm das mobile Internet 2008
Fahrt auf und es mussten neue Wege gefunden werden, die
eigenen Inhalte auch mobil für den Endnutzer verfügbar zu
machen.
• Viele setzen dabei auf eine mobile Version ihrer Seite.
• Der Begriff “responsive web design” tauchte im Mai 2010 das
erste Mal auf und wurde vom Webdesigner Ethan Marcotte
geprägt, der einen Blogartikel darüber schrieb
(http://alistapart.com/article/responsive-web-design).
• Marcotte beschreibt in seinem Artikel Techniken die es
ermöglichen eine Internetseite flexibel in ihren Dimensionen
und Inhalten zu gestalten, damit sie auch auf mobilen
Endgeräten funktioniert.
7
07.10.2015

8. MarcLettau-Poelchen,intrandaGmbH
Abdeckung mobiles Breitbandinternet
8
07.10.2015
Seit 2010 bauen die großen Mobilfunkanbieter ihr mobiles
Breitbandinternet (LTE) massiv aus.
Quelle: http://www.ltemap.de Stand 07.09.2015

9. MarcLettau-Poelchen,intrandaGmbH
9
07.10.2015
Quelle: http://googlewebmastercentral.blogspot.de/2015/04/rolling-out-mobile-friendly-update.html

10. MarcLettau-Poelchen,intrandaGmbH
10
07.10.2015
Suchergebnisse auf mobilen Endgeräten
Suchergebnisse in allen Sprachen und weltweit
Gilt für einzelne Seiten, nicht für den gesamten
Internetauftritt
Am 21. April 2015 hat Google seinen Suchalgorithmus
umgestellt. Dadurch werden Seiten, die für mobile Endgeräte
optimiert sind in den Suchtreffern bevorzugt.
Das gilt für:

11. MarcLettau-Poelchen,intrandaGmbH
Möglichkeiten eine Internetseite für mobile Endgeräte zu
gestalten.
Lösungen
11
07.10.2015

12. MarcLettau-Poelchen,intrandaGmbH
Wie mache ich meinen Internetauftritt
mobilfreundlich?
Variante 1
12
07.10.2015
Der Auftritt wird in einer mobilen- und einer Desktop-Variante
entwickelt
Vorteil:
• 100%ige Optimierung für beide Welten
Nachteil:
• Sehr hoher Pflege- und Administrationsaufwand

13. MarcLettau-Poelchen,intrandaGmbH
13
07.10.2015
m.spiegel.de spiegel.de
Ansicht einer mobilen Version einer Internetseite und
einer WWW-Version.

14. MarcLettau-Poelchen,intrandaGmbH
Wie mache ich meinen Internetauftritt
mobilfreundlich?
Variante 2
14
07.10.2015
Der Auftritt passt sich den Endgeräten an, mit denen er
aufgerufen wird (responsive web design).
Vorteil:
• 100%ige Optimierung für beide Welten
• Es muss nur noch ein Auftritt inhaltlich gepflegt werden
Nachteil:
• Die Entwicklung hat den gleichen zeitlichen Aufwand wie zwei
Auftritte zu entwerfen.

15. MarcLettau-Poelchen,intrandaGmbH
Wie verhält sich eine mobile Internetseite.
Praxis
15
07.10.2015

16. MarcLettau-Poelchen,intrandaGmbH
16
07.10.2015
Der intranda viewer in der Desktop-Ansicht
Quelle: http://orka.bibliothek.uni-kassel.de/viewer/

17. MarcLettau-Poelchen,intrandaGmbH
17
07.10.2015
Der intranda viewer in der Tablet-Ansicht
Quelle: http://orka.bibliothek.uni-kassel.de/viewer/

18. MarcLettau-Poelchen,intrandaGmbH
18
07.10.2015
Der intranda viewer in der Smartphone-Ansicht
Quelle: http://orka.bibliothek.uni-kassel.de/viewer/

19. MarcLettau-Poelchen,intrandaGmbH
Was tun wir für die Mobilität des intranda viewers?
Die Zukunft
19
07.10.2015

20. MarcLettau-Poelchen,intrandaGmbH
Die mobile Zukunft des
intranda viewers
• Das Kernstück des intranda viewers, die Bildanzeige, wird
komplett restrukturiert und für den mobilen Gebrauch
angepasst.
• Komponenten werden überarbeitet und bedienbar für mobile
Geräte gemacht.
• Aktuelle Frameworks zur Unterstützung von mobilen
Internetseiten werden in den intranda viewer integriert.
• Der Weg führt weg von starren Designs, hin zu flexiblen
Layouts.
• In den kommenden Monaten wird ein neues Standard-Theme
entstehen, welches alle Kriterien für mobile Nutzung erfüllt.
20
07.10.2015

21. MarcLettau-Poelchen,intrandaGmbH
21
07.10.2015
Sie müssen sich nicht verbiegen, seien Sie nur ein wenig flexibel.