Presse
Weitere Themen

Wie Responsive bin ich eigentlich?

von Rainer Giersbach am 27.01.2015

Diese Frage ging mir in den letzten Tagen tatsächlich durch den Kopf als ich mich mit dem Thema „Responsive Webdesign“ beschäftigte.

Für alle die genauso wenig mit diesem Begriff etwas anfangen können wie ich zu Beginn, ein kurzer Abriss: Responsive Webdesign steht für Internetseiten, die ihr Layout an das Anzeigegerät anpassen können. So sieht eine Seite z. B. auf einem Smartphone anders aus als auf dem Desktop-PC. Das Menü steht dann etwa nicht mehr neben- sondern untereinander. Die Idee ist jetzt  nicht wirklich neu, schon früher gab es den Ansatz, Seiten je nach Anzeigebereich unterschiedlich darzustellen. Nur hat man früher mit einer Art „Weiche“ gearbeitet und entsprechend für die Anzeige angepasste Internetseiten präsentiert. Das muss man sich so vorstellen, dass die Internetseite „wusste“ welche Anzeigengröße zur Verfügung steht und dann auf Seite A oder Seite B verzweigte. Hier war es extrem wichtig, um doppelte Arbeit zu verhindern, auf eine Trennung von Layout und Inhalt zu achten. Schließlich mussten zwei Seiten gepflegt werden.

Mit dem Responsive Webdesign und neuen Internettechniken ist es nun möglich auf eine solche Weiche zu verzichten und statt dessen jedem Seitenbaustein mitzuteilen, wie er sich bei welcher Auflösung bzw. bei welchem Anzeigegerät verhalten soll. Um das Beispiel mit dem Menü mal etwas auszuschmücken:

Wir haben also ein schönes Menü, Schriftgröße 24px mit nettem Mouse Over-Effekt und nebeneinander – sieht auf dem Desktop super aus. Dann rufen wir die Seite mal auf dem Smartphone auf. Mit dem Mouse Over geht es schon los… Manche Smartphone können diesen Effekt automatisch „übersetzen“ andere eben nicht – Schade wenn man daran nicht gedacht hat, denn ein Mouse Over gibt es mit dem Finger nicht. Auch die Schrift wird jetzt zum Problem. Die heutigen Smartphones können locker 720 x 1280 Pixel darstellen, das ist ungefähr so viel wie günstige Einsteigernotebooks auch können. Wenn Sie aber mal ihr Smartphone neben das 17-Zoll Notebook halten wird klar: Die Schrift muss einfach größer sein. Größere Schrift, weniger Platz, also das Menü untereinander, evtl. Elemente ausblenden usw. usw.

Der Vorteil von Responsive Webdesign ist der, dass man mit nur einem Layout alle Geräte abfangen kann, um den Vorteil aber zu nutzen muss man im Kopf komplett umdenken. Früher hat man auf einem Papier die einzelnen Seiten aufgemalt, dann die Pixel dazu gedacht und fertig waren die zwei Seiten. Heute malt man immer noch die Seite aufs Papier, gleichzeitig überlegt man sich, wie soll es auf dem Smartphone aussehen. Klingt irgendwie gleich, man muss aber komplett anders denken. Im ersten Beispiel kann man sehr schnell mit absoluten Größenangaben (100 px Hoch, 200 px Breit) und entsprechender Positionierung (300 px vom rechten Rand, 100 px von oben) sein Layout umsetzen. Möchte man seine Seite aber „Responsive“ machen, ist das absolut tabu. Hier gilt: arbeiten Sie mit relativen Größen (z. B. em oder %) und versuchen Sie ihre Seitenbausteine im Fluss zu halten.
 
Ich versuche es mal so zu erklären:
Eine HTML-Seite wird vom Browser immer von oben nach unten gelesen (so wie sie ein Buch lesen würden). Im Fluss halten bedeutet also die Seite liest sich für den Browser so, wie dieser Satz durch sie gelesen würde: „Mary hat ein kleines Lamm, sein Fell war weiß wie Schnee.“ Jedes Wort kommt also nach dem anderen und alles ergibt einen sinnvollen Satz. Jetzt bauen wir den Satz mal mit absoluter Positionierung: „Mary Lamm Schnee, {füge hinter Mary „hat ein kleines“ ein}, {nach Lamm mache ein „,“ und vor Schnee „weiß wie“, dann mach noch vor „weiß wie“ ein „sein Fell war“. Hinter Schnee mache ein „.“}. Jetzt wissen Sie in etwa wie sich mancher Browser beim Lesen einer Internetseite fühlt. Jetzt stellen Sie sich noch vor, sie möchten dass der Satz vernünftig umgebrochen wird… das geht auf zweitem Weg überhaupt nicht mehr, nur noch fest vorgegeben – also …füge ein… dann breche um…, in der ersten Variante geht das schon besser, da der Browser weiß ob „Lamm“ noch in die Zeile passt oder nicht.
 
Wenn Sie an der Stelle jetzt verwirrt sind und langsam die Frage aufkommt „Was will der Giersbach mir eigentlich sagen?“, ist die Antwort eigentlich nur diese: Nutzen Sie die Chancen und die tollen Möglichkeiten, die „Responsive Webdesign“ bieten. Lösen Sie sich gedanklich von dem statischen Webdesign. Am Anfang fällt es schwer, das weiß ich aus eigener Erfahrung, aber schon nach kurzer Zeit fängt man an das Ganze zu verstehen. Statt mit Pixeln arbeitet man dann wie selbstverständlich mit „em“, das Ergebnis: Eine Webseite, die sich dem Anzeigegerät und der Auflösung des Besuchers anpasst und so das beste Erlebnis vermittelt. Der Aufwand ist überschaubar, das Ergebnis überzeugend und schließlich möchten Sie ja auch lieber Sätze wie „Mary hat ein kleines Lamm…“ lesen.

Wie sind Ihre Erfahrungen mit Responsive Webdesign, haben Sie Tipps & Tricks für die Arbeit gefunden? Über Ihre Kommentare würde ich mich freuen.
 

Über den Autor: Dr. Robert Meyer

Dr. Robert Meyer ist seit 2011 Geschäfts­führer der myfactory International GmbH. Seine Leiden­schaft ist die Vermarktung von moderner Cloud ERP-Software über Online-Medien und Partner­vertrieb. Im Mittelpunkt steht bei ihm immer das Wohl von Anwendern, die eine funktional ausgereifte, leicht zu in­di­vidualisierende, intuitiv zu bedienende, auf allen Devices verwendbare, und mobil ein­setzbare Unternehmens-Software benötigen.

Über den Autor: Rainer Giersbach

Rainer Giersbach stieg 2000 in die IT-Branche über eine technische Hotline zu kfm. Unternehmens­software ein, wenig später übernahm er das Produkt Management für diesen Bereich. 2006 stieß er im Zuge einer Recherche zum Thema "Online-Warenwirtschaft" auf myfactory. Das Thema hat ihn nicht mehr losgelassen und seit 2007 gestaltet er als Program Manager die myfactory Software aktiv mit.

Über den Autor: Timo Bärenklau

Nach seinem erfolgreichen Studium mit Abschluss als Bachelor of Engineering im Studiengang „Internationales Technisches Vertriebsmanagement“ stieß Timo Bärenklau als Lead Spezialist zur myfactory International GmbH hinzu. Schon während seines Studiums entdeckte er seine Leidenschaft für Vertriebsoptimierung, besonders im Hinblick auf CRM-Systeme. Auch seine Bachelor-Arbeit hatte CRM als Schwerpunkt. Seit 2012 betreut er maßgeblich die Leadqualifizierung bei myfactory.

Über den Autor: Tobias Korch

Tobias Korch arbeitet seit März 2011 bei myfactory als Software-Entwickler. Seine Schwerpunkte sind die Produktionsplanung (PPS) und das Modul eCommerce. Er ist ein engagierter Verfechter des myfactory-Konzeptes EasyRelease, mit dem Partner updatesichere Zusatzprogramme zur myfactory Business Software erstellen können. Bei Partnern und Partner-Interessenten sind deshalb seine Programmierer-Schulungen und unterstützende Coachings sehr gefragt. Durch seine vieljährigen Praxiserfahrungen mit komplexen Softwareprojekten hat er den Kontakt zum Mittelstand und das Verständnis für Anforderungen und Problemstellungen der Unternehmen und Anwender. Wenn es nichts zu tun gibt (gibt es das eigentlich?) dann kümmert er sich um seine Familie, macht Musik oder interessiert sich für alles was mit IT zu tun hat.

Über den Autor: Jan Schweighart

Jan Schweighart arbeitete nach einem Software Engineering Studium an der Hochschule Konstanz als Software Entwickler für einen Software Dienstleister. Überzeugt von Produkt und Mentalität, kam er Ende 2013 zu myfactory wo er heute schwerpunktmäßig an der Weiterentwicklung von myfactory.CRM arbeitet. Herr Schweighart hatte früher mal Hobbies, Freunde und ein soziales Leben, so wird zumindest berichtet. Heute ist er Vater einer kleinen Tochter ;)

Über den Autor: Dr. Mathias Hamp

Dr. Mathias Hamp ist Kommunikations- experte und entwickelt Kommunikations- strategien zur Vermarktung von Ideen, Waren und Marken. Seit 2015 verantwortet er für myfactory den Bereich Online Marketing.

Über den Autor: David Lauchenauer

David Lauchenauer (*1963) ist seit 1988 als Unternehmer im Bereich Business Software für KMU tätig. Seit 2008 ist er in der Schweiz Geschäftsführer und VR der myfactory Software Schweiz AG und startete 2009 mit myfactory das professionelle Cloud ERP für den Schweizer KMU-Markt, weshalb er über sehr umfassende Praxiserfahrungen mit Cloud-Computing verfügt. Seit 2016 ist David Lauchenauer auch Geschäftsführer und Gesellschafter der myfactory Gruppe.

Über den Autor: Stefan Girschner

Stefan Girschner (* 1967) berichtet als Fachjournalist seit vielen Jahren über Neuheiten und Trends in der IT-Branche. Seine journalistische Laufbahn startete er 1999 bei der Fachzeitschrift e-commerce magazin (ehemals IWT Magazin Verlag), wo er bis 2003 als Redakteur tätig war. Seit 2004 ist er freiberuflich für verschiedene Fachzeitschriften und Online-Portale in den Bereichen Unternehmens-IT, Computing sowie Wirtschaft und Industrie tätig. Darüber hinaus arbeitet er als Lektor und in der Schlussredaktion für Verlage und Agenturen. Von 2010 bis 2016 hatte er die redaktionelle Leitung des Digitalbusiness Magazin (WIN-Verlag) inne. Seit 2016 schreibt er wieder verstärkt für bekannte IT-Fachzeitschriften und -Portale.

Über die Autorin: Sandra Bültermann

Sandra Bültermann (*1975) ist seit 1999 als Technische Redakteurin tätig. Als langjährige Mitarbeiterin bei Fachzeitschriften, Agenturen und Softwareunternehmen verfügt sie über umfassende Kenntnisse in den Bereichen IT, Kommunikation und Contentmanagement. Ihre Kernkompetenz liegt darin, komplexe, technische Themen verständlich und zielgruppenorientiert aufzubereiten.
Zurück zur Übersicht der Blog-Beiträge

Kommentare


$WPPlaceHolder_30337$
Axel Friedrich/25.02.2015, 09:31 Uhr
25.02.2015
„Responsive Webdesign“ stellt eine Herausforderung dar und wie Sie richtig schreiben, beginnt alles im Kopf derer, die für einen Website verantwortlich sind.
So muss derjenige, der den Auftrag erteilt und über die (Mehr-)Kosten entscheidet von „Responsive“ überzeugt sein. Und das wird er eher, wenn er gute Beispiele sieht und selbst einmal eine Seite auf unterschiedlichen Geräten besucht. Und genau hier beginnt meine Frage: Warum nutzt myfactory diese Erkenntnis nicht und geht mit gutem Beispiel voran?
 
Sicher, es ist ein großer Aufwand, eine bestehende Website im Nachhinein „responsive“ zu machen, aber bei einem Neuanfang sollte es eine Selbstverständlichkeit sein. Schade, dass die neue Pad-Oberfläche der myfactory (Service Pack 2313-445) zwar neue Icons hat, gut strukturiert aber alles andere als responsive ist. Der Anwender würde sich freuen, wenn er einen Startbildschirm auf dem iPAD hat, den er nicht unbedingt verschieben muss, um alle Menüpunkte auf einen Blick zu sehen. Wie schreiben Sie so richtig: „ … Nutzen Sie die Chancen und die tollen Möglichkeiten, die „Responsive Webdesign“ bieten. Lösen Sie sich gedanklich von dem statischen Webdesign. Am Anfang fällt es schwer … „ aber es beginnt im eigenen Haus.
 
Mit freundlichen Grüßen und einer (noch) nicht neuen responsive gestalteten Homepage
 
Axel Friedrich
Zurück zur Übersicht der Blog-Beiträge

Weitere Themen

<< < 1 2 3 ... > >>

© myfactory International GmbH 2021. Alle Rechte vorbehalten.

Über uns

myfactory ist die webbasierte Business Software für KMU in den Bereichen ERP, CRM, PPS, MIS, Portal, Shop, Groupware und Finanzbuchhaltung.

Kontakt

Agnes-Pockels-Bogen 1
D-80992 München

21.01.2022
11.05.2021
06.05.2021
04.05.2021
27.04.2021