Elmastudio mit Responsive Layout und einem neuen Design

Heute geht endlich unser neues Elmastudio-Design online. Und da wir uns in den letzten Wochen recht viel mit den Themen Responsive Webdesign und CSS3 Media Queries auseinandergesetzt haben, kriegt endlich auch unser Blog ein flexibles, für iPads, iPhones, andere Tablet PCs und Smartphones optimiertes neues Design.

Gleichzeitig haben wir uns einen frischen Look verpasst und die Gelegenheit genutzt, auch unser Logo einmal kräftig zu überarbeiten. Insgesamt ist das neue Design sehr viel minimalistischer und leichter, was uns selbst sehr gut gefällt.

Das größte Update unseres neuen Themes ist aber sicherlich die Verwendung von CSS3 Media Queries, um das Layout auf unterschiedliche Bildschirmgrößen anzupassen. Insgesamt haben wir 4 unterschiedliche Layout-Versionen vorbereitet. Eine dreispaltige Hauptansicht (mit zwei Sidebars nebeneinander) für große Bildschirme, eine zweispaltige Ansicht (die mittlere Sidebar rutscht hier in den Footer) z.B. für das Querformat des iPads, eine einspaltige Ansicht für die Ansicht im Hochformat das iPads und eine schmale, einspaltige Layoutansicht für Smartphones.

Um das flexible Layout auch auf einem großen Monitor zu testen, kannst du einfach dein Browser-Fenster kleiner schieben (in allen Browsern möglich, außer in Internet Explorer-Versionen kleiner als 9).

Techie-Infos

Das neue Blog-Theme ist auf der Vorlage des Blank-Themes „Toolbox“ aufgebaut und verwendet bereits die neuen HTML5-Elemente, wie header, footer, article oder nav. Für Internet Explorer Versionen kleiner als 9 ist es eine Fallback-Lösung integriert.

Da wir uns sehr über die neue Option unterschiedlicher Artikel-Formate (Post Formats) in WordPress 3.1 gefreut haben, werden wir diese nach und nach auch hier auf dem Blog einführen. Links, Bildergalerien (Gallery), Kurzmitteilungen (Aside) und Video-Artikel sind auf alle Fälle geplant.

Außerdem haben versucht, dass Design leichter zu machen und wo es möglich ist, auf Images zu verzichten. Einige CSS3-Eigenschaften werden ja bekanntlich vom Internet Explorer nicht unterstützt, daher müssen IE-Nutzer leider auf abgerundete Ecken und Co verzichten.

Ein neues WordPress-Theme ist in Arbeit

Als nächstes, kleines Projekt planen wir ein neues WordPress Free-Theme auf der Grundlage unseres Elmastudio-Designs zu veröffentlichen. Das Theme wird „Yoko“ heißen und ebenfalls mit CSS3 Media Queries und HTML5 umgesetzt sein. Wir hoffen das Theme in den nächsten ein bis zwei Wochen fertig zu haben. Updates gibt’s natürlich hier auf dem Blog :-)

Wir freuen uns über dein Feedback

Wir hoffen sehr, dass dir unser neues Blog-Theme genauso gut gefällt wie uns. Über dein Feedback freuen wir uns wie immer sehr!

Da es in den nächsten Tagen wohl noch einiges für uns zu Testen und zu Optimieren gibt (Browser-Ansichten, IE-Hacks, Smartphone-Optimierungen etc.) würden wir uns sehr freuen, wenn du uns über Fehler oder fehlerhafte Layout-Ansichten in deinem Browser oder auf deinem mobilen Gerät per Kommentar oder kurze Mail-Nachricht informiert. Vielen Dank schon einmal vorab für deine Mithilfe!

76 Kommentare

      • Auch nett. Aber wirkt eher wie, noch nicht ganz fertig. Fand das „alte“ wenn man das überhaupt so nennen sollte wesentlich entspannter und ansprechender. Hatte immer das Bedürfnis mir einen schönen Cafe zu machen ;-)

  1. Schick, schick, wobei mir das alte Layout im großen Browser doch besser gefallen hat, dafür freut sich jetzt mein HTC Desire Z über eine korrekt dargestellte Website mehr! :)

  2. Erstmal WOW! Da habt Ihr beiden echt mal einen spitzen Job gemacht, gefällt mir sehr, sehr gut! Minimalistisch, tolle Farben, super Typo! Bin begeistert, auch das Responsive Layout ist 1a umgesetzt. Das einzige was mir nicht gefällt ist der gelbe Hintergrund um das Formular in das ich gerade schreibe :-) Da würde mir ein helleres grün z.B. besser gefallen.

    Viele Grüße
    Andi

  3. Also mir hat das vorherige auch besser gefallen. Das neue ist ein wenig gesichtslos. Schade, schade.

  4. Ich fand euren Header immer super!
    In ein puristisches Layout seinen eigenen Touch rein zu packen ist um einiges schwieriger… ist euch aber gut gelungen – gefällt mir – und ist mal wieder eine Grundlage um sich bei seinen eigenen Projekten zu fragen, ob es nicht auch mit weniger geht.

    Greetinx Nick

  5. Viktor Dite 4. März 2011

    nice!
    ich glaub ich muss auch mal an mizine.de wieder ran! Werd ja ganz neidisch!

    • Auch ich fand das alte besser, das alte war einzigartig, diese minimalistischen Themes findet man in letzter Zeit immer öfter, was mir nicht so gefällt.

      • Ich fand das besser irgendwie vieeeel besser. :-) Schade, jetzt ist alles nur noch weiß. :-( Aber ist wohl Geschmacksache.

  6. Mir gefällt das neue Layout schon ziemlich gut, obwohl es doch auf den ersten Blick etwas ungewohnt daherkommt. Ich denke aber, dass wird nach etwas Umwöhnung bald vorbei sein.
    Alles wirklich freundlich, schön und übersichtlich. Es gibt kurze Ladezeiten, der Inhalt steht im Vordergrund und im Grunde ist die Seite ja nun auf jedes Gerät angepasst. Was also steht der perfekten Seite noch im Wege?

  7. Klar ist es fachlich gut und sieht auch irgendwo schön aus. Aber es ist eines der vielen tausend Minimaldinge die einem mittlerweile überfluten.

    Ich finde eine Seite muss auch etwas persönliches haben. Vorher hatte Elmastudio diesen Flair. Jetzt leider nicht mehr.

    Man muss nicht jeden Trend mitmachen.

    Und hier wirkt es auf mich eher so wie. „Guckt mal wir können jetzt auch HTML5 und CSS3.“ ;-)

    Was mir optisch überhaupt nicht gefällt ist das Gelb im Kommentarfeld. Das knallt zu sehr und stört die Harmonie.

    Ist aber nur meine Meinung.

  8. Ich bin ein starkes Gewohnheitstier und find Änderungen meistens erst einmal „uuuh…“, in diesem Fall musste ich auf den ersten Blick sogar sagen, dass es von den bisher mitverfolgten Änderungen die war, die ich optisch am langweiligsten fand.
    Aber als ich testweise mal das Browserfenster kleiner zog um zu sehen ob und in welchen Maße die Seite überhaupt skaliert, war ich schwer beeindruckt. Hut ab, DAS ist wirklich eine reife Leistung einen Blog selbst in absoluter Minimalgröße noch gut lesbar zu gestalten! Bin schwer beeindruckt.

  9. Vorab:
    Lecker :-)

    Ich bin sicher ihr wertschätzt Kritik.
    Denn eine Sache gefällt mir persönlich „noch“ nicht -> Euer Header & Navi:
    1. Den horizontalen blau-rot-Streifen im Header hätte ich weggelassen. Diesen Kontrast empfinde ich als störend.

    2. Die subnav würde meiner Meinung nach besser passen, an der Stelle wo eure mainnav, inkl Suche-Funktion ist.

    3. Die Suche hätte ich rechts über „Neue Artikel“ eingebunden.

    Hört sich nach viel Kritik an. ist es aber garnicht ;-)

    Dieses Design ist eine deutliche Verbesserung meiner Meinung nach und spricht mich sehr an. Die persönliche Wohlfühl-Note ist erhalten geblieben. Das finde ich ganz wichtig! Toll!
    Vor allem denke ich, dass dieses Design besser zu eurem professionellen Wissensfundus passt. Denn „verspeilt“ passt nicht zu euch.

    Das vorrige Design war gut, sehr sogar. Aber Der für mich zu große Header hatte vom wesentlichen abgelenkt (Content). Insgesamt hatte es tatsächlich verspielt gewirkt. Aber entgegen der Meinung von Regina und Tom, finde ich, dass „verspielt“ nicht zu euch passt. Zumindest habe ich diesen Blog nicht so kennengelernt und wahrgenommen.

    Elmastudio habe ich als sehr persönlichen, qualitativen und sehr hochwertigen Wohlfühlblog kennengelernt. Aber verspielt? Nein.

    Jetzt kommen eure wertvollen und unverwechselbaren Inhalte auf den ersten Blick beim Leser an, ohne durch zu große Grafiken und Flächen abgelenkt zu werden.

    Macht weiter so!

    Lieben Gruß,
    Jonathan

  10. Vielen herzlichen Dank für die vielen Kommentare und das Feedback zu unserem neuen Blog-Design. Es freut uns riesig, dass das Theme den meisten sehr gut gefällt!

    Sicherlich dauert es ein bisschen, bis man sich an das neue Design und den leicht anderen Aufbau gewöhnt hat, und wir werden in den nächsten Tagen auf alle Fälle auch noch einige kleinere Anpassungen hier und da machen. Über alle Hinweise und Verbesserungsvorschläge sind wir daher super dankbar :-)

    Viele Grüße,
    Ellen & Manuel

  11. Ich finds auch genial. Freu mich riesig auf das Free-Theme! Kleiner Makel: Die Trennung zwischen Headernavi und Content wär mir etwas zu wenig.

  12. Gratulation zum Redesign!
    Hoffentlich bekommen wir bald heiße Tage, in denen die optische Kühle wirken kann.
    Übrigens: In der Mittelspalte ÜBER UNS lese ich Free-lancer und Platt-form (harte Silbentrennung?)

  13. … zunächst Respekt für die technische Umsetzung die sehr schön zeigt wie man mit flexiblen Layouts arbeiten kann. Was meiner persönlichen Meinung nach jedoch schon sehr deutlich wird ist die Tatsache, das diese Flexibilität deutliche Einschränkungen in Designfragen nach sich zieht beziehungsweise einfach wesentlich größeren Aufwand erfordert auch komplexere Designs damit umzusetzen.

    Diesbezüglich hatte Euere alte Seite wesentlich mehr Charakter, nun steht eher die Technik im Vordergrund was für Euer Handwerk spricht aber doch auch einen starken Kompromiss erfordert. Dennoch Hut ab und auf das Template bin ich auf jeden Fall gespannt! Grüße in die Runde, Markus

  14. Thomas Sausen 4. März 2011

    Kurzum: Es gefällt mir. Ich stehe auf minimalistisches Design und ja, der gelbe Kommentarhintergrund nervt. Schöner Code. Ich mache gerade auch meinen Blog Responsive, hatte da Hicksdesign mit als Vorbild und nun schlagt ihr auch in diese Kerbe. Gefällt mir, ich muss jetzt nur meine Struktur etwas überdenken.

    Top, dass das ein Theme wird. Für mich dann wohl zu spät ;)

  15. Schick, schick! Besonders wie sich die Navigation an die verschiedenen Auflösungen anpasst finde ich sehr gelungen. Nur das Farbschema hat mich noch nicht so überzeugt. Die orange/blau Kombination verträgt sich, meiner Meinung nach, nicht so mit dem Türkis im Hintergrund.

  16. Über Geschmack lässt sich ja bekanntlich streiten, aber die Funktionalität ist wirklich klasse. Ich freu mich schon auf Yoko ;-)

  17. Mag ja sein dass die neue Seite technisch ganz hip und toll ist und auf jedem Smartphone klasse aussieht…

    …aber gestalterisch geht es in der optisch pseudo-modern biederen Masse anderer Websites ähnlichen Themas total unter…

    Das alte Design hatte Stil und „Seele“ – Das neue sieht eher nach 08/15 WordPress/Webdesign-Blog aus… langweilig und lieblos. Helle Töne auf weiss…

    Ein deutlicher Rückschritt in der gestalterischen Natur…

    Schade.. :(

  18. Schick! Aber irgendwie gefiel mir das alte besser… dafür find ich aber die HTML5 Effekte und die Media Queries richtig toll… insgesamt ganz schön geworden…

  19. Hallo,
    Warum denn ein Wechsel? Das alte Design gefiel mir echt super! Dieses Design ist auch gut, schlicht und aufgeräumt, doch was war mit dem alten Design? Ich fand es sehr gut umgesetzt mit dem Header.
    Ist das moderne Internet jetzt schlicht? Nicht so „verspielt“ wie das alte (also eure Website) ?
    Ich will nicht groß meckern, da mir hier alles gefällt, besonders, wie ihr das mit den CSS3 Media Queries umgesetzt habt.

    MfG Andre

  20. Christian 4. März 2011

    Mir hat das alte Layout auch besser gefallen. Bei diesem ist mir die Farbgestaltung zu langweilig. Dafür ist die Typographie superklasse und – wie bereits von anderen hervorgehoben – das Verhalten bei geringerer Browsergröße absolut vorbildlich umgesetzt.

  21. Also ich muss auch sagen, das mir das bisherige Layout wesentlich besser gefallen hat.

    Vor allem die beiden gelben Streifen am Rand, hmm, irgendwie so überhaupt nichts für meine Augen

  22. Très Chic! Wieder mal eine Wucht. Ihr habts halt drauf. Und ab jetzt kann ich bequem am iPhone meine Lieblings-Tutorials lesen. Sieht gut aus ;-)

  23. Handwerklich ok. Aber so …. gewöhnlich. Das vorige hatte das gewisse etwas, das diesem Theme leider komplett fehlt. Man hat das Gefühl, dass die Optik sich vollständig dem Wunsch jetzt Media-Queries nutzen zu wollen unterordnet.

    War die rechte Seite vorher auch zweispaltig? Sie wirkt arg vollgestopft.

  24. Mir gefällt euer neues Layout sehr gut. Der minimalistische Aufbau macht es für mich übersichtlich.
    Viele Grüße
    Astrid

  25. Ich bin ehrlich geschockt und etwas überrascht. Das andere Design war mir so ans Herz gewachsen. Jetzt habt ihr auf ein handwerklich bestimmt gut gemachtes und technisch ebenso gutes Theme gewechselt. Natürlich werden sich die Leser/innen auch an dieses Design gewöhnen und Kritik hält sich ja doch auch sehr in Grenzen. Als großer Fan eurer Seite bin ich von diesem Layout enttäuscht. Es fehlt die individuelle Note und das Gefühl dafür, dass auch dieses mit viel Liebe entwickelt und gestaltet wurde. Im Wesentlichen bezieht sich meine Kritik auf den Header und auf den grellgelben Kommentarbereich. Ich hoffe sehr, dass ich keinen Frust auslöse mit meinen offenen Worten.

  26. Hallo ihr beiden, das Layout ist an sich sehr schön schlicht, aber die Farbwahl gefällt mir persönlich nicht so.

    Ein Punkt den ich auch noch bemängeln muss, der Einsatz der CSS3 Media Queries ist zwar professionell, aber wenn ich mir die Seite aufn iPhone anschaue muss ich ewig wischen um den ganzen Content zu betrachten. Wenn ihr die Media Queries nutzt, wäre es schön wenn ihr auch den Nutzern anbieten würdet auf die „normale“ Webseitenansicht zu switchen. So kann ich immernoch selbst bestimmen, wie ich mir die Webseite ansehen möchte. ;)

    Ansonsten wie immer ihr seid uptodate und das gefällt mir richtig gut. Macht weiter so. ;)

  27. Super geworden. Das mit den Media Queries ist schon super. Es macht es natürlich deutlich einfach wenn das Design wenig Grafik lastig ist. Bei Make Better Shirts hab ich es auch gemacht und es klappt super und macht auch Sinn. Bei meiner Seite stell ich es mir sehr Aufwendig vor.

    Aber ich finde Grundsätzlich sollte man viel mehr machen in die Richtung. Weg von den Subdomains ala m.xyz.de hin zu einer Seite für alle Geräte.

    So, weitermachen :)

    Achja, der Toplink ist cool. Solche Sachen machen es aus ;)

    • Also wenn Smartphone Kompatibilität bedeutet, deutliche Einbußen bei der Gestaltung zu haben/spüren – dann bitte lieber 1000 Subdomains…

      Die alte Seite ließ den Leser eine „Liebe zum Thema“ spüren,
      die neue hingegen fühlt sich so kalt an, wie ein Eis im Gefrierschrank.

      Das selbst der Vogel „gerupft“ wurde, find ich enttäuschend :(

      …die Seite tut so als wäre man ein Außenseiter wenn man am guten alten PC/Mac surft, statt am trendy-Smartphone-Handy bzw. Tablet PC oder Exoten-Gerät mit Browser Marke „ganzweitwegvonstandards…“ :(

      Große Enttäuschung…

  28. Hallo Ellen,

    ich muss sagen das mir euer altes Design besser gefallen hat. Was ich aber klasse finde ist das ihr eure Seite für die Mobilen Geräte optimiert habt.

    Viele Grüße Mika

  29. Hallo Ellen,
    mir gefiel das alte Design sehr gut, aber das neue hat das nocheinmal übertroffen. Ich finde es wirk sehr seriös und professionell ;-)

    LG

  30. Ich wär ja dafür, dass wir ne Gruppe auf Facebook gründen „Ich will das alte Elmastudio Design zurück“ :P

  31. Vielen herzlichen Dank für die vielen Kommentare, die Tipps und das Feedback zu unserem neuen Elmastudio-Design :-)

    Ja, über die CSS3 Media Queries Umsetzung sind wir auch sehr froh und es hat sehr viel Spaß gemacht, diese neue Möglichkeit innerhalb von WordPress und auf der eigenen Webseite umzusetzen. Die gesammelten Erfahrungen werden wir dann auf alle Fälle auch ins neue WordPress-Theme einbinden :-)

    Und auch die Artikel-Formate sind gerade in Arbeit und werden in den nächsten Tagen / Wochen hier auf dem Blog mit aufgenommen. Auf diese optische Auflockerung und die flexiblere Art zu Bloggen freuen wir uns auch schon sehr.

    Unser Wechsel zu einem minimalistischeren Designstil hat sich auf alle Fälle auch durch die Arbeit mit den Media Queries und die Optimierung für mobile Geräte entwickelt. Ein bisschen liegt es aber sicher auch an der Entwicklung des Blogs an sich. Wir empfinden ein schlichteres Design mit dem Fokus auf die Inhalte und Themengebiete des Blogs, sowie eine angenehm lesbare Typografie (möglichst auf den unterschiedlichsten Bildschirmgrößen) als sehr passend und fühlen uns mit dem neuen Design bereits richtig wohl :-)

    Viele Grüße,
    Ellen

  32. Ich verstehe den Hype um die MediaQueries nicht. Aber ich kenne das mobile Internet auch nur vom iPhone her. Ich möchte auch dort die Seite sehen, so wie ich sie vom Rechner her kenne. Und da war (oder ist?) das iPhone ja Vorreiter – endlich mobiles Internet, dass ordentlich aussieht. Und jetzt fangen alle an, die Seiten künstlich zu beschneiden. Ich habe das Gefühl, dass es oft nur gemacht wird weil es eben geht.

    Am besten für alle Beteiligten wäre wahrscheinlich, liesse man dem Besucher die Wahl welche Version er sehen möchte.

  33. Meine Kritik würde ich heute schon nicht mehr so formulieren. Ich muss zugeben, dass ich mich inzwischen schon an das neue Design gewöhnt habe. Einzig der grellgelbe Hintergrund im Kommentarbereich macht meinen Augen zu schaffen. :-)

    Ich schlussfolgere also zum Design: Man Ich muss solchen großen Änderungen ein wenig Zeit geben, auf mich zu wirken. Dann finde ich schon den Zugang. Vor allem möchte ich auch die Arbeit derjenigen wertschätzen, die bestimmt nicht wenig Zeit in die Entwicklung gesteckt haben. In diesem Sinne…
    LG Horst

  34. Schick! Genial finde ich, dass es ziemlich breit ist, viele Infos und dennoch sehr übersichtlich! Wenn das keinen Vorbildcharakter hat… dann weiß ich auch nicht!

    Weiter so, lese sehr gerne hier!

    ;-)

  35. Das neue Design ist minimalistisch und wird imho auf viele zu leer wirken, Stichwort „Kommt da noch was?“ ;-)

    Das Vogerl ist eine nette (unabsichtliche?) Hommage an die türkische Flagge.

    Insgesamt wirkt das auf mich wie eine 1:1 Kopie des Thesis Theme was ich übrigens durchaus positiv sehe, da man sich so auf den Content konzentrieren kann, aber das Thesis Theme gibt es in dieser Form eben schon seit Jahren.

  36. Das alte Design hatte etwas mehr Charakter. Das neue gefällt mir aber auch sehr gut. Es ist sehr schlicht und auf das Wesentliche reduziert. Wirkt alles etwas größer, wie eine Community.

  37. Sebastian B. 9. März 2011

    Gefällt mir sehr gut, gerade als Fan minimalistischer Layouts. Muss jedoch sagen, dass Ihr dadurch an Individualität und Wiedererkennungswert verloren habt, sieht halt jetzt mehr, naja, standard aus. Freue mich auf neue Artikel und bin gespannt auf das angekündigte Free-Theme.

    Liebe Grüße
    Sebastian

  38. Mir gefällt das neue 08/15 Design leider überhaupt nicht! Es ist langweilig, beliebig und austauschbar!

    Allerdings besuche ich die Seite ja auch nicht wegen des Designs, sondern wegen der Inhalte und die sind nach wie vor super! Schade nur, dass ich diese ab jetzt ohne Wohlfühl-Umgebung lesen muss..

    Trotzdem Danke für all die tollen Informationen auf dieser Seite!

  39. Hallo,
    ich war recht enttäuscht als ich das veränderte Design gesehen habe.
    Es ist übersichtlich, ja bestimmt aber das war das alte Design auch und das hatte Einzigartigkeit mit der genialen Illustration im header.

    Ich werde natürlich diese informative Seite weiter besuchen, der Inhalt ist Klasse..aber mit einem weinenden Auge dem sehr schönen alten Design nachtrauere.

  40. Sehr schön & schlicht – gefällt mir auserordendlich gut.

    Wirklich toll umgesetzt mit dem intelligenten Layout und den beliebtesten Artikeln als Bild-Teaser.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *