Oben erneut evangelich.de einblenden

Warum überhaupt eine mobile Webseite?

Immer mehr Menschen gehen unterwegs mobil mit ihrem Handy/Smartphone online.
Normale Webseiten sind auf den relativ kleinen Displays aber nicht wirklich lesbar und haben zu große Bilder, die für unnötigen Traffic verantwortlich sind. Daher ist es sinnvoll für diese wachsende Gruppe mobiler Internetnutzer entsprechende Webseiten bereitzustellen.

Die Webapp/mobile Seite "EvangeLich.de" und die responsive Webseite marienstiftskirche.de sind mobil und plattformunabhägig erreichbar:

Auf mobilen Endgeräten basierend auf iOs, Android, Blackberry, Windows Phone u.a. sind die Seiten gut zu lesen und schnell geladen.

Im Folgenden finden sich alle öffentlichen Recourcen, die für die Erstellung von EvangeLich.de genutzt wurden. Darüber hinaus gibt es 4 Vorlagenpakete, die den Einstieg erleichtern können.


Grundlegendes:

Grundlegende Scriptsprache für moderne Webseitenprogrammierung ist HTML5.
Eine Einführung in HTML5 findet sich bei selfhtml5.org

Zu HTML5 gehört als Stylingmethode CSS3.
Ein Einführungskurs kann hier heruntergeladen werden: CSS.pdf

Als Grundlage für die mobile Webseitengestaltung wurde bei EvangeLich.de das mobile Framework jQuery-mobile genutzt. Alles dazu kann auf der Seite des Frameworks eingesehen und geladen werden: jquerymobile.com

Für interaktive Elemente auf Webseiten wird die relativ einfache Scriptsprache Javascript genutzt. EvangeLich.de nutzt sie u.a. beim Kontaktformular oder auf der Anfahrt-Seite. Eine gute Einführung findet sich bei kostenlose-javascripts.de

Für die Aktualität aller Termine sorgt die Implementierung des cKalenders, den die Gemeinde als Kalendersystem nutzt und der sich gut in Webseiten einbauen lässt. Mehr dazu bei ckalender.de


Download-Recourcen von EvangeLich.de

Vorlagen zum eigenen Erstellen mobiler Webseiten. Erfahrungen mit HTML und CSS sind erforderlich.

Eine Zip-Datei der gesamten mobilen Webseite EvangeLich.de inklusive aller zugehöriger Dateien. Die Bilder jeweils als Platzhalterbilder. (Auf Bilder links klicken und Pakete oben ausprobieren)

Eine relativ einfache mobile Webseite mit 4 Unterseiten ohne jegliches Javascript. Zip-Datei.

Eine mobile Webseite mit 4 Unterseiten auf der ersten Ebene, die jeweils 5 Unterseiten haben. Ebenfalls ohne Javascript und als Zip-Datei

Eine mobile Webseite mit 4 Unterseiten auf der ersten Ebene, die jeweils 5 Unterseiten haben mit Javascripts als Zip-Datei

Für einen Download-Link schicken Sie bitte eine Email an: developer@EvangeLich.de


Programme zur mobilen Webseitengestaltung

Beispiel-Programme für Drag-and-drop-Erstellung mobiler Seiten:

Das professionelle Programm Dreamweaver von Adobe kann auch mobile Seiten erstellen. (nicht selbst getestet)

Für Apple Mac-OsX: Handheld-Designer: handhelddesigner.com

NetObjects Mosaic online-Tool: netobjects.mobi. (nicht selbst getestet)


Mobil-Plugins für bestehende Seiten:

Die einfachste Methode, um zu einer mobilen Webseite zu kommen, sind Plugins für CMS-Seiten.
Diese Methode erfordert nur eine einmalige Installation des Plugins, danach keine Wartung mehr.
Allerdings sind die Ergebnisse nicht mit einer dezidierten mobilen Webseite vergleichbar.

Plugin für Wordpress: wordpress-mobile-pack. Genutzt auf yougentlich.de

Plugin für Joomla: mobilejoomla.com. Genutzt auf marienstiftsgemeinde-lich.de

Plugin für Typo3-Seiten: t3touch.de. (Nicht getestet)

Warum mobile
Webseiten?

Das Interesse an mobiler Internetnutzung ist in den vergangenen Jahren deutlich gestiegen und wird weiter steigen.


Das Interesse als Handy ein internettaugliches Smartphone zu kaufen, hat sich in einem Jahr fast verdoppelt.


Die Internettauglichkeit eines Handys wird immer kaufentscheidender.


Gerade junge Menschen haben ein großes Interesse an mobiler Internetnutzung und erleben es bereits als Selbstverständlichkeit.


Vorteile mobiler Webapps
fürs Surfen mit Smartphone:

- deutlich kleiner (800KB)

- daher weniger Traffic u. schneller

- touchscreenfähig

- an Bildschirmgröße angepasst:
- - Links als große Buttons
- - weniger auf einzelnen Seiten
- - Inhalt auf mehr Seiten verteilt
- - Layout smartphonetypisch

- Nutzung von Handyfunktionen:
- - Telefonanbindung
- - Navigationsanbindung
Vom Handy aus scannen: