Responsive Webdesign – die Basics

29. August 2011, von Jürgen

Responsive Webdesign zählt definitiv zu den heißesten und spannendsten Themen des Jahres 2011. In diesem Artikel habe ich ein paar Gedanken, Denkanstöße und Erfahrungswerte für euch zusammen gefasst.

Was bedeutet Responsive Webdesign eigentlich?

Responsive Webdesign basiert auf fluid Grids und flexiblen Layouts (Dazu später). Das Layout passt sich an die verfügbare Bildschirmauflösung an, positioniert den Content dementsprechend und skaliert Texte, Bilder, Slider und Videos mit. Das Webdesign reagiert also auf die Gegebenheiten des Endgeräts und liefert ein dementsprechend angepasstes Layout aus. Richtig eingeschlagen hat das Thema erst durch die Implementierung und Unterstützung von CSS3 Media Queries. Mit Hilfe von Media Queries können Parameter wie zum Beispiel die Auflösung des Endgeräts oder dessen Orientierung bestimmt (mehr zu den Features von Media Queries) werden. Auf Basis dieser Informationen kann dem Endgerät spezifischer CSS-Code ausgeliefert werden, der ein Layout erzeugt, das auf die Gegebenheiten abgestimmt ist.

Gelungene Beispiele für Responsive Webdesign




Und warum das Ganze?

In den letzten Jahren haben sich zwei Trends stark hervorgehoben, die für uns Webdesigner immer wieder neue Herausforderungen darstellen. Zum Einen werden die Auflösungen der Desktop Monitore immer größer, sodass wir in einigen Fällen schon mit einer Content-Breite von 1280px arbeiten. Andererseits nimmt aber auch die Internetnutzung auf mobilen Endgeräten sowie die Vielfalt der Bildschirmauflösungen zu. Alleine bei mobilen Endgeräten reicht die Bandbreite möglicher Bildschirmauflösungen von 240 x 320 Pixel bis 1024 x 600 (oder 768) Pixel. Es liegt also auf der Hand, dass eine Website auf einem 1920 x 1080 Pixel Monitor anders aussehen wird, als auf einem älteren 240 x 320 Pixel Endgerät oder einem iPad 2, das mit einer Auflösung von 1024 x 768 Pixel arbeitet. Ein Begriff, der mir dabei immer wieder in den Sinn kommt: Chaos! Responsive Webdesign versucht, Ordnung in das Konvolut aus Geräten und Bildschirmauflösungen zu bringen, ohne eine Website dabei auf bestimmte Geräte zu optimieren. So könnten hochauflösende Desktop Monitore beispielsweise mit einem 4-spaltigen Content-Layout bedient werden, während der Content für mobile Endgeräte in 1- oder 2-spaltige Layouts verpackt wird. Idealerweise wird damit eine Website für möglichst viele Endgeräte zugänglich gemacht und vermittelt das Gefühl einer nativen Applikation, ohne eigenes auf ein spezifisches Endgerät optimiert zu sein. Klingt sinnvoll, oder?

Worauf ist bei der Umsetzung von Responsive Webdesigns zu achten?

Konsistenz – schlüssiges Design, das sich durch alle Auflösungen durchzieht

Ein entscheidender Faktor für gut umgesetztes Responsive Webdesign mittels Media Queries ist vor allem die Wiedererkennbarkeit und Konsistenz des Designs. Es liegt auf der Hand, dass aufgrund der unterschiedlichen Bildschirmgrößen das Layout und die Anordnung des Contents, von Auflösung zu Auflösung anders dargestellt werden muss. Zentrale Elemente wie zum Beispiel Logos und Farbwelten sollten aber möglichst konsistent bleiben. Idealerweise findet sich der User im Desktop Interface genauso zurecht, wie auch in den mobilen Versionen, ohne dabei den Aufbau sowie das Navigations- und Contentschema neu erlernen zu müssen.

Mobile und Portable Endgeräte verhalten sich anders

Anders als bei Desktop Interfaces gibt es bei mobilen und portablen Versionen einer Website keinen Maus-Cursor, keine Hover-States und auch keine Dropdown-Submenüs. Was bedeutet das für das Interface Design? Navigationselemente, sollten sehr gut als solche erkennbar sein und auch wirklich als Schaltflächen verstanden werden. Wichtig ist hier, dass die Textgröße hinauf skaliert wird, die Größe der Schaltfläche großzügig bemessen ist und dem gesamten Element genug Space gegeben wird. Schließlich navigieren wir ja nicht mit der Maus, sondern zumeist mit dem Finger und wollen das Betrachten einer Website nicht als Geschicklichkeits-Übung erleben. Textlinks sollten sich klar vom Text unterscheiden.

