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

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 >>

Enhancing Alfresco’s Public API (ACS): A Step-by-Step Guide to Custom Node Extensions with MIME Type Restrictions

Introduction

In today’s digital landscape, controlling and validating the types of content users can upload into systems is essential for security and data integrity. Alfresco, a leading open-source content services platform, offers a flexible public API that enables developers to create custom extensions and adapt the platform to specific organizational needs. This article provides a step-by-step guide to implementing a MIME type restriction feature in Alfresco’s Nodes API, allowing for more controlled and secure content uploads.


Weiter >>