Responsive Design und Bildschirmauflösungen

Das Responsive Design ist mittlerweile ein fester Bestandteil der Webseiten geworden, sodass nicht nur Personen am Computer die Webseite gut lesbar betrachten können, sondern zudem auch Menschen mit einem Tablet, Laptop oder dem Smartphone problemlos auf der Homepage agieren und navigieren können. Vor etlichen Jahren, in denen die Smartphones, Tablets und anderen mobilen Geräte noch nicht so fortgeschritten waren, wie sie heute sind, lag der Fokus eher auf der Desktopansicht, sodass unter anderem Webseiten mit Tabellen Gerüsten erstellt wurden, welche logischerweise heutzutage nicht mehr gang und gäbe sind.

Um die Webseiten für viele Endgeräte optimieren zu können, richten sich die meisten Frontend Entwickler nach verschiedenen Bildschirmauflösungen und passen dadurch, dass Layout der Webseite an, wodurch alle Besucher problemlos auf der Webseite navigieren können. Auch ist es wichtig ein passendes webdesign für Webshops und ähnliche Webseiten von professionellen Agenturen zu selektieren. Gerade der Bereich der Smartphone User ist mittlerweile expandiert, sodass auf vielen Webseiten bereits mehr als 80 % des traffics mit dem Handy zustande kommt. Dies ist im Vergleich zu Desktopansichten ein großer Sprung, welcher bedeutet, dass nur noch wenige Personen vor dem Computer sitzen und im Internet surfen.

Heutzutage kann vieles über Tablets, Laptops mit Touch Display und logischerweise auch über die Smartphones erledigt werden, denn die meisten Webseiten haben ein gut funktionierendes und gut strukturiertes Responsive Design, mit dem sich viele zurechtfinden. Mittlerweile weiß jeder, dass die 3 Striche (meistens rechts oder links oben) ein Menü bedeuten, welches sich oft über Javascript oder sogar über CSS öffnen lässt.

HTML Tutorials – Responsive Webdesign

Weil sich immer noch sehr viele Webdesigner und Frontend Entwickler mit dem Responsive Design schwertun, möchten wir nun einige Hilfestellungen leisten und ein nützliches Tutorial bereitstellen, aus dem sich fleißig bedient werden darf. Beachtet werden muss unter anderem einiges, denn ein gut strukturiertes Responsive Design sollte sich auch grafisch für alle Endgeräte anpassen können. Dies bedeutet, dass verschiedene Grafiken beispielshalber für Smartphones neu erstellt werden müssen, denn die Auflösung auf diesen Geräten ist wesentlich kleiner als auf einem Desktop-PC. Optional dient eine Weiterleitung bzw. eine extra Subdomain für die mobilen Endgeräte. Sehr oft verwenden viele Webseiten anstatt www. das klassische m. und nachfolgend der Domainname.

Zuzüglich der Layoutkonzepte sollte auch die Klickbarkeit der Buttons bzw. Links gut funktionieren und mit einem gewissen Abstand zum anderen verlinkten Objekt platziert sein, sodass der Smartphone User nicht aus Versehen auf einen falschen Link klickt. Ebenso sollte auch die Schriftgröße beim Responsive Design gut angepasst sein, sodass das Lesen der Texte auf dem Handy nicht sehr schwer fällt und keine Lupe benötigt wird.

HTML5/CSS3 Tutorial: Responsive Webdesign erstellen – [#1]

Um zudem auch einige nützliche Videomaterialien bereitzustellen, dienen die unten nachfolgenden YouTube Videos, auf denen Schritt für Schritt verdeutlicht wird, wie ein Responsive Design erstellt wird und auf welche Bildschirmauflösungen einzugehen ist. In dem 1. Video wird das HTML Grundgerüst erstellt und der Entwickler weist auf viele Fakten hin, welche keineswegs vergessen werden sollten

HTML5/CSS3 Tutorial: Responsive Webdesign erstellen – [#2]

Weil der Autor dieses Video in 2 Bereiche unterteilt hat, folgt nun das letzte Video über das Responsive Webdesign Tutorial. Hier werden die CSS Befehle hinterlegt, sodass sich das Layout der Webseite an die verschiedenen Auflösungen der Endgeräte anpasst. Hierbei ist es generell sehr clever in Prozenten zu arbeiten, wodurch das Layout für alle Endgeräte mit diversen Bildschirmauflösungen variieren kann und dadurch sehr flexibel ist.

Empfehlenswerte Smartphones mit guten Auflösungen

Wir entsinnen uns sehr gern zurück, bei denen noch die ersten Windows Phones, iPhones und ähnliche Android Geräte auf den Markt kamen, bei denen die Auflösung noch sehr klein ausfiel. Heutzutage werden die Displayauflösungen von den „smarten“ Gerätschaften immer größer, sodass sich die Webseiten Texte, Bilder, YouTube Videos und ähnliches viel besser lesen und betrachten lassen.

Natürlich werden diese Smartphones nicht nur bezüglich der Auflösung besser und größer, sondern auch der Anschaffungspreis ist immens. Oft finanzieren sich die meisten ein solches Gerät über einen Handyvertrag, da dies im Regelfall 10 € monatlich extra kostet. Sporadisch kann auch eine einmalige kleine Anzahlung entstehen, welche jedoch keine hunderte von Euros kostet. Gerade das brandneue iPhone X stellt ein absolutes Flaggschiff dar und übersteigt gern die 1000 € Grenze.

Handyversicherungen und Handyhüllen

Damit an diesem Smartphone lange Freude gefunden wird, ist es sehr empfehlenswert dies mit einer Handyversicherung und einem separaten Cover bzw. mit einer guten und stabilen Handyhülle zu schützen. Sehr empfehlenswert ist die iPhone x Ledertasche aus dem Blumax Shop. Diese sieht nicht nur stylisch gut aus, sondern schützt das Gerät vor etwaigen Sturzschäden, Kratzern und vor allem Displayschäden!

Niemand möchte ein Smartphone benutzen und damit im Internet surfen, auf dem die sogenannte „Spider App“ (zerbrochenes Display mit vielen tiefen Kratzern und Rissen) vorhanden ist. Um diesem Dilemma aus dem Weg zu gehen, sind solche Handyhüllen obligatorisch und sollten unserer Meinung nach für jedes gute und teure Handy allgegenwärtig sein.

Wir hoffen, dass wir ein wenig nützliche Informationen bezüglich Responsive Design, den Auflösungen und einigen Optimierungen gewährleisten konnten. Zuzüglich war es uns eine Freude auf nützliche Handyversicherungen, Handyhüllen bzw. Ledertaschen hinzuweisen, denn diese sind für die teuren Smartphones elementar und sollten keineswegs fehlen!

Das Team von Fevarus Design.