kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Mobile First + Progressive Enhancement

Das mobile Internet hat die Art und Weise wie wir Websites entwickeln grundlegend verändert. Vor einiger Zeit habe ich einen Artikel über den veränderten Workflow im Responsive Design veröffentlicht und erklärt, warum wir umdenken müssen, mit welchen Herausforderungen wir uns konfrontiert sehen und welche Lösungsansätze es gibt.
Doch nicht nur die Erstellung eines flexiblen Layouts ist wichtig. Auch die Performance-Optimierung, die Browserkompatibilität und die Informationsarchitektur sind entscheidend für den späteren Erfolg der Website.
In diesem Artikel möchte ich beschreiben, inwiefern sich die Sichtweise bei der Konzeption und Entwicklung von Websites verändert hat.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

Alles eine Frage der Sichtweise

Bei der Erstellung einer Website arbeiten wir meist aus Sicht einer ganz bestimmten Gerätekonfiguration. Die meisten Webdesigner nutzen einen großen Monitor und einen modernen Browser. Die Verlockung ist daher groß, von dieser Situation auszugehen und andere Hard- und Softwarekombinationen zu vernachlässigen. Die Kunst liegt darin, alle erdenklichen Szenarien von Beginn an zu berücksichtigen und für jedes System die optimale Lösung bereitzustellen. Das funktioniert meist nur mit regelmäßigen und möglichst frühen Tests.

Graceful Degradation

Beim Prinzip „Graceful Degradation“ wird die Website aus Sicht leistungsstarker Systeme und großer Displays entwickelt. Veraltete Browser, Tablets, Smartphones und schwache Internetverbindungen werden häufig erst im letzten Drittel des Projektverlaufs berücksichtigt. Diese Vorgehensweise gilt heute als nicht mehr zeitgemäß.

Der Workflow mit „Graceful Degradation“

Wenn man nach dem Prinzip „Graceful Degradation“ arbeitet, geht man zunächst davon aus, dass viel Performance und viel Platz zur Verfügung stehen. Man entwickelt die Website beispielsweise mit einem aufwändigen Layout und plant neueste Technologien und Effekte ein. Häufig wird als erstes die Startseite gecodet und in einem modernen Browser getestet. Sobald im modernen Browser alles funktioniert, wird die Seite auch in älteren Browsern getestet. Und hier kommt es dann – je nach Browser – zu Kompatibilitätsproblemen mit den verwendeten Technologien.

Schematische Darstellung von Graceful Degradation
Schematische Darstellung von Graceful Degradation

Um diese Probleme nun in den Griff zu bekommen, wird die Website für schwächere Systeme „abgespeckt“. Die schlimmsten Fehler werden zwar behoben, allerdings werden normalerweise nur bestimmte Browser getestet und korrigiert. Die Fehler im Internet Explorer 8 werden beispielsweise meist noch korrigiert, ein veralteter Opera-Browser wird häufig weder getestet noch berücksichtigt.

Auch die Art und Weise wie die Fehler behoben werden, kann kritisiert werden. Oft werden diverse CSS3-Eigenschaften per JavaScript nachgerüstet. Die Website funktioniert dann zwar letztendlich auch in älteren Browsern, schwache Systeme haben aber häufig starke Nachteile in der Benutzerfreundlichkeit, Barrierefreiheit und Performance.

Ein ähnliches Problem besteht auch beim Platzbedarf des Layouts. Da die Website zuerst für große Bildschirme entwickelt wird, fehlt es oft an Platz um alle Informationen auch auf dem Smartphone abzubilden. Man könnte dieses Problem lösen, indem Informationen auf dem Smartphone über display:none; ausgeblendet werden.
Bitte verwendet diese Methode nicht! Sie verhindert den uneingeschränkten Zugang zu Informationen und führt bei Besuchern, die eure Website über mehrere Geräte besuchen, zu starker Frustration.

Vorteile des Prinzips „Graceful Degradation“

  • Entspricht unserer Gewohnheit
  • Moderne Systeme werden voll ausgereizt. Neuste Technologien können eingesetzt werden

Nachteile des Prinzips „Graceful Degradation“

  • Schwache Systeme werden oft nicht oder nur schlecht berücksichtigt
  • Performance-Probleme: Schwache Systeme können überlastet werden
  • Informationen sind nicht für alle Menschen gleich zugänglich, wenn schwache Systeme und/oder kleine Displays bestraft werden. Das widerspricht der Grundidee des Internet.
  • Schwierige Erweiterung der Website. Änderungen müssen in allen schwächeren Systemen getestet und ggf. nachgerüstet werden

