Kategorien
E-Business SEO & Online-Marketing

Cerberus: Responsive HTML E-Mail, die überall funktioniert

Ted Goas aus New Jersey weiß, wovon er spricht. Folgerichtig nennt er sein jüngstes Projekt Cerberus, eine Reminiszenz an den dreiköpfigen Höllenhund aus der griechischen Mythologie. Obschon Cerberus im Original eher die Aufgabe hat, das Tor zur Unterwelt zu bewachen, hält Goas den Namen dennoch für sprechend. Denn dieser Cerberus hier muss sich in der dreiköpfigen Hölle der Desktop-, Mobil- und Outlook-E-Mail-Clients behaupten. Cerberus ist eine Sammlung von übergreifend funktionierenden Elementen, realisiert in der Form zweier Templates.

cerberus

Cerberus: Zwei Templates, Sie alle zu knechten

Ted Goas ist der Entwickler des Frameworks Responsive Email XX, ursprünglich ersonnen, die gleiche Aufgabe zu erledigen, für die er jetzt den Höllenhund an den Start bringt. Nach eigenen Angaben wurde Responsive Email XX Ted selber zu kompliziert, so dass er es am Ende selber nicht mehr nutzen mochte. Naheliegenderweise beschloss er, das Projekt noch einmal komplett zu überdenken. Das Ergebnis dieses Denkprozesses ist Cerberus.

Cerberus ist weit einfacher und beschränkter, dabei aber vollauf ausreichend, um die Aufgabe, responsive HTML E-Mails damit zu erstellen, zu meistern. Die zwei Templates, die Cerberus letztlich ausmachen, unterscheiden sich in einem wesentlichen Punkt. Während das eine auf Media Queries setzt, um responsiv zu sein, ist das andere komplett fluid erstellt. Nachdem damit beide Templates responsiv funktionieren, hängt es im konkreten Fall eher davon ab, wem Sie E-Mails schicken wollen.

Der größte Nachteil der Media Queries-Variante besteht darin, dass sie mit iOS Gmail, Android Gmail und Android Mail 4.4 schlicht nicht funktioniert. Sie kooperiert perfekt mit nahezu allen anderen Clients, etwa den Web-Vertretern von Gmail, Yahoo, AOL Mail und Outlook, aber auch mit Desktop-Clients wie Apple Mail, Outlook und Thunderbird und grundsätzlich sogar mobilen Clients wie iOS Mail und Android Mail to 4.3. Hier können Sie die Demo sehen.

Dann aber, wenn der Leser Gmail unter iOS oder Android oder Android Mail 4.4 einsetzt ist Schluss. Android Mail 4.4 erlaubt die Umwandlung von Tabellen-Spalten in Zeilen nicht, while es {display:block !important;} nicht unterstützt, während die Gmail-Apps den <style>-Tag gleich ganz übersehen.

Wollen Sie nun einen Newsletter für Outlook-Enthusiasten versenden, dürfte diese Einschränkung für Sie eher kein Problem sein. Denn Sie könnten wohl mit einiger Berechtigung davon ausgehen, dass Outlook-Enthusiasten Ihren Newsletter im favorisierten Outlook-Client lesen werden. Wenn sich Ihre E-Mails jedoch zu einem Gutteil an mobile Nutzer richten, wird wohl das zweite Template interessanter für Sie sein.

Das zweite Template verhält sich komplett fließend (fluid). Das sieht super auf kleinen Bildschirmen, aber weit weniger toll auf sehr großen Bildschirmen aus. Das Problem mit großen Bildschirmen relativiert sich dadurch etwas, dass man auch auf diesen Auflösungen E-Mail innerhalb irgendeines Clients lesen wird, der die eigentliche E-Mail in einem Teilfenster auf Größe bringt, entsprechend also die Breite reduziert. Das ist auf jeden Fall so in Outlook, es sei denn, Sie gehören zu den Personen, die die Mail aus dem Vorschaufenster heraus als Vollbild öffnen lassen. Etwas, das ich während der vielen Jahre meiner aktiven Nutzung des klobigen Microsoft-Clients nie getan habe.

Das fließende Template setzt die Breiten prozent-basierend, so dass das Layout in der Horizontalen schrumpft, je kleiner das Zieldisplay ist. Alle CSS-Styles sind inline. Hier können Sie die Demo sehen.

Cerberus ist komplett kostenfrei verwendbar. Es steht unter der MIT-Lizenz, was es Ihnen ermöglicht, private, wie kommerzielle Projekte damit abzuwickeln. Der Download erfolgt via Github.

