{S2L1] Responsive Layouts

Question 1

Was ist ein fixed Layout?

Answer 1

• Eine Website für den Desktop, die sich nicht responsive an Gerätedarstellungen anpasst
• Mobilgeräte müssen zoomen und haben ein schlechtes Erlebnis

Question 2

Was haben fixed Layouts oft gemeinsam?

Answer 2

• Für den Desktop ausgelegt
• CSS Width hardcoded
• Keine Media Queries
• Werden oft genutzt weil sie schneller zu erstellen sind

Question 3

Was ist ein Fluid Layout?

Answer 3

• Websiten die sich erweitern oder verkleinern, je nach Bildschirmgröße
• Bilder und Buttons werden oft viel zu groß oder zu klein für die Geräte
• Man kämpft immer gegen Spacing und Inhaltsverteilung

Question 4

Was haben fluid Layouts oft gemeinsam?

Answer 4

• Keine Media Queries
• Width CSS ist oft in Prozentangaben
• Basiert auf Skalierung der Website
• Designs sind oft in Desktop, Tablet, Mobile aufgeteilt

Question 5

Was ist ein adaptive Layout?

Answer 5

• Ähnlich schnell wie ein fixxed Layout, aber benutzt Breakpoints um gewisse Abschnitte hardcodierte Pixelangaben für ein Gerät zu geben
• An mehrere Geräte angepasst, jedoch nicht alle alle tausende da draußen

Question 6

Was haben adaptive Layouts oft gemeinsam?

Answer 6

• Designs sind oft in Desktop, Tablet, Mobile aufgeteilt
• Benutzt Media Queries
• Width CSS ist immer noch in den Media Queries hardcodiert
• Schnelles Deployment

Question 7

Was ist ein responsive Layout?

Answer 7

• Kombiniert Aspekte aus fixed, adaptiv und fluid um mit Mediaqueries Responsive Units zu nutzen und das Viewport zu erweitern oder zu schrumpfen
• Anpassung an tausende von Geräten möglich
• Brauchen länger um erstellt zu werden, sind aber Best-Practise

Question 8

Was haben responsive Layouts oft gemeinsam?

Answer 8

• Designs sind oft in Desktop, Tablet, Mobile aufgeteilt
• Es werden Responsive Units genutzt
• Es werden Media Queries genutzt
• Anpassbar an tausende von Geräten

Question 9

Woran erkennt man schnell das eine Website ein fixxed Layout hat und nicht Responsive ist?

Answer 9

• Im CSS fixxe Angaben von Width im Container

- Die Website ist extrem klein auf dem Handy oder bietet eine “Mobile Version an”

Question 10

Was ist der Unterschied zwischen adaptiv und responsive?

Answer 10

• Adaptive nutzt der Server HTML welcher für verschiedene Bildschirmgrößen vorangefertigt ist und je ein Gerät mit der Größe (Du bist ein Ipad daher hast du Größe xy)
• Responsive werden die Geräte selbst von Media Queries erkannt und Flexible Grids und Bilder genutzt um etwas korrekt darzustellen

Question 11

Erkläre kurz Fixxed, Fluid, Adaptive und Responsive Design.

Answer 11

• Fixxed: fixxe Pixel
• Fluid: Prozentale Pixel Angaben
• Adaptive: Server versucht Bildschirm klug zu erkennen
• Responsive: Gibt allen Content aus und versteckt je nach Gerät etwas davon. Client-Side handled sich anpassenden Inhalt

Question 12

Wann sind Responsive Designs schwer umsetzbar und fixxed designs besser anwendbar?

Answer 12

-Sehr graphisch-lastige Websites

Question 13

Wo findet man heute oft noch fixxed Designs?

Answer 13

• Alte Websites/Legacy

- Intranetze und in Businesses wo eh jeder den gleichen PC und Browser benutzt

Question 14

Wie sollte man eine Website designen?

Answer 14

• Responsive

- Mobile-First

Question 15

Was ist ein Viewport?

Answer 15

• Ist ein Begriff für den sichtbaren Bereich einer Website auf einem Gerät des Nutzers
• Die Größte des Viewports variiert von Gerät zu Gerät

Question 16

Was ist ein Breakpoint?

Answer 16

-Ein Punkt einer CSS Media Query bei einer gewissen Width wo die Website sich dem Endgerät anpasst

Question 17

Was sind die Standard Breakpoints die man nutzen sollte?

Answer 17

• Tablet 800

- Smartphone 500