Responsive Webdesign an der TU München

Karteikarten und Zusammenfassungen für Responsive Webdesign an der TU München

Arrow Arrow

Komplett kostenfrei

studysmarter schule studium
d

4.5 /5

studysmarter schule studium
d

4.8 /5

studysmarter schule studium
d

4.5 /5

studysmarter schule studium
d

4.8 /5

Lerne jetzt mit Karteikarten und Zusammenfassungen für den Kurs Responsive Webdesign an der TU München.

Beispielhafte Karteikarten für Responsive Webdesign an der TU München auf StudySmarter:

Definition Viewport

Beispielhafte Karteikarten für Responsive Webdesign an der TU München auf StudySmarter:

Content First responsive Webdesign 

Beispielhafte Karteikarten für Responsive Webdesign an der TU München auf StudySmarter:

Nachteile Fixes Layout

Das war nur eine Vorschau der Karteikarten auf StudySmarter.
Flascard Icon Flascard Icon

Über 50 Mio Karteikarten von Schülern erstellt

Flascard Icon Flascard Icon

Erstelle eigene Karteikarten in Rekordzeit

Flascard Icon Flascard Icon

Kostenlose Karteikarten zu STARK Inhalten

Kostenlos anmelden

Beispielhafte Karteikarten für Responsive Webdesign an der TU München auf StudySmarter:

Flexbox vs Grids

Beispielhafte Karteikarten für Responsive Webdesign an der TU München auf StudySmarter:

Medieneigenschaften (Media Queries)

Beispielhafte Karteikarten für Responsive Webdesign an der TU München auf StudySmarter:

Faktoren die bei responsive Webdesign berücksichtigt werden müssen

Beispielhafte Karteikarten für Responsive Webdesign an der TU München auf StudySmarter:

Vorteile Mobile Version

Das war nur eine Vorschau der Karteikarten auf StudySmarter.
Flascard Icon Flascard Icon

Über 50 Mio Karteikarten von Schülern erstellt

Flascard Icon Flascard Icon

Erstelle eigene Karteikarten in Rekordzeit

Flascard Icon Flascard Icon

Kostenlose Karteikarten zu STARK Inhalten

Kostenlos anmelden

Beispielhafte Karteikarten für Responsive Webdesign an der TU München auf StudySmarter:

Nachteile Mobile Version

Beispielhafte Karteikarten für Responsive Webdesign an der TU München auf StudySmarter:

Eigenschaft border

Beispielhafte Karteikarten für Responsive Webdesign an der TU München auf StudySmarter:

Eigenschaft margin

Beispielhafte Karteikarten für Responsive Webdesign an der TU München auf StudySmarter:

Was bedeutet ,,responsive Webdesign"?
Das war nur eine Vorschau der Karteikarten auf StudySmarter.
Flascard Icon Flascard Icon

Über 50 Mio Karteikarten von Schülern erstellt

Flascard Icon Flascard Icon

Erstelle eigene Karteikarten in Rekordzeit

Flascard Icon Flascard Icon

Kostenlose Karteikarten zu STARK Inhalten

Kostenlos anmelden

Beispielhafte Karteikarten für Responsive Webdesign an der TU München auf StudySmarter:

2 Prinzipien für responsive Webdesign

Kommilitonen im Kurs Responsive Webdesign an der TU München. erstellen und teilen Zusammenfassungen, Karteikarten, Lernpläne und andere Lernmaterialien mit der intelligenten StudySmarter Lernapp. Jetzt mitmachen!

Jetzt mitmachen!

Flashcard Flashcard

Beispielhafte Karteikarten für Responsive Webdesign an der TU München auf StudySmarter:

Responsive Webdesign

Definition Viewport
- Der Viewport ist der sichtbare Bereich einer Webseite. 


- Je nach Gerät und Einstellung unterschiedlich


- Mehr Inhalt einer Seite durch scrollen möglich

Responsive Webdesign

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

Responsive Webdesign

Nachteile Fixes Layout

o Keine Anpassung an diverse Endgeräte 


o Content bei kleineren Viewports nicht mehr sichtbar

Responsive Webdesign

Flexbox vs Grids

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 

Responsive Webdesign

Medieneigenschaften (Media Queries)
- Auf Eigenschaften des Mediums zu reagieren 


- Breitenangaben in px oder em

min-width (Mobile First)
max-width (Desktop First)

@media (min-width: 600px) {
...
}

Responsive Webdesign

Faktoren die bei responsive Webdesign berücksichtigt werden müssen

  • Größe des Gerätes


  • Bildschirmauflösung


  • Orientierung (Hoch- oder Querformat)


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

Responsive Webdesign

Vorteile Mobile Version

- Mobile Versionen haben eine hohe Anpassbarkeit


- Sind sehr komfortabel für Zwischendurch 


- Können andere Dinge angepasst werden als auf der normalen Webseite

Responsive Webdesign

Nachteile Mobile Version
- Man muss die Nutzerschaft sehr gut kennen