Links zum Beitrag

Tools und weitere Ressourcen

Kategorien
JavaScript & jQuery Programmierung

Flat, Mobile, Responsive: Frische JavaScripte und jQuery-Plugins des Monats September 2013

Mit jQuery-Plugins und JavaScript-Tools ist es wie mit WordPress-Themes, Fonts, Icons und anderen Ressourcen für die Designer- und Developer-Community. Es gibt sie in schier rauhen Mengen. Dabei ist es gerade bei JavaScript- und jQuery-Lösungen wichtig, den Überblick zu behalten. Denn, wenn man schon ein externes Werkzeug einsetzt, dann sollte es wenigstens nicht von Anno Tuck, sondern halbwegs frisch und zeitgemäß sein. Einige aktuelle Vertreter dieser Spezies hat Dr. Web für Sie zusammen gestellt.

Das mobile Webdesign ist eines der ganz großen Themen in der Developer-Gemeinde. Das schlägt sich auch in der Entwicklung von JavaScripten und jQuery-Plugins nieder. Neben Tools für die Einblendung von mobil-typischen Fortschrittsbalken und die mobil-orientierte Ansprache bestimmter Geräte, finden Sie auch einen Clone des Editors aus dem Dienst Medium, den die Twitter-Erfinder gegründet haben. Ebenso werden die Fans responsiven Designs bedient. Alle Tools sind ganz aktuell oder, wie im falle von Mozillas TogetherJS ganz aktuell aktualisiert worden ;-)

TogetherJS: JavaScript-Bibliothek von Mozilla umbenannt

togetherjs

TogetherJS kennen regelmäßige Dr. Web-Leser(innen) bereits. Schon im April stellten wir den Dienst ausführlich vor. Damals hörte er noch auf den Namen TowTruck, zu deutsch: Abschleppwagen und war ersonnen worden, um Developern kollaborativ bei der Arbeit zu helfen. So erklärte sich auch der Zusatz "Who you call, when you get stuck", zu deutsch: Den du rufst, wenn du stecken bleibst.

Mittlerweile sieht Mozilla den Anwendungszweck breiter gefasst und schlägt sogar vor, die JavaScript-Bibliothek, die nach wie vor ohne weitere Abhängigkeiten auskommt, zur Verwaltung der Einkaufsliste für die nächste gemeinsame Party zu verwenden. Näheres dazu im folgenden Video:

TogetherJS steht unter MPL-Lizenz (Mozilla Public Licence) kostenfrei zur Verwendung bereit.

TogetherJS: Produkt-Website | Github-Repository

PACE zeigt einen Fortschrittsbalken beim Laden einer Seite

pace

PACE bietet einen vollautomatischen Ladebalken für jede Website mit dynamischen Inhalten und funktioniert ohne weitere Abhängigkeiten. Das Tool wird mit verschiedenen Themes geliefert und erfordert keinerlei Konfiguration im Übrigen. PACE läuft in der Tat vollautomatisiert.

Die Einbindung des JavaScript, nebst des gewünschten Themes an frühestmöglicher Stelle ist völlig ausreichend. Das Tool kann kostenfrei zu jedem legalen Zweck eingesetzt werden, solange die Lizenzinformationen nicht entfernt werden.

PACE: Demo | Github-Repository

FlowType.JS ändert Schriftgröße und Zeilenhöhe responsiv

flowtypejs

FlowType.JS sorgt für die Änderung der Schriftgröße und des Zeilenabstandes eines Texts in Abhängigkeit von der Breite des umgebenden Elementes. Auf diese WEise soll die maximale Lesbarkeit der Texte auf allen Geräten und Auflösungen gewährleistet werden. Die Demo-Site gibt einen guten Eindruck davon, dass das auch recht gut funktioniert.

Via CSS gibt man die Start-Optionen vor, als Parameter am Function-Call, der auf das gewünschte Element erfolgt, sind Änderungen möglich. FlowType.JS steht unter MIT-Lizenz kostenfrei zur Verwendung bereit.

FlowType.JS: Demo | Github-Repository

One Page Scroll: Website für Freunde des iPhone 5S

onepagescroll

Wer sich eine Website wie diejenige zum iPhone 5S wünscht, der wird sich über One Page Scroll freuen. Dieses JavaScript von Pete R., wie sich der thailändische Gründer von BucketListly selbst nennt, setzt das bildschirmfüllende Scrollen perfekt um.

