Was ist eigentlich Responsive Webdesign

| | Browser, Programmierung, Web

Unter „Responsive Webdesign“ versteht man ein Design, welches sich für alle Endgeräte optimal anpasst, dass heißt die Darstellung des Designs passt sich der jeweiligen Größe an.

Screenshot_2013-04-27-12-38-13[1]

Dem responsive Webdesign verdanken wir viele praktische Webseiten, welche wir nun auch mit dem Handy sehr einfach aufrufen und anzeigen lassen können.
Da die Tablet und Handy Nutzer in den letzten Jahren immer mehr werden, ist die Wichtigkeit von responsive Webdesign immer mehr angestiegen.

Doch wie genau funktioniert das nun?

Responsive Webdesign ist eine Technik welche mittel HTML5 und CSS3 funktioniert, weshalb es bei älteren Browsern hier auch zu Problemen kommen kann.

Durch CSS3 wird die Möglichkeit der „Media Queries“ geschaffen, da das ganze doch sehr selbsterklärend ist, hier ein Beispiel:

  1. #inhalt {
  2.   width: 800px;
  3. }
  4. @media screen and (max-width: 1024px) {
  5.   #inhalt {
  6.     width: 600px;
  7.   }
  8. }

In Zeile 1 sehen wir das ein Element mit der ID „Inhalt“ die Breite von 800px bekommt, ist der Betrachter der Seite nun aber ein Bildschirm (siehe Z. 4) und hat eine Maximale Breite von1024px so wäre der Inhalt nur 600px breit (siehe Z. 6).

Von diesen Bedingungen (siehe Z. 4) gibt es nun sehr viele verschiedene wie „handheld“, „tv“ oder „print“, zusätzlich durch die Bedingungen der Breite lassen sich schöne responsive Designs umsetzten.

Da nun bestimmt werden kann wie groß das Endgerät ist, lässt sich das Design optimal für das Gerät mittels CSS optimieren.

Und auch bei diesem Thema stellen wir wieder fest, wie wichtig es ist einen ordentlichen und aktuellen Browser zu benutzten, sei es nun auf dem Tablet, Handy oder PC.

P.S. Diese Seite hat auch ein responsive Design

Neueste Beiträge

Reverse Engineering eines proprietären UART-Protokolls am Beispiel eines Whirlpool-Steuergeräts (MSPA Muse Carlton)

Einleitung

In diesem Artikel zeige ich dir, wie ich das serielle Kommunikationsprotokoll eines MSPA Muse Carlton Whirlpools erfolgreich reverse-engineered habe. Ziel war es, die Fernbedienungsbefehle auszulesen und eigene Kommandos zu senden. Dafür kam ein ESP32 Dev Board[*] zum Einsatz. Dieses Protokoll funktioniert vermutlich auch bei anderen MSPA-Modellen.

Dieser Artikel richtet sich an alle Maker, Home-Automatisierer und Technik-Fans, die gern tief in die Technik eintauchen.


Weiter >>

Der perfekte Einstieg in die Welt der Vinyls: Der Denon DP-300F und 2 Alternativen

Warum Vinyl?

Vinyl erlebt seit einigen Jahren ein riesiges Comeback. Der warme, analoge Klang, das bewusste Musikhören und das Sammeln von Schallplatten faszinieren immer mehr Musikliebhaber. Dabei ist nicht nur das nostalgische Feeling ausschlaggebend, sondern vor allem auch der unverwechselbare Klangcharakter von Vinyl – ein Klang, der trotz moderner digitaler Verfahren nach wie vor viele Fans begeistert.

Denon DP-300F[*] – Der ideale Allrounder für Einsteiger

Der Denon DP-300F[*] ist nach wie vor ein beliebter vollautomatischer Plattenspieler im Einsteigerbereich. Sein automatischer Tonarm sorgt für einen schonenden Umgang mit Nadel und Platte – perfekt, wenn du ohne großen Aufwand direkt in den Vinylgenuss starten möchtest.


Weiter >>

Ein Leitfaden für Senioren: Günstige Smartphones bis 100 Euro – Unsere 4 Favoriten & Erfahrungsbericht einer maßgeschneiderten Senioren-Lösung – UPDATE 2024/25

In diesem Beitrag stellen wir dir vier günstige Smartphones vor, die aktuell (Stand Dezember 2024) für unter 100 Euro erhältlich sind. Zusätzlich teilen wir eine ganz besondere Geschichte aus dem Familienkreis: Wie wir eines dieser Geräte für die Oma meiner Verlobten eingerichtet haben, damit sie trotz ihrer Parkinson-Erkrankung gut damit zurechtkommt.


Weiter >>

Getting Started with Alfresco SDK/Development: A Beginner’s Guide to Automating File Organization with Alfresco Behaviors

Alfresco is an enterprise content management platform known for its flexibility and extensibility. One powerful way to extend its functionality is through Behaviors, which allow you to run custom logic whenever specific repository events occur. For example, you can trigger custom actions whenever nodes are created, updated, or deleted.


Weiter >>