- Basieren aufgrund Geräteinformationen wie der Bildschrimbreite auf ein Nutzungskontext ,,kleinerer Bildschirm "

Responsive Webdesign

Eigenschaft border
Wird zu Inhaltsangabe und Innenabstand hinzuaddiert

Eigenschaften (Stil der Linie, border-style) z.B none, solid, double, dashed, dotted.
Farbe = border-color
Dicke der Linien = border,width
Kombinierungen möglich z.B (border: 3px solid black)
Mit den Zusätzen top, bottom, left für separate Bestimmungen

Responsive Webdesign

Eigenschaft margin
Legt den Außenabstand fest, also zu Elementen in der Nachbarschaft 

Eigenschaft = identisch wir padding. Auch hier auf getrennte Seiten anwendbar. 

- Zwei Elemente die aufeinandertreffen = Stehen zwei Boxen nebeneinander, addieren sich ihre Außenabstände

- Zwei Elemente übereinander stehen = entfällt der kleinere Wert von beiden. Man nennt es kollabierende Abstände

Responsive Webdesign

Was bedeutet ,,responsive Webdesign"?
Eine Webseite zu präsentieren und diese mittels CSS flexibel an den zur Verfügung stehenden Raum anzupassen.  Dieser Ansatz bezeichnet man auch als ,,reaktionfähig"

Responsive Webdesign

2 Prinzipien für responsive Webdesign
- Mobile First


- Desktop First

Melde dich jetzt kostenfrei an um alle Karteikarten und Zusammenfassungen für Responsive Webdesign an der TU München zu sehen

Singup Image Singup Image
Wave

Andere Kurse aus deinem Studiengang

Für deinen Studiengang Responsive Webdesign an der TU München gibt es bereits viele Kurse auf StudySmarter, denen du beitreten kannst. Karteikarten, Zusammenfassungen und vieles mehr warten auf dich.

Zurück zur TU München Übersichtsseite

SKL Gyn

U8 Datenbank

Angewandte Physik/ Biomechanik Prüfungsfragen

Makrotypografie

U1: Fahrzeugbeschriftung

Psychologie/Pädagogik/Soziologie

Prävention und Reha Prüfungsfragen

Soziologie

Pädagogik

Innere PT

Gyn PT Prüfungsfragen

U6: Bildgestaltung

SKL Päd Prüfungsfragen

SKL Innere Prüfubgsfragen

U9: Entwicklung von Bildzeichen

U8: Datenbank

U2: Merkmale Druckverfahren

U1: Stellenbeschreibung

Bewegungslehre Prüfungsfragen

Baukonstruktion und Entwurfsmethode

Neurologie VL prüfungsfragen

PT Innere Prüfungsfragen

Trainingslehre Prüfungsfragen

Orthopädie PT Prüfungsfragen

Päd PT Prüfungsfragen

SKL Orthopädie Prüfungsfragen

Chiru PT

Chiru PT Prüfungsfragen

Screendesign, Web Literacy an der

Hochschule Darmstadt

Resi. Desi. an der

Hochschule Weihenstephan-Triesdorf

interaktionsdesign an der

Universität zu Lübeck

UX Design an der

IUBH Internationale Hochschule

Design an der

LMU München

Ähnliche Kurse an anderen Unis

Schau dir doch auch Responsive Webdesign an anderen Unis an

Zurück zur TU München Übersichtsseite

Was ist StudySmarter?

Was ist StudySmarter?

StudySmarter ist eine intelligente Lernapp für Studenten. Mit StudySmarter kannst du dir effizient und spielerisch Karteikarten, Zusammenfassungen, Mind-Maps, Lernpläne und mehr erstellen. Erstelle deine eigenen Karteikarten z.B. für Responsive Webdesign an der TU München oder greife auf tausende Lernmaterialien deiner Kommilitonen zu. Egal, ob an deiner Uni oder an anderen Universitäten. Hunderttausende Studierende bereiten sich mit StudySmarter effizient auf ihre Klausuren vor. Erhältlich auf Web, Android & iOS. Komplett kostenfrei. Keine Haken.

Awards

Bestes EdTech Startup in Deutschland

Awards
Awards

European Youth Award in Smart Learning

Awards
Awards

Bestes EdTech Startup in Europa

Awards
Awards

Bestes EdTech Startup in Deutschland

Awards
Awards

European Youth Award in Smart Learning

Awards
Awards

Bestes EdTech Startup in Europa

Awards
X

StudySmarter - Die Lernplattform für Studenten

StudySmarter

4.5 Stars 1100 Bewertungen
Jetzt entdecken
X

Gute Noten in der Uni? Kein Problem mit StudySmarter!

89% der StudySmarter Nutzer bekommen bessere Noten in der Uni.

50 Mio Karteikarten & Zusammenfassungen
Erstelle eigene Lerninhalte mit Smart Tools
Individueller Lernplan & Statistiken


Lerne mit über 1 Millionen Nutzern in der kostenlosen StudySmarter App.

Du bist schon registriert? Hier geht‘s zum Login