Im Beispiel ist der Onepager dreigeteilt, diesbezüglich bestehen jedoch keine Limitationen. Die Zahl der gewünschten Scroll-Abschnitte wird beispielsweise per Section-Tag festgelegt, andere Tags gehen auch. Es ist nur darauf zu achten, dass man etwa abweichende Section-Container dem JavaScript benennt, da es sonst nicht funktionieren kann. Natürlich funktioniert das Scrollen auch per Swipe auf Mobilgeräten. Leider gibt Pete R. keine Lizenz an.

One Page Scroll: Demo | Github-Repository

Formbuilder.js: Grafisches Interface für die clientseitige Formularerstellung

formbuilderjs

Formbuilder.js ist noch nicht im Endausbauzustand angekommen. Der Formular-Builder ist zur Zeit lediglich in der Lage, die clientseitige Formulargestaltung zu übernehmen. Die komplette serverseitige Verarbeitung muss eigenständig programmiert werden. In einer der kommenden Versionen soll die Server-Funktionalität allerdings noch ergänzt werden.

Schon jetzt ist es komfortabel möglich, sich Formulare mit der Maus zusammen zu klicken. Das kann doch Google Forms auch, werden Sie vielleicht jetzt denken. Das stimmt, jedoch kann Formbuilder.js in die eigene Applikation nahtlos integriert werden. Das Tool steht unter MIT-Lizemz zur kostenfreien Verwendung bereit.

Formbuilder.js: Demo | Github-Repository

Device.js: JavaScript und CSS auf mobile Geräte zuschneiden

devicejs

Device.js ist ein Hilfsmittel für die zielgerichtete Ansprache des Besucherbrowsers mit CSS und JavaScript. Device.js erkennt verschiedene Geräte-Charakteristika. Erkannt wird etwa, ob es sich um einen Phone-, Tablet- oder Desktop-Besucher handelt, ob das Gerät hochkant oder quer gehalten wird und welches Betriebssystem darauf läuft.

Hat Device.js die Erkennung abgeschlossen, fügt es dem HTML-Element die entsprechenden CSS-Klassen hinzu, die der Entwickler wiederum gezielt ansprechen kann. Die Idee ist interessant, allerdings wegen des Konzepts der Browser-Detection nicht absolut zuverlässig. Das Tool kann kostenfrei zu jedem legalen Zweck eingesetzt werden, solange die Lizenzinformationen nicht entfernt werden.

Device.js: Demo | Github-Repository

Vex: Unabhängige JavaScript-Bibliothek liefert schicke Dialog-Overlays

vex

Vex erlaubt die Erstellung schicker, sehr moderner Dialog-Overlays. Dazu liefert es einige Themes mit, jedoch können auch völlig individuelle Overlays erschaffen werden. Die komplette Ansteuerung läuft pro Dialog, so dass prinzipiell kein Overlay dem anderen gleichen muss. Das Tool wiegt unter 7kb, benötigt keine weiteren Komponenten und steht unter MIT-Lizenz zur kostenfreien Verwendung bereit.

Vex: Demo | Github-Repository

Ion.Tabs für jQuery bringt konfigurierbare Tabs mit Skin-Support

iontabs

Das jQuery-Plugin Ion.Tabs erlaubt die einfache Erstellung einer Tab-Navigation nebst Inhalts-Tabs über eine einfache HTML-Struktur, die mit HTML5 Data-Attributen angereichert wird. Die Data-Attribute werden dann vom Plugin verarbeitet und umgesetzt. Die Optik der Tabs wird über Skins gesteuert, von denen zwei mitgeliefert werden. Das eine liefert ein klassisches Tab-Design mit begrenzenden Linien, das zweite orientiert sich am Flat Trend. Da die Skins CSS-Dateien sind, ist Ihrer Fantasie natürlich keine Grenze gesetzt. Auch Ion.Tabs kommt aus Russland und steht unter MIT-Lizenz zur kostenfreien Verwendung bereit.

Ion.Tabs: Produktseite | Github-Repository

MediumEditor klont den WYSIWYG-Editor von Medium.com

medium-editor

Medium Editor steht unter der außergewöhnlichen Beer-Ware-Lizenz, die besagt, dass Sie das Tool völlig kostenfrei verwenden dürfen. Sollten Sie dem Entwickler jedoch einmal begegnen, müssen Sie ihm ein Bier ausgeben. Da selbiger Davi Ferreira heißt und in Rio de Janeiro lebt, dürfte die Gefahr für die meisten von uns überschaubar bleiben ;-)

