Webbasierte Anwendung

Responsive Design Workshop

16. November 2017

Studiengang Medieninformatik an der technischen Hochschule Köln
Campus Gummersbach

Mike Klement und Daniel Franken

Was bedeutet Responsive?

• Anpassungsfähige Darstellung von Informationen

• Unterschiedliche Displaygrößen

• Flexibles Layout

• Elemente Positionieren sich Automatisch nach Blidschirmgröße

Wie wird Responsive Design umgesetzt?

• HTML5

• CSS3 Media Queries

• jQuery(nicht zwarsläufig))

• JavaScript(Nicht zwarsläufig)

• Nicht Pixelbasiert

Was ist Tinytweaks?

• ~Kleine Verbesserung

• Dient in erster Linie dazu, die font-size zu aktualisieren, um einen konsistenten und einfach zu lesenden Inhalt zu gewährleisten

• Sowie die Auffüllung und den vertikalen Rhythmus beim Vergrößern des Darstellungsbereichs zu ändern

TinyTweaks

Tinytweaks Css Code

Was bedeutet Column Drop?

• Ist ein Spalten-Drop-Layout stapelt jeweils eine Spalte, wenn das Ansichtsfenster verkleinert wird

• Dies ist eher ein adaptiver Designprozess und ein Schritt weg vom mostly float Layoutmuster

• Eins der Wichtigen Responsive Patterns

Standard Auflösungen von Smartphones und Tablets

• Smartphones: 320px bis 480px

• Tablet: 768px bis 1024px

• Desktop: 1024px +

Standard Auflösungen von Smartphones und Tablets

Mobil First

• Was ist das?

• Was bedeutet es?

• Hat es einen Einfluss auf den Suchalgorithmus von Google?

Mobil First

• Der Begriff "Mobile First" ist ein Konzept für das Webdesign.

• Dieses Konzept sieht vor, dass die für mobile Endgeräte optimierte Version zuerst entsteht und sukzessive Erweiterungen stattfinden. Damit folgt die Strategie „Mobile First“ dem Trend, dass immer mehr Nutzer mit dem Smartphone oder Tablet im Internet surfen und nicht mit dem Desktop.

• Ja.

• 90% Mobiltraffic in Japan.

Standard Auflösungen von Smartphones und Tablets

Vorteile des Responsive Design

• Geräte übergreifende Flexibilität

• Google Ranking verbessern(Responsive Webdesign bedeutet auch, dass Sie nur eine Website mit einem einzigen Satz SEO-Optimierung erstellen und betreuen müssen. Das spart Zeit und Geld.Zusätzlich werden von Google Websites, die mobile optimiert wurden, besser bei lokalisierten Suchergebnissen angezeigt. Dies spielt natürlich eine große Bedeutung bei lokalen Unternehmen, aber auch bei Online-Händler.)

• Zeit und Kostengünstig der Mobilen App-Entwicklung

• Verbesserung des Offline-Browsers

Nachteile des Responsive Designs

• Verbraucht viel Datenvolumen

• Daher teurer für den Nutzer

• Längere Ladezeiten

• Mobile Ansichten sind komprimierter

• Komplexer zu konzipieren und entwicklen

Wie wird sah die Vergangenheit aus für Responsive Web ?

Wie ist die Gegenwart von Responsive Web?

Wie wird die Zukuft für Responsive Web aussehen?

Wird so die Zukuft für Responsive Web aussehen?

• Wird Responsive Design wird sich durchsetzen ?

• Mobil First wird öfters angewendet

• Benutzerorientiert

• Viele Media Queries um alle Geräte anzusprechen

• @Media (Dives:Kühlschrank){}

Wie wichtig ist Responsive Design für den Marketingbereich?

• Ist in der heutigen Zeit nicht mehr aus dem Marketing wegzudenken

• Immer mehr Menschen surfen mobil auch unterwegs im Netz und haben in der Regel wenig Zeit und auch keine Lust, sich auf für sie umständlichen Seiten aufzuhalten.

• Heutzutage muss alles optimiert sein und eine schnelle Übersicht bieten

Warum ist Responsive Design so wichtig für den Marketingbereich?

• Eine bessere Conversion Rate

• Mehr Reichweite und Bekanntheit

• Deutlich höhere Leadgenerierung

• Geringere Absprungrate

• Erfolgreicheres Kunden gewinnen im Internet

• Verbessertes PPC Marketing(Ausgeschrieben bedeutet es „Pay Per Click“.Damit ist gemeint, es wird pro Klick gezahlt. Gut für KMU´s)

• Anstieg an Shares in Social Media Netzwerken

Wie teste ich ob eine Webseite "Responsive" ist?

• Developer Tools

• Bildschirmgrößen testen

Hauptbestandteile für Responsive Dev in CSS

• Pixelgrößen mit Vorsicht verwenden

• Verwendung von Media Queries

• Relative Größen verwenden

• Orientierung an der Bildschirmgröße (Meta-Tag)

• meta name="viewport" content="width=device-width, initial-scale=1.0"

Absolute CSS Größen

• Welche statischen Angaben gibt es? (Sammeln)

• Inches(in)

• Pixels(px)

• Centimeters(cm)

• Millimeters(mm)

• Points(pt)

• Picas(pc)

Relative CSS Größen

• Welche relativen Angaben gibt es? (Sammeln)

• Percentages(%)

• Font-Sizes(em, rem)

• Character-sizes(ex, ch)

• Viewport Dimensions(vw, vh)

• Viewport Max(vmax)

• Viewport Min(vmin)

Was sind Relative Größen

• Basieren auf anderen Größen und verhalten sich entsprechend

• Manche Basieren auf der Bildschirmgröße bzw. Fenstergröße

• Vor allem in der Breite Sinnvoll

• Coding mit %-Werten

Was sind Visual Größen - Vw, Vh

• Der Bildschirm wird ausgelesen

• 100vw entsprechen der Breite des Bildschirms

• 100vh entsprechen der Höhe des Bildschirms

• vmin oder vmax wählen immer die kleinere(vmin)/größere(vmax) Länge aus (Höhe oder Breite)

• Coding Beispiel

Was sind Schrift basierende Größen

• Rem,Em,Ex,Ch

• Ch und Ex werden kaum verwendet

• Ex basiert auf dem 'x' der gewählten Schriftart

• ch basiert auf der höhe der '0' (NULL) der ausgewählten Schriftart

• Coding Beispiel

Was sind absolute Größen

• Auf Physischen Werten basierend

• Statisch und unflexibel

• Pixel sind meist verwendete Größe

• Javascript "spricht" in Pixeln

• Coding Beispiel

Was sind Relative Größen

• Basieren auf anderen Größen und verhalten sich entsprechend

• Manche Basieren auf der Bildschirmgröße bzw. Fenstergröße

• Vor allem in der Breite sinnvoll

Media Queries

• Lesen eigenschaften des Anzeige gerätes aus

• Typ (TV,mobile)

• Liest die Bildschirmhöhe oder/und Breite aus

• Bietet die Möglichkeit anhand der Displaygröße das Standarddesign(Css) zu überschreiben

• Coding Beispiel

Container verschwinden lassen

• Sinnvoll um Elemente mit niedriger Priorität auf der Mobilen Ansicht zu entfernen

• Menüleiste oder Texte

• Display:none

• visible:hidden

• Coding Beispiel

Aufgaben

• A1) Sorgt dafür, dass die beiden Elemente, sobald der Text aus dem Rahmen läuft, untereinander stehen (Column Drop)

• A2) Der Text soll immer an die Breite angepasst werden und mittig stehen. Er darf nicht größer als die Ursprungsgröße werden

• A3) Die Katze soll in der Mitte bleiben. Tipp:sie ist genau in der Mitte des Bildes

• A4) Allgemein: Der Inhalt der Seite soll auf jeder Bildschirmgröße richtig angezeigt werden. Der Footer kann unsichtbar gemacht werden.

Cheat-Sheets:

Quellen: