Tricks für reaktionsschnelles Design

by Elixir Consultant

• 0
• 3.3K
• Uncategorized

Tricks für reaktionsschnelles Design

Einführung

Mit neuen Geräten wie Smartphones, iPad, Tablets, die die wichtigsten Chunk-Geräte bilden, die derzeit von den Verbrauchern verwendet werden, wird der Drang nach reaktionsfähigem Design unter Website-Besitzern aller Art immer stärker. In naher Zukunft wäre reaktionsschnelles Webdesign der bevorzugte Weg, um Verbraucher auf jeder Art von Gerät und mit jeder Bildschirmgröße zu erreichen.

Reaktionsschnelles Layout
Die Erstellung von reaktionsschnellen Layouts ist eine neue Methode zur Gestaltung von Websites. Es gibt einige nützliche CSS-Tricks, mit denen Sie schnell ein ansprechendes Design erstellen und bereitstellen können, das sich automatisch an die Größe des Bildschirms anpasst, auf dem der Inhalt der Website angezeigt wird.

Minimale Breite und maximale Höhe für Bilder
Eine der größten Herausforderungen, denen sich die meisten Designer bei der Gestaltung eines ansprechenden Layouts gegenübersehen, ist, dass Bilder ein ernsthaftes Problem bei der Größenänderung von Inhalten darstellen, um den Anforderungen jeder Bildschirmgröße gerecht zu werden. Das liegt daran, dass Bilder oft eher in Form von absoluten Pixeln als in Form von relativen Werten bemessen werden. Der Schlüssel zu einem reaktionsschnellen Design liegt natürlich darin, absolute Definitionen von Breite und Höhe in relative Werte zu verwandeln, die Desktops, Laptops, Tablets und Smartphones problemlos aufnehmen können.

Dies mit einem Bild zu tun ist eigentlich einfach, aber die meisten Entwickler sind sich einfach nicht bewusst, welche CSS-Konstruktion bei der Definition eines Bildes in einem Stylesheet zu verwenden ist. Anstatt eine Höhe und Breite in Pixeln zu verwenden, können eine “max-Breite” und eine “max-Höhe” verwendet werden, um das Bild leichter an die Größe des verwendeten Bildschirms anzupassen.

Die obige Aussage besagt, dass die Größe des Bildes durch ein Element namens “max-width” gesteuert wird. Wie der Name schon sagt, wird dadurch verhindert, dass das Bild größer wird, als es das Design erfordert. Das Ziel von Max-Width ist es, zu verhindern, dass das Bild die Breite der Spalten der Website überschreitet, was den Benutzer zwingt, in zwei verschiedene Richtungen zu scrollen.

Die minimale Breite hingegen stellt sicher, dass die Inhalte nicht zu klein werden, um nützlich zu sein. Designer können “min-width” auf Dinge wie Titel, Inhaltsblöcke oder Sidebar-Elemente anwenden, um zu verhindern, dass sie nur ein wenig zu stark schrumpfen. Beide Elemente können zusammen verwendet werden, um die genaue Größe und Skalierung jedes Elements auf der Seite einfacher zu steuern.

Schriftgestaltung
Relative Werte bilden das Design. Dadurch wird die Schriftart zusammen mit der Bildschirmgröße skaliert, so dass sie auf einem Gerät jeder Größe leicht lesbar und natürlich ist.

Responsive Designs verwenden eine Reihe von Spalten mit relativer Breite, um den Inhalt zu verkleinern, wenn die Bildschirmgröße eines Geräts eine oder mehrere “Haltepunkte” überschreitet. Diese relativen Werte können jedoch nur funktionieren, wenn sie mit relativen Rändern und Füllungen gepaart sind. Anstatt Padding als 5 Pixel anzugeben, versuchen Sie, das Element als 1 Prozent der Breite oder Höhe der Seite anzugeben. Es ist so einfach wie das Ändern des “px” in ein Prozentsymbol und es wird dazu beitragen, dass die Website viel effektiver vergrößert oder verkleinert wird.

URL-Handling
Das Problem bei sehr langen URLs besteht darin, dass sie viele Zeichen, keine Leerzeichen und die Fähigkeit enthalten, die Attraktivität eines ansprechenden Designs auf einem kleineren Gerät dramatisch zu beeinträchtigen. Dieses Problem lässt sich leicht beheben, indem man eine spezielle Klasse erstellt, die lange URLs umschließt, wenn sie innerhalb des Inhalts einer Website erscheinen. Mit dem Element “word-wrap” kann CSS die URL tatsächlich in Teile zerlegen, die in die definierte Breite des Inhaltsbereichs passen.

Das Wort wird in eine zweite Zeile oder so viele Zeilen wie nötig gebrochen, sobald es den Rand des Inhaltsbereichs erreicht. Vertikales Scrollen wird leicht vermieden.

Fazit
Mit ein paar einfachen CSS-Tricks ist es wirklich ganz einfach, eine Website zu erstellen, die auf die Bedürfnisse von Smartphones und Tablet-PCs zugeschnitten ist.

In Kombination mit einem spaltenbasierten, reaktionsschnellen Design werden diese Tricks das letzte Stück des Puzzles für entschlossene Designer sein.