Nori – ein Premium mobile-first, responsive WordPress-Theme

Mobile-first, responsive Premium WordPress-Theme Nori

Nori ist unser neustes responsive, mobile-first WordPress-Theme. Das bedeutet, Nori hat ein flexibles Layout und ist besonders für die Ansicht auf mobilen Geräten gestaltet und entwickelt. Im Gegensatz zu einem reinen responisve Theme ist bei Nori der Komplette Entwicklungsprozess (vom Design bis zur Programmierung) umgekehrt worden und wir haben uns von der Ansicht für Smartphones Schritt für Schritt zu größeren Bildschirmen wie Tablets, Laptop- und Desktop-Bildschirmen hochgearbeitet.

Vorteile von mobile-first

Diese Konzentration auf mobil-first bringt jede Menge Vorteile mit sich. Zum Beispiel muss man sich durch den Platzmangel auf mobilen Geräten auf die wesentlichen Elemente bei der WordPress-Theme Gestaltung konzentrieren. So kann ein klares, benutzerfreundliches Design entstehen. Diese Klarheit kommt dann natürlich auch der Desktop-Ansicht des Themes zu Gute.

Auch Bilder oder JavaScripts können mit Hilfe von CSS3 Media Queries erst dann zum Einsatz kommen, wenn sie wirklich benötigt werden. So kann die Ladezeit einer Webseite weiter reduziert werden, was ganz besonders beim meist langsamen mobilen Web ein wichtiger Aspekt ist.

Durch die Konzentration auf mobile Geräte zu Beginn des Design- und Entwicklungsprozesses eines Themes kann außerdem die Funktionalität auf Touchscreens verbessert werden. Größere Buttons, der Verzicht auf Hover-Elemente und die Optimierung der Lesbarkeit auf Smartphones und Tablets sind dabei nur ein paar der Aufgaben.

Die Theme-Optionen

Neben der flexiblen Umsetzung für die unterschiedlichsten Bildschirmformate hat Nori praktische Theme-Optionen, mit denen du deinen Blog in wenigen Schritten individualisieren kannst.

Die Farbigkeit des Themes kann z.B. für den Hintergrund, die Linkfarbe und die Standardtextfarbe angepasst werden.

Nori WordPress Theme with custom colors
Das Nori Theme mit individuellen Farben.

Weitere Theme-Optionen gibt es für dein eigenes Logo, den Footertext und die Artikel-Teilen Buttons von Twitter, Facebook und Google+.

Artikelformatvorlagen und Artikel-Styling

Zusätzlich kannst du mit Artikelformatvorlagen (WordPress Post Formats), individuellen Menüs und Widgets, deinen Blog nach deinen eigenen Vorstellungen einrichten. Außerdem ist es möglich, großformatige Bilder auf deinem Blog anzuzeigen. Besonders eignet sich dafür die Artikelformatvorlagen-Vorlage „Bild“.

Nori theme image post format

Damit Bilder für verschiedene Bildschirmformate optimiert werden können, ist die Verwendung vom „Adaptive Images“ Script sehr zu empfehlen.

Um längere Artikel oder Seiten lebendiger zu gestalten, kannst du in der Einzelartikelansicht und im Nori Seiten-Template „Centercolumns“ die CSS-Klasse „fullwidth“ nutzen. So können Bilder, Grafiken oder mehrspaltige Texte über die gesamte Artikelbreite angezeigt werden. Ein Beispiel für diese Artikel-Option kannst du dir in der Nori Live-Demo anschauen.

Neben dieser speziellen Style-Option kannst du natürlich auch blockquotes, pullquotes, Listen, Bilder oder Videos in deine Artikel einbinden, um so Texte aufzulockern.

Auf der Nori-Themeseite kannst du dir eine Live-Demo von Nori und weitere Infos zu den Theme-Features anschauen. Außerdem haben wir kleine Video-Anleitungen z.B. zu den Theme-Optionen vorbereitet. Und da wir Nori auch hier auf dem Elmastudio-Blog im Einsatz haben, kannst du natürlich auch hier das Theme genauer anschauen. Nach den Weihnachtsfeiertagen werden wir sicherlich auch noch die ein oder Anpassung hier auf dem Blog umsetzen.

Wir hoffen dir gefällt das Nori-Theme. Über dein Feedback, Fragen und Anregungen freuen wir uns sehr!

40 Kommentare zu “Nori – ein Premium mobile-first, responsive WordPress-Theme

  1. Schlicht und schön, edel fast. Und eine neue Idee: Zwei Posts-Spalten nebeneinander. Die Artikelbilder wurden offenbar abgeschafft bzw. diese erscheinen nicht, was ich ein bisschen schade finde. Aber das wird wohl zugunsten maximaler Mobilität und geringer Ladezeit sein.

    • Vielen Dank für dein Feedback, Dominik. Ja, wir haben dieses mal bei Elmastudio auf die Standard-Artikelbilder verzichtet. Im Theme selbst ist aber für Thumbnails vorbereitet. Und bei Elmastudio werden aber auf jeden Fall auch weiter Bilder auf die Startseite einbinden, so dass die Texte etwas aufgelockert werden können, nur etwas reduzierter.

    • Neu ist das nicht, das gab es schon vor Jahren mit dem Hemingway-Theme. Aber es hat was. Wobei ich die Darstellung etwas zu nervös finde.

  2. Ein tolles Weihnachtsgeschenk. Ich schenke das ganz einfach mir. :-) Schönen Dank für diese wiederum tolle Arbeit.

    Und schöne Weihnachten und ein gutes neues Jahr. Bleibt so kreativ, dann steht euch ein ganz sicher ein gutes Jahr bevor.

    • Vielen herzlichen Dank, Horst. Das freut uns wirklich sehr, dass auch Nori dir wieder so gut gefällt :) Wir wünschen dir auch ein wunderschönes Weihnachtsfest und vorab schon einmal einen guten Rutsch ins neues Jahr. Viele Grüße, Ellen

  3. Wusst ich’s doch ;-).. Und wie das Theme selber bin ich auch mobile First auf elmastudio :

    Grüße, Vincent

  4. Kann man auf die zwei Spalten verzichten? So dass die Ansicht dann ist, wie oben auf dem iPad quer als Maximum?

    Außerdem gibt es hier wohl ein Problem mit dem Hochskalieren der Bilder. Die sehen ziemlich verpixelt aus, wie ein schlechtes JPG. Liegt das an dem Script?

    Ansonsten mal wieder tolle, individuelle Arbeit!

    • Vielen Dank für das positive Feedback und den Hinweis zu den Bildern. Ja, ich hatte das Adaptive Images-Script gestern direkt aus dem Piha-Theme übernommen und den Code nicht korrekt angepasst. Habe das Script jetzt gerade noch einmal runter genommen (jetzt sollten alle Bilder wieder scharf sein), ich werde das Script im Laufe des Tages dann noch einmal neu aufsetzen.

      Da Nori ja von „klein nach groß“ programmiert wurde ist es recht leicht, die größte Theme-Ansicht einfach aus dem Stylesheet zu löschen. Allerdings ist die Schrift für die iPad-Ansicht etwas größer angelegt, als auf dem Desktop. Eventuell müsste man also noch ein paar Styles anpassen, um zu einer optimalen Lösung für iPad und Desktop zu kommen.

      • Ok, jetzt passt das mit den Bildern.

        Was mir gerade noch aufgefallen ist:
        Habe gerade auf meinem MBA 11″ den Fullscreen Modus an. Da ist die Schrift der Kommentare recht winzig. Wenn ich das Fenster verkleinere, wird sie größer. Irgendwie irritiert das total, das Theme wirkt dadurch total unruhig.

        Vom Ansatz her finde ich das Theme toll. Nur noch ein paar Kleinigkeiten stören mich, aber das wird… ;)

        • Vielen Dank für deinen Hinweis, wir werden die Schriftgröße der Kommentare auf jeden Fall noch einmal live testen. Die größere Schriftgröße haben wir für die Tablet-Ansicht (768px bis 1024px Screenbreite) angelegt, da auf dem iPad die Schriftgröße wegen der Auflösung von 132 ppi etwas kleiner angezeigt wird.

          Viele Grüße,
          Ellen

  5. Ein wirklich schönes Theme, welches nicht nur auf mobilen Geräten gut aussieht, sondern auch am „lokalen“ PC. Ich denke, das ich mir das Theme in den nächsten Wochen kaufen werden, da sich gerade die mobile Welt sehr stark weiterentwickelt :-)

  6. Klein, praktisch, gut. Gefällt!

  7. @Christian, @m.o.m,

    vielen Dank für das positive Feedback für Nori. Das freut uns sehr, dass euch das Theme gefällt :)

  8. Hallo Ellen!

    Mal wieder ein ganz tolles Theme, welches ich wohl für einen neuen Blog nutzen werde.
    Das gefällt mir doch sehr, dazu jedoch eine Frage.

    Wie verhält es sich zum Beispiel mit Werbebannern in der Sidebar im optionalen Widgetbereich? Angenommen ich möchte einen Adsense Banner mit einer Breite von 250px nutzen. Wie verhält es sich dann? Denn die hier genutzten Elemente sind alle kleiner, als 250px. Wie breit ist der maximale Bereich eines Widgets?

    Besten Dank schon mal.
    Schöne Weihnachten und vielen Dank für die tollen Infos im Jahr 2011 hier bei Elmastudio!

    Viele Grüße
    Tobias

    • Hallo Tobias,

      vielen Dank für dein positives Feedback zum Nori-Theme. Für Banner könntest du am besten eine zusätzliche CSS-Klasse (z.B. .banner) anlegen und dieser die Eigenschaft max-width:100% geben. Dann könntest du allen Banner-Images diese zusätzliche Klasse geben und sie würden sich in der Breite anpassen.

      Viele Grüße,
      Ellen

  9. Bis auf den footer ein sehr schönes Theme. Wenn der footer noch besser wäre, würde ich auch zuschlagen. ;)

    LG
    Ben

  10. Sehr schön, und der Ansatz von Mobile nach oben gefällt mir. Einzig das Menü ist mir optisch etwas zu hart.

  11. Feines Teil! Die Zweispaltigkeit finde ich super, siehe dieser Blog hier selbst :D

    Weiter so!

  12. Hallo Ellen,
    Design ist ist ja bekanntlich Geschmacksache. Mir persönlich gefällt es nicht so. Eure Themes sind technisch wirklich klasse und für den Preis echt Geschenkt nur darf es doch auch etwas mehr fürs Auge sein.

    Auch die Darstellung finde ich etwas zu unruhig und der Footer naja was hat dich da geritten ;)

    Wie gesagt Design ist Geschmacksache und mein Geschmack muss nicht richtig sein.

    Viele Grüße

  13. technisch super, aber das design ist mir doch zu minimal. hat etwas von alten hypertext anno 1989 :)

  14. Fatih M. Piontek

    Könnt ihr bitte bitte für euren Blog eine Auswahl für die User bereitstellen, mit welchem Theme man ih nsehen möchte? Das alte war viel schöner. Hat ne moderne, stylische und gemütliche Atmosphäre gehabt. Jetzt fühl ich mich wie auf ner Krankenstation :(

  15. Habe Nori in meinem eBook Blog eingesetzt. Bin begeistert. Finde den Ansatz mobile-first innovativ gerade im Zusammenhang mit eBooks für meine Belange sehr passend.

    Viele Grüße

  16. Hmmm, ich kann die Begeisterung nicht so ganz nachvollziehen.
    Den Ansatz ein WordPress-Theme für unterschiedlichste Bildschirmgrößen und Geräteklassen zu gestalten finde ich super. Technisch ist es sicherlich auch sehr gut gemacht. Und ich würde sowas auch liebend gerne einsetzen. Den Preis wäre es mir Wert.
    Aber die Optik? Vielleicht bin ich ja zu alt. Aber ich finde das ganze zu unruhig und unübersichtlich. Das beginnt schon bei der 2-Spaltigkeit der Artikelübersicht. Ständig muss ich rauf- und runterscrollen. Die (chronologische) Reihenfolge der Artikel ist auf den ersten Blick nicht nachvollziehbar und eine zweite Chance bekommen die meisten Seiten nicht.
    Im Footer wird es ganz schlimm. Das ist für mich, sorry, leider nur ein ziemlich ungeordneter Haufen von Informationen, die beziehungslos nebeneinander stehen.
    Damit Ihr mich nicht falsch versteht. Grundsätzlich schätze ich Eure Arbeit und schaue immer mal wieder gerne vorbei. Aber …

  17. Hallo Ellen,
    grundsätzlich bin ich begeistert von Eurer Arbeit. Gerade Eure tollen Tutorials zum DIY-Wordpress-Gestalten habe ich oft aufgerufen, Eure Freebies bewundert (und genutzt) – ja sogar ein Premium-Theme (Nilmini) habe ich gekauft und nutze es sehr gern. Und jetzt Nori.

    Ich kann gut verstehen, dass Ihr – nach Investition von Zeit und Kreativität – Eure Premium-Themes auch auf Eurer eigenen Seite durch Nutzung promotet. Und es gibt ganz zu recht auch Bewunderer und Käufer von Nori.

    Ich für meinen Teil kann allerdings meinem Vorredner Günter nur zustimmen: Der Weißraum wirkt hier nicht reduziert und einfach, sondern unruhig; der Zeitfluß der Artikel geht durch die Zweispalitgkeit verloren. Die Typographie wirkt gleichgültig und unpersönlich. Und was ich eigentlich am meisten bedauere: Der Spirit von elmastudio.de ist nicht mehr erkennbar.

    Ich kenne Eure Seite noch vor der Premium-Theme-Promoterei und gerade das Illustrative, die freundlichen Formen, der drollige Kaffeetassen-Spatz waren stimmig und passten besonders gut zum Ton und Wesen Eurer Artikel. Kein überkandideltes Design-o-gehabe sondern anregende, persönliche und dabei auch immer kompetente und interessante Schreibe. Der Tangram-Vogel im neuen Nori-Look ist ja ganz okayhey, aber er transportiert nicht mehr das, was Euch vor vielen anderen (so viele sind das gar nicht!!) deutschen Webdesign-Seiten von allgemeinem Interesse ausgezeichnet hat.

    Ja ganz recht, ich vermisse ein wenig das „alte“ elmastudio – immerhin hatte diese Seite bei mir eine ganze Zeit einen Tab in der Nachbarschaft von alistapart, webdesignledger, smashingmagazine, nicolasgallager und swissmiss. Und dahin passte elmastudio sehr gut mit diesem ganz eigenen „flavor“.

    Das ist jetzt nicht mehr erkennbar. Mit jedem alternierenden Wechsel Eures Seitenthemes geht elma-Identität verloren. (Ihr wollt doch nicht behaupten, dass Ihr Eure Message gleichermaßen in jedem Eurer Themes unterbringt …dann würde ja Versionierung reich, nicht? ;-) ) Und bitte: Man muss nicht jeden Trend mitmachen. Und diese zen-ige Weißraum-Helvetica-Gehype ist ja nun auch schon kein Trend mehr, sondern im Mainstream angekommen.

    Aber vielleicht habe ich ja auch nur Eure grundlegende Neuausrichtung nicht kapiert?

    Verwirrte Grüße
    modomiro

    • Hallo,

      minimalistisches Design ist nicht sicherlich nicht jedermanns Geschmackssache und das ist ja auch gut so, sonst würde es ja nicht so viel spannende Vielseitigkeit im Design geben. Aus unserer Perspektive haben wir uns von Design zu Design weiterentwickeln und das wir unsere neusten Themes auch für unseren eigenen Blog einsetzen hat eigentlich nicht viel mit Premium Theme Promotion zu tun, sondern eher damit, dass wir Spaß daran haben unsere neusten Theme-Designs auch selbst zu nutzen.

      Um die Design-Philosophie von Nori besser nachvollziehen zu können, möchte ich außerdem noch auf meinen Artikel „Mobile-first Webdesign: Hilfreiche Tipps und Erfahrungswerte“ aufmerksam machen. Vielleicht hilft dieser Artikel ja dem ein oder anderen dabei das minimalistische Designkonzept von Nori etwas besser zu verstehen.

      Viele Grüße,
      Ellen

  18. Bei mir ist Zweispaltigkeit auf einem 1366x768px großen Display nicht zu erkennen. Stattdessen sieht es derart unschön aus:

    http://www.skolnet.de/nori.png (Browser: aktueller Firefox in Windows 7)

    Ich schließe mich übrigens den Worten von modomiro an. Auch das Bild mit dem Krankenhaus kann ich unterschreiben. Was nützt mir der beste Motor, das beste Getriebe, die beste Ausstattung, wenn die Karosserie furchtbar ist. Das Auge fährt mit. ;-)

    • Hallo Marek,

      vielen Dank für den Screenshot, könntest du mir noch sagen, ob du JavaScript eventuell deaktiviert hast? Ich habe Firefox bei der gleichen Auflösung getestet und konnte diesen Fehler nicht feststellen.

      Und danke auch für dein ehrliches Feedback, auch wenn ich den Krankenhaus-Vergleich wirklich überhaupt nicht teilen kann. Ich empfinde das reduzierte, minimalistische Design von Nori sehr als erfrischend, die einzelnen Artikel und Bilder bekommen mehr Gewichtung und die Lesbarkeit der Texte ist meiner Ansicht nach sowohl auf einen kleinen Smartphone-Display, auf einem Tablet und auf einen großen Desktop-Monitor sehr angenehm. Ich arbeite ja jeden Tag mit dem Theme und empfinde es selbst als sehr gelungen.

      Viele Grüße,
      Ellen

      • Hallo Ellen und andere,

        welche Farbe seht ihr auf eurem Monitor beim Nori-Theme?

        Ich habe soeben mein Display mit Hilfe eines Spyder 4 Express Colorimeter eingestellt. Vor der Einstellung werden sämtliche Buttons, der Header oben etc. in hellem babyblau dargestellt. Nach der Kalibrierung erscheint das Babyblau in blassem türkis. Sehr interessant!

        • Hallo Marek,

          die Farbe ist je nach Monitor/Gerät etwas unterschiedlich, aber ich würde es als ein Mittelblau/Türkis beschreiben. Ich werde das aber auch einmal testen…

          Vielen Dank für deinen Hinweis,
          Ellen

  19. HI,
    ich finde das Theme wirklich gelungen und habe es mir mal geshoppt. Kann ich irgendwie beeinflussen, dass auf der Startseite die Posts einspaltig, evtl. etwas breiter und mittig anzeiget werden?

    Danke!

    • Hallo Kevin,

      es freut mich, dass dir das Nori-Theme gefällt. Ich habe es selbst bisher nicht getestet, aber du könntest die Media Queries ab „@media screen and (min-width: 1220px)…“ im Stylesheet (ab Zeile 2092) bearbeiten. Erst hier in der Desktop-Ansicht wird das Layout der Blog-Startseite zweispaltig.
      Der #content .post width-Wert ist auf 50% gesetzt. Diesen müsstest du bearbeiten und eventuell dann noch den margin-Wert anpassen. Am besten du probierst diese Anpassung bei einem Test-Blog (z.B. auf einem lokalen Server) erst einmal aus.

      Viele Grüße,
      Ellen

  20. guete morge mitenand
    wenn ich videos einfüge, kann ich diese mit dem desktop, nicht aber mit meinen mobile devices (iPod Touch und iPhone) abspielen – warum?
    herzliche gruesse, beat

  21. Ich bin immer noch begeistert vom Theme. Ich habe aber das Problem, dass mein Text-Widget im optinalen Widgetbereich rechts so ziemlich alle HTML-Anweisungen ignoriert. Links funktionieren, aber z.B. Listen, fett formatierte Schrift, etc, das wird einfach ignoriert. Ist das so gewollt und korrekt, oder hab ich da ein individuelles Problem?

    • @Jörg Helfmann: Vielen Dank für Dein Feedback und die Info. Listen-Elemente werden bei Nori in den Widgets generell ohne List-Styles angezeigt, fett sollte aber funktionieren. Ich werde das noch einmal selbst testen. Viele Grüße, Ellen

Schreibe einen Kommentar

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