Navigationsdesign

Der Erfolg einer Website steht und fällt oftmals mit dem Navigationskonzept und –design. Dies gilt natürlich auch für den Responsive Webdesign Ansatz. Allerdings werden wir hier vor zusätzliche Herausforderungen gestellt, denn auf mobilen und portablen Endgeräten ist das Userverhalten nunmal anders, als am Desktop. Wie können Navigationen vom Desktop Interfaces auf mobile Interfaces übertragen werden? Wie werden Elemente der Hauptnavigation angeordnet, wie geht man mit Navigationselementen auf 2. oder 3.Ebene um? Wie bildet man Dropdown-Navigationen ab? Fragen, die gut überlegt sein müssen und nicht selten ausgeklügelte Lösungen erfordern. Ellen hat sich speziell dem Thema „Webseiten Navigationen im responsive Webdesign“ gewidmet, diesen Artikel kann ich euch nur empfehlen.

Bei Five Simple Steps wurde die Navigation so gelöst, dass mobilen Usern bei geringerer Bildschirmauflösung eine Dropdown Box zur Verfügung gestellt wird.

Datenmenge

Gerade bei mobilen und portablen Endgeräten zählt oftmals jedes KB an Datenmenge, das geladen werden muss. Aus dem Grund sollte man einmal mehr auf einen schlanken, semantischen Quellcode achten. Wer glaubt, bei mobilen Varianten die Menge der geladenen Daten mit Display: none zu reduzieren, der sollte aufpassen. Mit Display: none werden divs und andere Elemente zwar ausgeblendet, allerdings werden die dahinter liegenden Daten trotzdem geladen.

Zusätzlicher Aufwand

Responsive Webdesign bietet zahlreiche Vorteile und Möglichkeiten vor allem in Hinblick auf die wachsende mobile Internetnutzung. Mit einem Webdesign, das responsive reagiert, müssen User, die mobil surfen nicht mehr abgefangen und auf eigene Domains umgeleitet werden. Fakt ist aber auch, dass es zusätzlichen Aufwand bedeutet, eine Website responsive zu gestalten. Der Zusatzaufwand zieht sich durch alle Bereiche und Stadien der Entstehung einer Website. Konzeptionell muss angedacht werden, wie Desktop und mobile Versionen aussehen und funktionieren werden. Mockups werden erstellt; davon abgeleitet wird ein Design entwickelt, das wie oben beschrieben, unterschiedlichen Anforderungen standhalten muss. Im nächsten Schritt findet das CSS-Coding und HTML-Templating statt. Auch hier muss mit zusätzlichem CSS-Coding Aufwand gerechnet werden. Schlussendlich muss das Design natürlich getestet werden. Auch hier ist mit zusätzlichem Zeitaufwand zu rechnen, da das Design und Verhalten in möglichst vielen Geräten und Bildschirmauflösungen untersucht werden sollte. Eine Website lässt sich also nicht im Spaziergang responsive machen. Zu Beginn eines Projekts sollte daher gut abgewogen werden, ob der Responsive Webdesign Ansatz für dieses spezifische Projekt Sinn macht und die richtige Kosten-Nutzen-Lösung darstellt.

Tools & Plugins, die das Arbeiten mit Responsive Webdesign erleichtern

Grids

Mit dem Golden Grid System lassen sich flexible Grids für Auflösungen von 240 Pixel bis 2560 Pixel erzeugen.

Tiny Fluid Grid ist ein hilfreiches Framework, mit dem ihr ebenfalls flexible Grids erzeugen könnt.

Text & Tabellen

Um Textinhalte flexibel zu halten, empfiehlt es sich, die Schriftgröße nicht in absoluten Pixelwerten, sondern in relativen EM Angaben festzulegen. Für die Umrechung von Pixel in EM gibt es hier einen hilfreichen EM Converter. Chris Coyier beschäftigt sich intensiver mit Tabellen und Datensheets und liefert Lösungsvorschläge für die tabellarische Darstellung von Daten im responsive Webdesign.
Das FitText jQuery Plugin aus dem Hause Paravel passt die Schriftgröße von Überschriften flexible an die gegebene Bildschirmauflösung an. Dieses Plugin ist für die Skalierung von Headlines gedacht und sollte auch wirklich nur dafür genutzt werden.

Bilder, Videos, Slider

Im Responsive Webdesign wird natürlich auch die optimale Skalierung und Auslieferung von Bildern ganz groß geschrieben. Responsive Images bietet eine schöne Möglichkeit, Bilder via JavaScript an die entsprechende Bildschirmauflösung anzupassen und für das Endgerät optimiert auszuliefern. Auch für flexible Videos gibt es auf der Web Designer Wall einen Beitrag, der uns zeigt, wie nicht nur HTML5 Videos, sondern auch Iframe Embedded Videos mit Hilfe von CSS elastisch gemacht werden können.
Slider sind momentan aus dem Webdesign kaum noch wegzudenken. Auch für Responsive Webdesign gibt es hier mit dem Flexslider jQuery Plugin eine sehr schöne, semantische Lösung, um Slider und Sliderinhalte mitzuskalieren und an die gegebene Bildschirmauflösung anzupassen.

Testing

Beim Testen von Responsive Webdesigns in unterschiedlichen Bildschirmauflösungen kann ein Tool wie Screenfly unter die Arme greifen.

Fazit

Eine Website responsive zu gestalten ist definitiv ein Trend, der langsam aber sicher auch in unseren Breitengraden aufgegriffen und angenommen wird. Schön, wie ich finde. Nachdem ich täglich auf mobilen Endgeräten Websites ansurfe, habe ich den Komfort und die Eleganz von gutem Responsive Design sehr schnell zu schätzen gelernt. In Hinblick auf Accessability, Usability und Reichweite hat der Responsive Webdesign Ansatz großes Potential, muss aber gut überlegt, durchdacht und abgewogen werden. Responsive Webdesign ist zwar seit einiger Zeit ein heißbegehrtes Thema, muss aber nicht automatisch der richtige Lösungsansatz für jedes Projekt sein.
Wie sind eure Erfahrungen mit Responsive Webdesign? Kennt ihr schöne Beispiele, vielleicht sogar aus Österreich?

Jürgen

Meine Rolle bei Liechtenecker: - Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: - Mein Herz schlägt für: -
80 Kommentare.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
15. Juni 2020 um 23:29

Nice Blog Post. Thanks For Sharing this informative post.
MagicJack uses the internet connection for allowing you to make calls on this.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
29. Januar 2020 um 07:31

We are one of the renowned and most reliable yahoo customer service providers in the world with thousands of satisfied customers from countries like the United States, Canada, and UK. Our 24×7 yahoo customer service Help and support has earned enormous popularity in the last few years. You can contact us anytime, our technicians love to help you, our site provides the best yahoo mail support number.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
29. Januar 2020 um 07:28

if you are facing any kind of problem while changing your aol password, you can simply visit to our blog in which we have listed very simple steps to change AOL password, our blog will help you to reset aol password very easily. There you can also learn how to recover aol password from your mobile, or you can call on our helpline number

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
21. Februar 2019 um 14:19

Hi Juergen, danke für deinen tollen Artikel! Finde es super interessant deine Meinung von vor 8 Jahren zu hören und jetzt zu sehen wie sich das Internet weiterentwickelt hat. Auch die praktischen Tools sind eine tolle Idee!
Ich habe selber einen Ratgeber für Unternehmer zu Thema Responsive Webdesign geschrieben. Ich würde mich freuen wenn du Zeit findest um dir die Seite anzuschauen: https://foldfocus.com/responsive-webdesign

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
KFZ
26. Januar 2016 um 20:14

Sehr guter Artikel mit tollen Infos, vielen dank, so bin ich angekommen auf ein Relaunch.
LG aus St. Pölten

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
10. November 2013 um 10:14

Eine sehr schöne Zusammenstellung wesentlicher Merkmale.
Wir haben uns darauf spezialisiert, bei Eignung vorhandene Webseiten nachträglich responsive umzuschreiben. Das lohnt sich vor allem für Betreiber umfangreicher Seiten sehr.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
23. Mai 2013 um 22:26

@Selmann Thomas Du hast vollkommen recht! Ich bin immer genervt, wenn ich eine nicht-optimierte Seite auf meinem iPhone öffne :/

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
23. Mai 2013 um 22:26

@Selmann Thomas Du hast vollkommen recht! Ich bin immer genervt, wenn ich eine nicht-optimierte Seite auf meinem iPhone öffne :/

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Jürgen
23. April 2013 um 17:24

Responsive Webdesign zieht sich auch in andere Bereiche, zum Beispiel Newsletter:
https://liechtenecker.at/mehrspaltige-responsive-newsletter-templates-auch-fur-outlook/

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Jürgen
23. April 2013 um 17:24

Responsive Webdesign zieht sich auch in andere Bereiche, zum Beispiel Newsletter:
https://liechtenecker.at/mehrspaltige-responsive-newsletter-templates-auch-fur-outlook/

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Selmann Thomas
20. März 2013 um 18:18

Responsive Webdesign ist heute keine Kür mehr, sondern sollte fixer Bestandteil einer Webstrategie sein. Toll, dass ihr schon vor 2 jahren damit angefangen habt

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Selmann Thomas
20. März 2013 um 18:18

Responsive Webdesign ist heute keine Kür mehr, sondern sollte fixer Bestandteil einer Webstrategie sein. Toll, dass ihr schon vor 2 jahren damit angefangen habt

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Franziska
17. Dezember 2012 um 09:36

Vielen lieben Dank für die echt tolle, kurze und verständliche Zusammenfassung. Das Thema ist echt spannend und auch endlich mal eine neue Herausforderung für Grafiker 🙂

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Franziska
17. Dezember 2012 um 09:36

Vielen lieben Dank für die echt tolle, kurze und verständliche Zusammenfassung. Das Thema ist echt spannend und auch endlich mal eine neue Herausforderung für Grafiker 🙂

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
13. November 2012 um 02:13

Konziser Artikel zu einem Thema von dem ich als gstandener Grafiker bis heute noch nichts gehört habe – einer unserer Programmierer hat’s mir über den Tischfussballtisch erzählt 😉

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
admin
25. Oktober 2012 um 13:24

Responsive Webdesign ist schon lange kein Trend mehr. Es ist zum Standard geworden und sollte nicht mehr als „Riesen“ Besonderheit verkauft werden. Ein neues Webprojekt, welches nicht repsonsive gestaltet ist, ist unprofessionell, auch bei kleineren Budgets.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
admin
25. Oktober 2012 um 13:24

Responsive Webdesign ist schon lange kein Trend mehr. Es ist zum Standard geworden und sollte nicht mehr als „Riesen“ Besonderheit verkauft werden. Ein neues Webprojekt, welches nicht repsonsive gestaltet ist, ist unprofessionell, auch bei kleineren Budgets.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
24. Oktober 2012 um 17:42

Ein sehr schöner Beitrag. Ich persönlich arbeite ja sehr gerne mit dem Foundation 3 Framework – das gute ist hier, dass viele Features direkt einsetzbar sind und man dafür nicht unbedingt neue Scripte einfügen muss. Vielleicht solltest du auch noch Twitter Bootstrap erwähnen, was mittlerweile auch einen hohen Stellenwert hat.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
24. Oktober 2012 um 17:42

Ein sehr schöner Beitrag. Ich persönlich arbeite ja sehr gerne mit dem Foundation 3 Framework – das gute ist hier, dass viele Features direkt einsetzbar sind und man dafür nicht unbedingt neue Scripte einfügen muss. Vielleicht solltest du auch noch Twitter Bootstrap erwähnen, was mittlerweile auch einen hohen Stellenwert hat.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Thomas
8. September 2012 um 11:19

Sehr lesenswerter Artikel!
Ich werde mich mit diesem Thema ab nun ein wenig mehr auseinandersetzen und meine bestehende Website dem responsive design anpassen.
Ich frage mich allerdings, warum Internetriesen wie zum Beispiel Facebook, Twitter oder Youtube kein responsive design nutzen. Klar sie haben Apps. Aber nicht jeder hat alle Apps auf seinem Smartphone/Tablet installiert.
Was meint ihr?

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Thomas
8. September 2012 um 11:19