Inhaltlich ist MediumEditor ein Clone des Editors des Dienstes Medium.com. Formatierungen werden innerhalb des Editors per Rechtsklick initiiert. Eine Toolbar erscheint direkt am markierten Element und stellt sinnvolle Formatierungsoptionen bereit.

Der Aufruf von MediumEditor ist simpel. Nach dem Einbau des zugehörigen CSS und der Einbindung des eigentlichen Scriptes wird eine Instanz desselben aufgerufen. Dieser gibt man die zu überwachende Klasse mit, die standardmäßig .editable heißt. Künftig wird nun jedes Element, das mit der Klasse .editable ausgestattet ist, mit einem MediumEditor versehen.

MediumEditor: Github-Repository

Kategorien
Design HTML/CSS Responsive Design

CIKONSS 1.0: Responsive Icons mit purem CSS, die sogar im IE funktionieren

Icons auf der Basis von PNG, GIF oder meinetwegen auch JPG sind nichts neues. Neuer ist die Vorgehensweise, PNG-Icons in einer Datei als sog. Sprites zu versammeln, um so einiges an Requests zu sparen. Noch interessanter ist es aber, Icons nur mit purem CSS zu erstellen und so auf Overhead komplett zu verzichten. CIKONSS setzen diesen Gedanken um, wobei sie ungewöhnlicherweise auf CSS2 basieren. Auf diese Weise funktionieren die Symbole sogar im Internet Explorer 8.

cikonss-startpage-550

CIKONSS: Und es hat Zzap gemacht

Milana Cap aus Serbien arbeitet seit 5 Jahren als Webdesignerin unter dem Namen Zzap. Daneben ist sie klassische Musikerin am serbischen Nationaltheater. Man kann sicher sagen, dass ihr sehr um die schönen Künste gelegen ist. Von sich selbst sagt sie, dass sie alles, was sie heute über das Web weiß und kann, von der Open Source Community gelernt hat. Das Projekt CIKONSS hat sie aufgelegt, um eben dieser Community etwas zurück zu geben. Meiner Meinung nach ist dieser Versuch durchaus als gelungen zu bezeichnen.

CIKONSS: 43 Icons in unterschiedlichen Größen und Formen

Da die CIKONSS auf CSS2 basieren, sind sie hinsichtlich ihrer Vielfalt etwas eingeschränkt, funktionieren dafür browser-übergreifend, insbesondere auch im ansonsten stets etwas widerspenstigen Internet Explorer. Milana Cap erstellte insgesamt 43 Icons, die allesamt dem UI-Design zuzurechnen sind. Jedes Icon steht in fünf Größen und drei Stilen zur Verfügung.

Die Einbindung in die eigene Website ist simpel. Ich gehe davon aus, dass Sie sich die CIKONSS von Github heruntergeladen und wieder auf Ihren Webspace hochgeladen haben. Nun binden Sie sie wie folgt ein:

Unter Verwendung der Kombination verschiedener Klassen platzieren Sie nun die Icons an beliebiger Stelle Ihrer Website. Das kann zum Beispiel so passieren:

Im Ergebnis sähe das dann so aus:

icon-mail

Jedes Icon wird über die Kombination zweier Span-Elemente definiert. Das erste Span besteht aus der Angabe der Klasse icon, eventuell in Kombination mit einer Größenangabe wie icon-mid für ein Symbol mittlerer Größe. Das zweite Span definiert dann das eigentliche Symbol, in unserem Beispiel einen Briefumschlag als Icon für Mail, hier icon-mail.

Innerhalb des ersten Span kann als dritter Parameter noch ein Stil angegeben werden. Unterbleibt die Angabe, erscheinen die Icons ohne umgebenden Rahmen. Will man die Symbole indes mit einem quadratischen oder runden Rahmen versehen, würde man icon-square oder icon-rounded hinzufügen.

icon-variants
Alle zur Verfügung stehenden Stile

Die definierten Größen der Symbole sind im mitgelieferten CSS einfach anzupassen, so man das möchte. Sie basieren auf em. Für die Icons mittlerer Größe sieht die Standarddefinition so aus:

.icon-mid {
    font-size: 2em;
}

CIKONSS 1.0 steht auf Github, wie auch auf der Projektwebsite zum kostenlosen Download bereit. Es kann unter der MIT-Lizenz sowohl für persönliche, wie auch kommerzielle Zwecke frei eingesetzt werden. Das Projekt ist knappe zwei Wochen alt, also noch ganz frisch. Get it while it’s hot…