Progressive Enhancement

Das Prinzip „Progressive Enhancement“ verändert die Sichtweise im Vergleich zu „Graceful Degradation“ deutlich und kann zu Recht als die modernere und bessere Herangehensweise bezeichnet werden. Neu ist „Progressive Enhancement“ allerdings nicht.

Bei „Progressive Enhancement“ steht der Inhalt der Website im Vordergrund. Die Darstellung der Seite, die Browserkompatibilität und die Anpassung für verschiedene Displaygrößen werden erst später berücksichtigt. Das Prinzip hat also größere inhaltliche und konzeptionelle Anteile.

Schematische Darstellung von Progressive Enhancement
Schematische Darstellung von Progressive Enhancement

Der Workflow mit „Progressive Enhancement“

Im ersten Schritt werden die Inhalte gesammelt und strukturiert. Anschließend wird die Website entwickelt. Hierbei beginnt man allerdings mit dem schwächsten anzunehmenden System, also beispielsweise mit einem stark veralteten Internet Explorer ohne JavaScript. Wenn in dieser elementaren Version alle Informationen dargestellt werden und die Website benutzbar ist, wird das Projekt für leistungsstarke Browser erweitert. Hierbei kommen dann auch komplexere Technologien und umfangreichere Layouts zum Einsatz.

Feature Detection

Ein wichtiger Bestandteil von „Progressive Enhancement“ ist die Abfrage vorhandener Browser-Funktionen (Feature Detection). Die elementare Version der Website wird so entwickelt, dass sie auf dem schlechtesten vorstellbaren System funktioniert. Anschließend wird mit einem Script wie Modernizr geprüft, ob weitere Funktionen, z. B. JavaScript oder bestimmte CSS3-Eigenschaften, vom Browser unterstützt werden. Wenn das der Fall ist, werden diese Technologien genutzt um den Funktionsumfang und die Darstellung der Website zu verbessern.

Feature Detection mit Modernizr
Feature Detection mit Modernizr

Diese Vorgehensweise führt zwangsläufig dazu, dass eine Website nicht in allen Browsern gleich aussieht. Auch vor diesem Hintergrund ist es daher nicht mehr sinnvoll mit dem Layout der Website zu beginnen. Mehr zu diesem Thema findet ihr auch in meinem Artikel zum Workflow im Responsive Web Design.

Vorteile von „Progressive Enhancement“

  • Die Inhalte stehen im Mittelpunkt
  • Alle Informationen sind für alle Besucher zugänglich
  • Moderne Browser werden belohnt, anstatt dass veraltete Browser bestraft werden
  • Sehr gute Performance auf allen Systemen
  • Leichte Erweiterbarkeit der Website, sobald neue Funktionen in Browsern verfügbar sind

Nachteile von „Progressive Enhancement“

  • Umdenken erforderlich
  • Viele Tests sind notwendig

Mobile First + Progressive Enhancement

Das Prinzip „Mobile First“ geht nun noch einen Schritt weiter als „Progressive Enhancement“. Die Website wird im ersten Schritt nicht nur für schwache Systeme entwickelt, sondern auch für Geräte mit kleinem Display und geringer Bandbreite. Man beginnt also mit der Smartphone Version der Website. Das „Mobile First“-Prinzip hat dabei allerdings noch größere konzeptionelle Anteile als „Progressive Enhancement“.

„Mobile First“ Konzeption

Nach wie vor stehen die Inhalte der Website im Vordergrund, allerdings werden die Inhalte im Hinblick auf Smartphone-Benutzer erstellt. Da auf einem kleinen Display wenig Platz zur Verfügung steht, führt diese Herangehensweise zwangsläufig zu relevanten und präzisen Inhalten. Da für überflüssige Informationen kein Platz vorhanden ist, fallen sie zwangsläufig weg. Auch die Anzahl der Unterseiten und die Tiefe der Navigation werden auf ein Minimum reduziert, was zu übersichtlichen und leicht verständlichen Navigationsstrukturen führt.

Inhalt, Darstellung und Verhalten sollten in dieser Reihenfolge berücksichtigt werden
Inhalt, Darstellung und Verhalten sollten in dieser Reihenfolge berücksichtigt werden

Die „mobile First“ optimierten Inhalte gelten selbstverständlich für alle Geräteklassen. Geändert hat sich lediglich die Sichtweise bei der Erstellung. Die Relevanz der Informationen verändert sich aber nicht, nur weil mehr oder weniger Platz zu Verfügung steht. Im Gegenteil – auch die Desktop-Version profitiert von den prägnanten Inhalten der Smartphone-Ansicht.

„Mobile First“ Development

Sobald die Inhalte erstellt sind, wird die Website gecodet. Hierbei beginnt man allerdings sowohl mit dem kleinsten Bildschirm als auch mit dem schwächsten Browser. Gedanklich könnt ihr euch also einen uralten Internet Explorer auf dem Bildschirm eines Smartphones vorstellen. :)
Wenn diese rudimentäre Version der Website funktioniert, wird die Ansicht mit Hilfe von CSS Media Queries für größere Displays wie Tablets, Notebooks und Desktop-Computer erweitert (Mobile First Responsive Design). Gleichzeitig wird mittels „Feature Detection“ geprüft, welche Browser-Funktionen vorhanden sind, um die Seite für moderne Systeme aufzuwerten.

Umgekehrter CSS-Code bei „Mobile First“

Da beim „Mobile First“-Prinzip aus Sicht der Smartphone-Version entwickelt wird, beginnt auch der CSS-Code mit der Smartphone-Version. Erst weiter unten im Code wird das Layout mit min-width-Media Queries um die größeren Ansichten für Tablets und Computer erweitert.


  /* Code der Smartphone-Version */

@media screen and (min-width: 500px) {
  /*  Code für große Smartphones, kleine Tablets */	
}

@media screen and (min-width: 800px) {
  /*  Code für Tablets */
}

Da alle Browser den Quellcode von oben nach unten lesen, hat diese Vorgehensweise einen großen Vorteil. Schwache Systeme wie Smartphones und Tablets müssen nur den für sie relevanten Quellcode lesen, was zu sehr performanten mobilen Websites führt.

Vorteile von „Mobile First“

  • Sehr gute, prägnante Website-Inhalte
  • Optimale Darstellung auf allen Geräten
  • Bestmögliche Performance auf allen Geräten, da der Quellcode umgedreht wird
  • Unkomplizierte Erweiterbarkeit auf größere Displays
  • Unkomplizierte Erweiterbarkeit für modernere Systeme

Nachteile von „Mobile First“

  • Aufwändige Konzeption
  • Aufwändige technische Umsetzung
  • Starkes Umdenken notwendig (aus heutiger Sicht)

Links und Quellen

Vielen Dank an dieser Stelle auch an Julian Burford, für die Bereitstellung seines kostenlosen Storyboard Illustration Sets auf Dribble. Einige seiner Illustrationen habe ich in diesem Beitrag verwendet.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

22 Kommentare

  1. Jens Bayer

    Verfasst am 13. August 2013 um 13:44 Uhr.

    Hallo Jonas,

    wie immer: Excellenter Artikel, der auch einige Zusammenhänge deutlicher macht die sich in den vergangenen 1,5 Jahren immer mal wieder verschoben, oder durcheinandergewirbelt worden sind. Das ist auch mir so gegangen. Was mich etwas wundert ist Dein Meinungsumschwung. Wenn ich es richtig in Erinnerung habe: In einer Deiner letzten DVDs hast Du noch gesagt das man die Entscheidung Progressive-Enhancement oder Graceful-Degradation je nach Projekt treffen sollte. Wie kommt es zu der Meinungsänderung, wenn man sie denn so nennen will? ;)
    LG aus Salzburg – Jens

    • Jonas Hellwig

      Verfasst am 13. August 2013 um 14:43 Uhr.

      Hallo Jens,

      einen Meinungsumschwung kann ich bei mir ehrlich gesagt nicht erkennen, sicher aber eine Entwicklung hin zu mehr „Mobile First“-Denken. Diese Entwicklung sieht man ja im Moment überall, auch die großen Frameworks sind in den neuesten Versionen alle umgesprungen. Grundsätzlich bin ich nach wie vor der Meinung, dass man Konzepte, Hilfsmittel etc. immer anhand der Anforderungen eines Projekts auswählen sollte. Ich sehe da eine große Gefahr, wenn man sich zu streng an bestimmte Vorgaben hält – auch wenn diese Vorgaben vllt. den neuesten Stand der Technik abbilden. „Graceful Degradation“ und „Progressive Enhancement“ können ja grundsätzlich zum identischen Ergebnis führen, aber oft macht man es sich mit Graceful Degradation nur unnötig schwer.

  2. GréasánDev

    Verfasst am 13. August 2013 um 13:59 Uhr.

    Danke für diesen sehr informativen Artikel. Regt mich dazu an umzudenken.

  3. Lisa

    Verfasst am 13. August 2013 um 16:20 Uhr.

    Hallo Jonas,

    Ich finde den Artikel echt gut! Gerade die Weiterentwicklung von Progressive enhancement zu mobile First hast du toll beschrieben!
    Da ich mich zZ mit diesem Thema intensiv beschäftige ist mir aufgefallen, dass diesen Schritt noch keiner so gut formuliert dargestellt hat.

    Danke :)

    Liebe Grüße,
    Lisa

  4. Michael

    Verfasst am 13. August 2013 um 21:26 Uhr.

    Hallo Jonas,

    ich kann Deine Argumentation sehr gut nachvollziehen. Bisher hatte eine Webseite eine Sidebar mit mehr oder weniger sinnvollem Inhalt.

    Wenn Du „das Prinzip „Mobil first“ bei der Entwicklung als Beginn siehst, wo bleibt dann die Sidebar?

    Beste Grüße
    Michael

    • Jonas Hellwig

      Verfasst am 14. August 2013 um 0:58 Uhr.

      Hallo Michael,

      das ist völlig abhängig von den jeweiligen Informationen. Bei einem klassischen Blog-Layout rutscht die Sidebar auf dem Handy in der Regel nach unten unter den Hauptinhalt. Wenn die Sidebar allerdings Navigationsebenen enthält, sollte diese Struktur bereits hinterfragt werden. Eine Navigation gehört normalerweise über den Inhalt. Wenn die Sidebar gar keine relevanten Informationen enthält, lasse ich sie natürlich weg.

      • Markus Wienecke

        Verfasst am 14. August 2013 um 8:04 Uhr.

        Michael, bei dem „Mobile First“ Ansatz stellt sich die Frage, wo die Sidebar bleibt, nicht. Eher müste man sich fragen, ob es Inhalte gibt, die ich in der Desktop- / Tabletvariante in einer Sidebar abbilden kann, weil mir dort der entsprechende Raum zur Verfügung steht und weil die Priorisierung des Inhalts das zuließe. Überdies, wenn man „weniger sinnvolle Inhalte“ bereitstellt, sollte man sein Contentkonzept optimieren.
        Und, Jonas, weblassen sollte man die Inhalte auf keinen Fall, weil man ja dann genau an dem Punkt ist, dass man dem Mobile-User nur eine Informationsauswahl bereitstellt. Und unter der Idee des „Progressive Enhancements“ ist das ja keine Option.

        Danke, Jonas, für den Artikel und vorallem für die Quellen.

      • Jonas Hellwig

        Verfasst am 14. August 2013 um 9:12 Uhr.

        Hallo Markus,

        da hast du mich falsch verstanden. Mit „weglassen“ meinte ich natürlich „auf allen Geräten weglassen“.

  5. MichaB

    Verfasst am 14. August 2013 um 15:26 Uhr.

    Hallo Jonas,

    vielen Dank für diesen interessanten Artikel.
    Womit ich allerdings ein wenig Bauchschmerzen hab, ist der Absatz zu modernizr. Ich glaube es ist genau andersherum, als Du es schreibst. Modernizr erkennt die Fähigkeiten bzw. die Unfähigkeiten älterer Browser und schafft Ersatz (polyfills), um diese Unfähigkeiten auszugleichen und beispielsweise den IE8 dazu zu bringen auch HTML5 zu verstehen.
    Unter diesem Aspekt widerum, kann man also doch die modernste Technologie einsetzen und überlässt modernizr die lästige Arbeit, Fallbacks für ältere Browser zu schaffen.

    Wie auch immer, ein guter Artikel, in den meiner Meinung nach allerdings modernizr nicht so recht rein passt.

    • Jonas Hellwig

      Verfasst am 14. August 2013 um 15:51 Uhr.

      Hallo Micha,

      vielen Dank für deinen Kommentar, ich fürchte allerdings, dass du Modernizr falsch verstehst. Modernizr ermöglicht zwar HTML5 und Media Queries für ältere Browser, allerdings sind das 1. zwei externe, optionale Polyfills (HTML5Shiv und respond.js) die in Modernizr integriert worden sind und 2. sind diese Polyfills fast immer notwendig, damit die Seite überhaupt dargestellt werden kann. Polyfills für alle verwendeten CSS3-Features einzusetzen ist weder sinnvoll, noch entspricht das dem Grundgedanken von Modernizr. Im Gegenteil, Modernizr ermöglicht durch Feature Detection intelligente Fallback-Lösungen, ohne dass Polyfills notwendig sind.

      „[…] Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily. […]“ (Modernizr.com)

      „[…] Just because you can use a polyfill doesn’t mean you should. You want to deliver the best user experience possible, which means it should be quick! Loading five compatibility scripts for IE7 so it looks and works the exact same as Chrome and Opera isn’t a wise choice. […]“ (Modernizr Doc)

      • pixelheinz

        Verfasst am 13. September 2013 um 10:34 Uhr.

        Möchte mal die Frage aufwerfen, ob es mitunter nicht einfacher ist, eine (responsive) Seite auf dem neuesten Stand zu entwickeln (HTML 5, CSS 3, …) und nach der Abnahme des Projektes einfach noch eine eigene CSS-Datei für die älteren IE-Versionen zu schreiben? Dadurch könnte man sich in vielen Fällen doch die Einbindung etlicher Polyfills etc. sparen…

  6. Sebastian Frost

    Verfasst am 16. August 2013 um 13:30 Uhr.

    Guter und wichtiger Artikel, höchste Zeit für die letzten Leute umzudenken! ;) Die Grafiken zu Graceful Degradation finde ich allerdings etwas irreführend, für mich steht dieser Term eher als Gegensatz zu Progressive Enhancement. Ist im Grunde ne Philosophiefrage, je nachdem wie man es sehen mag, dass Techniken in/auf nicht unterstützten Browsern/Geräten entweder „akzeptierbar Degradieren“ oder man „fähigeren“ Browsern/Geräten zusätzliche Gestaltungsdetails einräumt (Progressive Enhancement). Die Bezeichnungen verdeutlichen eigentlich nur die Herangehensweise beim Coden, das Endergebnis bleibt das Selbe! Graceful Degradation und Progr. Enhancement sind zwar mit Responsive aufgekommen, haben im Grunde aber nichts miteinander zu tun, beide Techniken könnten auch auf „althergebrachten“/statischen Desktopseiten eingesetzt werden. Die Grafiken veranschaulichen eher die Prinzipien „Desktop First“ und „Mobile First“, also in welcher Reihenfolge die Queries im CSS angeordnet werden. So habe ich zumindest seit jeher die Definitionen von Brad Frost, Andy Clarke und Luke Wroblewski verstanden… Just my 2 Cents

    • Jonas Hellwig

      Verfasst am 16. August 2013 um 17:25 Uhr.

      Du hast vollkommen Recht. Das Endergebnis kann bei Progressive Enhancement und Graceful Degradation identisch sein. Allerdings nur dann, wenn der Webdesigner von Anfang an auch alle Möglichkeiten im Blick hat und bereits einiges an Erfahrung mitbringt. Ansonsten führt Graceful Degradation in der Praxis wahrscheinlich viel häufiger zu schlechten Ergebnissen. Progressive Enhancement, wie auch Mobile First sind in diesem Zusammenhang eher Hilfsmittel mit dehnen man weniger leicht Mist baut.

      Was die Grafiken angeht – auch da hast du Recht, denn genau bei dem Punkt habe ich noch überlegt. Ich bin dann allerdings zu dem Schluss gekommen, dass Progressive Enhancement damals (z.B. z.B. im Jahr 2008), noch stärker auf den Code bezogen war als das heute der Fall ist. Heute beinhaltet der Ansatz auch konzeptionelle Bereiche, also z.B. die Anpassung des Layouts oder des Inhalts. Daher habe ich mich doch für diese Grafik entschieden. Allerdings war ich da auch nicht sonderlich innovativ oder kreativ :)

  7. hans

    Verfasst am 19. August 2013 um 10:11 Uhr.

    das problem ist halt das die kunden als allererstes mal ein fertiges layout sehen wollen, am besten als clickdummy … aber im prinzip eine gute sache.

  8. Moritz

    Verfasst am 11. September 2013 um 14:43 Uhr.

    Schon wegen der Usability setze ich auf mobile-first. Da mich selbst die Ladezeiten bei vielen Webseiten nerven. Dort wird alles geladen aber dann doch nur die hälfte benötigt.
    Super geschiebener Artikel!

  9. kaffeeklaus

    Verfasst am 16. September 2013 um 14:24 Uhr.

    Bei der Reihenfolge der MediaQueries, also Mobile First, sehe ich das Problem, wenn ein gewöhnlicher Desktop PC (z.B.: 1024*768) mit altem IE und ohne Javascript auf die Seite trifft. Der ignoriert die für ihn gedachten MediaQueries und nutzt die Mobile Darstellung, was z.B. bei der Navi „lustig“ aussehen könnte.

    Von daher finde ich die Variante von pixelheinz mit einem Fallback css für die ganz üblen Fälle sinnvoll.

    • Jonas Hellwig

      Verfasst am 16. September 2013 um 14:49 Uhr.

      Mit respond.js ist das Problem mit der Abhängigkeit von Media Queries behoben. Das Polyfill ist auch Bestandteil von Initializr und wird selbst von Dreamweaver bei Mobile First Websites eingesetzt.

      • kaffeeklaus

        Verfasst am 16. September 2013 um 15:21 Uhr.

        Wie gesagt, im Fall ohne Javascript ;)

  10. Marcel

    Verfasst am 17. September 2013 um 10:53 Uhr.

    Wie löst man das am besten für die neuen Smartphones oder Tablets mit riesiger Auflösung? Angebnommen ich habe 4 CSS-Dateien. 480.css für mobile, 768.css für Tabet und 960.css für Desktop.

    Jetzt möchte ich aber die 768.css auf allen Tablets darstellen und die 480.css auf allen Smartphones. Ich hatte schon das Problem, dass bei einem neuen Smartphone(iphone 5 quer, htc one) mit hoher Auflösung dann die tablet css also 768.css gezogen wurde und bei einem iPad oder Asus Tablet die Desktopversion.

    Kann man das irgendwie gut abdecken oder muss ich mich da rantasten was mediaqueries angeht?

    Evtl. hast du ja schon einen Artikel in deinem Blog dazu?

    Gruß

  11. Michael Janik

    Verfasst am 8. Februar 2014 um 1:32 Uhr.

    Sehr schöner Artikel. Mobile first ist sicherlich ein guter Ansatz für perfekte Webseiten. Ich bin aber der Meinung, dass hier noch ein bisschen Hysterie betrieben wird, was Javascript anbelangt. Ich meine, wer hat heutzutage schon Javascript ausgeschaltet. Superwenige und die dürfen sich echt nicht wundern, dass bestimmte Sachen nicht funktionieren. Und ein Menü macht man eh nicht mit Javascript (wegen den Suchmaschinen).

    Es gibt übrigens noch einen Lösungsweg aus den alten Tagen, was kleine Bildschirme anbelangt, der auch in alten Browsern funktioniert (selbst Netscape): Einfach alles mit Prozentangaben und auf Javascript und CSS3 etc. verzichten. Minimalistisches flexibles Design eben. Natürlich nur dort, wo es passt :-)

  12. Torsten

    Verfasst am 2. Mai 2014 um 12:00 Uhr.

    Ich merke deutlich, dass ich es mir mit der bisherigen Arbeitsweise unnötig schwer gemacht habe, also zuerst für große Bildschirme und gute Bandbreite entwickeln und im zweiten Schritt für Mobilgeräte anpassen (graceful degredation). Also bin ich jetzt dabei, meine Arbeitsweise umzustellen und meine Design- und CSS-Vorlagen umzubasteln.

    Zwar hatte ich schon mehrere Artikel zum Mobile-First-Ansatz gelesen, aber deiner hier ist äußerst informativ, ausführlich und dabei gut zu verstehen. Vielen Dank also!

    Torsten

    • Jonas Hellwig

      Verfasst am 2. Mai 2014 um 19:09 Uhr.

      Hallo Torsten,

      vielen Dank für deinen Kommentar. Es freut mich, dass der Artikel dir weitergeholfen hat.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.