Sehr lesenswerter Artikel!
Ich werde mich mit diesem Thema ab nun ein wenig mehr auseinandersetzen und meine bestehende Website dem responsive design anpassen.
Ich frage mich allerdings, warum Internetriesen wie zum Beispiel Facebook, Twitter oder Youtube kein responsive design nutzen. Klar sie haben Apps. Aber nicht jeder hat alle Apps auf seinem Smartphone/Tablet installiert.
Was meint ihr?

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
6. Mai 2012 um 16:58

Netter Artikel, aber der stammt wohl aus der Feder eines Ghostwriters, oder?

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
    admin
    7. Mai 2012 um 12:08

    Danke für das Kompliment! zu deiner Frage: Der Artikel kommt zu 100% von der Agentur Liechtenecker, kein Ghostwriter oder ähnliches.

6. Mai 2012 um 16:58

Netter Artikel, aber der stammt wohl aus der Feder eines Ghostwriters, oder?

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
    admin
    7. Mai 2012 um 12:08

    Danke für das Kompliment! zu deiner Frage: Der Artikel kommt zu 100% von der Agentur Liechtenecker, kein Ghostwriter oder ähnliches.

Pat
21. März 2012 um 10:27

Super Beitrag! Jetzt bitte noch 1 + 1 zusammen zählen und einen Beitrag über Responsive Webdesign und Formulare schreiben. Hier gibt es super viele Fehlerquellen und es gibt eine Menge an Fragen die beantwortet werden wollen. (z.B. Multi-Column Formen > Sollten sich bspw. Inputfelder irgendwann untereinander schieben statt weiter runter skaliert zu werden?)
Gruß,
Pat

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Axel
25. Februar 2012 um 21:41

Ein toller Beitrag! Vielleicht gefällt dir ja auch diese Liste zum Thema Responsive WordPress Themse: http://www.axeldittmann.de/47-responsive-wordpress-themes/

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Axel
25. Februar 2012 um 21:41

Ein toller Beitrag! Vielleicht gefällt dir ja auch diese Liste zum Thema Responsive WordPress Themse: http://www.axeldittmann.de/47-responsive-wordpress-themes/

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
19. Dezember 2011 um 17:09

Sehr gut recherchiert und erklärt. Nun hat das Kind auch endlich einen Namen. Gerade der Teil mit den Tools ist ein wahrer Segen. Danke für die Infos.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
17. November 2011 um 22:07

Hallo Ines. Schöner Artikel! Es stellt sich nur die Frage was ist wenn Handys mit 4 Zoll Display schon Auflösungen von 1024 oder 1280 schaffen? Dann geht diese Lösung ja nicht mehr oder? Vielleicht hat das IPhone 5 schon 2000 Pixel.. was meinst du dazu?

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
17. November 2011 um 22:07

Hallo Ines. Schöner Artikel! Es stellt sich nur die Frage was ist wenn Handys mit 4 Zoll Display schon Auflösungen von 1024 oder 1280 schaffen? Dann geht diese Lösung ja nicht mehr oder? Vielleicht hat das IPhone 5 schon 2000 Pixel.. was meinst du dazu?

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
18. Oktober 2011 um 13:31

Sehr guter Artikel mit tollen Infos und weiterführenden Links.
Vielen Dank dafür!
Ich selbst verwende auch oft mein Smartphone und hab mich schon durch einige Webseiten gequält, die nicht für kleine Auflösungen und Bildschirme optimiert wurden.
In meinem WordPress-Blog verwende ich ein Plugin für die Ansicht auf mobilen Geräten. Dies ist aber bisweilen nur eine Notlösung. Mit dem Thema Responsive Webdesign werde ich mich noch ausführlich beschäftigen und mich anschließend auch mal dran versuchen 😉
Grüßle, X

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
18. Oktober 2011 um 13:31

Sehr guter Artikel mit tollen Infos und weiterführenden Links.
Vielen Dank dafür!
Ich selbst verwende auch oft mein Smartphone und hab mich schon durch einige Webseiten gequält, die nicht für kleine Auflösungen und Bildschirme optimiert wurden.
In meinem WordPress-Blog verwende ich ein Plugin für die Ansicht auf mobilen Geräten. Dies ist aber bisweilen nur eine Notlösung. Mit dem Thema Responsive Webdesign werde ich mich noch ausführlich beschäftigen und mich anschließend auch mal dran versuchen 😉
Grüßle, X

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
18. Oktober 2011 um 08:57

toller Artikel! Wisst ihr vielleicht wie das CSS für einen responsive iframe (für zum Beispiel eine Google Maps Karte) oder auch eine swf-Datei aussieht?
Die breite ist kein Problem, das kann man mit max-width: 100%; machen, aber die Höhe??
Mit height: auto; wie bei Bildern funktioniert das nämlich nicht.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
18. Oktober 2011 um 08:57

toller Artikel! Wisst ihr vielleicht wie das CSS für einen responsive iframe (für zum Beispiel eine Google Maps Karte) oder auch eine swf-Datei aussieht?
Die breite ist kein Problem, das kann man mit max-width: 100%; machen, aber die Höhe??
Mit height: auto; wie bei Bildern funktioniert das nämlich nicht.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Gerhard M.
19. September 2011 um 17:25

Hallo,
kennt jemand ein ein System, wie z.B.: Golden Grid System als WordPress Plugin? Ist so-etwas überhaupt denkbar?
Seid bitte gnädig mit mir, bin Webdesign Anfänger; danke vorab
Gerhard

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
    11. Oktober 2011 um 11:59

    @Gerhard M. – Das golden Grid-System kann nicht als Plugin genutzt werden. WordPress akzeptiert nur style.css als Stylesheet, allerdings kannst du weitere Stylesheets per @import direkt in deine Style.css importieren und so auch das Golden Grid System ohne Probleme nutzen.
    lg Thomas S.

    1. Juni 2012 um 09:26

    Eine weitere Möglichkeit eigene/weitere Stylesheets in einem WordPress-Theme einzubinden ist die WordPress-Funktion http://codex.wordpress.org/Function_Reference/wp_enqueue_style.

19. September 2011 um 17:12

Leiwander Artikel – werde ich mir ansehen.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
4. September 2011 um 18:01

Linktipp: Diese Library hilft bei kleineren Displays, kleinere Bilder (mit weniger Datenmenge -> nicht runterskalierte) auszuliefern.
http://adaptive-images.com/

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Martin Hufnagl
30. August 2011 um 09:58

Sehr guter, aktueller Artikel. Danke Ines.
@Holger: Lösungen für Datenmenge Mobil:
320 and up – A ‘tiny screen first’ boilerplate extension
http://stuffandnonsense.co.uk/projects/320andup/

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Ines
30. August 2011 um 09:52

Danke Martin für deinen hilfreichen Input! Der “Mobile First” Ansatz ist in Hinblick auf diese Problematik auch sehr spannend. http://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Martin
30. August 2011 um 08:02

Holger, du kannst zB nicht erwünschte Daten dort wo sie erwünscht sind per „modernerer“ Techologien nachladen, zb Jacascript/DOM. Alte Browser, die das nicht verstehen, reagieren gar nicht (zB Uralt-Mini-Mobil-Browser) und laden das Zeug nicht. Die modernen verstehen es wieder und da kannst du dann definieren, wo es geladen werden soll.
Das würde mir mal einfallen

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Holger
29. August 2011 um 23:18

Vielen Dank für die gute Zusammenfassung über Responsive Webdesign.
Der Punkt „Datenmenge“ ist mir etwas zu kurz gekommen. Gibt es da eine Lösung für Bilder und Inhalte die ich in der mobilen Seite nicht anzeigen möchte? Brauche ich dann nicht doch wieder eine extra Seite/Domain?
Oder kennt ihr eine Seite die genauer auf die Problematik eingeht?

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Home Office, Digitalisierung und Coronavirus
Zukunft – Blogbeitrag

Die Stunde der Wahrheit: Digitalisierung in Zeiten des Coronavirus

23. März 2020, von Susanne

Vier Eckpfeiler, die durch die Coronavirus-Krise aufzeigen, wie es um die Digitalisierung eines Unternehmens steht.

Jetzt lesen
Liechtenecker Leseliste Folge #58 mit Matthias Lichtenthaler
Inspiration – Podcasts

Folge #58 mit Matthias Lichtenthaler

31. Juli 2020

In Folge 58 ist Matthias Lichtenthaler, Head of Digital Government und Innovation im Bundesrechenzentrum zu Gast. Er spricht über das Buch "Kolbe" von Andreas Kollender, das die wahre Geschichte des Spions Fritz Kolbe erzählt.

Jetzt anhören
Close