Drücke die Tasten ◄ ► für weitere Artikel  

Responsive Webdesign mit HTML5 und CSS3 – Grundlagen

Responsive Webdesign wird gern verwechselt mit dem Design mobiler Websites. Das ist nicht völlig falsch, aber viel zu kurz gegriffen. Responsive Webdesign ist vielmehr eine Herangehensweise an die Website-Gestaltung, die theoretisch unabhängig von Geräten ist. Wer sich mit dem Thema bislang nicht beschäftigt hat, findet im Folgenden einen Einstieg.

Responsive Webdesign mit HTML5 und CSS3 – Grundlagen

Responsive Webdesign: Ein Erfordernis aus der Neuzeit der Internetnutzung

Noch vor wenigen Jahren war die Sache klar. Webdesign war Tabellenlayout, höchstens Fixed Grid, optimiert auf gängige Bildschirmauflösungen. Das lag dann je nach Zielgruppe bei 800 x 600 oder 1.024 x 768, eine Erweiterung auf 1.280 x 1.024 trauten sich die wenigsten. Das war auf eine der genannten Auflösungen fixiert und bewegte sich nicht.

Zumeist ging man vom kleinsten gemeinsamen Nenner, in der Regel 800 x 600 aus und nahm in Kauf, dass Verwender größerer Bildschirme eben unheimlich viel Whitespace rund um die eigentliche Website sehen würden. Schicke Hintergrundbilder und/oder Farben linderten den Blendeffekt etwas.

Zusätzlich erstellte man, wenn der Kunde es denn unbedingt wollte, eine mobile Website des gleichen Auftritts, zumeist mit abgespeckter Funktionalität und mindestens auf eine Subdomain ausgelagert. Schnell hatte sich die Verwendung des Buchstabens m als Subdomain durchgesetzt. Die mobilen Varianten waren in aller Regel einspaltige Layouts ohne großen grafischen Anspruch und boten nur das Nötigste.

(Foto: mrJasonWeaver / flickr.com, Lizenz: CC-BY)

Mit iPhone, iPad und vor allem Android begann das bislang einigermaßen erfolgreiche Designkonzept ins Wanken zu geraten. Allein die Vielzahl zu bedienender Bildschirmauflösungen, die bei weitem nicht mehr nur ein Minimallayout sinnvoll erscheinen lassen, will künftig mit bedienbaren Designs bestückt werden. Auch die Ansprüche an Funktionalität der Websites auf mobilen Geräten steigen. Das korrespondiert mit den Möglichkeiten der Geräte. Schon jetzt gehören die Webkit-basierten Browser auf Mobilgeräten zu den technisch fortschrittlichsten Implementationen eines Internetseitenbetrachtungsprogramms.

Was tun? Sicherlich könnte man hergehen und eine Website für Desktoprechner mit einem Fixed Grid, eine spezielle Website für iPhones, eine spezielle Website für iPads und eine generellere, minimalistische für alle anderen Mobilgeräte erstellen. Modern wäre das jedoch nicht und der Pflegeaufwand einer solchen Lösung ist sicherlich auch nicht mit jedem Budget abzufedern. Zumal, was tun wir denn, wenn sich weitere Geräte mit ganz anderen Bildschirmauflösungen am Markt durchsetzen? Pflegen wir irgendwann zehn verschiedene Spezialversionen ein und derselben Website?

(Foto: adactio / flickr.com, Lizenz: CC-BY)

Natürlich wäre das möglich, aber sinnvoll wäre es nicht. Zumal es ja mit , und Javascript Standardtechnologien gibt, die einen anderen Ansatz erlauben. Wenn wir uns jetzt noch vor Augen halten, dass die mobile Internetnutzung in etwa zwei Jahren die stationäre Internetnutzung in den Schatten gestellt haben wird, so wird klar, dass dieser andere Ansatz, der mit dem Schlagwort Responsives Webdesign bezeichnet wird, - um es mit Merkel zu sagen - alternativlos ist.

Responsives Webdesign reagiert auf den Nutzer

