U5 Responsive Webdesign at Media Akademie - Hochschule Stuttgart | Flashcards & Summaries

Lernmaterialien für U5 Responsive Webdesign an der media Akademie - Hochschule Stuttgart

Greife auf kostenlose Karteikarten, Zusammenfassungen, Übungsaufgaben und Altklausuren für deinen U5 Responsive Webdesign Kurs an der media Akademie - Hochschule Stuttgart zu.

TESTE DEIN WISSEN

Auf mobilen Endgeräten gibt es mehrere Navigationsmöglichkeiten.

Zählen Sie die 5 gängigsten Navigationsarten auf. 

Lösung anzeigen
TESTE DEIN WISSEN

- Icons  

- Balken 

- Reiter 

- Karussell 

- Toolbar 

- Shoji  

- Suchfeld  

Lösung ausblenden
TESTE DEIN WISSEN

Was ist ein Viewport in Responsive Webdesign?

Lösung anzeigen
TESTE DEIN WISSEN

Unter dem Begriff Viewport versteht man die Größe eines Sichtfensters oder einer Sichtöffnung auf einem Bildschirm.


Viewports als Meta-Element dienen also (in Kombination mit responsivem Webdesign) dazu, dem Browser dabei zu helfen, die Seiten so auseinanderzunehmen und auf dem kleinen Bildschirm wieder zusammenzusetzen, dass der Nutzer ein sinnvolles und lesbares Abbild erhält. 


Der Browser geht nun nicht mehr vom Layout-Viewport, sondern von der tatsächlichen Gerätebreite aus


(width=device-width) und nutzt eine 1:1-Darstellung als Zoomfaktor

(initial-scale=1).

Lösung ausblenden
TESTE DEIN WISSEN

Worin unterscheiden sich Desktop First, Content First und Mobile First?

Lösung anzeigen
TESTE DEIN WISSEN

Desktop First = Man gestaltet zuerst für einen großen Bildschirm und nach Bedarf spätere Anpassungen für kleinere Displays vorgenommen (max-width)


Content First = Beruht auf der Idee, Größenverhältnisse im Webdesign von den Inhalten abhängig zu gestalten


Mobile First = Man gestaltet zuerst für kleinere Endgeräte und nach Bedarf spätere Anpassungen für größere Endgeräte vorgenommen (min-width)

Lösung ausblenden
TESTE DEIN WISSEN

Was versteht man unter Responsive Webdesign?

Lösung anzeigen
TESTE DEIN WISSEN

Der Begriff Responsive Webdesign bedeutet im übertragenen Sinne "reagierendes Webdesign". Inhalts- und Navigationselemente sowie auch der strukturelle Aufbau einer Website passen sich der Bildschirmauflösung des mobilen Endgeräts an 


Responsive Webdesign zeigt sich als kosteneffizienter Ansatz für ganzheitliche Kommunikation. Das Layout passt sich dem Endgerät strukturiert an.

Lösung ausblenden
TESTE DEIN WISSEN

Wie unterscheiden sich responsive Layout und adaptive Layout?

Lösung anzeigen
TESTE DEIN WISSEN

adaptive = anpassungsfähig


Ein Adaptive Layout ist ein für verschiedene (nicht für alle!) Displaygrößen optimiertes Web-Layout.

Diese Lösung ist nicht perfekt, aber durchaus verbreitet. Der Kern des Adaptive Layouts ist ein starres Gestaltungsraster in Kombination mit Media Queries. Der gewählte Layouttyp dieser Variante ist also i.d.R. »fixed«. Das Layout ist anpassungsfähig und passt sich wenigen, ausgewählten Displaygrößen an.


Vorteile: Viel gestalterischer Freiraum, da mit einem starren Raster gearbeitet wird, Technisch recht unkompliziert umzusetzen, Zeitsparendere Umsetzung

Nachteile: Es wird nur für bestimmte Ansichten / bestimmte Geräte optimiert, 

Häufig mehr CSS-Code als notwendig, Häufige Fehldarstellungen auf abweichenden Endgeräten





