Logo Logo
Logo
Bild

Webseiten für mobile Geräte im responsive Design


Die meisten Hausverwaltungen, Wohnungsbau Firmen und Wohnungsgenossenschaften sind mit ihren eigenen Webseiten online. Diese sind jedoch meist auf die Nutzung an einem PC mit Bildschirm ausgerichtet. Seit Jahren wächst die Zahl der Menschen, die Webseiten mit ihren Smartphones aufrufen.
Selbst konservative Umfragen zeigen das Ende 2015 rund 50% der Internet-Seiten mobil genutzt werden.
Hier ist enormer Handlungsbedarf, denn die herkömmlichen Webseiten sind auf Smartphones kaum zu lesen. Erschwerend hinzu kommt, das Google in seiner Suche die nicht mobil nutzbaren Webseiten auch nicht mehr auf den vorderen Seiten auflistet.
Wenn Sie mit Ihren Seiten auch die Generation der "smombies"*1  erreichen wollen, gibt es einiges zu tun.
 
Welche Lösungsansätze sind möglich:

    1. eine extra Variante der Webseiten für mobile Nutzung herstellen
Dies ist mit hohem Pflegeaufwand verbunden. Zudem müssen für verschiedene Endgeräte unterschiedliche Varianten erstellt werden. Beispiele  sind mobil.spiegel.de oder  welt.de/mobil

    2. Webseiten mit der "responsive" Technik erstellen
Der Begriff "responsive" bedeutet, das sich die Inhalte und das Layout anpassen. Dabei erkennt der Browser die Größe des Bildschirms beziehungsweise des Gerätes. Ob PC mit 26 Zoll oder Smartphone mit 3 Zoll. Die Darstellung wird immer optimal an die Größe angepasst.

Wie geht das?

Moderner Browser (Max 5 Jahre alt) können die Inhalte, Texte, Tabellen und Bilder mit unterschiedlichem Layout kombinieren. Dadurch wird etwa ein Bild verkleinert, Texte werden umgebrochen und vergrößert  und Tabellen verschlankt. Auch wenn das Smartphone oder das Tablet gedreht wird, passt sich die Darstellung an. Man benötigt also nur eine Ausgabe der Seiten die mit dem passenden, sich selbs verändernden Layout kombiniert wird.
(Versuchen Sie es unter www.bdcon.de oder  www.pro-csm.de ) Einfach mal den Browser verkleinern.

Umsetzung

1. die Größen
Wenn man zum Beispiel ein Smartphone betrachtet, so schwankt die Größe von etwa 400 Pixel bis ca. 1000 Pixel Breite. Bei ganz neuen Geräten und Tablets wird schon das HD Format mit 1920 Pixel erreicht.
Um eine vernünftige Responsive Darstellung zu erhalten, unterscheidet man in verschiedene Breiten:
- bis maximal 400 Pixel für alte Smartphones
- bis maximal 800 Pixel für aktuelle Smartphones
- und größer als 800 Pixel
Es lassen sich ohne weiteres noch weitergehende Differenzierungen erstellen. Betrachtet man die in Deutschland in den letzten Jahren verkaufen Geräte und ihre Bildschirmgrößen, so ist dies ein guter Kompromiss.

2. die Inhalte
- Bilder müssen in einem Block angezeigt werden damit sie prozentual skaliert werden.
- Tabellen können in ihrer Breite verändert werden
- Formulare können die Beschriftung ändern. Die Feldbeschreibung verschiebt sich dann z.B. von
  der linken Seite des Eingabefeld in eine Position darüber
- Menüs können sich in ihrer Breite ändern oder ab einer bestimmten Breite zu einem sogenannten Hamburger Menü werden. (Siehe info.koeln)
- Die Schriftgröße lässt sich vergrößern oder verkleinern
- Links die auf dem PC mit der Maus angeklickt werden, müssen auf dem mobilen Gerät mit dem Finger bedient werden und dementsprechend größer ausfallen.

Wie geht es weiter
Wenn Sie sich in der obigen Situation wiederfinden sollte sie mit dem Produzenten ihrer bisherigen Webseiten sprechen. Ist das nötige Knowhow vorhanden? Dann machen Sie zuerst auf Papier mit einer Schablone  einen Entwurf  für die bestehenden Seiten. Damit kann man z.B. für die oben erwähnten 3 Größen Kombinationen das Layout planen.
Es gibt eine Reihe von bekannten Werkzeugen wie "Bootstrap" auf deren Basis sich die Umsetzung vereinfachen lässt. Google stellte mit seinen Webmaster Tools eine Möglichkeit zur Prüfung der bestehenden (und möglichen neuen) Seiten zur Verfügung.
Wenn Sie die Seiten so aufbereitet haben, können Sie auch leicht eine WebApp daraus machen.

*1  smombies = Jugendwort des Jahres 2015, Kombination aus "Smartphone" und "Zombies" 


Weiterführende Informationen:

Merkmale:

responsive , mobile , webseiten , bootstrap , mediaquery , Hausverwaltung , Wohnungsbau



Aktuelle Beiträge
ARCHIV
2014  |  2015  |  2016  |  2017  |  2018



Teilen    Auf Titter Teilen

TagCloud, wichtige Begriffe bei BDCON

Apps Bmecat BigData Cloud Datenbank Datenschutz Digitalisierung e-Commerce e-Business e-Procurement Geschäftsprozesse Hausverwaltung Immobilienwirtschaft Immobilienportal it-Compliance Jahresende Köln Mobile OpenImmo ProCSM Smarthome Social Media Software Support Paket Wohnungswirtschaft Twitter Facebook XML