Responsives Webdesign bezeichnet ein Design, dass mit einem flexiblen Grid und flexiblen Inhalten auf beliebigen Endgeräten stets das beste Nutzererlebnis bietet. Das Design reagiert auf den Nutzer und dessen Anforderungen. Wie kann das erreicht werden?

Schritt 1: Weg von festen Schriftgrößen

Anstelle bisher gängiger Schriftdefinitionen über Pixelangaben wird im responsiven Design mit relativen Werten gearbeitet. Dazu ist es erforderlich, die unterschiedlichen Ausgangswerte der verschiedenen Plattformen zu kennen, um mit dem Schriftdesign so nah wie möglich an die Wunschdarstellung heran zu kommen. Identisch wird ein Design auf der Basis relativer Größen nicht werden. Davon muss man sich verabschieden.

Responsive Webdesign: Ein aufwändigeres Beispiel von Mediaqueri.es

Im responsiven Design werden Schriftgrößen, Zeilenhöhen etc. auf der Basis von % und/oder em definiert. So entspräche eine Schriftgröße von ca. 16 Pixeln 100% oder 1em. Alle anderen Werte wären entsprechend umzurechnen.

Schritt 2: Weg von festen Layout-Grids

Wie bereits erwähnt, basierten Layouts älteren Semesters auf fixe Grids, gängig war zuletzt 960px, inzwischen wird vielfach auch 1.140px propagiert. Es ist weiterhin sinnvoll, seinen Layouts eine Obergrenze mit zu geben. So vermeidet man, dass das Layout auf einem Bildschirm mit 5.000px Screenbreite vollkommen auseinander gerissen wird. Die Obergrenzendefinition, etwa über max-width: 960px, erlaubt aber die Anpassung nach unten.

Responsive Webdesign: Die Ubuntu ONE Website in unterschiedlichen Auflösungen

In gleicher Art und Weise werden alle Elemente der zu designenden Site auf ihre Maximalgrößen begrenzt und auf der Basis der Maximalgrößen auf relative Werte heruntergerechnet. Ein Element eines dreispaltigen Layouts würde so anstelle einer Pixelbreite von 300 im 960er Grid mit 20er Margins auf 31,25% definiert. Der Effekt ist klar. Das Element, etwa ein Bild wird bei jeder Bildschirmauflösung immer den gleichen Prozentanteil am Layout erhalten.

Bildern, Videos und anderen Objekten gibt man stets eine Maximalgröße von 100% mit (max-width:100%;). Für den Internet Exploder gibt es ein fertiges Script, das auch diesen Designerschreck in die Lage versetzt, so zu arbeiten.

Der geübte Designer erkennt sofort ein Problem. Bilder werden immer in voller Größe geladen, auch wenn die Anzeigegröße nur 31,25% beträgt. Da wäre es ja schöner, man hätte die Möglichkeit, entsprechend kleinere Bilder zu laden. Bei der Filamentgroup auf Github gibt es eine Javascript-Lösung, die genau das ermöglicht. Das Funktionsprinzip wird auf dieser Demoseite beschrieben. Skaliert einfach mal das Browserfenster.

Schritt 3: Media Queries

CSS Media Queries sind letztlich das Herzstück eines erfolgreichen responsiven Webdesigns. Mit dem bereits seit Jahren gebräuchlichen media-Tag, schon in der Vergangenheit stets benutzt, um ein spezielles Stylesheet für die Druckausgabe zu laden, lässt sich heutzutage die Steuerung der Anwendung bestimmter Stylesheets für bestimmte Devices sehr gut steuern.

Responsive Webdesign mit fast komplett verschiedenen Designs - auch interessant

Media Queries können mit bestimmten Features gekoppelt sehr dezidiert zum Aufruf angepasster Stylesheets genutzt werden. Es liegt in der Hand des Designers, wie weit er mit der Anpassung gehen will.