responsive = reaktionsfähig


Das Responsive Layout ist die bessere Lösung, um eine Seite für jede erdenkliche Displaygröße zu optimieren. Das Responsive Layout arbeitet mit einem flüssigen Gestaltungsraster, in Kombination mit Media Queries.

Der Layouttyp ist demnach »fluid« oder »elastic«. Im Gegensatz zum Adaptive Layout wird hier nicht gezielt für einen bestimmten Ansicht optimiert, sondern das Design so entwickelt, dass der zur Verfügung stehende Platz immer optimal ausgenutzt wird. Lediglich nach oben ist häufig eine Grenze gesetzt, damit die Website auf großen Displays nicht zu breite Spalten erhält. 

Bei einem Responsive Layout steht das flexible Layout und die perfekte Informationsaufbereitung im Vordergrund. Bei einem Adaptive Layout steht das Ausgabegerät im Vordergrund.


Vorteile: Jede Displaygröße wird optimal berücksichtigt, Es wird kein Platz verschenkt, Die Information steht im Vordergrund

Nachteile: Komplexer in der Gestaltung, Komplexer in der technischen Umsetzung, Komplexer in der Anpassung der Seiteninhalte

Lösung ausblenden
TESTE DEIN WISSEN

Welche Faktoren müssen bei Responsive Webdesign berücksichtigt werden?

Lösung anzeigen
TESTE DEIN WISSEN

- Größe des Gerätes

- Bildschirmauflösung

- Orientierung (Hoch- oder Querformat)

- welche Eingabemöglichkeit dieses Gerät verwendet (Touch, Tastatur oder Sprachsteuerung)

Lösung ausblenden
TESTE DEIN WISSEN

Welche Vor und Nachteile hat Responsive Webdesign?

Lösung anzeigen
TESTE DEIN WISSEN

Vorteile:


- Zentralisierung von Inhalten durch Verwaltung von CSS je nach Endgerät

- Schnellere und einfachere Erstellung und Pflege von Websites

- Identisches Design und identischer Inhalt, daher dem Benutzer vertraut

- Reaktionsfähige Webdesign-Vorlagen


Nachteile:


- Mangelnde Kontrolle

- Längere Ladezeiten

- Viele kleine Zugriffe

Lösung ausblenden
TESTE DEIN WISSEN

Was sind Breakpoints in Responsive Webdesign?

Lösung anzeigen
TESTE DEIN WISSEN

Als Breakpoint bezeichnet man Umbrüche die im Layout stattfinden. Navigations und Seitenelemente werden so umgebrochen, damit sie für den Betrachter leserlich sind.

(bspw. min-with:600px → Breakpoint bei 600 px).


Es gibt keine allgemeingültigen Breakpoints im Webdesign. Dafür gibt es mehrere Möglichkeiten die Breakpoints zu ermitteln.

Lösung ausblenden
TESTE DEIN WISSEN

Nennen Sie vier Faktoren, die eine mobile Webseite von einer klassischen Desktop-Webseite unterscheiden.

Lösung anzeigen
TESTE DEIN WISSEN

Diese Faktoren unterscheiden eine mobile Webseite von einer klassischen Desktop-Webseite:


• das responsive Screendesign ist in der Gestaltung für unterschiedliche Bildschirmgrößen im Quer- und Hochformat angepasst.


• mobile Karten bieten Navigationsmöglichkeiten


• die Navigation ist leicht verständlich und gut erreichbar


• Inhalte können platzsparend auf- und zugeklappt werden


• direkter Zugang zu sozialen Netzwerken


• optimal gestaltete Formulare, z.B. für Kontakt, mit leichter Bedienbarkeit

Lösung ausblenden
TESTE DEIN WISSEN

Was ist Mobile First? Welche Vorteile hat Mobile First? Und welche Aspekte verfolgt Mobile First? 

Lösung anzeigen
TESTE DEIN WISSEN

