Sechs goldene Regeln für modernes Webdesign

Auf allen Geräten zu Hause

Auf allen Geräten zu Hause

Zahllose Studien belegen, dass mittlerweile mehr Websites von Smartphones oder Tablets aus aufgerufen werden als vom Desktop-PC - Tendenz weiterhin steigend. Viele Webseitenbetreiber vergessen jedoch immer noch, was das bedeutet: Dass die Website auch auf dem Smartphone vernünftig läuft - vor wenigen Jahren noch «nice to have» - ist heute absolute Pflicht. Im vergangenen Jahr wurde daher viel über «Responsive Webdesign» gesprochen. Über den HTML-Standard Media Queries wird die Breite des Browserfensters abgefragt und dann der Inhalt des Weblayouts auf die Display-Grösse neu arrangiert.
Responsive Webdesign ist ein Schritt in die richtige Richtung, wird häufig aber nur zur Hälfte umgesetzt. Vom reinen Umschalten auf drei Darstellungsgrössen (Desktop, Tablet, Smartphone) ist noch keine Website mobil geworden. Der Inhalt wirkt gequetscht, ungünstig angeordnet, Bedienelemente zu klein, Texte schlecht lesbar, die Ladezeiten sind zu lange und selten wird Gestensteuerung unterstützt. Es geht darum, nicht das gesamte Layout einfach nur auf einen kleineren Bildschirm zu quetschen. Die Inhalte sollten für die Unterwegsnutzung angepasst werden - indem beispielsweise andere, kleinere Bilder ausgeliefert werden. In manchen Fällen kann auch eine App die bessere mobile Webanwendung sein, gerade wenn viel Applikationslogik und Multimedia im Spiel ist.
Wichtig ist, sich über die mobile Nutzung seiner Website ausführlich Gedanken zu machen, den besten Weg für die technische Umsetzung zu finden und die Website/App auch zu testen. Richtig umgesetzt, kann auch Responsive Webdesign eine einheitliche gute Bedienung über Bildschirmgrössen hinweg bieten - zum Beispiel mit flüssigen Layouts, die sich flexibel anpassen, skalierenden Grafiken und Bildern. Tipp: Das E-Book «Responsive Webdesign» von Ethan Marcotte (für 9 US-Dollar zu haben) zeigt, wie Sie diesen einen Schritt weiter gehen.

Inhalt, Inhalt, Inhalt

Heute wird viel über «Mobile first» diskutiert. Bei dieser Webdesignphilosophie geht es darum, dass die mobile Website das Wichtigste und damit der Ausgangspunkt des Webauftritts sein sollte. Kein schlechter Ansatz in diesen Zeiten - dennoch etwas kurz gegriffen, weil es wieder fast ausschliesslich um die technische Umsetzung geht. Gerne wird vergessen, was der Nutzer möchte: Inhalte! Der Ansatz sollte also eher «Content first» lauten. Der User will und sucht Inhalte auf Ihrer Website. Heisst: Der Inhalt sollte bei allen Überlegungen an erster Stelle stehen und entsprechend im Layout die oberste Priorität haben. Beispiel: Statt sich zu fragen, wo noch eine weitere Seitenleiste hin soll, ist es besser zu fragen, ob man überhaupt eine Seitenleiste braucht, die vom Inhalt ablenkt.
«Wenn wir das Layout gestalten, bevor wir Inhalte haben, gestalten wir die Verpackung, bevor wir wissen, was drin sein wird. Wenn die Inhalte dann nicht in die Verpackung passen, gibt es nur zwei Möglichkeiten: Neu anfangen oder den Inhalt in die Verpackung quetschen. Beides wollen wir nicht», schreibt Webdesigner Rian van der Merwe in einem Blog-Eintrag zu «Content First Webdesign» und betont dabei, dass es oft auch wichtig ist, den Kunden zu erklären, dass sie erst über Inhalte, dann über Grafiken nachdenken müssen.
Lesen Sie auf der nächsten Seite: Aufgeräumt bleiben



Kommentare
Avatar
Pagnol
15.02.2014
Dagegen kann man ja was tun :o.

Avatar
Marcel Hauri
17.02.2014
Finanzierung Hallo Grünzeug Eigentlich eine Website für PC-Tipps - aber nun ist es eine Werbeplattform mit ein wenig Tipps. glaube mir - wenn wir nicht müssten, würden wir das auch nicht tun. Aber als aufmerksamer Beobachter des Weltgeschehens ist auch sicher dir nicht entgangen, dass die Erträge im Medienbusiness nicht in den Himmel wachsen. Auch wir müssen um jeden Franken kämpfen... Beste Grüsse Marcel Hauri Redaktionsleitung PCtipp.ch