So könnte er mit dem Aufruf media=”screen and (min-width: 800px)” ein Stylesheet laden lassen, dass nur dann greift, wenn das Browserfenster des Nutzers auf mindestens 800 Pixel gezogen ist. Er könnte aber auch universeller werden und die Geräte-Breite ansprechen. Mit media=”screen and (max-device-width: 480px)” würde ein Stylesheet geladen werden können, das perfekt für Geräte agepasst ist, die eine maximale Breite von 480 Pixeln anzeigen können.

Auf folgende Features kann mittels Media Queries zugegriffen werden:

  • width / height
  • device-width / device-height
  • aspect-ratio / device-aspect-ratio
  • color-index / color
  • orientation
  • resolution
  • scan
  • grid

Media Queries werden von allen modernen Browsern nativ unterstützt. Alten Gurken macht ihr mit dem CSS3-Mediaqueries.JS von Entwickler van der Graaf Beine.

Natürlich könnte man das Thema nun in allen Bereichen vertiefen. Ich hoffe jedoch, interessierten Neueinsteigern ins einen groben Überblick über die wichtigsten Themen und Erfordernisse auf dem Weg zu einem Webdesign, das geräteunabhängig funktioniert, gegeben zu haben.

Auf der Website Mediaqueri.es findet ihr übrigens einiges an Inspiration. Mediaqueri.es ist ein Showcase für Websites, die Media Queries einsetzen und stellt eine bunte Vielfalt davon in ihren unterschiedlichen Anpassungen vor.

Wie sieht es bei euch aus? Schon mal den Einstieg gewagt? Wenn nein, warum nicht? Wann geht´s los?

Weiterführende Links zum Thema Responsive Webdesign:

Und mehr zu CSS und HTML5:

339 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
51 Antworten
  1. von zapp am 06.10.2011 (16:34Uhr)

    Find ich nach wie vor eine gute Sache. Leider steigt damit der Aufwand erheblich. Nicht nur auf Seite der Entwicklung (Das kann man gut in den Griff bekommen), sondern vor allem auch bei der Redaktion. Diejenigen die die Inhalte verwalten müssen in der Lage sein "responsive" zu denken und das ist einfach noch wenig verbreitet.

    Ich glaube aber nach wie vor das im Responsive Web Design die Zukunft liegt. Das habe ich aber schon vor 2 Jahren gesagt, inzwischen hat sich viel getan, aber vom Mainstream ist es immer noch weit entfernt.

  2. von Responsive Webdesign mit HTML5 und CSS3… am 06.10.2011 (18:09Uhr)

    [...] Weiterlesen bei t3n >> [...]

  3. von Responsive Webdesign mit HTML5 und CSS3… am 07.10.2011 (03:08Uhr)

    [...] Responsive Webdesign mit HTML5 und CSS3 – Grundlagen » t3n News [...]

  4. von Responsive Webdesign mit HTML5 und CSS3… am 07.10.2011 (20:01Uhr)

    [...] Responsive Webdesign mit HTML5 und CSS3 - Grundlagen Responsive Webdesign wird gern verwechselt mit dem Design mobiler Websites. Das ist nicht völlig falsch, aber viel zu kurz gegriffen. Source: t3n.de [...]

  5. von Frank am 08.10.2011 (09:02Uhr)

    Das alles ist schön und gut, vom technischen Standpunkt aus gesehen - die Realität sieht aber anders aus, sofern man nicht für große Firmen tätig ist, die sich diesen Mehraufwand leisten können - der Handwerker, der eine neue Website braucht, kann dies sicher nicht ( und wahrscheinlich benötigt dieser das auch nicht ).

    Somit - schön, dass es so etwas gibt, aber derzeit einfach vollkommen, sagen wir mal, unrealistisch.

  6. von » Wie baut man eine richtige eigen… am 12.10.2011 (11:58Uhr)

    [...] wäre da noch die Sache mit dem Webdesign (ich habe hier schon ein paar Tipps gefunden). Ich muss die Webseite natürlich auch irgendwie programmieren und dann optisch gestalten. Kann [...]

  7. von Responsive Webdesign kann er auch, der W… am 21.10.2011 (21:00Uhr)

    [...] im responsive Webdesign. Wer sich einen Überblick über die Grundlagen verschaffen will, sollte diesen t3n-Beitrag [...]

  8. von Responsive Webdesign kann er auch, der W… am 21.10.2011 (21:00Uhr)

    [...] im responsive Webdesign. Wer sich einen Überblick über die Grundlagen verschaffen will, sollte diesen t3n-Beitrag [...]

  9. von Linkhub – Woche 41-2011 am 25.10.2011 (13:01Uhr)

    [...] Responsive Webdesign mit HTML5 und CSS3 – Grundlagen » t3n News [...]

  10. von HTML5: Eigene Attribute für Elemente er… am 26.10.2011 (14:34Uhr)

    [...] Bereich des Responsive Webdesigns werden Data-Dashs eingesetzt, um für ein Bild zwei unterschiedliche Quelldateien anzugeben. Dabei [...]

  11. von Lesestoff von 30. September 2011 bis 3.… am 03.11.2011 (08:05Uhr)

    [...] Responsive Webdesign mit HTML5 und CSS3 – Grundlagen » t3n News: Lesenswerte Einführung in das Responsive Webdesign: Wie baut man Webseiten so, dass sie sich optimal dem Gerät des Nutzers anpassen können? [...]

  12. von Joomla – Content Management leicht… am 05.11.2011 (10:43Uhr)

    [...] Hilfreiches, um Ihre Entscheidung für Joomla als Ihr Content Management System zu treffen. Bei Joomla handelt es sich um ein kostenlos zugängiges Content Management System, das durch seine e... repräsentieren, und dafür weder viel Geld noch viel Zeit investieren wollen oder können, dann [...]

  13. von Feedback-System Tweedback für Präsenta… am 05.11.2011 (14:55Uhr)

    [...] wurde mit Hilfe von Media-Querys des CSS-3-„Standards“ ein sich selbst anpassendes Layout („Responsive Webdesign“) gewählt.Alles andere folgt streng den Empfehlungen und Vorgaben des Frameworks.Funktionsweise [...]

  14. von Responsive Web Design - eine Sammlung vo… am 13.11.2011 (17:30Uhr)

    [...] Zitat stammt – als guter Einstieg zu empfehlen. Gleiches gilt für den tn3 Artikel “Responsive Webdesign mit HTML5 und CSS3 – Grundlagen“. Als weiterführende und tiefgreifendere Lektüre muss auch Ethan Marcottes Buch [...]

  15. von iPhone Develeoper Conference – Das… am 21.11.2011 (15:41Uhr)

    [...] Responsive Webdesign mit HTML5 und CSS3 – Grundlagen [...]

  16. von Die besten responsiven WordPress Themes… am 29.11.2011 (14:44Uhr)

    [...] verständlichen Text zum responsiven Webdesign mit HTML und CSS3 findet man auf tn3.de unter “Responsive Webdesign mit HTML5 und CSS3 – Grundlagen” von denen ich auch das obige Zitat entliehen [...]

  17. von Webkrauts » Mobile Usability – G… am 07.12.2011 (08:01Uhr)

    [...] Stattdessen wäre es sinnvoll, sich mit CSS Media Queries und den Techniken und Möglichkeiten des Responsive Webdesigns zu befassen. – Dazu kommt in einem der nächsten Türchen dieses Adventskalenders ein [...]

  18. von joocom Technologie Blog» Blog Arch… am 09.12.2011 (13:39Uhr)

    [...] Entwickeln von Websites, die sich dem Betrachter und des von ihm verwendeten Geräts anpassen -> Responsive Webdesign und hier im [...]

  19. von El Golfo Webdesign am 17.12.2011 (12:42Uhr)

    Ich schließe mich Frank an. Wenn der Erstellungs- und Wartungsaufwand zu groß wird, ist das Mehrkosten/Mehrnutzen -Verhältnis nicht positiv.

    Die meisten Unternehmen schaffen es ja noch nicht einmal, sich eine suchmaschinenoptimierte und conversionoptimierte Webseite erstellen zu lassen. Warum dann über Möglichkeiten nachdenken, die die Bedienung für 20% der Seitenbesucher angenehmer machen, wenn mit 80% der potentiellen Seitenbesucher gar nicht kommuniziert wird?

    Man sollte die Entwicklung natürlich im Auge behalten. In der Regel ist eine Anapssung für iPads mit einer Auflösung von 1.024 Pixeln für den Otto-Normalanbieter nicht nötig, wenn es sich nicht um eine starre Überbreiten-Seite oder Flash-Seite handelt. Ob man nun iPhones mit 960 Pixeln berücksichtigen sollte, sollte jedoch gut überlegt werden. Relative Schriftgrößen sind schon aus Gründen der Barrierefreiheit meiner Meinung nach sinnvoll.

  20. von Responsive Web Design « Chacun ses… am 29.12.2011 (23:46Uhr)

    [...] Yeebase media GmbH, t3n (2011): Responsive Webdesign mit HTML5 und CSS3-Grundlagen (06.10.2011) http://t3n.de/news/responsive-webdesign-html5-css3-grundlagen-335305/ • Webstandard (2011): Responsive Webdesign – Verschiedene Devices simulieren und testen [...]

  21. von Responsive Website – flexible Komp… am 30.12.2011 (10:33Uhr)

    [...] hilfreiche Informationen zum Thema findet man unter folgendem Link: http://t3n.de/news/responsive-webdesign-html5-css3-grundlagen-335305 [...]

  22. von Torsten am 09.01.2012 (17:47Uhr)

    @Frank und @El Golfo Webdesign:

    Das ist aber zu kurz gedacht. Immer mehr Benutzer browsen mit Mobilgeräten, und da muss man einfach einem Kunden klar machen, dass er diese verschreckt, wenn sie seine Seiten nicht ordentlich anschauen können. Und um den Aufwand zu minimieren, kann man ja ein entsprechendes Framework benutzen, es gibt ja schon einige brauchbare. Die 20 % Benutzer, die mit kleinen Displays surfen, werden im übrigen bald schon 40 % sein. Wollt ihr die alle unberücksichtigt lassen, indem ihr euch nicht schon jetzt auf diesen Trend einstellt?

    Und ich möchte auch mal die Behauptung aufstellen, dass einige Unternehmen nur deswegen keine suchmaschinenfreundliche, geschweige denn -optimierte Website haben, weil sie an einen unfähigen oder unwilligen Webdesigner oder Werbeagentur geraten sind.

    Gerade durch Mehrleistungen kann man sich doch von inkompetenter Konkurrenz absetzen, die schließlich oft genug dem Kunden viel Geld trotz mangelhafter Leistungen aus der Tasche zieht. Irgendwann merken es manche Kunden dann doch, und ich möchte jedenfalls keiner sein, über den dann geschimpft wird. Nein, ich glaube, überdurchschnittliche Leistungen sprechen sich mit der Zeit herum, ihr werdet weiterempfohlen und sichert euch so eure Existenz.

    Meine eigenen Websites habe ich noch nicht auf Resposive Web Design umgestellt, werde das aber in Kürze tun, wenn möglich jetzt im Januar 2012 noch.

  23. von Relaunch bei der Bremer Touristik Zentra… am 14.01.2012 (09:05Uhr)

    [...] und groß. Gerade der Text ist jedoch auf einem Smartphone kaum noch lesbar. Hier wäre ein responsives Design sinnvoll gewesen, welches den Versatz der Spalten sowie eine dynamische Anpassung der [...]

  24. von Sind GartenbloggerInnen auf der republic… am 20.01.2012 (16:07Uhr)

    [...] Responsive Web­de­sign bedeu­tet gob die Anpas­sung der Gestal­tung an die unter­schied­li­chen Aus­ga­be­sys­teme. Die Seite passt sich dem view­port des Users an, ob Desktop-Rechner oder Smart­phone, die Inhalte sind für das jewei­lige End­ge­rät ange­passt. Da die Besu­che­rIn­nen über Smart­pho­nes wei­ter zuneh­men wer­den, ein irgend­wann sowieso not­wen­di­ger Schritt. Einen guten Ein­stieg in das Thema Responsive Web­de­sign bie­tet der Arti­kel der  t3n. [...]

  25. von PR für NPO: World Vision im Social Web… am 27.01.2012 (16:45Uhr)

    [...] haben wir auch die mobile Site neu gestaltet, dieses Mal mit einem zeitgemässen responsiven Webdesign. Das bedeutet, dass unsere mobile Seite auf praktisch allen Geräten wie Smartphones, Pads oder [...]

  26. von Tobi baut sich eine Homepage – Tei… am 30.01.2012 (21:44Uhr)

    [...] Die Seite soll responsive sein, soll heißen, Engeräte unabhängig. Sie soll sich der Auflösung des Endgerätes anpassen, [...]

  27. von Was ist eigentlich responsive Webdesign?… am 05.02.2012 (13:35Uhr)

    [...] via Responsive Webdesign mit HTML5 und CSS3 – Grundlagen » t3n News. [...]

  28. von Kai am 14.02.2012 (20:51Uhr)

    Schöner Artikel und übersichtlich erklärt. Danke dafür.
    Werde das ganze demnächst auch in eigenen Projekten umsetzen!

    Grüße

  29. von Axel am 25.02.2012 (20:37Uhr)

    Sehr guter Beitrag. Danke dafür!

    Eine Liste, die vielleicht zu eurem Artikel passt: http://www.axeldittmann.de/47-responsive-wordpress-themes/

    Gruß,
    Axel

  30. von Horst jetzt auch fürs Smartphone «… am 09.03.2012 (23:02Uhr)

    [...] Responsive Webdesign [...]

  31. von Christoph am 13.03.2012 (15:35Uhr)

    Sehr guter Artikel! Frage mich wie lange es noch dauert, bis das Desging nicht nur auf Webdesign sondern auch auf den User abgestimmt wird.

  32. von Torsten am 13.03.2012 (16:59Uhr)

    @Christoph:

    So ganz verstehe ich deinen Kommentar nicht. Ein Layout, das sich den Geräten der Benutzer anpasst, steht doch eben gerade im Dienste der Benutzerfreundlichkeit.

    Aber du hast recht, wenn du meinst, dass oft nur im Hinblick auf ein knackiges Design oder die Suchmaschinenfreundlichkeit gestaltet wird. Die Bedürfnisse der Benutzer sollten natürlich in erster Linie im Vordergrund stehen. Meiner Meinung nach muss eben alles harmonisch aufeinander abgestimmt sein.

    Und da sind wir wieder bei meinem Lieblingsthema Homepage-Baukästen: In aller Regel können sie trotz hübscher Templates diese vielfältigen hohen Anforderungen nur teilweise erfüllen und ersetzen nicht die Handarbeit eines professionellen Webdesigners.

  33. von Responsive Webdesign mit CSS3 Media Quer… am 15.03.2012 (12:34Uhr)

    [...] Responsive Webdesign mit HTML5 und CSS3 – Grundlagen Guter Artikel zum Einstieg auf t3n.de [...]

  34. von Magnolia CMS 4.5: Responsive Webdesign m… am 21.03.2012 (15:58Uhr)

    [...] Responsive Webdesign mit HTML5 und CSS3 – Grundlagen – t3n News Weitere Artikel zu CMS und Responsive Webdesign Kommentare: 2 Tweets: 14 Facebook-Likes: 1 20.03.2012 Ads_BA_AD("FOOT"); [...]

  35. von Weby24 – der Blog rund ums worldwi… am 22.03.2012 (00:57Uhr)

    [...] Responsive Webdesign mit HTML5 und CSS3 – Grundlagen – t3n News [...]

  36. von Alexander Kramer am 01.04.2012 (10:40Uhr)

    Für uns momentan ein sehr wichtiges Thema. Ich glaube jetzt ist der richtige Zeitpunkt gekommen, das auch beim Kunden zu forcieren. Besonders deutlich wird das beim neuen iPad - hier wird es mit fixen Größen und Bildern in fester Größe ohnehin schwierig. Da wirkt alles schnell verwaschen und verpixelt. Wir werden hier ganz klar umdenken und uns auf Responsive Webdesign einlassen. Eine Demo-Seite werde ich nun mal erarbeiten und dann mal etwas herumspielen.

    Die Zeit ist reif :)

  37. von get4 am 05.04.2012 (10:39Uhr)

    Danke für den guten Artikel, sehr gut geschrieben und für den Einstieg wirklich passend.
    Ja nun wird es immer mehr Zeit, ich kenne auch schon einige die ihre Notebooks verkaufen und mehr zu den Pads und Smartphones gehen zum Surfen. Allerdings für mich selber nicht verständlich aber dennoch ist es der Wunsch der User es einfacher haben zu wollen. Man muss sich nur rein arbeiten und wirklich sein denken bei den Webseiten die man erstellt umdenken.

  38. von Smartsoul am 14.04.2012 (14:46Uhr)

    In jedem Fall ist das Thema hier sehr informativ und verständlich aufgearbeitet. Kompliment! Freue mich auf weitere Artikel :)

  39. von Responsive Design | Man In The Arena am 15.04.2012 (00:56Uhr)

    [...] Responsive Webdesign mit HTML5 und CSS3 – Grundlagen AKPC_IDS += "632,";Popularity: unranked [?]Be Sociable, Share! Tweet This entry was posted in design and tagged css3, Gerät, Herangehensweise, ins, Link, responsive design, responsive web, webseiten by admin. Bookmark the permalink. [...]

  40. von » Responsive Webdesign - mediendes… am 18.06.2012 (17:17Uhr)

    [...] Hier eine kurze Antwort darauf: Responsive Webdesign ist vielmehr eine Herangehensweise an die Website-Gestaltung, die theoretisch unabhängig von Geräten ist. Aus t3n: http://t3n.de/news/responsive-webdesign-html5-css3-grundlagen-335305/ [...]

  41. von Julchen am 10.08.2012 (12:10Uhr)

    Hallo zusammen,
    ich kann hier einige Meinungen gar nicht verstehen. Also ich finde man sollte in jedem Fall daraufhin arbeiten gerade den Nutzern von mobilen Endgeräten eine angepasste Oberfläche zu bieten. Die Zahl dieser Nutzer steigt täglich und da sollte man als Webseitenbetreiber mithalten.

    Unternehmen müssten es sich leisten können die eigene Seite anzupassen und für kleinere Unternehmen und Privatseiten gibt es auch ausreichend Möglichkeiten.

    Hierbei sollten die Nutzer beispielsweise auf Wordpress zurückgreifen da es hier inzwischen zahlreiche fertige Vorlagen gibt die dann auch noch an die eigenen Bedürfnisse angepasst werden können wie beispielsweise zu finden bei http://www.wpresponsive.com

    Ein Mehraufwand entsteht dabei nicht - zumindest ist es "mir" bisher nicht so ergangen und ich bin voll zufrieden - ebenso wie die Besucher meiner Seite.

    Für mich liegt die Zukunft ganz klar bei solchen Webseiten.

    lg Julia

  42. von Responsive Webdesign - Grundlagen | Resp… am 12.08.2012 (12:44Uhr)

    [...] Guter Grundlagen- und Überblick-Artikel (2011)Responsive Webdesign: Ein Erfordernis aus der Neuzeit der InternetnutzungResponsives Webdesign bezeichnet ein Design, dass mit einem flexiblen Grid und flexiblen Inhalten auf beliebigen Endgeräten stets das beste Nutzererlebnis bietet. Das Design reagiert auf den Nutzer und dessen Anforderungen.  [...]

  43. von Responsive Webdesign « Market-Sale… am 11.09.2012 (21:00Uhr)

    [...] http://t3n.de/news/responsive-webdesign-html5-css3-grundlagen-335305/ 0.000000 0.000000 Gefällt mir:Gefällt mirSei der Erste dem dies gefällt. Kategorien:E-Commerce Schlagworte: E-Commerce, Marketing Kommentare (0) Trackbacks (0) Hinterlasse einen Kommentar Trackback [...]

  44. von 10 kostenlose WordPress-Themes für Resp… am 25.09.2012 (15:24Uhr)

    [...] Responsive Webdesign mit HTML5 und CSS3 – Grundlagen - t3n News [...]

  45. von Responsive Design – Eine Linkliste | B… am 15.10.2012 (17:19Uhr)

    [...] Responsive Webdesign mit HTML5 und CSS3 – Grundlagen Allein die Vielzahl zu bedienender Bildschirmauflösungen, die bei weitem nicht mehr nur ein Minimallayout sinnvoll erscheinen lassen, will künftig mit bedienbaren Designs bestückt werden. Auch die Ansprüche an Funktionalität der Websites auf mobilen Geräten steigen. Das korrespondiert mit den Möglichkeiten der Geräte. [...]

  46. von Responsive Webdesign: Wissenswertes | E-… am 13.12.2012 (07:00Uhr)

    [...] erhöht, sondern auch für ein stimmiges Bild auf verschiedenen Anzeigemedien sorgt. Über Stylesheets und Media Queries können die einzelnen Elemente untereinander so geordnet und in ihren potentiellen Größen [...]

  47. von Inside Appexam: Jetzt noch einfacher App… am 28.12.2012 (10:52Uhr)

    [...] besser zum Content bringen, und vor allem die bislang hässliche mobile Lösung zeitgemäßer mit Responsive Webdesign [...]

  48. von Bootstrap, Mediaqueries und lte IE8 | el… am 03.11.2013 (14:50Uhr)

    […] Framework Bootstrap entwickelt und rausgehauen. Alles inklusive, Buttons, Formulare und auch ein responsive CSS. Da ich gerade ein Redesign von meinem Portfolio mache, dachte ich, probier das doch mal aus. Und […]

  49. von Responsive Webdesign kommt Barrierefreih… am 05.11.2013 (16:30Uhr)

    […] Ein Begriff ist in aller Munde: Responsive Webdesign. Die grafische Aufbau von Websites ändert sich dabei abhängig vom verwendeten Endgerät dynamisch, so dass eine optimale Darstellung gewährleistet ist. Das betrifft z.B. die Anordnung von Elementen oder den Textfluss. Technische Basis sind Web-Standards wie HTML5, CSS3 oder Javascript. Der Ansatz des Reponsive Webdesign, das nicht zuletzt durch die zunehmende Verbreitung von Smartphones und Tablet-Computern Auftrieb erfahren hat, kommt auch den Anforderungen der Barrierefreiheit entgegen. Beispielsweise arbeiten NutzerInnen mit Sehschwierigkeiten mit Zoomfunktionen oder stellen eine niedrige Bildschirmauflösung ein, um einen Vergrößerungseffekt zu erreichen. Wichtig ist dabei, dass sich Elemente nicht überlagern und Texte vernünftig umbrechen. Bei Websites mit statischem Design müssen die NutzerInnen mühsam horizontal scrollen, was das Lesen erheblich erschwert. Mit dem Responsive Design Viewer lässt sich die Darstellung von Websites auf verschiedenen Endgeräten simulieren. Responsive Design Viewer Grundlagen zum Thema Responsive Design mit HTML5 und CSS3 […]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren... ... » weiterlesen

t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]

Du willst in die Webentwicklung einsteigen und HTML5, CSS3 und JavaScript lernen? Das etwas andere Fachbuch „Schrödinger lernt HTML5, CSS3 und JavaScript“ vermittelt mit Witz die Theorie und... » weiterlesen

t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3
t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3

Heute startet auf t3n.de eine neue Serie, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren.... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen