kulturbanause Blog

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

Responsive Webdesign: Grundlagen, Technik, Workflow, Inhalte – Meine Slides vom Vortrag in Bremen

Ich habe am Dienstag in Bremen einen Vortrag zum Thema "Responsive Webdesign" gehalten. Wie vor Ort versprochen, steht die Präsentation nun inkl. aller Beispiele und einiger Ergänzungen online bereit. Ich möchte mich an dieser Stelle auch noch einmal für das positive Feedback und den ausgebuchten Raum bedanken! Ich hoffe die Präsentation hilft euch dabei das Thema aufzuarbeiten. Wenn ihr Fragen habt, nutzt bitte die Kommentarfunktion. Das bietet den größten Mehrwert für alle.

Online-Präsentation öffnen

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

Jonas Hellwig beim Vortrag zum Thema "Responsive Webdesign" in Bremen
Fotos: Niko Krause, Müller Ditzen AG | Medien[plan]tage

Links zum Thema Responsive Webdesign

Folgende Beiträge dieses Blogs ergänzen die Präsentation und helfen dir sicher weiter.

Online-Präsentation öffnen

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

21 Kommentare

  1. Mario

    Verfasst am 29. November 2012 um 12:58 Uhr.

    Schade, dass YAML ( http://www.yaml.de ) als Framework mit keiner Silbe erwähnt wurde. Meiner Meinung nach, das beste Framework wenn es heute um Responsive Design geht.

    Zum einen gab es das schon (und hatte all die Möglichkeiten) als es den Begriff „Responsive Design“ und die ganzen „tollen und hippen“ Frameworks von heute noch gar nicht gab.

    Und zum anderen machen diese Frameworks es auch nicht ganz richtig. Man richtet sich wieder nicht nach dem Inhalt, sondern sucht sich den nächsten irgendwie passenden Breakpoint im vordefinierten Grid. Im Hinblick darauf, dass niemand weiß, auf welchen Geräten man zukünftig die Seiten anschaut leider wieder zu kurz gedacht.

    Klar hat Bootstrap diese vielen tollen vordefinierten Komponenten (Breadcrumb, Pagination u.v.m.) Aber das ist der Design-Part und das wird dann wieder mit der eigentlichen Aufgabe, dem Erstellen des Grundgerüsts vermischt.

    Zusätzliches Manko: Irgendwie sehen gefühlt 90 % aller Bootstrap Seiten gleich aus. Weil einfach die vordefinierten Sachen genommen werden.

    • Jonas Hellwig

      Verfasst am 29. November 2012 um 13:16 Uhr.

      Welches Framework nun das „beste“ ist, kann diskutiert werden, auch muss ein schon lange bestehendes System nicht zwangsläufig besser sein als ein neues Framework.

      Was den Unterschied zwischen starren und flüssigen Rastern angeht, bin ich voll bei dir. Die meisten Frameworks arbeiten mit starren Rastern, was meiner Meinung nach nicht optimal ist.

      Ich habe allerdings kein einziges Framework konkret empfohlen. Mir war es wichtig, den Unterschied zwischen Frameworks (und Websites) mit starren Rastern und solchen die flüssige Raster nutzen klarzustellen. In diesem Zusammenhang habe ich Beispiele für die verschiedenen Arten von Frameworks gezeigt, die aber keine ausdrückliche Empfehlung sind. Die mobile Boilerplate und Bootstrap habe ich als prominente Beispiele genannt, auch um Begriffe besser einordnen zu können. Wichtig ist, dass man erkennt wo die Unterschiede liegen und für jedes Projekt neu die Anforderungen prüft.

      • Mario

        Verfasst am 29. November 2012 um 17:18 Uhr.

        Das sollte ja auch kein Vorwurf sein. ;) Ich finde nur, dass YAML da einen verdammt guten (für mich persönlich den besten) Job macht. Und ich war enttäuscht, dass eben nur die besser bekannten Frameworks genannt wurden.
        Alle genannten setzen, sofern ich nicht falsch liege, auf ein „festes“ Grid System (12/16/ was auch immer-Spalten). YAML ist da komplett anders und deshalb hätte ich mir das als Alternative gewünscht.

      • Jonas Hellwig

        Verfasst am 30. November 2012 um 9:20 Uhr.

        Aaah. Da habe ich dich falsch verstanden. Ich dachte du meinst den Unterschied zwischen fluid und fixed. Du meintest aber die feste Anzahl an Spalten. Auch da bin ich deiner Meinung – man sollte für jedes Projekt genau schauen wie viele Spalten sinnvoll sind. Und nicht einfach das 960 / 12er-Raster nutzen und die Inhalte da „irgendwie“ einbauen. Diese Flexibilität leisten viele Systeme in der Tat nicht. YAML habe ich selbst jedoch noch gar nicht eingesetzt. Es ist mir nur namentlich bekannt.

  2. Michel Magnussen

    Verfasst am 30. November 2012 um 9:35 Uhr.

    Hallo

    Vielen Dank für deinen Vortrag, war informativ und auch sehr interessant gehalten. Neue Einblicke, besonders viele neue Tools in deinem Blog die letzten 2 Tage für mich endeckt.

    Ich kann es kaum erwarten mehr in die Richtung in der Agentur umzusetzen. Am Wochenende wird wohl erst mal meine eigene Seite angepasst (zumindest werden Breakpoints bei geringer Breite gebraucht :) )

    Allerdings habe ich irgendwie dein Viewport Tool übersehen… habe nur ein ähnliches gefunden. Hast du den Link noch mal parat?

    Danke.
    Michel

  3. Mario

    Verfasst am 30. November 2012 um 10:13 Uhr.

    Schau es Dir doch einfach mal. Jetzt kommen die „ruhigen und besinnlichen Tage“. Da hast Du bestimmt Zeit für sowas … ;)

    Was ich noch ganz vergessen habe: Dirk Jesse (der Macher von YAML) hat noch ein weiteres Ass im Ärmel. Rapid Prototyping im Browser. Da gehört es ja ab einem frühen Stadium der Entwicklung auch hin:

    http://www.thinkintags.com

  4. Jan Wolf

    Verfasst am 30. November 2012 um 11:50 Uhr.

    Hallo,

    leider war ich nicht beim Vortrag dabei, jedoch habe ich mir eben die Präsentation angeguckt. Was ich z.B. noch nicht kannte sind diese verdammt nützlichen Tools, die du vorgestellt hast – wirklich eine Arbeitserleichterung. Danke!
    Vor einigen Monaten hatte ich ebenfalls den Flyer mit den ganzen Vorträgen in der Medienplantage in der Hand. Als ich dein Vortragsthema hörte und mich dann erkundigt habe, was Responsive Webdesign eigentlich bedeutet fing auch ich an meine Webseite „Responsive“ zu gestalten. Würde mich freuen wenn sich jemand das Ergebnis angucken würde :)

    Gruß,
    Jan

  5. hans

    Verfasst am 3. Dezember 2012 um 15:49 Uhr.

    arbeite zur zeit auch mit boilerplate + bootstrap, einfach super!

    „sondern sucht sich den nächsten irgendwie passenden Breakpoint im vordefinierten Grid“

    man kann mit bootstrap 100% flexible sachen machen … (?)
    http://twitter.github.com/bootstrap/examples/fluid.html

    was macht YAML da anders?

  6. Mario

    Verfasst am 3. Dezember 2012 um 16:22 Uhr.

    Hallo hans,

    bei YAML gibt es kein vordefiniertes Grid Raster an dem sich die Elemente orientieren. Ich habe natürlich ein Grid, aber ich lege „nur“ meine Breite (min-width/max-width) und meine benötigten Spalten fest (z. B. 2 oder 3 spaltiges Layout) und bestimme, welche Breite in Prozent die Spalten habe um auf 100% zu kommen. Ein zweispaltiges Layout als Goldener Schnitt hätte z. B. 38% als Seitenspalte und 62% als Hauptbereich.

    Ich lege selbst vollkommen frei fest, wann das Design umbricht (vielleicht bei 613px viewport, und bei 487px und bei …

    Bei Bootstrap habe ich im Responsive Layout 724px und 1170px fest. Unter 767px habe ich nur noch eine Spalte.

    Das ist für mich ein kleiner aber feiner Unterschied. Bei Bootstrap muss ich mich in das vorgegebene Korsett zwängen. Da ich nicht weiß, auf welchen Geräten die Seiten irgendwann mal angeschaut werden, würde ich lieber selbst entscheiden, wann sich das Design ändert und das nicht in vorgefertigte Dimensionen pressen.

  7. hans

    Verfasst am 3. Dezember 2012 um 16:32 Uhr.

    „Bei Bootstrap habe ich im Responsive Layout 724px und 1170px fest. Unter 767px habe ich nur noch eine Spalte.“

    kann man doch alles anpassen … (?)

  8. Mario

    Verfasst am 3. Dezember 2012 um 18:49 Uhr.

    Klar, anpassen kann man fast alles. Aber mit welchem Aufwand? An wievielen Ecken muss ich dann die %-Werte auf 15! Nachkommastellen genau anpassen?

    Deshalb sehen doch viele Bootstrap Seiten gleich aus. Man nimmt einfach die vordefinierten Abmessungen des Grids und die vordefinierten Styles.

  9. Holger

    Verfasst am 7. Dezember 2012 um 9:21 Uhr.

    Hai Jonas,
    vielen Dank für die veröffentlichung Deiner Präsentation. Gut strukturierte Übersicht zum Thema, super Hinweise und auch Bereiche über die ich mir noch keine Gedanken gemacht hatte. Als Krimi wärs ’n Bestseller ;-)

    Mit Deiner Erlaubis setze ich Deine Präsentation zur internen Fortbildung unseres vier Mann Teams ein.

    Grusz, Dank und frohe Weihnachten
    Holger

  10. Tobias Breyer

    Verfasst am 4. März 2013 um 9:54 Uhr.

    Vielen Dank für die Präsentation. Ich habe Deinen Vortrag zwar nicht live erleben können, aber anhand der Präsi einen ganz guten Eindruck bekommen. Ich finde das ist eine sehr gelungene Zusammenfassung zum Thema. Zusammen mit den ganzen Links zu den einzelnen Topics und der kleinen Sammlung am Schluss bekommt man eine gute Basis für die eigene Weiterbildung. Wirklich toll gemacht! Ich habs mir gleich gebookmarked.

  11. Clive

    Verfasst am 5. März 2013 um 11:41 Uhr.

    gute inhalte auf den punkt gebracht, schöne darstellung mit reveal – danke für’s teilen.

  12. Juri Sinitson

    Verfasst am 19. März 2013 um 16:12 Uhr.

    Sehr gute Präsentation über Responsive Webdesign. Der Autor ist sehr kompetent.

  13. Stephan

    Verfasst am 25. März 2013 um 22:15 Uhr.

    hej Jonas,

    ein riesiges Dankeschön im Voraus für das Bereitstellen deiner Präsentation. Ich habe ganz konkret eine Frage zum Thema ‚Retina-Problem bei Pixelgrafiken‘.

    Inwiefern spielt die Auflösung (DPI/ PPI) eine Rolle beim Anlegen einer Pixelgrafik für hochauflösende Displays?

    » Beispiel: Eine Pixelgrafik mit einer Breite von 1400 Pixeln, soll auch auf einem Retina Display scharf dargestellt werden. Hierfür würde ich in einem ersten Schritt die Pixelgrafik doppelt so groß, d.h. mit einer Breite von 2800 Pixeln anlegen. Allerdings ist mir bisher unklar, in welcher Auflösung (DPI/ PPI)? Als gängige „Faustregel” galt für mich bisher: Bildschirmauflösung 72 dpi, Druck 300 dpi … nun hat aber beispielsweise das iPad 3 eine Auflösung von 264 ppi. Wie muss ich damit zukünftig umgehen?

    • Jonas Hellwig

      Verfasst am 25. März 2013 um 23:12 Uhr.

      Hallo Stephan,
      das „Auflösungs-Problem“ habe ich in einem weiteren Artikel behandelt. Bitte schau dort einmal nach ob deine Frage damit beantwortet ist. Dort habe ich auch die typischen Dpi-Werte aufgelistet.
      Websites und Bilder für High-Resolution-Displays (Retina, HiDPI) optimieren.

      • Stephan

        Verfasst am 29. März 2013 um 10:54 Uhr.

        Besten Dank für deine schnelle Rückmeldung. Der Artikel war sehr aufschlussreich …!

  14. Maurice

    Verfasst am 21. Juni 2013 um 17:10 Uhr.

    Hi Jonas,

    ich wollte das Thema der Frameworks noch mal kurz aufgreifen… Inzwischen gibt es bekanntlich schon ein paar ganz anständige Frameworks, auf die man zugreifen kann, siehe z.B. hier:
    http://www.responsive-design-test.de/responsive-design-frameworks

    Wir in unserer Agentur betreuen auch ein paar kleine Kunden, die leider nicht so viel Budget haben und trotzdem gerne ein Responsive Design benötigen. Sofern dies mit einem Relaunch verbunden ist und es die Datenmigration zulässt, gehen wir inzwischen hin und wieder dazu über, auch komplett fertige Templates, die bereits im Responsive Design mittels eines dahinter stehenden CMS wie WordPress, umgesetzt wurden. Diese können von unterschiedlichen Template-Anbietern bezogen werden. Wir nutzen dann diese Basis und nehmen „nur“ Anpassungen in Bezug auf die CI des Kundens vor. Sofern der Kunde jedoch absolute Individualität möchte ist dies natürlich keine Lösung, aber eine gute Alternative für „die Kleinen“.

    Insofern können wir uns nicht immer selbst aussuchen, welches Framework zum Einsatz kommt. Diesen Aspekt wollte ich noch mal kurz mit einwerfen, dass unterschiedliche Templates ggf. auf bereits bestehende Framworks zugreifen und jedes dieser Frameworks seine eigenen Vor- und Nachteile hat.

    Meine persönliche Meinung noch mal kurz zum Schluss: Ich finde YAML super :-)

    Viele Grüße,
    Maurice

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.