Links zum Beitrag

Kategorien
Themes WordPress

14 kostenlose WordPress-Themes, frisch aus März 2013

Auch der März brachte wieder einige gute, frische WordPress-Themes für den Selbsthoster. Wir zählten 14 ernstzunehmende Vertreter. Das ist keine überwältigende Zahl, was aber wohl angesichts der bevorstehenden Version 3.6 von WP nicht verwundern sollte. Sollte die neue Version tatsächlich Ende April verfügbar sein, ist für denselben Zeitpunkt mit einer nennenswerten Zahl angepasster Themes zu rechnen.

Clutterless

Die Mehrheit der im März erschienen Themes ist eher für den persönlichen Blog gedacht. Etwas überraschend fanden wir die Tatsache, dass auch Themes für Tumblogs im Kommen sind. Das mag aber sicherlich dadurch inspiriert sein, dass das kommende Standardtheme Twenty Thirteen mit seiner Vielzahl an unterstützten Post-Formaten und seinem Ein-Spalten-Layout ebenfalls stark in Richtung Tumblogging tendiert.

Die meisten der Themes des Monats März sind responsiv, manche sogar für Retina-Auflösungen geeignet. Einige basieren auf Twitters Bootstrap, andere auf dem Hybrid Core Framework.

Kostenlose WordPress Themes: Ausgabe März 2013

Alle Themes werden im Rahmen einer Galerie präsentiert. Unterhalb der Galerie finden Sie eine Tabelle, die die wesentlichen Features in einer Übersicht gegeneinander stellt.

Von Theme zu Theme navigieren Sie innerhalb der Galerie, in dem Sie entweder auf den Screenshot klicken oder die Navigationselemente unterhalb des Beschreibungstextes verwenden. Links zu Demo und Download finden Sie in der Galerie-Einzelansicht zu jedem Theme.

WordPress-Themes 03 2013: Übersicht

 Theme-Titel  Genre  Responsiv Mehrsprachig  Div.  ASM
 Attitude Firmenwebsite  Ja  Ja  Custom Post-Types, Page Templates, Widgets  Retina-ready
 Satu  Tumblog  Ja  Ja  — Basiert auf Hybrid Core
 Contango  Blog Nein  Ja  NA
 Sensitive  Portfolio, Firmenwebsite  Ja Nein  Custom Page Templates Nutzt Twitter Bootstrap
 Rockers  Blog  Ja  Ja  NA
 FirmaSite  Blog  Ja  Ja Unterstützt BuddyPress / bbPress Nutzt Twitter Bootstrap
 Clippy  Blog  Ja  Ja  —  Pinterest-Style
 Clutterless  Blog  Ja Nein  Pro-Version kostet $9 (mit Support)  Retina-ready
 Focus  Video  Ja Nein Video-Player out of the box  NA
 Artworks  Portfolio  Ja Nein  NA
 Empty Spaces  Tumblog, Blog  Ja Nein  Post Formate, Widgets im Header  NA
 Celesta Songtexte Nein Nein  Custom Post-Types/Taxonomie  NA
 Django  Magazin Nein Nein  Für Banner-Ads vorbereitet  NA
 SympalPress  Blog, Tumblog  Ja  Ja Pro-Version kostet $49  NA

Wollen Sie nochmal unsere Übersichten der letzten Monate besuchen, hier sind sie:

(sbu/dpe)

Kategorien
Design HTML/CSS

The Heads-Up Grid und SpryMedia Grid – Gitternetzoverlays für das Webdesign im Browser

Es ist ja schön und gut, dass gängige Grid-Frameworks, wie etwa das 960.gs, die Definition und Verwendung gridbasierter Layouts vereinfachen. Eine optische Prüfmöglichkeit, um auch an den Details arbeiten zu können, bringen diese Frameworks jedoch nicht mit. So muss man sich auf die eigenen Augen verlassen und natürlich auf die Codequalität des Gridsystemlieferanten. Wer sein Grid frei baut, also ohne Toolunterstützung, weiß womöglich noch eher, wovon ich rede. Die beiden Tools aus dem folgenden Beitrag versprechen, bei der Positionierung der Designdetails behilflich zu sein…

grid-artikelbild

Grid-Framework: The Heads-Up Grid muss in die Website eingebaut werden

The Heads-Up Grid ist interessanter, als es der Name vermuten lässt. Baut man die Javascripte und Stylesheets, die das Heads-Up Grid ausmachen, in eine Website während der Designphase ein, so erzeugt man ein Gitternetzoverlay, welches das Design erheblich vereinfacht, live auf der Website. Dabei ist die Verwendung völlig unkompliziert.

The Heads-Up Grid – Overlay frei konfigurierbar

Eine Lösung, die so einfach und unkompliziert ist wie das Heads-Up Grid kommt daher jedenfalls mir wie gerufen. Ein kleines Script wird in den Head-Bereich der zu erstellenden Website gepackt, die Dateien des Grid-Tools in ein anpassbares Unterverzeichnis, fertig. Beim nächsten Aufruf der Website erscheint ein sichtbares Gitternetzoverlay. Bestes Beispiel dafür ist die Produktseite zum Heads-Up Grid selber:

theheadsupgrid-homepage
The Heads-Up Grid in Aktion: Sichtbares Gitternetzoverlay auf der Website

Ohne weitere Anpassungen zeigt The Heads-Up Grid ein Grid mit 6 Spalten und einer Breite von 960 Pixeln an. Alle relevanten Werte lassen sich jedoch sehr einfach innerhalb der kurzen Scriptpassage, die in den Head kopiert wurde, ändern. Sogar die Maßeinheit kann angepasst werden, so dass auch mit Prozentwerten gearbeitet werden kann. Per Default verwendet das Tool Pixel. Über den Wert Zeilenhöhe lässt sich ein Baseline Grid definieren, wichtig für Typografiefreunde.

Sogar responsive Layouts können mit dem Heads-Up Grid unterstützt werden. Der hierzu erforderliche Code ist allerdings etwas komplexer, da er verschiedene Screengrößen abfragen und bedienen muss.

Um die im Designprozess befindliche Website zwischendurch auch ohne Gridoverlay prüfen zu können, spendierte der Entwickler dem Tool einen am rechten oberen Rand des Browserfensters platzierten On-/Off-Button. The Heads-Up Grid liegt aktuell in der Version 1.7 vor und kann frei auf der Website des Entwicklers Jason Simanek heruntergeladen werden.

Grid-Framework: SpryMedia Grid – Bookmarklet legt Grid auf beliebige Websites

Der Schotte Allan Jardine liefert ein Grid-Framework, das per JavaScript-Bookmarklet auf beliebige Websites angewendet werden kann. Das ist bequem, aber ist es auch gut?

SpryMedia Grid legt ein Standard-Grid über die Website, auf der es aufgerufen wird. Das funktioniert unterschiedlich zufriedenstellend. In meinen Tests endete das Grid sehr häufig am Ende des sichtbaren Bereichs, wurde also nur auf den aktuellen Viewport angewendet. Vielfach wurde überhaupt kein Grid generiert. Getestet habe ich im aktuellsten Chrome Stable auf dem Mac.

sprymedia-grid

Dafür ist das SpryMedia Grid über das modale Fenster, das nach Klick auf das Bookmarklet erscheint, extrem flexibel zu konfigurieren. Neben den grundlegenden Optionen, wie der Gesamtbreite und Höhe des Grids, der Zahl der Spalten und Zeilen mit ihren jeweiligen Weiten und Höhen, sowie etwaigen Abständen, sieht SpryMedia Grid zusätzlich die farbliche Anpassung der einzelnen Teile des Grid vor. Im Prinzip ist das also eine ganz nützliche Angelegenheit.

Nur die einwandfreie Funktionalität, die kann halt nicht garantiert werden. Im Chrome unter Windows 7 konnte ich beispielsweise nicht einmal die Einheiten wechseln, war somit auf die Standard-Units festgelegt. Grundsätzlich ist der freie Wechsel zwischen em, ex,pxund % ausdrücklich vorgesehen. Übrigens: Ausblenden lässt sich das Grid, indem man schlicht erneut auf das Bookmarklet klickt. Die zuvor getätigten Einstellungen bleiben erhalten.

Wer bereit ist, sich mit den vielfältigen Konfigurationsmöglichkeiten auseinander zu setzen, ohne die Garantie zu haben, dass das Ergebnis den Aufwand rechtfertigt, kann SpryMedia Grid gern mal ausprobieren. Ich habe mich für The Heads-Up Grid entschieden und empfehle Ihnen das auch.

Links zum Beitrag:

Quellennachweis Artikelbild: striatic via photopin cc