Avatar
Tman64
17.02.2014
Kritikpunkt und Wunsch zur PCtipp Webseite: Textansicht im neuen PCtipp Gewand Passend zum Thema Webseit Gestaltung! Leider misseich seit dem neuen PCtipp Auftritt die Lesbarkeit der textlichen Inhalte. Oft quetsche ich meinen Browser bis zur Textbreite, sodass ich mich nur noch auf den Text konzentrieren kann und nicht durch bewegte Bilder oder sonstige bunte Werbung abgelenkt werde. Dies ist nun nicht mehr möglich, resp. Unkomfortabel geworden, da ich den Textinhalt mit dem unteren Steuerbalken des Browser, den eben genannten Textinhalt nach links schieben muss… und dass muss bei jedem Seitenwechsel eines mehrseitigen Beitrags wiederholen werden. Ich kann nicht nachvollziehen das solch ein <<faux pas>>, von den Machern nicht gesehen ober miteinbezogen wurde! Sollte, wenn überhaupt wieder eine Anpassung in Planung sein, so Bitte ich Euch dies einzubeziehen. Schiebt die Werbung und andere Verlinkungen wieder auf die rechte Seite der Webseite, damit wieder eine lesbare Nutzbarkeit mit Komfort besteht. Ansonsten gibt es nichts zu meckern, da sich die Webseite gut bedienen lässt und an Attraktivität gewonnen hat. Zur Veranschaulichung habe ich ein Screenshot beigefügt.

Avatar
Pagnol
17.02.2014
Darauf habe ich schon vor 8 Monaten hingewiesen. Geschehen ist leider nichts.

Avatar
Tman64
17.02.2014
Darauf habe ich schon vor 8 Monaten hingewiesen. Geschehen ist leider nichts. Hallo Pagnol Wenn Du die die Ränder in der Vollansicht meinst, hat dies mit der fixen Ansichtbreite der Webseite zu tun, sprich mit der vordefinierten Auflösung. Das von mir gemeinte hat mit der Textpositionierung der Beiträge zu tun. Würde der Text in der linken Spalte angezeigt, so wäre auch das von mir genannten Problem behoben, (ohne bunte Welt der Werbung und anderes). Hierzu noch ein Screenshot das, dass von Dir evtl gemeinte Problem aufzeigt, (weisse Ränder beidseits aufgrund der fixen Seitenauflösung).?! PS: früher wurden die Seiten mit 800 x 600 Angezeigt (Standard), doch mit der besseren Auflösung der PC-Grafik wurden die meist Seiten auf 1024 x und höher angepasst und andere (gute) Seiten, passen sich der Bildschirmauflösung an.

Avatar
Pagnol
17.02.2014
Ich bin nun nicht sicher, ob mein Problem HTML-mässig mit deinem zusammnhängt. Meine Beobachtung: Wenn man mit Simple Adblock die rechte Werbespalte unterdrückt, rutscht der Artikeltext nach rechts, anstatt dass er bleibt, wo er ist. Ich habe draufhin eine zeitlang den PCTipp in die Whitelist des Werbeblockers eingetragen. Als es dann aber rechts wieder nervös zu blinken und zu zappeln begann, flog der PCTipp wieder aus der Whitelist raus (äxgüsi, aber die Werber haben es ja in der Hand ...).

Avatar
Tman64
17.02.2014
Jetzt erst sehe ich das von dir angesprochene Problem. Ich habe bei mir AdBlockPlus Installiert und in Betrieb. Die von dir genannte klaffende Lücke konnte ich erst Feststellen als ABP abgeschaltet wurde... dies ist garantiert ein HTML resp. Seitenaufbau Fehler! Aber einmal APB wieder eingeschalten, ist alles wieder wunderbar und ohne klaffende Lücke. Also genau das Gegenteilige, wie das von Dir Beschrieben. Da muss der Macher je nach dem, ganz TIEF in die Trickkiste Greifen, um diesen Fehler auszumerzen! Falls er von der Seite die Aufbauschritte gesichert hat, kann er diese auch wieder Rückgängig machen, aber eben wenn… Spreche aus Erfahrung.

Avatar
Pagnol
17.02.2014
Nun, so kompliziert ist das sicher nicht. Die Artikel stecken in einem DIV-Container: <div id="content">. Nun müsste man diesem DIV-Container in der entsprechenden CSS-Datei nur noch die passende horizontale Anordnung zuordnen.

Avatar
Tman64
17.02.2014
Nun, so kompliziert ist das sicher nicht. Die Artikel stecken in einem DIV-Container: <div id="content">. Nun müsste man diesem DIV-Container in der entsprechenden CSS-Datei nur noch die passende horizontale Anordnung zuordnen. Jop... das wäre die günstigste Variante, sofern keine aufwändige Verschachtelung gegeben ist, sollte es ein leichtes sein.