Zurb Foundation 4

Zurb Foundation ist in Version 4 erschienen. Es wurde viel verändert und die Migration von Foundation 3 auf Foundation 4 ist sicherlich etwas schwierig. Die wichtigsten Änderungen finden beim Grid, in der Semantik und im Javascript statt.

Mobile First Grid

Das umfangreiche Prototyping Framework hat jetzt eine “Mobile First” Ausrichtung – was aufgrund der stark anwachsenen Mobilnutzung ein richtiger Schritt ist. Allerdings funktioniert das Gridsystem jetzt signifikant anders.

small und large

Die grid-bildenden Klassen heissen jetzt small-x und large-x. Es wird bis zu einer Breite von 768px die small Klasse benutzt, alles darüber hört auf large. Ein Beispiel wäre also.

<div class="row">
  <div class="small-2 large-4 columns">...</div>
  <div class="small-4 large-4 columns">...</div>
  <div class="small-6 large-4 columns">...</div>
</div>

Das exklusive nutzen von small oder large ist auch möglich. Wobei ich mir hier eine Nutzung der alten Syntax auch noch gewünscht hätte.

Verschachtelung (Nesting)

Natürlich ist Verschachtelung auch noch möglich. Dafür wieder ein row mit anschließender Breitendefinition einfügen.

<div class="row">
  <div class="small-8 columns">8 Nested
    <div class="row">
      <div class="small-8 columns">8 Nested Again</div>
      <div class="small-4 columns">4</div>
    </div>
  </div>
  <div class="small-4 columns">4</div>
</div>
Offset, Centered, Push

Offset – also der Abstand zwischen Grids – ist jetzt unter large-offset-x und small-offset-x verfügbar.

<div class="large-10 large-offset-1 columns">10, offset 1</div>

Das Zentrieren eines Gridelements funktioniert jetzt mit large-centered und small-centered. Wie gehabt wird small durch large überschrieben – sofern eins vorhanden ist.

<div class="small-6 small-centered columns">6 centered</div>

Dies ist nur ein kurzer Ausriss – das neue Grid bringt auch noch neue Optionen mit. So lassen sich über die SCSS Konfiguration viele Möglichkeiten ein und ausstellen.

Grid Dokumentation


Semantik

In der neuen Version wurde die Semantik verstärkt und der ausgegebene Quellcode ist dadurch übersichtlicher. Beschreibene Klassen wurden entfernt und durch eine Reihe von SASS Mixins und Erweiterungen ergänzt.

Beispiel: Panel Möchte man einen Panel Bereich definieren kann man entweder die vordefinierte panel Klasse nutzen oder einen semantischen Bereich mit einen SCSS Mixin verwenden.

Zuerst importieren: @import "foundation/foundation-global", "foundation/panels"; Dann erweitern: .your-class-name { @include panel; }

Jedes Mixin hat dazu noch Variablen, welche überschrieben werden können.

.your-class-name { @include panel($bg, $padding); }

$bg: $secondary-color
$padding: $panel-padding

Diesen Ansatz mag ich – allerdings fände ich persönlich Platzhalter besser – habe ich hier bereits einmal beschrieben. Warum? Weil hier der Import grundsätzlich wegfallen könnte.


Zepto statt jQuery

Die größte und kontroverseste Neuerung ist – dass die mitgelieferten Plugins nicht mehr auf jQuery sondern auf Zepto.js basieren.

Die Vorteile sind (fast 1:1 von der Zepto Webseite übernommen)… – die sehr geringe Dateigröße gegenüber jQuery – veraltete Browser werden nicht mehr unterstützt – deswegen die geringere Dateigröße – die gute Integration in nativen Webapps

Mehr kann ich zu Zepto allerdings nicht sagen, da es mir bis dato sehr unbekannt war. Die Syntax sieht der von jQuery recht ähnlich.

Für mich allerdings ein Stolperstein, da ich – und viele andere – noch nicht wirklich mit Zepto in Kontakt gekommen sind, stellt es eine Barriere dar. Schnelles Anpassen dauert jetzt etwas länger und der geneigte Entwickler wird wahrscheinlich lieber seine eigene jQuery Lösung einbauen anstatt Zepto zu nutzen. Kommt schließlich sehr oft vor dass der Prototyp in der späteren Entwicklung direkt in das Produkt einfließt.

