Kategorien
Essentials Freebies, Tools und Templates

Google Web Fundamentals: Kostenloses Online-Handbuch lehrt Webdesign über Gerätegrenzen hinweg

Vor einigen Tagen stellte Google die erste Beta-Version eines leicht verständlichen und angenehm designten Online-Handbuchs für Webdesigner und Entwickler ins Netz. Das Projekt versteht sich als in Arbeit befindlich und soll im Juni in eine erste stabile Version 1.0 münden. Es gibt indes keinen Grund, bis dahin zu warten, denn bereits jetzt ist Web Fundamentals eine schöne Sammlung der besten Methoden und Vorgehensweisen im responsiven Design über Gerätegrenzen hinweg. Die Arbeit an dem Projekt wird via Github koordiniert, während das Online-Handbuch selber eine eigene Hochglanz-Website spendiert bekam, die ihrerseits ein Beispiel für das ist, was man zu lehren beabsichtigt…

Google Web Fundamentals: Landing Page

Google Web Fundamentals: Startseite

Web Fundamentals: Ganz von vorne beginnen

Googles Name für das jüngste Unterstützungsprojekt für Webentwickler und -designer ist eine Untertreibung. Anders als der Name "Web Fundamentals" suggeriert, geht das Handbuch schon vom Start weg über die reinen Grundlagen hinaus und ist deutlich auf Wachstum ausgerichtet. Sind Sie neu im Thema Design für mobile Geräte, ist sicherlich der Einstieg "Getting Started" für Sie geeignet. Haben Sie hingegen bereits mobile Websites erstellt und hantieren mit Begriffen wie Viewport und Breakpoint ganz selbstverständlich, wird dieser Teil des Handbuchs nicht viel für Sie tun können.

Google Web Fundamentals: Key Takeaways
Google Web Fundamentals: Key Takeaways (die wichtigsten Infos in Kürze)

Dennoch will ich den absoluten Einstieg nicht so schnell verlassen. Denn man muss sagen, Google hat sich hier richtig viel Mühe gegeben. Getting Started ist sehr leicht verständlich, bietet gute Beispiele, sauberen Code und unterstützt den Lernprozess effektiv mit Hilfen wie den Key Takeaways und den Notes, die immer wieder eingestreut werden, um das Wichtigste nochmal zusammen zu fassen oder einzelne Merkposten besonders hervor zu heben.

Google Web Fundamentals: Note

Google Web Fundamentals: Note (Merkposten)

Beispielbilder, die den Stand der Bearbeitung im Vergleich zum fertigen Produkt zeigen, helfen beim Verständnis dessen, was man überhaupt erreichen will.

Google Web Fundamentals: Finished Example

Google Web Fundamentals: Fertiges Beispiel

Haben Sie sich durch die beiden Kapitel des Getting Started gearbeitet, sind Sie hinreichend mit Vorwissen ausgestattet, um sich mit den weiteren Themen des Handbuchs auseinander zu setzen.

Web Fundamentals Handbuch: Vier Themenbereiche mit zehn Lektionen

Das Handbuch selber setzt sich derzeit aus vier Themenbereichen mit insgesamt zehn Lektionen zusammen. Dabei ist bereits erkennbar, dass die Themenauswahl auf Wachstum angelegt ist, ebenso erwarte ich das Hinzufügen weiterer Lektionen zu den einzelnen Themen.

Google Web Fundamentals: Topics

Google Web Fundamentals: Themenübersicht

Der erste Themenbereich "Multi-Device Layouts" beschäftigt sich mit Methoden des responsiven Webdesign. Der zweite Bereich namens "Forms and User Input" erklärt den responsiven Einsatz von Formularen und erläutert, wie man die Möglichkeit der Benutzereingabe um Touch-Funktionalität erweitert. Das sehr interessante Thema "Images, Audio and Video" behandelt alle Aspekte des Hinzufügens von Medien zu responsiven Designs und der letzte Themenbereich kümmert sich um Fragen der "Performance", also der Geschwindigkeit der zu erstellenden Sites.

Zusätzlich bietet Web Fundamentals einen Bereich mit weiteren Ressourcen, darunter den Visual Style Guide, der für das Handbuch selber Verwendung fand. Auf diese Weise lassen sich Zusammenhänge schneller erfassen und zu konkretem Wissen manifestieren.

Drüben bei Github läuft bereits die Diskussion darüber, wie und wo man das Handbuch noch verbessern und erweitern kann. Jedermann hat die Möglichkeit, dort Pull Requests einzureichen. Die Qualität der Web Fundamentals ist so, wie man es von Google insgesamt gewohnt ist, nämlich hoch. Wenn Sie der englischen Sprache hinreichend mächtig sind, sollten Sie das Handbuch auf jeden Fall zu einem festen Bestandteil Ihrer Designer-Bookmarkliste machen.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

Imagefill.js: Tool für responsives Design passt Bilder an den umgebenden Container an

John Polacek aus Chicago ist der Designer-Community kein Unbekannter. Er ist verantwortlich für bekannte Tools wie Bigvideo.js, Scrollorama, Responsivator und vielen mehr. Vor einer guten Woche fügte er seinem ohnehin schon beachtlichen Portfolio ein weiteres Werkzeug hinzu. Mit Imagefill.js sorgt man dafür, dass Bilder stets den sie umgebenden Container füllen und sich dabei zentrieren. Das Seitenverhältnis bleibt dabei gewahrt.

imagefill-startpage

Imagefill.js: Kein Schnick-Schnack

Imagefill.js ist ein kleines Tool mit übersichtlichem Anspruch. Es sorgt per Funktionsaufruf auf die ID eines Containers dafür, dass das in diesem Container enthaltene Bild zentriert und auf die Größe des Containers angepasst wird. Es findet keine Veränderung der Seitenverhältnisse statt. Stattdessen wird dann lediglich ein zentrierter Bildausschnitt gezeigt. Indem man verschachtelte Container anlegt, ist auch eine Optik á la Pinterest oder ein bildschirmfüllendes Grid aus Divs realisierbar.

imagefill-exp
Anpassung an den Container ohne Änderung des Seitenverhältnisses

Imagefill.js setzt jQuery und das separat erhältliche Plugin ImagesLoaded voraus. ImagesLoaded stellt lediglich fest, wann alle Bilder eines definierten Bereichs geladen sind, so dass Imagefill.js überhaupt erst sinnvoll aktiv werden kann. Um das Plugin einzusetzen, binden Sie entsprechend jQuery, dann ImagesLoaded und dann Imagefill.js im Head Ihrer Seite ein.

Ein entsprechendes Div kann dann so aussehen:

Der Funktionsaufruf stellt sich wie folgt dar:

$('.container').imageFill(); 
// image stretches to fill container

Wie bereits erwähnt, sind beliebige Verschachtelungen möglich, Polacek liefert hier ein Beispiel eines bildschirmfüllenden, vollständig responsiven Grid:

imagefill-responsive
Bildschirmfüllend, responsiv

Mit zusätzlichen Tools, etwa Packery, kann eine Pinterest-ähnliche Präsentation realisiert werden.

Polacek stellt Imagefill.js unter GPL- und MIT-Doppellizenz für den privaten, wie kommerziellen Gebrauch kostenlos ab. Das Tool kann bei Github heruntergeladen werden.

Links zum Beitrag

Kategorien
Webdesign

Kostenloses Ebook: „Tablet Web Design Best Practices“ mit vielen guten Tipps

Man wird den Damen und Herren bei Mobify in Kanada keineswegs die Expertise in Sachen mobiles Webdesign absprechen wollen, auch wenn man sich möglicherweise mit dem Cloud-basierten Konzept Mobifys nicht so recht anfreunden kann. Vor einiger Zeit ließen besagte Damen und Herren ihrer Expertise freien Lauf und stellten ein Ebook mit 30 Tipps, ein besonderes Nutzererlebnis auf Tablets zu schaffen, zusammen. Sie nennen es "Tablet Web Design Best Practices". Das 25-seitige Heftchen gibt es völlig gratis gegen die Bekanntgabe einer E-Mail-Adresse.

tabelt-web-design-best-practices-page

Tablet Web Design Best Practices: 30 Ways to Create Amazing Web Experiences on Tablets

Den größten Nachteil des ansonsten liebevoll gestalteten und mit nutzwertigen Informationen versehenen Heftchens will ich gleich zu Beginn erwähnen, denn es ist sicherlich für manch Interessenten ein Showstopper. Man kann es sich anhand des Titels und des Herkunftslandes an sich schon denken, dennoch sei deutlich darauf hingewiesen: Tablet Web Design Best Practices ist in englischer Sprache verfasst. Nicht in schwierigem, technischen Englisch, sondern eher so auf Mittelschul-Niveau, aber immerhin.

Stellt diese Hürde für Sie kein Problem dar, erhalten Sie einen kompakten Ratgeber, der vielfach auf der Basis von Ergebnissen einer oder mehrerer Studien Design-Tipps gibt, die Hand und Fuß haben. Mobify greift dabei nach eigenen Angaben auf die Erfahrungen aus dem erfolgreichen Umsetzen einiger großer Websites, darunter Starbucks, aber auch auf diejenigen der rund 75.000 Designer und Developer, die mit den Mobify-Tools arbeiten, zurück.

So verwundert es nicht, dass unter den Tipps solche sind, auf die man bei intensivem Nachdenken auch selber kommen würde und andere, mit denen zumindest ich nicht sofort um die Ecke gekommen wäre.

Tablet Web Design Best Practices: Two Parts to Rule Them All

In zwei Teile gliedert sich das Ebook. Im ersten Teil werden Tipps gegeben, wie man bestehende Desktop-Websites so verändern kann, dass sie auch auf Tablets sinnvoll nutzbar werden. Im zweiten Teil wird der nächste Schritt getan. Hier geht es darum, wie man vorgehen sollte, um tatsächlich auf Tablets optimierte Websites zu erhalten. Zumindest der erste Teil ist für jeden Seitenbetreiber relevant und sollte auf jeden Fall bearbeitet werden.

tablet-web-design-book-bottom

Die Gründe dafür sind durchschlagend. Mit erwarteten Verkäufen von einer halben Milliarde Tablets weltweit in 2013 und 2014 ist es fahrlässig, deren Nutzer nicht zumindest sinnvoll zu bedienen. Das umso mehr, als Tablet-Nutzer bei Online-Einkäufen 20 Prozent mehr Umsatz bringen als der durchschnittliche Desktop-Besucher.

Auf der anderen Seite dieser Chance steht das typische Website-Layout mit seinen 12 Pixel-Schriften und den nicht auf Touch ausgerichteten Schaltflächen und Formularen. Jeder Tablet-Nutzer wird zustimmen: Auf den allermeisten Websites macht das Surfen keinen Spaß. Dabei ist der Anwendungsfall des Internet-Surfens mit Abstand der wichtigste auf Tablets. Sind wir uns einig, dass es Handlungsbedarf gibt?

Und so beginnt das Ebook in seinem Teil 1 ganz praxisorientiert, fast schon hemdsärmelig und empfiehlt

  • Touch-Targets, also Elemente, die per Finger angewählt werden können, stets mindestens 44 x 44 Pixel groß zu machen,
  • auf durchgängige Touch-Bedienungsmöglichkeiten zu achten,
  • dafür zu sorgen, dass der Nutzer möglichst wenig schreiben muss,
  • kontext-sensitive Eingabemöglichkeiten zu schaffen und Auto-Correct oder automatische Großschreibung in Formularen auszuschalten,
  • die Standard-Textgröße und den Zeilenabstand zu erhöhen,
  • Icons als Font und Bilder auch in Retina-Auflösung einzubinden,
  • und vieles mehr.

In Teil 2 des Ebooks geht es dann darum, Web-Apps so zu gestalten, wie man das auch mit nativen Apps auf den jeweiligen Plattformen tun würde. Mit voller Optimierung auf die speziellen Möglichkeiten und Limitierungen eines Tablets.

Dazu gehören beispielsweise

  • dafür zu sorgen, dass Bilder in Seiten zoombar bleiben, ohne dass die komplette Seite zoomt,
  • die Navigation fest zu verankern, um sie persistent verfügbar zu halten,
  • ortsbasierte Möglichkeiten zu nutzen, um etwa logistische Fragestellungen leichter zu beantworten,
  • Schriftgrößen durch den Nutzer anpassbar zu gestalten,
  • viel mit Bildern zu arbeiten,
  • die Navigation absolut tablet-gerecht zu gestalten, etwa durch Auto-Hide oder Off-Canvas-Varianten,
  • besonders auf die sog. Hot Zones zu achten, diejenigen Bereiche, die man mit den Fingern besonders leicht erreichen kann auf einem Tablet,
  • und vieles mehr.

tablet-web-design-book-hot-zones

Natürlich, und wer würde das auch anders tun, verweisen die Autoren an vielen Stellen auf die entsprechenden Tools aus dem Hause Mobify und verlinken Tutorials, die zeigen, wie das Mobify-Konzept die entsprechende Umsetzung vorsieht.

Dennoch ist das Ebook nicht auf das Mobify-Konzept limitiert, sondern bietet durchaus allgemeingültige, dabei gute Tipps, die sicherlich den erfahrenen mobilen UI-Entwickler nicht aus den Socken hauen, aber Otto Durchschnittsseitenbetreiber und Feld-, Wald und Wiesen-Designer ein gutes Stück nach vorne bringen können – auf dem Weg in das Netz der Zukunft.

Abschließend will ich nochmal auf den Bezugsweg zurück kommen. Das Ebook steht, wie bereits erwähnt, kostenlos unter dem weiter unten genannten Link zur Verfügung. Um den Download zu ermöglichen, ist lediglich die Eingabe einer syntaktisch korrekten E-Mail-Adresse erforderlich, das ebenfalls vorhandene Feld "Name" kann ignoriert werden. Der Download wird zwar auch als Link per E-Mail zugeschickt, jedoch können Sie das Ebook schon unmittelbar nach Klick auf "Get the Guide Now" herunterladen. Die Gültigkeit der eingegebenen E-Mail-Adresse ist somit nicht Voraussetzung für den Download.

Links zum Beitrag

  • Downloadseite zum Ebook | Mobify
  • Startseite des Dienstes selber | Mobify