Vorteile: Umsetzung aufwendigen Smartphone-Layout (erstes), Mehrheit der User geht mit Smartphone ins Internet, Fokus wird auf Darstellung auf mobilen Endgeräten gelegt, Sollte nach Zielgruppe entschieden werden


»Mobile First« bezeichnet ein Konzept im Responsive Webdesign bei dem die Website als erstes für mobile Endgeräte entwickelt wird. Für größere Displays wird die Seite anschließend erweitert und angepasst.


Bei Mobile First muss unterschieden werden zwischen konzeptionellem Mobile First und Mobile First aufgebautem CSS-Code (technischem Mobile First). Beim konzeptionellen Ansatz muss sich der Ersteller frühzeitig über Priorisierung und Positionierung von Elementen Gedanken machen. Da sich dieser Ansatz größtenteils auf die Inhalte einer Website bezieht, spricht man auch von »Content First«.


Mobile First aufgebauter CSS-Code wird so bezeichnet, da der Code für die mobile Ansicht im Dokument ganz oben steht. Das führt unterm Strich zu weniger und besser strukturiertem Code und somit i.d.R. zu schnelleren Websites.

Lösung ausblenden
TESTE DEIN WISSEN

Was sind Media Queries und wie werden Sie unterteilt?

Lösung anzeigen
TESTE DEIN WISSEN

Media Queries (deutsch: Medienabfragen) ordnen ein CSS Stylesheet einem Ausgabemedium zu und bestimmen die Darstellung auf verschiedene Ausgabemedien.


Medientypen = @media screen / @media print

Medieneigenschaften = “(min-width:∙768px)“


min-width (Mobile First)

max-width (Desktop First)

Lösung ausblenden
TESTE DEIN WISSEN

Welche Unterschiede haben Flexbox und Grids?

Lösung anzeigen
TESTE DEIN WISSEN

Grids


- Grids können sowohl Spalten als auch Zeilen adressieren und verarbeiten. 

- Grids den Ansatz Layout First adressieren 

- Inhaltsarten und deren Beschaffenheit nicht bekannt, sind die CSS3-Grids eine bessere Wahl. 



Flexbox


- Flexbox kann eine Spalte oder eine Zeile beeinflussen. 

- Der Ansatz von Flexbox ist Content First

- Sind die Inhalte vor der Erstellung des Layouts bekannt, ist Flexbox eine gute Entscheidung 

Lösung ausblenden
  • 2908 Karteikarten
  • 14 Studierende
  • 2 Lernmaterialien

Beispielhafte Karteikarten für deinen U5 Responsive Webdesign Kurs an der media Akademie - Hochschule Stuttgart - von Kommilitonen auf StudySmarter erstellt!

Q:

Auf mobilen Endgeräten gibt es mehrere Navigationsmöglichkeiten.

Zählen Sie die 5 gängigsten Navigationsarten auf. 

A:

- Icons  

- Balken 

- Reiter 

- Karussell 

- Toolbar 

- Shoji  

- Suchfeld  

Q:

Was ist ein Viewport in Responsive Webdesign?

A:

Unter dem Begriff Viewport versteht man die Größe eines Sichtfensters oder einer Sichtöffnung auf einem Bildschirm.


Viewports als Meta-Element dienen also (in Kombination mit responsivem Webdesign) dazu, dem Browser dabei zu helfen, die Seiten so auseinanderzunehmen und auf dem kleinen Bildschirm wieder zusammenzusetzen, dass der Nutzer ein sinnvolles und lesbares Abbild erhält. 


Der Browser geht nun nicht mehr vom Layout-Viewport, sondern von der tatsächlichen Gerätebreite aus


(width=device-width) und nutzt eine 1:1-Darstellung als Zoomfaktor

(initial-scale=1).

Q:

Worin unterscheiden sich Desktop First, Content First und Mobile First?

A:

Desktop First = Man gestaltet zuerst für einen großen Bildschirm und nach Bedarf spätere Anpassungen für kleinere Displays vorgenommen (max-width)


Content First = Beruht auf der Idee, Größenverhältnisse im Webdesign von den Inhalten abhängig zu gestalten