BrowserRefresh Plugin (Sublime Text 2) →

Eine Alternative zu LiveReload. Die Seite wird erst über einen Shortcut aktualisiert also nicht jedesmal neu geladen. In einem kurzen Test hat es gut funktioniert – teilweise sogar besser gefallen, da ich nicht wirklich immer eine schnelle Vorschau brauche wenn ich speichere.

Habe ich mal meiner Sublime Text Plugin Sammlung hinzugefügt – welche ich auch etwas überarbeitet habe (und dabei mein Kommentar CSS verloren habe …. )

Typeplate →

Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass library concerned with the appropriate technical implementation of design patterns—not how they look.

Im heutigen dynamischen Web ist der wichtigstes Faktor eindeutig Typographie. Einer der ersten Aufgaben sollte es sein Entscheidungen der Schriftgröße und Farben zu setzen, ein Schritt der gut überlegt sein soll – und ich persönlich auch oft nur durch viel testen und justieren erreiche. Typeplate setzt genau hier an und bietet ein kleines Framework für die Webtypographie – und macht dabei auf 3kb vieles richtig.

Im empfehle mal die einzelnen Komponenten genauer anzuschauen – hier werden viele Best Practices angewendet. Und selbst wenn Typeplate an sich nicht im nächsten Projekt genutzt wird, kann man sicherlich einige Dinge übernehmen.

Smashing Magazine geht hier noch etwas weiter ins Detail und ein Demo gibt es hier.

Learn Git Branching →

Wer auch nur im Ansatz professionell Software entwickeln will, sollte sich mit Versionierung auseinandersetzen. Learn Git Branching gibt einen guten Überblick über die Basics und erlaubt einen schnellen interaktiven Einstieg in die Welt von Git.
Einfach mal probieren.

DRM for the Web? Say It Aint So →

Other problems specific to the current draft of the proposal include the fact that it might well be impossible for open source web browsers to implement without relying on closed source components

Leider scheint es, als ob zur Zeit Digital Right Management (DRM) in HTML5 Video implementiert werden soll. Scheinbarer Grund: Der User soll nicht mehr auf Third Party Plugins wie Flash und Silverlight angewiesen sein – was noch sehr oft genutzt wird um die Rechte der Copyright Inhaber zu gewährleisten (lässt sich sehr schön bei bspw. bei Lovefilm sehen. Wenn nun ein DRM Mechanismus in einem Open Source Projekt integriert wird, kann es nicht mehr sein, dass Software Open Source ist – denn ein DRM System ist “nicht funktionsfähig” wenn der Code eingesehen werden kann (neben der Tatsache, dass DRM sowieso nicht funktioniert).

Tim O’Reilly übrigens dazu:

On Alt Text →

As we crafted our templates, we discovered many places where an alt text would have been redundant, offering a blind user no new information not already provided by the page’s HTML text, and merely annoying that user with needless redundancy. Markup is an art, and the soul of that art (as with all design) consists of creating the best possible experience for the user.

Im aktuellen A List Apart Redesign hat man sich mit Alt Tags und Screenreadern auseinander gesetzt. Mit dem Ergebnis, dass das Alt Tag im Redundanz erzeugen. Nicht generell, nicht immer – aber es kommt vor.

Diesen Blog auf Google Currents verfolgen

Der eine oder andere nutzt vielleicht Google Currents als Newsreader. Darum habe ich eine Ausgabe auf Google Currents erstellt, den man hier folgen kann. Dabei habe ich die Beiträge so geordnet dass Artikel und Links getrennt sind – und hab somit endlich mal mein WordPress Backend aufgeräumt.

currents

Persönlich nutze ich übrigens diesen Service kaum, da RSS für mich die deutlich bessere Alternative darstellt. einfacher verfügbar ist und mir die Übersicht im Feedreader auch besser gefällt.

Das Erstellen einer Current Ausgabe ist übrigens denkbar einfach – Caschy hat es hier ganz gut beschrieben.

Sublime Text 3 Beta

Mein favorisierter Text Editor Sublime Text geht in die Version 3. In Sublime Text Blog hat Programmierer Jon Skinner die erste Beta Version, zusammen mit weiteren Informationen, veröffentlicht. Der Download ist allerdings nur für registrierte Benutzer – also für Inhaber eines Sublime Text 2 Lizenz. Deswegen habe ich mal die Beta Version installiert und ausprobiert.

Features

Symbol Indexing

Sublime Text kann jetzt einen Symbol Index aufbauen, was das direkte Springen zu Symbolen und Definitionen vereinfacht. Dies war vorher nur begrenzt möglich, z.B. wenn man bei Goto Anything (Strg + P) in der Suche ein @ Zeichen vorsetzt.
Einen ähnlichen Weg geht das Goto-Symbol Plugin für die Version 2.

Goto Symbol in einer CSS Datei in Sublime Text 3

Pane Management

Das Arbeiten mit mehreren Tabs (oder Panes) bietet jetzt mehr Möglichkeiten. Das Öffnen und Schließen eines neuen Tab- oder Gruppenansicht ist jetzt vereinfacht worden.

Working with multiple panes is now more efficient, with commands to create and destroy panes, and quickly move files between panes. You can see the new options under View/Groups, View/Focus Group and View/Move file to Group.

Speed

Sublime Text 2 war schon schnell, aber Version 3 soll noch schneller sein. Das kann ich auch bestätigen – öffne ich ST2 unter OSX, dauert es ca. 3-5 Sekunden. ST3 scheint unmittelbar nach dem Klick offen zu sein.
Ich muss dazu sagen, dass ich beide Applikationen vorher offen hatte, also wohl noch im Systemspeicher waren, trotzdem bin ich beindruckt.
Plugins sollen angeblich auch das Startverhalten nicht mehr beeinflussen. Hierzu kann ich nichts sagen – Package Control wird noch nicht unterstützt und jetzt alle meine Plugins zu installieren kommt nicht in Frage – hierfür bin ich zu sehr von Package Control verwöhnt.

API

Die API basiert jetzt auf Python 3.3. Plugins mit nativen Python Code, sollen nicht mehr den Hauptprozess stören und die ganze Anwendung ist stabiler. Kenne mich mit der Materie zu wenig aus – für Pluginentwickler also die Originalmeldung:

Sublime Text now uses Python 3.3 for plugins, and runs them out of process, so any plugins that load native code no longer risk crashing the main Sublime Text process. The API is also fully thread-safe, and provides several callbacks that run asynchronously (e.g., on_modified_async). There are also new API functions, including full access to the project data. Sublime Text 2 plugins will require porting to work with Sublime Text 3, however in most cases the changes will be small.

Ansonsten:

Der komplette Changelog findet sich hier.

Preis

Vorweg – Sublime Text 3 wird teurer. Kostete die derzeitige Version noch 59$ (umgerechnet 43€), werden in Zukunft 70$ (52€) verlangt. Laut Skinner die erste Preiserhöhung seit 5 Jahren. Preislich zwar günstiger als die (Mac) Konkurrenz Coda 2 (99 Euro) und Espresso (75 Euro), wird dieser neue Preis trotzdem einige Leute abschrecken.

Auch Sublime Text 2 wird ab jetzt zu dem neuen Preis erhältlich sein. Jeder Kauf zum neuen Preis beinhaltet aber automatisch die Lizenz für Version 3. Sublime Text 2 Käufer können den Nachfolger in der Beta Version bis zur Veröffentlichung kostenlos testen. Danach gibt es den Updatepreis von 15 – 30 Dollar, abhängig vom Kaufdatum.

Eine öffentliche Testversion soll es bald geben – ob diese wie der Vorgänger zeitlich unbegrenzt getestet werden kann, bleibt abzuwarten. Persönlich hoffe ich, dass dem so ist – denn auch wenn ich die Testversion unbegrenzt testen konnte, war mir klar, dass ST2 sein Geld wert ist und der Kauf für mich schon moralisch verpflichtend war. Aus Gesprächen mit anderen Nutzern habe ich erfahren, dass ich damit nicht alleine stehe.

Und?

Die Neuerungen sind bisher lesen sich ganz interessant, hauen mich persönlich aber nicht vom Hocker. Die Startzeit ist beindruckend, soviel ist sicher, aber für ein Upgrade fehlen mir persönlich noch einige Killer Features. Da es aber erst der Beginn der Beta ist, ist sicherlich noch mit einigen hübschen Dingen zu rechnen. Die letzte Beta hat in meiner Erinnerung 1,5 Jahre gedauert. Ich bleib gespannt.

Links

Defending Presentational Class Names →

Philip Walton, Codrops:

The use of presentational class names in web development has been considered a bad practice for about as long as classes have been around. The notion is so ubiquitous that when making that claim, few people even bother to justify it anymore, as if it’s self-evident.

Bad Practices are killing us – Dieser Beitrag behandelt, trotz der Überschrift beide Seiten. Ich persönlich bin kein Fan von beschreibenden CSS Klassen, es bringt einfach zuviele Probleme mit sich, trotzdem werden einige interessante Punkte aufgezählt.

Redesigning Google: how Larry Page engineered a beautiful revolution →

The Verge:

We went to Google looking for the person responsible for the new design direction, but the strange answer we got is that such a person doesn’t exist. Instead, thanks to a vision laid out by a small team of Google designers, each product team is finding its way to a consistent and forward-looking design language thanks to a surprising process.

The Verge war bei Google. Interessante Einsichten über das neue funktionierende Redesign und warum Google jetzt auch auf ein gutes Design achtet.

The Post-PSD Era →

Brad Frost:

Throughout my career, I’ve watched immensely talented designers waste a shitload of time creating fully fleshed-out comps of what a website could look like. Pixels get pushed, details are sweated, pages are printed out, hung on walls, and presented to clients. Clients squawk their feedback, then designers act on it. They repeat this dance until everyone is content or until nobody gives a shit anymore, which happens more often than you’d think. Only then do those pristine comps get handed more like shoved over to developers to build.

Brad Frost über den Einsatz von Photoshop im heutigen Webdesign. Auf kurz oder lang wird er sicherlich Recht bekommen – denn das Schubsen von Pixeln und Ebenen ist ein Relikt des bisherigen “Eine-Seite-für-Alle” Webdesign Prozesses, aber nicht mehr für das immer populärer werdende Cross Device Development.

alias.sh – manage your aliases in the cloud →

Bei Alias.sh kann man auf eine zwar noch wachsende, bislang aber schon qualitativ hochwertige Sammlung Alias’se (Ich kenn das deutsche Plural für Alias gerade nicht, sorry) für euer Terminal zugreifen.
Wer damit nichts anfangen kann, ein Alias kann als Variable für einen Terminal Befehl oder Script genutzt werden. Einfaches Beispiel: Dieser hier erstellt mit den Kürzel mcd einen Ordner und wechselt direkt in diesen.

Einmal angemeldet – können eure gesammelten Aliase (Richtiges Plural? Glaube ich nicht.) mithilfe von wget runtergeladen werden. Testen konnte ich bislang nur unter Ubuntu, da ich XTools nicht auf dem Mac installiert habe um wget zu installieren. Würde aber sicherlich auch mit curl funktionieren.

Flexible Foundations →

Trent Walton

In many ways, every time we use a pixel value in CSS we’re rasterizing what was a fully-scalable web.

Trent Walton über Responsive Websites und komplett-skalierbare Webseiten. Einer der Gründe warum ich mich immer mehr von “Pixeln” entferne und em/rem den Vorzug gebe.

When Infinite Scroll Doesnt Work →

Dmitry Fadeyev, UsabilityPost

Not only does the infinite scroll break this dynamic, it also makes it difficult to move up and down the list, especially when you return to the page at another time and find yourself back at the top, being forced to scroll down the list once again and wait for the results to load. In this way the infinite scroll interface is actually slower than the paginated one.

Ein interessanter Aspekt. Shopsysteme, anders als bei Twitter, benötigen Positionierungen um wieder gefunden zu werden. Auch wenn dieses nur relativ und temporär abhängig geschieht – Suchbegriff eingeben und dritte Seite anklicken – ist es schneller als zu scrollen und zu hoffen den Artikel wieder zufinden. Ansonsten stört mich dieses auch ausserhalb von Shopsystemen, da es öfter vorkommt, dass man eine Seite neuladen muss. Und nichts ist schlimmer als ewig zu scrollen.

Lassen wir dieses “Infinite Scrolling” am besten ganz weg. Bitte.

Ein neues Element für HTML5:

Peter Kröner:

Das neue Element bietet genau wie alle anderen neuen HTML5-Elemente zwei Dinge: zum einen ist es ein zusätzliches Sprachmittel für die Auszeichnung von Website-Teilbereichen, zum anderen hat es eingebaute ARIA-Funktionen, die wenn das neue Element korrekt benutzt wird, automatisch der Barrierefreiheit der Seite guttun. In Sachen Optik und Verhalten entspricht es genau wie section und Konsorten dem, was man vom guten alten div kennt.

Klingt plausibel, nachdem es bereits nav, aside oder header gibt, dem eigentlichen Hauptcontent auch ein eigenes HTML5 Element zu verpassen. Noch nicht wirklich nutzbar, da kaum Browserunterstützung vorhanden, aber wir kommen einen semantischen Netz näher.

Aber – warum eigentlich erst jetzt?

If you see a UI walkthrough, they blew it →

Max Rudberg:

These apps have chosen to reduce details to achieve a minimal UI, but in the process the UI has also become harder to use. Unfortunately a UI walkthrough is quite an inelegant way to explain the core functionality of an app. It can be a frustrating obstacle before you can dive into an app, and you have to remember all of those new ways of using it once you get in. 

Apps mit minimalistischer UI haben oft das Problem, dass zuviel reduziert wird. Hier wird dem User beim ersten Start gezeigt, wie was zu bedienen ist. Und das Problem: Man muss sich alles merken. Zumal der typische User oft diesen Schritt überspringt und dann ahnungslos vor einer zwar schönen, aber verwirrenden App steht. Auch nutzt man nicht direkt die komplette Funktionalität einer Applikation, oder will erst mal verschiedene Apps vergleichen (bspw. TODO Apps) – so dass man beim späteren Öffnen wichtige Funktionen und Features garnicht sieht und somit auch nicht nutzt.

Der verlinkte Artikel zeigt hierbei viele Beispiele aus dem IOS Bereich – kenne aber auch Beispiele aus dem Android und Windows Bereich.

Native Feature-Detection mit @supports →

Dr. Web:

Mit der „@supports“-Regel ist es möglich festzustellen, ob ein Browser eine bestimmte CSS-Eigenschaft beherrscht. Nur wenn dies der Fall ist, werden die CSS-Regeln, die innerhalb von„@supports“ definiert sind, auch ausgeführt.

Die Eigenschaft in der runden Klammer gibt die zu prüfende Eigenschaft an. Alles, was in der geschwungenen Klammer steht, wird ausgeführt, wenn der Browser die zu prüfende Eigenschaft versteht. Interessant wird die Funktion natürlich erst, wenn man auch eine Alternative ausgeben kann – für den Fall, dass der Browser die Eigenschaft eben gerade nicht unterstützt.

Eine native Feature Erkennung ist sehr interessant. Man kann viel einfacher neue CSS Standards integrieren, ohne den Umweg über Modernizr zu gehen. Dass diese Möglichkeit noch nicht nicht besteht ist allerdings nicht schlimm. Die meisten CSS3 Standards sind größtenteils in allen gängigen Browsern integriert und sollte sich @support schnell in den gängigen Browsern breit machen – sind kommende Möglichkeiten, nennen wir es CSS4, schon früh implementierbar.

Gute Idee.

Prototyping mit Foundation

Frameworks zum schnellen Erstellen von Webseiten Prototpyen schießen zur Zeit wie Pilze auf den Boden. Vor einigen Jahren fing es mit Gridsystemen, wie z.b. dem 960.gs, HTML5 Boilerplate oder dem Less Framework, an – ging über abenteuerliche Lösungen wie Semantic.gs bis hin zu Komplett-Paketen wie Twitter Bootstrap. Wer also heute schnell einen Webseiten Prototypen bauen will, braucht sich wahrscheinlich nicht mehr mit repetiven Codeschnipseln auseinandersetzen. Alles ist fertig.

Foundation

Und nun kommt mit Foundation von Zurb ein neuer Player auf dem Markt, der wieder vieles besser machen will. Und in seiner dritten Version scheint er vieles besser zu machen als die “Konkurrenz”. In letzter Zeit hatte ich viele Gelegenheiten mich mit diesem Framework auseinander zu setzen und es nicht bereit. Foundation ist für mich der zur Zeit beste Startpunkt für ein neues Projekt und hat mich vom (auch großartigen) Semantic.gs System abgebracht.

Features

Gridsystem

Das Foundation Grid ist in der Handhabung schnell zu verstehen, nutzt es eine semantische Syntax, die ähnlich dem anderer Gridsysteme ist. Dazu gibt es es keine Begrenzung in traditionellen Pixeln. Es ist zeilenweise aufgebaut und eine Zeile row kann die jeweiligen Gridbausteine beinhalten. Ein Beispiel:

<div class="row">
    <div class="eight columns">
        Content
    </div>
    <div class="four columns">
        Sidebar
    </div>
</div>

Standardmäßig ist die Maximalbreite 940px, kann aber schnell angepasst werden – sei es über den Download Builder, im CSS oder durch das Ändern einer SASS Variable (Was? Sass? Darauf komme ich noch zurück). Auch schön, es wird direkt die Border-Box verwendet, über die ich hier bereits geschrieben habe.

Dazu lässt sich das Grid ineinander problemlos verschachteln. Dies geschieht durch das einfügen einer neuen Zeile, die wieder die volle Angabe der Zeilen beinhalten kann. Es kann also 12 Spalten in einer Spalte geben, die übergeordnet 8 Spalten hat.

<div class="row">
    <div class="eight columns">
        Content
        <div class="row">
            <div class="six columns">Left Content</div>
            <div class="six columns">right content</div>
        </div>
    </div>
    <div class="four columns">
        Sidebar
    </div>
</div>

Dazu kommen noch viele kleine Verbesserungen, die helfen, das Layout genau anzusprechen, was den eigenen Arbeitsaufwand deutlich verringert. Collapse z.B. entfernt den Abstand zum nächsten Element. Weiterhin werden noch viele Standard Gridfeatures wie push, pull, centered oder last berücksichtigt. Eine detaillierte Dokumentation bietet die (festhalten) Dokumentation.

Responsive

Foundations Gridsystem ist nicht nur sehr intuitiv, es ist dazu auch noch Responsive. An sich heutzutage schon Standard, aber Foundation geht da noch etwas weiter. Standardmäßig werden die einzelnen Gridelemente dem Fenster angepasst, und bei Smartphone Dimensionen komplett auf 100% gesetzt. Wer dieses aber nicht möchte, kann sich das mobile Grid anschauen. Dieses bekommt nochmal vier Unterspalten und bietet weitere Einstellungsmöglichkeiten wie das Setzen von Blockelementen. Ein Beispiel HTML Markup: <div class="nine mobile-three columns">Lorem Ipsum</div> Dieser Container, der in der Desktop Ansicht also eine Breite von Neun hat, bekommt beim mobilen Aufruf eine Breite von Drei (von Vier). So lässt sich die mobile Ausgabe sehr einfach steuern.

Modular Scale Typo

Ein Feature wo sich Foundation von anderen Frameworks abhebt, ist Modular Scale Typo. Dies ist ein System für die Deklarierung von Schriftgrößen. Die Idee hierzu stammt von einem “A List Apart” Artikel und beschreibt im Wesentlichen die Skalierung von Schriftgrößen nach einem vorhanden Muster (wie der “Goldene Schnitt”). Dies führt zu einem stimmungsvolleren Schriftbild bei. Für mehr Informationen empfehle ich den “A List Apart” Artikel.

Viele Elemente bereits vorhanden

Foundation bringt viele oft genutzte Module bereits mit. Wie einen Responsive Slider (“Orbit”), modale Dialoge (“Reveal”) oder eine Website Tour (“Joyride”). Zumindest in der Prototyp Phase sind diese sehr nützlich. Ob man diese später auch in der Produktion nutzen will, bleibt dem Entwickler natürlich selbst überlassen. Foundation Templates Auch eine gute Idee: Fertig gestylte Templates. Häufige Layouts sind also bereits zur Vorauswahl vorhanden. Ggf. kann man sich dadurch auch inspirieren lassen.

SASS oder CSS

Foundation nutzt SASS, dieser Preprozessor ermöglicht ein schnelles Anpassen in der vars.scss. Wer allerdings kein SASS nutzen kann/will, kann auch auf eine bereits kompilierte CSS Datei zugreifen und diese via Konfigurator zuvor auch noch anpassen. Persönlich würde ich trotzdem die SASS Version empfehlen, da später eintreffende Änderungen so schnell noch hinzugefügt werden können, während die CSS Version hier naturgemäß komplizierter ist. Am besten selbst anschauen – der Konfigurator / Download ist hier.

Fazit

Foundation hat mir bereits bei vielen Projekten viel Zeit gespart. Besonders in einer frühen Entwicklungsphase, in der noch viele Designentscheidungen offen sind, ist es äusserst hilfreich schnell UI Elemente einzubauen und zu testen. Auch kann man Foundation später einfach in Projekte integrieren – wobei ich empfehlen würde, hier nicht benötigte Komponenten vorher “auszumisten” – da hier sehr viel mitgebracht wird, was wahrscheinlich nicht gebraucht wird.

Links

Idiomatic-css →

Über Idiomatic CSS bin ich gerade eher zufällig auf Coderwall gestolpert. Im wesentlichen ist es ein Styleguide, der gängige Best Practices im CSS zusammenfasst. Ich stimme komplett mit dem genannten überein, aber an sich sehr interessant, besonders für Anfänger.
Eine deutsche Übersetzung ist auch vorhanden.

Framote – Remote URL control →

Framote is a tool to share multiple websites without the need for the user to reload or even touch a thing. Your Framote URL will have an initial embed website wich you’ll be able to change anytime at your Control URL.
The devices which have the Framote URL opened will be updated almost instantly.

Ein vielleicht nützliches Tool für alle, die Cross-Device testen. Die Seite wird im iFrame geladen und aktualisiert sich bei einer Änderung der Seite von selbst, ohne dass neu geladen werden muss.

Flexbox – Eine Einführung

Die Flexbox ist einer der spannensten Ansätze, die CSS3 zur Zeit zu bieten hat. Es erlaubt den schnellen, unkomplizierten Aufbau einer WebApp – mit einem hohen Maß an Flexibilität.

Dies ist der erste Teil und beschreibt nur ansatzweise die CSS Flexbox. Inzwischen gibt es einen zweiten erweiterten Artikel von mir an dieser Stelle.

What the Flex?!

Genauso flexibel scheint auch die Spezifikation der W3C zum Thema zu sein. Die jetzige Form – die ich jetzt vorstellen will ist zur Zeit die dritter Iteration und der dritte Ansatz. Sollte dieses Thema also weiter Interessieren, achtet bitte auf Veröffentlichungsdaten der Artikel. Solltet ihr also etwas von flex() oder display: flexbox lesen, seid ihr falsch. Wirklich.

Hier ein einfaches HTML Gerüst:

<div class="wrapper">
    <header role="banner">Seitenkopf</header> 
    <div class="main">
      Lorem Ipsum ....
    </div>
    <aside>Sidebar</aside> 
    <footer>Copyright and stuff</footer>
</div>

Normalerweise würden man jetzt ein paar float‘s einfügen und die Weiten angeben. Dürfte dann ungefähr aussehen wie in diesem Beispiel.

Ändert man den umschließenden Wrapper dementsprechend, dass display: flex hinzugefügt wird, bekommt man einen ähnlichen Output – ohne float und clear. Diese beiden Attribute haben keinerlei Einfluss auf die Flexbox. Das CSS sieht jetzt folgenermaßen aus.

.wrapper{
    display: flex;}

.head{ 
    background-color: #f00; }

.main{ 
    background-color: grey;
    order: 2;}

.sidebar{  
    background-color: green;
    width: 30%;
    order: 1;}

.copy{ 
    background-color: blue;}

Ein funktionierendes Beispiel gibt es hier.

Reihenfolge und Seitenverhältnis in der Flexbox

Die Anordnung kann man simpel mit order bestimmen. Selbsterklärend dass order: 1 sich auf das erste Element bezieht und die dargestellte Reihenfolge sich an den steigenden Zahlenwert orientiert. So kann man schnell und einfach weitere Elemente hinzufügen (Hier als Beispiel.):

<div class="secondary-content">
   Noch mehr Content. 
</div>

Mit folgendem CSS .secondary-content{ order: 3; }, kein Problem

Auch muss man keine explizite Wertangaben benutzen, das Verhältnis reicht. Statt z.b. width: 20%, kann flex: 1 und flex: 2 benutzt werden. Das entspricht dem Seitenverhältnis von 2:1. Hier das bisherige Beispiel mit einem Verhältnis von 1:2:1. Natürlich kann hier auch einfache Prozentwerte im Flex Attribut nutzen, wie flex: 20%;.

Gibt es noch mehr?

Ja. Viel mehr, z.B. flex-flow. Aber dazu später mehr. Dieser Text ist schon länger als er eigentlich geplant war.

Kann ich es schon nutzen?

Flexbox funktioniert zur Zeit nur im Chrome 22+, Opera 12+ und Blackberry Browser 10+. Ausserdem ist es bereits die dritte Syntax für den Bereich seit 2010. Die Chancen bestehen sogar, dass sich Flexbox vielleicht noch einmal ändert. Wer es nutzen will, sollte also auch einen Fallback mit Modernizr und float‘s implementieren. Ein Polyfill ist zur Zeit für die neueste Syntax noch nicht verfügbar. Dennoch – ein spannendes Thema.

Fragen, Kritik und Anregungen – gerne in die Kommentare oder per Mail!

Links

Redesign Trend in Tech News Sites: Big, Responsive and Content Heavy →

Dmitry Fadeyev, Usability Post:

While I like the style direction, I think these sites are trying a little too hard to work like apps, and in doing so, they surrender the strengths of the plain website, namely: simple, responsive navigation mechanisms. Simple sites don’t lag and don’t have any ambiguous navigation elements. They behave like a page, which, while being a constraint, is not necessarily a bad thing. The new wave of responsive redesigns in tech news sites certainly look good with their nice typography and healthy use of whitespace, but they feel heavy, they don’t feel right in the browser. They look more like apps but the speed and responsiveness of a native app just isn’t there.

Dmitry zählt hier einige schöne Beispiele auf, wie z.B. TNW oder Mashable. Er spricht auch die Vorteile ein, aber die Nachteile kann man nicht von der Hand weisen. Erstens scheinen sie ein teilweise recht seltsames Scrollverhalten an den Tag zu legen und zweitens scheint es so, als wäre man irgendwie in die App Version der Seite gelandet, ausser dass es irgendwie nicht wirklich gut funktioniert.
Mein Ansatz hierbei wäre, die Seite bei Desktopauflösung wie eine normale Seite aussehen zu lassen und erst später in das App Feeling zu wechseln. Aber trotzdem können wir einer schönen Mobile-First Zukunft entgegenblicken.

HTML5 mythbusting →

Chris Heilmann:

Comparing an HTML5 application’s performance with a native App is comparing a tailored suit with one bought in a shop. Of course the tailored suit will fit you like a glove and looks amazing but if you ever want to sell it or hand it over to someone else you are out of luck. It will not be the same for the next person.

Chris Heilmann geht im Mozilla Blog auf Mythen in Bezug auf nativen Apps, Monetarisierung und Entwicklung ein. Deckt sich in vielen Bereichen mit meinen Aussagen und Ansichtsweisen. Für App und Frontendler durchaus lesenswert.

Subcompact Publishing →

So why do so many of our digital magazines publish on the same schedule, with the same number of articles as their print counterparts? Using the same covers? Of course, they do because it’s easier to maintain identical schedules across mediums. To not design twice. To not test twice (or, at all).

Unfortunately — from a medium-specific user experience point of view — it’s almost impossible to produce a digitally indigenous magazine beholden to those legacy constraints. Why? Not least because we use tablets and smartphones very differently than we use printed publications.

Ein ausführlicher Artikel über das Veröffentlichen im Digitalen Medium. Besonders in Zeiten der “Zeitungskrise”, wo deutsche Verleger Digital Publishing mehr oder weniger nur “versuchen” und ihre Artikel hinter einer Paywall verstecken, zeigt der Artikel welche Möglichkeiten das Medium eigentlich bietet. Also Lesebefehl.



Achievement accomplished
You now have 30 lives.
Use them wisely, my friend.

Konami Easter Egg by Adrian3.com