Mobile First = Man gestaltet zuerst für kleinere Endgeräte und nach Bedarf spätere Anpassungen für größere Endgeräte vorgenommen (min-width)

Q:

Was versteht man unter Responsive Webdesign?

A:

Der Begriff Responsive Webdesign bedeutet im übertragenen Sinne "reagierendes Webdesign". Inhalts- und Navigationselemente sowie auch der strukturelle Aufbau einer Website passen sich der Bildschirmauflösung des mobilen Endgeräts an 


Responsive Webdesign zeigt sich als kosteneffizienter Ansatz für ganzheitliche Kommunikation. Das Layout passt sich dem Endgerät strukturiert an.

Q:

Wie unterscheiden sich responsive Layout und adaptive Layout?

A:

adaptive = anpassungsfähig


Ein Adaptive Layout ist ein für verschiedene (nicht für alle!) Displaygrößen optimiertes Web-Layout.

Diese Lösung ist nicht perfekt, aber durchaus verbreitet. Der Kern des Adaptive Layouts ist ein starres Gestaltungsraster in Kombination mit Media Queries. Der gewählte Layouttyp dieser Variante ist also i.d.R. »fixed«. Das Layout ist anpassungsfähig und passt sich wenigen, ausgewählten Displaygrößen an.


Vorteile: Viel gestalterischer Freiraum, da mit einem starren Raster gearbeitet wird, Technisch recht unkompliziert umzusetzen, Zeitsparendere Umsetzung

Nachteile: Es wird nur für bestimmte Ansichten / bestimmte Geräte optimiert, 

Häufig mehr CSS-Code als notwendig, Häufige Fehldarstellungen auf abweichenden Endgeräten





responsive = reaktionsfähig


Das Responsive Layout ist die bessere Lösung, um eine Seite für jede erdenkliche Displaygröße zu optimieren. Das Responsive Layout arbeitet mit einem flüssigen Gestaltungsraster, in Kombination mit Media Queries.

Der Layouttyp ist demnach »fluid« oder »elastic«. Im Gegensatz zum Adaptive Layout wird hier nicht gezielt für einen bestimmten Ansicht optimiert, sondern das Design so entwickelt, dass der zur Verfügung stehende Platz immer optimal ausgenutzt wird. Lediglich nach oben ist häufig eine Grenze gesetzt, damit die Website auf großen Displays nicht zu breite Spalten erhält. 

Bei einem Responsive Layout steht das flexible Layout und die perfekte Informationsaufbereitung im Vordergrund. Bei einem Adaptive Layout steht das Ausgabegerät im Vordergrund.


Vorteile: Jede Displaygröße wird optimal berücksichtigt, Es wird kein Platz verschenkt, Die Information steht im Vordergrund

Nachteile: Komplexer in der Gestaltung, Komplexer in der technischen Umsetzung, Komplexer in der Anpassung der Seiteninhalte

Mehr Karteikarten anzeigen
Q:

Welche Faktoren müssen bei Responsive Webdesign berücksichtigt werden?

A:

- Größe des Gerätes

- Bildschirmauflösung

- Orientierung (Hoch- oder Querformat)

- welche Eingabemöglichkeit dieses Gerät verwendet (Touch, Tastatur oder Sprachsteuerung)

Q:

Welche Vor und Nachteile hat Responsive Webdesign?

A:

Vorteile:


- Zentralisierung von Inhalten durch Verwaltung von CSS je nach Endgerät

- Schnellere und einfachere Erstellung und Pflege von Websites

- Identisches Design und identischer Inhalt, daher dem Benutzer vertraut

- Reaktionsfähige Webdesign-Vorlagen


Nachteile:


- Mangelnde Kontrolle

- Längere Ladezeiten

- Viele kleine Zugriffe

Q:

Was sind Breakpoints in Responsive Webdesign?

A:

Als Breakpoint bezeichnet man Umbrüche die im Layout stattfinden. Navigations und Seitenelemente werden so umgebrochen, damit sie für den Betrachter leserlich sind.

(bspw. min-with:600px → Breakpoint bei 600 px).


Es gibt keine allgemeingültigen Breakpoints im Webdesign. Dafür gibt es mehrere Möglichkeiten die Breakpoints zu ermitteln.

Q:

Nennen Sie vier Faktoren, die eine mobile Webseite von einer klassischen Desktop-Webseite unterscheiden.

A:

Diese Faktoren unterscheiden eine mobile Webseite von einer klassischen Desktop-Webseite:


• das responsive Screendesign ist in der Gestaltung für unterschiedliche Bildschirmgrößen im Quer- und Hochformat angepasst.


• mobile Karten bieten Navigationsmöglichkeiten


• die Navigation ist leicht verständlich und gut erreichbar


• Inhalte können platzsparend auf- und zugeklappt werden


• direkter Zugang zu sozialen Netzwerken


• optimal gestaltete Formulare, z.B. für Kontakt, mit leichter Bedienbarkeit

Q:

Was ist Mobile First? Welche Vorteile hat Mobile First? Und welche Aspekte verfolgt Mobile First? 

A:

Vorteile: Umsetzung aufwendigen Smartphone-Layout (erstes), Mehrheit der User geht mit Smartphone ins Internet, Fokus wird auf Darstellung auf mobilen Endgeräten gelegt, Sollte nach Zielgruppe entschieden werden


»Mobile First« bezeichnet ein Konzept im Responsive Webdesign bei dem die Website als erstes für mobile Endgeräte entwickelt wird. Für größere Displays wird die Seite anschließend erweitert und angepasst.


Bei Mobile First muss unterschieden werden zwischen konzeptionellem Mobile First und Mobile First aufgebautem CSS-Code (technischem Mobile First). Beim konzeptionellen Ansatz muss sich der Ersteller frühzeitig über Priorisierung und Positionierung von Elementen Gedanken machen. Da sich dieser Ansatz größtenteils auf die Inhalte einer Website bezieht, spricht man auch von »Content First«.


Mobile First aufgebauter CSS-Code wird so bezeichnet, da der Code für die mobile Ansicht im Dokument ganz oben steht. Das führt unterm Strich zu weniger und besser strukturiertem Code und somit i.d.R. zu schnelleren Websites.

Q:

Was sind Media Queries und wie werden Sie unterteilt?

A:

Media Queries (deutsch: Medienabfragen) ordnen ein CSS Stylesheet einem Ausgabemedium zu und bestimmen die Darstellung auf verschiedene Ausgabemedien.


Medientypen = @media screen / @media print

Medieneigenschaften = “(min-width:∙768px)“


min-width (Mobile First)

max-width (Desktop First)

Q:

Welche Unterschiede haben Flexbox und Grids?

A:

Grids


- Grids können sowohl Spalten als auch Zeilen adressieren und verarbeiten. 

- Grids den Ansatz Layout First adressieren 

- Inhaltsarten und deren Beschaffenheit nicht bekannt, sind die CSS3-Grids eine bessere Wahl. 



Flexbox


- Flexbox kann eine Spalte oder eine Zeile beeinflussen. 

- Der Ansatz von Flexbox ist Content First

- Sind die Inhalte vor der Erstellung des Layouts bekannt, ist Flexbox eine gute Entscheidung 

U5 Responsive Webdesign

Erstelle und finde Lernmaterialien auf StudySmarter.

Greife kostenlos auf tausende geteilte Karteikarten, Zusammenfassungen, Altklausuren und mehr zu.

Jetzt loslegen

Das sind die beliebtesten U5 Responsive Webdesign Kurse im gesamten StudySmarter Universum

Respi

Universidad Nacional de Córdoba

Zum Kurs
respi

Western Mindanao State University

Zum Kurs

Die all-in-one Lernapp für Studierende

Greife auf Millionen geteilter Lernmaterialien der StudySmarter Community zu
Kostenlos anmelden U5 Responsive Webdesign
Erstelle Karteikarten und Zusammenfassungen mit den StudySmarter Tools
Kostenlos loslegen U5 Responsive Webdesign