Kategorien
Bilder & Vektorgrafiken bearbeiten Webdesign

Responsives SVG: Was geht, was geht nicht?

Im Webdesign sind responsive Layouts nicht mehr wegzudenken. Da gibt es auf der einen Seite immer mehr kleine Displays auf Smartphones und auf der anderen Seite immer größer werdende Monitore. Dazwischen finden sich Phablets, Tablets sowie Net- und Notebooks. Dank CSS ist es technisch kein Problem, eine Website für all die verschiedenen Auflösungen zu optimieren. Doch wie sieht es mit SVGs aus? Lassen sich diese auch responsiv gestalten?

Kategorien
HTML/CSS Responsive Design Webdesign

Modernes Webdesign: Diese Fehler solltest du vermeiden

Webdesign und -entwicklung haben sich in den vergangenen Jahren enorm geändert. Daran ist vor allem auch das mobile Internet verantwortlich, was die Art und Weise, wann und wie wir das Internet nutzen, verändert hat. Vieles, was vor zehn Jahren noch gängig war, gilt heute als überholt. Selbst vieles, was vor zwei bis drei Jahren noch völlig aktuell war, gilt heute als veraltet. Welche Dinge solltest bei der Gestaltung und Entwicklung moderner Websites lieber nicht (mehr) machen?

Layouts nur für Desktopgeräte und Smartphones

Die Zeiten, in denen du deine Website nur für eine Ansicht entwickelt hast, sind ja nun schon lange vorbei. Und man findet mittlerweile nur noch wenige Websites, die ohne responsives Layout auskommen.

Doch häufig werden beim responsiven Layout nur zwei Geräte- beziehungsweise Displaytypen berücksichtigt: der klassische Monitor und das Smartphone. Dabei erhält zumindest das Desktoplayout eine feste Breite, während das mobile Layout häufig auf die gesamte Breite des Browserfensters ausgedehnt wird.

Die Unterscheidung nur zwischen Desktop und Smartphone ist mittlerweile jedoch viel zu kurz gegriffen. Denn es gibt mit Tablets und Phablets mittlerweile eine Vielzahl unterschiedlicher Geräte mit diversen Auflösungen. Die Unterscheidung zwischen nur zwei Typen wird dieser Entwicklung nicht gerecht. Daher solltest du dein Layout so flexibel halten, dass es auf allen Auflösungen funktioniert.

Auf großen Monitoren sollte dein Layout keine verschwenderisch großen Ränder links und rechts haben. Und auf Tablets sollte nicht das Layout für Mobilgeräte dargestellt werden.

Eigene Mobilversion deiner Website

Bleiben wir beim mobilen Webdesign. Als die Möglichkeiten responsiver Websites noch sehr eingeschränkt waren, wurden eigene Mobilversionen für Websites entwickelt. Noch heute haben vor allem große Newsportale immer noch eigene Mobilversionen, die meist über eine eigene Subdomain zugänglich sind.

Hier ergibt sich natürlich dasselbe Problem mit den Layouts. Darüber hinaus sind immer zwei Versionen einer Website zu pflegen. Und häufig funktioniert die Ausgabe der richtigen Version nicht. Da wird auf Tablets gerne mal die Mobilversion geladen, obwohl die Auflösung eigentlich problemlos die Desktopversion anzeigen könnte.

Inhalte fürs mobile Internet verstecken

Websites werden zunehmend komplexer. Das gilt für den Inhalt, aber auch für die Gestaltung. Großformatige Bilder und Grafiken werden kombiniert mit mehrspaltigen Texten und zusätzlichen Sidebars.

Und auch der Unterschied zwischen den Display- beziehungsweise Monitorgrößen wird immer größer. So gilt es heutzutage, Websites zu gestalten, die auf großen Monitoren ebenso gut aussehen wie auf kleinen Smartphones.

Das ist durchaus eine Herausforderung. Viele Webdesigner gehen da einen einfachen, aber nicht empfehlenswerten Weg. Angeblich verzichtbare Inhalte werden auf Smartphones einfach versteckt. Das mag im ersten Moment sinnvoll sein, um die Übersichtlichkeit einer Website auf einem Smartphone zu gewährleisten.

Aber da Websites oft häufiger mobil besucht werden als über einen Desktoprechner, ist dieses Vorgehen natürlich nicht im Sinne des Besuchers. Daher sollten auf Smartphones keine Inhalte vorenthalten werden. Vielmehr solltest du schauen, wie du alle Inhalte platzsparend und übersichtlich präsentierst. So kannst du Slider einsetzen oder Inhalte über eine Sidebar ausblenden und per Button einblenden lassen.

Fenster und Videos ungefragt über den Inhalt legen

Zu einer regelrechten Unsitte haben sich sogenannte „Modal Boxes“ entwickelt, die beim augenscheinlichen Verlassen einer Seite über den gesamten Inhalt selbiger gelegt werden. In solchen Bereichen wird dann beispielsweise auf den Newsletter oder auf irgendwelche Angebote hingewiesen.

Wenn man tatsächlich dabei ist, eine Seite zu verlassen, sind sie nicht störend. Wer aber nur versehentlich die Maus aus dem oberen Bereich der Seite hinausbewegt, wird bereits mit einem solchen Screen belästigt.

Wer seine Besucher also nicht verärgern will, sollte auf diese Pop-ups des modernen Webdesigns verzichten – so schön sie auch für einen Betreiber einer Website sein mögen.

Gleiches gilt für Videos, die ungefragt den Inhalt einer Website verdecken.

Einfache Auflösungen und falsche Bildformate

Das Internet ist nicht nur mobiler geworden; es ist auch hochauflösender geworden. Bei Displays und Monitoren spielt längst nicht mehr nur die Größe eine Rolle, sondern auch die Auflösung. So nimmt die Pixeldichte zu und die Auflösung wird immer schärfer.

Bei Bildern macht sich das zunehmend bemerkbar. In einfacher Auflösung sieht ein Bild auf einem hochauflösendem Display verwaschen und unscharf aus. Doch HTML5 und CSS3 erlauben es dir, Bilder für verschiedene Pixeldichten zu hinterlegen.

Nutze diese Möglichkeit, damit deine Website auch auf neuen Geräten nicht nur gut aussieht, sondern auch gestochen scharf ist. Wähle zudem das richtige Format für deine Bilder und Grafiken aus. Nutze JPEGs für Fotos, PNGs für Grafiken und SVGs für Vektorzeichnungen.

Systemschriften und zu kleine Schriften

Seit es Webschriften nach vielen Jahren in alle Browser geschafft haben, ist die Verwendung von Systemschriften nicht mehr nötig. Es gibt unzählige kostenlose und kostenpflichtige Schriften, die du in dein Webprojekt übernehmen kannst. Achte darauf, dass du es diese Schriften im neuen Format WOFF2 gibt. Dieses löst das bisherige Standardformat WOFF ab und ist dank besserer Komprimierung noch platzsparender. Und das ist gerade im mobilen Internet ein großer Vorteil.

Achte zudem darauf, dass du Schriften nicht zu klein einsetzt. Vor allem setze nicht auf eine einheitliche, feste Schriftgröße. Auf Smartphones sollten Schriften eine andere Größe haben als auf großen Monitoren.

Den Besucher warten lassen

Heutzutage erwartet man zurecht, dass Websites sich schnell aufbauen. Daher solltest du deine Website so entwickeln, dass sie schnell geladen wird. Optimiere Bilder und verwende das richtige Format.

Nutze Techniken wie das „<picture>“-Element, um immer passend große Bilder auszuliefern. Lade auf Smartphones Bilder in kleinerer Auflösung und nicht in einer Auflösung, wie sie auf einem großen Monitor benötigt wird.

Achte darauf, dass JavaScript die Ausgabe von HTML nicht blockiert oder verlangsamt und versichere dich, dass extern eingebundene Dateien deine Ladezeiten nicht negativ beeinflussen.

Kategorien
Design Responsive Design Webdesign

Responsive Images: Das Picture-Element ist endlich da!

Was lange währt, wird endlich gut. Die viel diskutierte Lösung für die Umsetzung von Bildern in responsiven Designs ist tatsächlich in der Realität angekommen. Und es ist tatsächlich das Picture-Element des W3C geworden, nachdem sich die WhatWG zuletzt für das Srcset-Attribut am Img-Element ausgesprochen hatte. Von wegen, die W3C würde nur einen statischen Schnappschuss verwalten, während die WhatWG diejenige wäre, die HTML5 als lebenden Standard, als Work in Progress betrachten.

html5-logo

Responsive Images: Ein steiniger Weg mit vielen aufgeschlagenen Knien

Ich will an dieser Stelle nicht wieder die Diskussion zu Gehör bringen, die sich in den letzten zwei Jahren intern abgespielt hat. Der Streit um die richtige Lösung für Responsive Images und andere wichtige Fragen kommender Standards hatte bekanntlich sogar dazu geführt, dass sich die Web Hypertext Application Technology Working Group (WHATWG) als einflussreichste Arbeitsgruppe innerhalb des W3C von diesem abgespalten hatte, um HTML5 künftig als lebenden Standard weit schneller fortzuentwickeln als unter der Ägide des W3C vermeintlich möglich. Wir berichteten am 23. Juli 2012 darüber.

Erst wenige Tage vorher hatte sich eben diese WhatWG auf Srcset als Lösung für Responsive Images festgelegt, wir berichteten auch darüber. Im Nachhinein wenig verwunderlich, wollte sich das W3C in Form seiner HTML Working Group mit Unterstützung der W3C Community Group so gar nicht mit diesem nassforschen Vorgehen einverstanden erklären und stellten im Herbst 2012 klar, dass das Picture-Element mitnichten tot, sondern vielmehr sehr lebendig und genau die Stoßrichtung des W3C sei. Hier berichteten wir darüber.

Dann passierte nur wenig Plakatives, wenn auch hinter den Kulissen fleißig gewerkelt wurde. Im Februar 2014 gingen wir bei Dr. Web sogar so weit eine neue JavaScript-Lösung zu empfehlen, anstelle noch länger auf Picture oder Srcset zu warten.

Responsive Images: Chrome Canary hat es schon, andere fast

Und jetzt also ist es tatsächlich so weit. In einem brandaktuellen Beitrag auf A List Apart gab Mat Marquis, der umtriebige Kopf der Responsive Images Community Group, ehemaliger Mitarbeiter im jQuery Mobile Team und hauptberuflicher Designer/Developer bei der nicht unbekannten Filament Group, die erste Browser-Implementation des Picture-Elements bekannt.

Es ist Chrome Canary, die Developer-Version des Chrome-Browsers, der ab sofort für erste Tests des Elements herangezogen werden kann, wozu Marquis naheliegenderweise direkt auffordert. Chrome Canary gibt es übrigens hier. Nach der Installation pasten Sie folgende Zeile in die URL-Leiste

chrome://flags/#enable-experimental-web-platform-features 

bestätigen mit der Enter-Taste und klicken im folgenden Fenster auf "Aktivieren". Sie brauchen sich übrigens nicht zu sorgen. Die Änderungen, die Sie im Canary vornehmen, wirken sich nicht auf eine etwa vorhandene, reguläre Chrome-Installation aus. Beide werden separat gehalten.

Als Startpunkt für eigene Tests empfiehlt Marquis die Picturefill-Demos, welche bekanntlich so ausgelegt sind, dass das Polyfill nur da einspringt, wo die nativen Browserfähigkeiten nicht ausreichen.

Ausweislich der diversen Roadmaps ist ersichtlich, dass der Firefox ebenfalls kurz vor der Implementation von Picture steht, ebenso das Webkit-Projekt. Microsoft ziert sich wie stets und führt das Picture-Element, neben dem Srcset-Attribut gleichberechtigt als "Under Consideration". Na ja, der IE ist bei mir ohnehin nur "Under Consideration", wenn er sich nicht vermeiden lässt.

So, Kämpen des Netzes. Dann mal ran. Was haltet ihr von der Umsetzung?

Übrigens funktioniert das Picture-Element in der jetzigen Implementation noch nicht voll responsiv bei Änderungen des Viewport. Also, nach Änderungen einmal kurz einen Refresh machen.

Kategorien
Design HTML/CSS Responsive Design

CSS3: Viewport Units – Neue Einheiten für responsive Designs

Dank prozentualer Angaben ist es ein Leichtes, Webdesigns zu entwickeln, die sich der Breite und bei Bedarf auch der Höhe des Browserfensters anpassen. Gerade wenn es darum geht, eine Website für verschiedene Medien wie Tablets und Smartphones zu entwickeln, ist dies eine gängige Praxis. Textblöcke, Bilder und andere Elemente passen sich so automatisch jeder Größe an.

CSS3: Viewport Units

Doch Angaben in Prozent sind nicht immer angebracht, um Größen in Relation zum Browserfenster zu definieren. Gerade bei Schriften kommt man hier nicht weiter. Denn eine Schriftgröße lässt sich mit Prozent als Einheit nicht in Relation zur Breite des Browserfensters definieren. In CSS3 gibt es neue Einheiten, die genau dieses Problem lösen.

Viewport Units für flexiblere Größenangaben

Die Einheiten „vw“ und „vh“ definieren eine Breite beziehungsweise Höhe in Relation zur Fenstergröße. Dabei steht „vw“ für „view width“ und „vh“ für „view height“. Diese sogenannten Viewport Units ermöglichen es, Größen in Relation zur jeweils aktuellen Größe des Browserfensters zu definieren.

div {
  width: 50vw;
  height: 100vh;
}

Das Beispiel legt die Größe eines Elementes auf 50 Prozent der Fensterbreite und 100 Prozent der Fensterhöhe fest. Während prozentuale Angaben immer in Relation zum jeweiligen Elternelement stehen, ist die Angabe mit Viewport Units immer in Relation zur Fenstergröße.

Außerdem ist es möglich, eine Höhe auch in Relation zur Breite zu definieren – und umgekehrt natürlich ebenso.

div {
  height: 50vw;
}

Im Beispiel ist die Höhe eines Elementes auf 50 Prozent der Fensterbreite gesetzt. Verkleinert man das Browserfenster in der Breite, ändert sich damit die Höhe des Elementes.

Immer die passende Schriftgröße dank Viewport Units

Für ein stimmiges Design ist es wichtig, dass je nach Gerät die Schrift in einer angemessenen Größe dargestellt wird. Gerade wer auf große Überschriften setzt, muss zusehen, dass diese auf den verschiedenen Display- beziehungsweise Fenstergrößen gut lesbar dargestellt werden.

Mit den Viewport Units können Schriften endlich in Relation zur Breite des Browserfensters dargestellt werden.

h1 {
  font-size: 10vw;
}

Im Beispiel wird die Schriftgröße auf 10 Prozent der Fensterbreite festgelegt. Dank der Viewport Unit „vw“ passt sich die Schriftgröße des „h1“-Elements immer der Breite des Fensters an.

Größe abhängig vom Seitenverhältnis definieren

Neben den Einheiten „vw“ und „vh“ gibt es noch die Einheiten „vmin“ und „vmax“. Eine Angabe mit „vmin“ definiert eine Größe entweder in Relation zur Fensterbreite oder -höhe – je nachdem, welche Größe die kleinere ist. Ist die Breite des Browserfensters kleiner als die Höhe, wird bei „vmin“ die Breite genommen.

Analog dazu gibt es „vmax“. Hierbei wird der jeweils größere Wert gewählt.

div {
  width: 2vmin;
}

Im Beispiel erhält das Element eine Breite von 20 Prozent der Fensterbreite, wenn diese kleiner ist als die Fensterhöhe. Ist die Höhe kleiner als Breite, wird dem Element eine Breite von 20 Prozent der Fensterhöhe zugewiesen.

Browser-Support

Die Viewport Units werden mittlerweile von allen modernen Browsern unterstützt. Der Internet Explorer ist ab Version 10 dabei, Firefox ab 19 und Chrome ab 20.

(dpe)

Kategorien
Essentials Freebies, Tools und Templates

Remote Debugging: Mobile Webseiten am PC oder Mac untersuchen

Beim Entwickeln von mobilen Webseiten kommt man irgendwann unweigerlich an den Punkt, an dem man auf dem Smartphone oder Tablet die Entwicklertools im Browser starten möchte, um das HTML und CSS genauer untersuchen zu können.

Dieser Beitrag zeigt Ihnen, wie Sie Webseiten auf Android- und iOS-Geräten mit den Browserentwicklertools auf einem PC oder Mac untersuchen können, und zwar weitgehend mit Bordmitteln und ohne die Installation zusätzlicher Software wie Android SDK, Adobe Edge Inspect oder Weinre (WEb INspector REmote).

Die Hardware

Bevor Sie loslegen, überprüfen Sie kurz die Hardware. Sie benötigen:

  • Smartphone oder Tablet mit Android oder iOS
  • USB-Kabel, um das Gerät mit dem Rechner zu verbinden
  • Mac mit OS X oder PC mit Windows (oder beides)

Am besten funktioniert die im Folgenden beschriebene Vorgehensweise auf Macs unter OS X ab 10.8, denn dort können Sie ohne viel Aufwand sowohl iOS- als auch Android-Geräte untersuchen. Auf PCs hingegen kann man nur Androids debuggen und muss zunächst einen USB-Treiber für das Gerät installieren, was Windows in der Regel allerdings automatisch erledigt.

Remote Debugging mit Android-Geräten (für Win und OS X)

Zum Debuggen von Webseiten auf Androids benötigen Sie folgende Software:

  • als Browser: Googles Chrome ab V28 auf beiden Geräten
  • auf dem PC oder Mac die Chrome-Erweiterung ADB
  • PC mit Windows (ideal 7) oder Mac mit OS X (ab 10.8)
  • unter Windows: USB-Treiber für das Android-Gerät

Und los geht’s.

1. Die Chrome-Erweiterung ADB installieren

Im Chrome auf dem PC oder Mac installieren Sie zunächst die Erweiterung mit dem schönen Namen „ADB“, die innerhalb von Chrome die „Android Debug Bridge“ zur Verfügung stellt und Ihnen damit die Installation des kompletten Android SDK erspart.

Zur Installation der Erweiterung suchen Sie im Chrome Web Store einfach nach den Buchstaben „ADB“ oder klicken auf den Direktlink, den Sie weiter unten bei den „Links zum Beitrag“ finden. Unter Windows 8 klappt die Installation aus dem Chrome Webstore nicht, aber bei Github gibt es genaue Anweisungen zur manuellen Installation. Einen Link dazu finden Sie ebenfalls am Ende des Beitrags.

Nach der Installation der ADB-Extension finden Sie im Chrome rechts oben einen kleinen grauen Androiden.

01-chrome-adb-installed

2. Debugging auf dem Android-Gerät erlauben

Auf dem mobilen Gerät müssen Sie das Debugging gleich zwei Mal erlauben, und zwar einmal in den Einstellungen des Gerätes und einmal im mobilen Chrome. Gehen Sie zunächst in die Einstellungen des Gerätes und erlauben bei den Entwickler-Optionen das USB-Debugging.

02-s2-usb-debugging-quer

Ab Android 4.2 sind die Entwickler-Optionen standardmäßig versteckt. Um sie einzublenden, rufen Sie in Einstellungen die Option Info zum Gerät (4.2) bzw. Über das Telefon (ab 4.3) auf. Dort tappen Sie dann sieben Mal auf die Buildnummer. Unglaublich aber wahr. Nach Absolvierung dieses Rituals gehen Sie wieder eine Seite zurück und finden dann dort die Entwickler-Optionen, in denen Sie wie oben beschrieben das USB-Debugging aktivieren können.

Starten Sie jetzt Chrome auf dem Android-Gerät und aktivieren Sie im Menü Einstellungen - Entwickler-Tools die Option Web-Debugging über USB, indem Sie auf die Option tappen und dann rechts oben den Schiebeschalter auf Ein stellen. [EDIT 2013-11-26: Falls diese Option nicht vorhanden sein sollte, machen Sie einfach mit Schritt 3 weiter. Siehe Kommentar weiter unten.]

03-s2-chrome-web-debugging-ein

Danach rufen Sie im mobilen Chrome die Seite auf, deren Quelltext Sie gleich am PC oder Mac untersuchen möchten.

3. Geräte verbinden und Quelltext untersuchen

Zum Verbinden der Geräte stöpseln Sie unter OS X einfach das USB-Kabel ein und bestätigen eventuelle Sicherheitsabfragen.
Auf dem Android-Gerät erscheint die Meldung Als Mediengerät verbunden und oben in der Statusleiste wird oben links das USB-Symbol sichtbar. Eine eventuelle Meldung „Es wurde keine Software auf Ihrem PC gefunden, die das Gerät erkennt“ können Sie ignorieren bzw. mit OK bestätigen. Es funktioniert trotzdem.

Unter Windows werden nach dem Einstöpseln des USB-Kabels zunächst die Treiber für das Android-Gerät installiert. Im Idealfall passiert dies automatisch und sie brauchen dafür nichts, außer ein paar Minuten Geduld. Falls die Installation aus irgendeinem Grunde nicht klappen sollte, müssen Sie den USB-Treiber für das Androidgerät manuell installieren. Einen Link für Windows OEM USB Treiber finden Sie am Ende des Beitrags.

Nach dem Verbinden der Geräte starten Sie im Chrome auf dem PC oder Mac die weiter oben installierte Erweiterung ADB, indem Sie zunächst auf den grauen Androiden klicken und dann auf den Befehl Start ADB. Daraufhin färbt sich der Android grün.

04-chrome-adb-view-targets

Klicken Sie auf das jetzt grüne Android-Symbol und wählen Sie im ADB-Menü die Option View Inspection Targets. Chrome öffnet die Seite chrome://inspect, auf der Sie eine URL eingeben und damit auf dem mobilen Chrome einen neuen Tab öffnen können. Darunter werden im mobilen Chrome bereits geöffnete Seite gelistet. Sie können sie untersuchen, indem Sie auf den Link Inspect hinter dem Namen der Seite klicken.

Die folgende Screenshot-Montage zeigt auf der linken Seite die Developer Tools im Chrome auf dem Desktop, in denen das HTML-Element für das Menü ausgewählt wurde. Auf der rechten Seiten sehen Sie, wie das auf dem Desktop-Chrome selektierte Element im Chrome auf dem Android-Gerät hervorgehoben wird. Änderungen in den Developer Tools auf dem Desktop werden live und in Farbe im mobilen Browser umgesetzt. Remote Debugging.

05-chrome-devtools-desktop-webseite-mobile

Remote Debugging mit iOS-Geräten (nur OS X)

Zu Analyse von Webseiten auf iOS-Geräten benötigen Sie mindestens iOS 6 und einen Mac. Der wesentliche Unterschied liegt darin, dass das Debugging im Safari stattfindet und nicht im Chrome.

Gleich zu Beginn der Hinweis, dass Sie statt eines echten iOS-Gerätes auch den in der Programmierumgebung Xcode enthaltenen iOS-Simulator benutzen können. Die folgenden Schritte können Sie also auch dann abarbeiten, wenn Sie gerade weder ein iPhone noch ein iPad zur Verfügung haben. Xcode selbst können Sie aus dem Appstore heraus installieren. Im Menü Xcode - Open Developer Tool wird dann der iOS-Simulator gestartet.

1. Im Safari die Entwicklertools aktivieren

Zunächst aktivieren Sie im Safari auf dem Mac und auf dem mobilen Gerät (oder im iOS-Simulator) die Entwicklertools. Auf dem Mac finden Sie dazu in den Einstellungen im Abschnitt Erweitert die Option Menü "Entwickler" in der Menüleiste anzeigen.

06-safari-einstellungen-erweitert

Im iOS-Gerät gehen Sie in die Einstellungen - Safari - Erweitert und aktivieren dort mit dem Schieberegler die Option mit dem unscheinbaren Titel Webinformationen. In der englischen Version heißt der Befehl Web Inspector.

07-ipad-einstellungen-safari-erweitert

2. Geräte verbinden und Quelltext untersuchen

In diesem Schritt verbinden Sie iOS-Gerät und Mac mit dem USB-Kabel. Danach öffnen Sie auf dem Mac den Safari und finden dort im Menü Entwickler relativ weit oben das per USB-Kabel angeschlossene Gerät und bzw. oder den iOS-Simulator.

08-safari-entwicklermenü-ios-devices

Für die gefundenen Geräte werden alle im Safari geöffneten Webseiten angezeigt. Ein Klick auf die gewünschte Seite, und schon sehen Sie auf dem Mac die Entwicklertools mit dem Quelltext der auf dem mobilen Safari geöffneten Webseite. Auch hier werden Änderungen in den Entwicklertools auf dem Mac sofort im mobilen Safari umgesetzt.

09-safari-devtools-ipad-simulator

Fazit

Das Debuggen von Webseiten auf mobilen Geräten von einem PC oder Mac aus ist auch ohne zusätzliche Software recht einfach möglich und erleichtert die Optimierung ganz enorm.

Links zum Beitrag

Remote Debugging für Android:
Chrome downloaden
Die Erweiterung ADB im Chrome Webstore
ADB unter Windows 8 – manuelle Installation.
Windows OEM USB Treiber für Android
– Artikel „Remote Debugging on Android“

Remote Debugging für iOS:
Safari 7
Xcode mit iOS Simulator
– Artikel „Using Web Inspector to Debug Mobile Safari“

Links zu weiteren Tools

(dpe)

Kategorien
Design HTML/CSS

Bootstrap 3: Warp-Geschwindigkeit für CSS-Selektoren und andere Neuerungen

Das bekannte Frontend-Framework Bootstrap, entwickelt im Hause Twitter, ist vor Kurzem in der Version 3.0.0. veröffentlicht worden. Kenner schätzen Bootstrap in der Version 3.0 aufgrund des strikten Mobile-First-Ansatzes und des damit verbundenen „Easy Goings“ bei der Entwicklung für das schier endlose Heer von mobilen Endgeräten, von denen jedes für sich eigene Darstellungsmacken mitbringt.

bootstrap

Die neue Bootstrap-Variante wurde innerhalb von 9 Monaten gestaltet, entwickelt und fertig gestellt. Das minifizierte CSS wurde um mehr als 20% von 127kb auf 97kb reduziert. Die neue Bootstrap-Version kommt außerdem mit einem optimierten Box-Modell sowie einem neuen, spezifischen dreiteiligen Grid-System, welches die entsprechenden Breakpoints für Smartphones, Tablets, Desktops und breite Desktops gleich mitbringt. Bootstrap antizipiert und behebt durch diese 3 Standardklassen, die Breakpoints für „small“ (Smartphones etc.), „medium“ (Tablets, Phablets etc.) und „large“ (Desktops, Extra-large Desktops) setzen, sowie das 12er-Grid das lästige Erstellen von separaten Stylesheets oder zusätzlichen Media Queries.

Die Neuerungen sind dabei so beträchtlich, dass der Sprung der Versionierung – von 2.3.2. auf 3.0.0. – ebenfalls größer ausgefallen ist.

Lässiges Schreiben von Stylesheets mit LESS

Zu den weiteren wichtigen Neuerungen gehört die Integration des CSSFrameworks LESS: Mit LESS wird CSS um Variablen, Mixins, Operationen und Funktionen erweitert; so lässt sich beispielsweise ein hexadezimaler Farbwert wiederverwenden, in dem er in eine Varable wie z.B. @color geschrieben wird – was widerrum wiederholtes Nachschauen des Hex-Wertes sowie weitere kleinere Lästigkeiten erspart und ganz nebenbei noch die Geschwindigkeit erhöht, mit der die gesamte Softwareapplikation kompiliert wird.

Darüber hinaus bietet Bootstrap 3.0 neues Design und ein neues Theme. Die Javascript-Plugins wurden ebenfalls umgeschrieben.

Glyphicon-Fonts auf der Basis einer Schriftfamilie

Ein weiteres, äußerst interessantes Feature sind die Glyphicon Fonts. Sie wurden wieder ins Projekt geholt und die Bilder durch eine Schriftfamilie ausgetauscht, mit insgesamt 40 neuen Glyphen – das erspart viele Lästigkeiten bei der Implementation von Icons, die ganz nebenbei – durch die Verwendung als Schriftfamilie – nahezu beliebig skalierbar sind.

glyphicons

Es wurden einige Komponenten hinzugefügt, beispielsweise die Panels und gruppierten Listen, andere entfernt, wie das Akkordeon – es wurde durch zusammenklappbare Panels ersetzt; auch Untermenüs und einige andere Komponenten wurden entfernt. Viele Klassennamen wurden umgeschrieben und aktualisiert.

Vor der Dokumentation haben die Bootstrap-Entwickler ebenfalls nicht Halt gemacht und diese um einige wichtige Aspekte erweitert. Dazu zählen vertiefende Abhandlungen und nützliche Informationen rund um die Themen Bootstrap-Komponenten, die Browserunterstützung, Lizenzfragen, Barrierefreiheit sowie weitere Aspekte.

Bootstrap 3 macht Schluss mit alten Zöpfen

Die beste Nachricht der Bootstrap-Entwickler ist jedoch zweifellos, dass die Unterstützung für Internet Explorer 7 aufgegeben worden ist. Die Bootstrap-Entwickler folgten ganz den rauhen Gesetzen des Marktes. Da für IE 7 zweifellos eine Oldtimer-Zulassung benötigt wird, muss er nicht mehr zwangsläufig unterstützt werden, mag sich das Entwicklerteam gedacht haben. Firefox 3.6 wird ebenfalls nicht mehr unterstützt; die Unterstützung von IE 8 ist gewährleistet, allerdings muss zur Unterstützung das Javascript-Framework Respond.js eingebunden werden, damit die Media Queries korrekt funktionieren.

Die Navbars und Panels benötigen nun die .navbardefault und .panel-default-Klasse für die jeweilige Standardvariante. Die berühmten Bootstrap-Jumbotrons gehen nun über die volle Breite des Viewports und beinhalten einen weiteren Container.

Ein vollständiger Baukasten für die Entwicklung von Responsive und Mobile Websites

Bootstrap 3 verfolgt den „Responsive“ und „Mobile First“-Ansatz konsequent. Die für die mobile Entwicklung notwendigen Komponenten sind bereits vollständig eingebaut und bedürfen keiner weiteren Stylesheets. So erklärt sich der Erfolg von Bootstrap durch die Fokussierung auf das Notwendige: Minimaler Aufwand bei gleichzeitig bestmöglicher Performance, Reduzierung auf Klassen, die die Breakpoints für automatisch regeln, schlankes CSS durch den Einsatz von Mixins und Variablen via LESS – alles zusammen der ideale Ansatz für ein performantes Frontend-Framework, welches sich auf ideale Art und Weise mit mächtigen Backend-Frameworks und Applikationen verweben lässt.

Natürlich gibt es für die populärsten Content Management Systeme, wie zum Beispiel WordPress und Drupal, bereits Bootstrap-Themes, die ein Layout anhand des Bootstrap-Grids ermöglichen. Der Einsatz von Bootstrap ist leicht verständlich und sehr intuitiv; Beginner in der Web-und Mobileentwicklung werden ebenfalls gut und schnell mit dem Framework zurechtkommen.

Die schnelle Verbreitung und Übernahme von Bootstrap in der Entwicklercommunity bestätigt, dass sich mit Bootstrap sehr gut performante und skalierbare Webapplikationen bauen lassen. Entwickler von Webapplikationen, die mit Ihren Applikationen auch „nach vorn hin“, also auf mobilen Endgeräten eine „bella figura“ machen wollen, sollten dieses Framework in ihren Werkzeugkasten aufnehmen.

(dpe)

Kategorien
Design Responsive Design

Voll im Flow – 26 Beispiele für responsives Design, wie es sein soll

Responsives Webdesign ist ein Trend, um den man nicht mehr herumkommt. Vor allem der sensationelle Erfolg mobiler Clients, wie Smartphones und Tablets lässt die Nachfrage nach Layouts, die auch mobil gut funktionieren, rasant steigen. Auch wenn die ganz großen Websites sich noch schwer tun, auf den mittlerweile schon rasenden Zug aufzuspringen, ist die Hoffnung berechtigt, dass selbst die großen Web-Dinosaurier in Kürze umsteigen werden. Das wiederum wird für einen weiteren Schub in Richtung Responsiveness sorgen. Die besten Vertreter responsiven Designs bieten nicht nur eine ausgezeichnete Nutzererfahrung auf mobilen Clients, sie definieren vielmehr das User Interface neu. Im folgenden zeige ich Ihnen eine Reihe der besten Beispiele für perfekt umgesetztes responsives Design. Lassen Sie mich wissen, was Sie davon halten…

1. Future of Web Design 2013

futureofwebdesign_london2013

Wie der Name vermuten lässt, handelt es sich hierbei um die Website zur Konferenz „Future of Web Design“ in London 2013. Um dem Anspruch der Konferenz gerecht zu werden, war es natürlich erforderlich, ein responsives Design zu bieten. Das gelang hier jedoch so gut, dass man durchaus von einem Benchmark, an dem sich alle anderen Tile-basierten Websites messen lassen müssen, sprechen darf. Die Website funktioniert mit drei verschiedenen Layouts für unterschiedliche Bildschirmauflösungen, verzichtet dabei aber an keiner Stelle auf Funktionalität. Sogar die Farben reagieren responsiv mit leichten Veränderungen, sobald die Anzeigebreite verändert wird.

2. Andersson Wise Architects

anderssonwise

(Noch) nicht viele responsive Designs verwenden offensiv großformatige Bilder. Die von Andersson Wise schon, und das sieht fantastisch aus. Die Übergänge zwischen den einzelnen Anzeigebreiten sind überaus gelungen. Andersson Wise muss man gesehen haben, bevor man selbst an das nächste responsive Design geht.

3. Shiny Demos

shinydemos

Mit den Mitgliedern des Opera Developer Relations Teams waren hier natürlich ausgewiesene und ausgewachsene Experten am Werk. Shiny Demos zeigt nicht nur die neuesten Open Web Standards, sondern tut das in einer Form, die beeindruckt. Leider sind nicht alle Browser in der Lage, den gesamten Designumfang der Shiny Demos zu rendern. Die responsiven Designs jedoch funktionieren sehr gut.

4. Kava Ruzova

kavaruzova

Kava Ruzova besteht nur aus einer einzelnen Seite. Die Website bindet Google Maps intelligent ein und zeigt, dass weniger mehr sein kann, auch und vor allem, wenn es um responsives Design geht.

5. Performance Marketing Awards 2013

performancemarketingawards2013

Auf den ersten Blick erscheint die Website nicht unbedingt als ein Musterbeispiel für responsives Layout. Sie werden jedoch überrascht sein, wenn Sie sie auf einem Tablet aufrufen. Hier steht dann ein Dropdown-Menü bereit und der gesamte Content wird intelligent restrukturiert. Hier steht klar der praktische Nutzen im Vordergrund.

6. William Csete

williamcsete

Naheliegenderweise gibt es einen ganzen Haufen brillianter, responsiver Websites von Webdesignern zur Darstellung der eigenen Leistungsfähigkeit. Diejenige von William Csete ist die erste in unserem kleinen Showcase hier. Was neben der modernen und schlanken Optik besonders auffällt, ist die Darstellung der Navigation. Die Usability des Menüs bedarf keiner weiteren Worte und wird intuitiv durch jedermann verstanden. Unabhängig von der Bildschirmauflösung steht die Navigation stets prominent bereit.

7. Stuff & Nonsense

stuffandnonsense

Diese Jungs wählten einen humoristischen Ansatz und verpassten ihrer Website eine Extra-Portion Spaß. Schon die großartige Verwendung von Illustrationen, der scrollende Hintergrund und die niedliche Logo-Animation machen was her. Besonders beeindruckend jedoch ist die Tatsache, dass der Mann auf dem Motorroller mit der Verjüngung des Viewports ebenfalls jünger wird. Auch der Roller geht diesen Weg mit…

8. Digital Atelier

digitalatelier

Diese Website darf in keinem Showcase über responsives Design fehlen. Immer, wenn ich dieses elegante und intelligente Design mit seinen nahtlosen Übergängen zwischen den Viewports sehe, wundere ich mich darüber, dass es bislang noch keine Awards für das Digital Atelier hagelte. Das textbasierte Menü verkleinert sich zu Icons, die Usability bleibt auf höchstem Level, egal bei welcher Auflösung.

9. Design made in Germany Issue 5

dmig5

Es wundert mich überhaupt nicht, dass diese Website die Massen begeistert. DMIG setzt eine scrollende Navigation vor einem fixen Hintergrund, der noch dazu perfekt für ein responsives Design geeignet ist, optimal um. Interessant zu sehen, wie das große „Dmig“ in kleineren Layouts ersetzt wird.

10. Forefathers Group

forefathersgroup

Sicherlich. Design, das nach Vergangenheit aussieht, ist nicht jedermanns Sache. Und Responsiveness scheint auf den ersten Blick sogar einen Widerspruch dazu zu bilden. Diese Website hier setzt den Widerspruch jedoch so schick in Szene, dass ich sie nicht aus dem Showcase herauslassen konnte. Richten Sie Ihr Augenmerk besonders auf die Navigation und das unauffällige Verschwinden von Design-Elementen.

11. TIME

time

TIME Magazine ist möglicherweise der bekannteste Name in Sachen Print-Medien, ein Dinosaurier der Branche. Gar nicht an Dinosaurier erinnert die Website im Magazin-Stil, die auf großartige Weise die Prinzipien des responsiven Webdesign umzusetzen versteht.

12. Lab Fiftyfive

labfiftyfive

Wenn das spontane „Ahh“ und „Ohh“ über die schicken Mouse-Over-Effekte nachlässt, werden Sie die Effektivität der dualen Navigation erkennen, ein Musterbeispiel in Sachen Usability. Suchen Sie auch mal nach dem Easter-Egg auf dieser Site!

13. Hicksdesign

hicksdesign

Hicksdesign liefert den Beweis dafür, dass kleinere Auflösung nicht notwendigerweise bedeutet, dass alle Elemente geschrumpft werden müssen.

14. Deren Keskin

derenkeskin

Es gibt verhältnismäßig wenige Designs, die sich ausschließlich auf Typographie verlassen. Das hängt sicherlich damit zusammen, dass die Verwendung imposanter Bilder leichter einen imposanten Gesamteindruck zu hinterlassen vermag. Deren Keskin interessiert das nicht. Er tritt an, zu beweisen, dass auch Typographie-basierte Websites grandios aussehen können. Achten Sie auf den großen responsiven Header-Text.

15. Seminal Responsive Web Design Example

seminalexample

Ich zögerte zunächst, diese Website in den Showcase aufzunehmen. Immerhin handelt es sich bloß um eine als Beispiel gedachte Seite. Sie eignet sich jedoch ausgesprochen gut, zu demonstrieren, wie responsives Design nicht auf bloße Viewport-Änderungen beschränkt wirken kann. Hier können Sie vielmehr ein erstaunlich präzises Fein-Tuning bei der Veränderung der dargestellten Inhalte erkennen. Sogar die Fläche zur Aktivierung von Links wird in kleinen Auflösungen vergrößert. Das ist nicht üblich, aber unter Usability-Aspekten natürlich großartig.

16. FortyOneTwenty

fourtyonetwenty

Das Einbetten von Videos ist eine ganz wichtige und an Bedeutung noch steigende Art, Inhalte darzustellen. Es ist allerdings auch eine der größten Schwierigkeiten, wenn es um responsives Layout geht. FortyOneTwenty fokussiert genau diese Funktionalität mit ihrer responsiven Website. Die von Vimeo zugelieferten Videos sehen auf allen unterstützten Clients in gleicher Weise perfekt aus.

17. Oliver Russell

oliverrussell

Unangestrengte Einfachheit – so würde ich meinen Eindruck von dieser Website beschreiben. Es ist offensichtlich, dass hier eine Menge Gehirnschmalz in eine effektive Nutzererfahrung, speziell mit Blick auf kleinere Auflösungen geflossen ist. Kein Wunder also, dass die Website auf kleineren Screens sogar besser aussieht, als auf größeren.

18. Siyelo

siyelo

Gehen Sie weiter. Hier gibt es nichts zu sehen. Na ja, in der Tat werden Sie auf dieser Website keine Zaubertricks oder sonstige schwer beeindruckenden Besonderheiten finden. Meiner Meinung nach liegt jedoch genau darin die besondere Schönheit. Siyelo bietet makelloses Layout ohne drastische Änderungen an User Interface oder Inhalten bei Größenänderungen.

19. The Next Web

thenextweb

Es ist noch relativ selten, dass Nachrichtenmagazine responsiv gelayoutet daherkommen. The Next Web jedoch gehört bereits dazu und ist ein sehr gutes und interessantes Beispiel dafür, wie auch inhaltsschwere Seiten mit ständig wechselndem Content von responsivem Design optisch profitieren können. The Next Web setzt letztlich auf drei verschiedene Layouts, die je nach Viewport eingesteuert werden. Auf allen drei Layouts steht der neueste Content deutlich im Vordergrund, bei den kleineren Auflösungen verschwinden als erstes die Werbeanzeigen. Das ist natürlich gut für die Leserschaft, weniger gut für die Monetarisierungsmöglichkeiten des Betreibers. Mal sehen, wie lange The Next Web das durchhält, wenn der Anteil kleinerer Auflösungen weiter so rasant steigt.

20. Kings Hill Cars

kingshillcars

„Meine Headergrafik muss rieesig bleiben!“. Auch Kunden, die sich in ihre eigenen Header verliebt haben, müssen nicht auf responsive Layouts verzichten. Diese Website mag als Beweis dienen. Achten Sie darauf, wie das große Bild des auffälligen Automobils über alle Auflösungen konsistent bleibt. Ebenso werden auch keine Kompromisse hinsichtlich des Banner-Texts eingegangen.

21. Ginger Whale

gingerwhale

Ginger Whale ist erdacht, um Kindern das Lesen schmackhaft zu machen. Entsprechend ist das Design sehr kindgerecht, mit niedlichen Animationen und altersgerechten Zeichnungen. Unter dem Aspekt des Webdesign beeindruckend ist aber vor allem, dass Ginger Whale sowohl in der Breite, wie auch in der Höhe responsiv reagiert. So bleibt die Website stets in gleicher Weise grafisch voll bedienbar, eine Seltenheit.

22. United Pixelworkers

unitedpixelworkers

Auch im E-Commerce kann man responsive designen. United Pixelworkers treten den Beweis an, dass auch Seiten mit einer extrem großen Zahl unterschiedlicher Produkte auf verschiedenen Auflösungen zufriedenstellend funktionieren können. Hier wird mit einem Kacheldesign gearbeitet, dem man zu Beginn gar nicht zutrauen würde, so nutzerfreundlich zu sein, wie es am Ende tatsächlich ist.

23. Treasure of FrontEnd Island

treasurefrontend

Ein visuell besonders imposantes Menü kann im responsiven Webdesign schnell zum Problem werden. Lassen Sie sich von dieser Website inspirieren, wenn Sie mal vor dem gleichen Problem stehen. Sie werden sehen, dass es keinen Widerspruch darstellt, visuell beeindruckend und zugleich responsiv zu designen.

24. Audio Vroom

audiovroom

Online Audio-Streaming ist, anders als Video-Streaming, kein grundsätzliches Problem, wenn man es unter dem Gesichtspunkt des responsiven Designs betrachtet. Audio Vroom steht jedoch für eine besonders gelungene Umsetzung. Hier werden einfache Regeln responsiver Layouts fehlerfrei umgesetzt.

25. Somewhat

somewhat

Das hier wird nicht jedem gefallen. Immerhin ist eine gängige Anforderung an responsives Design, dass die Seiten auf unterschiedlichen Clients so gleich wie möglich aussehen sollen. Somewhat zeigt das Gegenteil und bietet völlig verschiedene Optik je nach Auflösung. Kann man sich mit diesem Design-Prinzip anfreunden, eröffnet sich natürlich eine völlig neue Welt im Webdesign. Somewhat propagiert genau das, nämlich so zu designen, wie es für das jeweilige Endgerät am besten ist.

26. Lancaster University

lancasteruni

Im Grunde sehen wir hier eine mehr oder weniger typische Unternehmens-Website, die allerdings erstaunlich responsiv reagiert. Die Website der Lancaster University ist so gestaltet, dass sichergestellt ist, dass jegliche Funktionalität stets zur Verfügung steht, unabhängig von Auflösung und Client. Das sieht nicht besonders überwältigend aus, sondern funktioniert einfach.

Jetzt Sie!

Ich fand es ganz schön schwierig, 25 Muster-Beispiele responsiven Designs zu kuratieren und Ihnen vorzustellen. Deswegen entschied ich mich für 26 ;-) Welche gefallen Ihnen besonders? Habe ich sträflicherweise den absoluten Knüller übersehen? Lassen Sie es mich wissen…

Der Artikel wurde im Original geschrieben von Josh Chan und erschien zuerst in unserem Schwestermagazin Noupe.

Kategorien
Design HTML/CSS

Centurion – Neues HTML5/CSS3-Framework für Rapid Responsive Prototyping

Und schon wieder ist ein neues HTML5/CSS3-Framework für die beschleunigte Web-Entwicklung erschienen. Wer soll da noch den Überblick behalten? Centurion wirkt auf den ersten Blick wie eine Mischung aus Twitters Bootstrap und dem 960.gs. Entwickler Justin Hough will Centurion mehr als Boilerplate zur schnellen Theme-Entwicklung verstanden wissen. In der Tat ist es für ein ausgewachsenes Framework im Vergleich zu anderen Vertretern zur Zeit noch etwas schmächtig…

Centurion – Framework oder Boilerplate?

Mir persönlich gefällt Houghs Entscheidung, Centurion mit SASS zu entwickeln und auch so zu publizieren. Immerhin ist Centurion in der Form des browser-lesbaren CSS deutlich komplex. Die Verwendung von SASS erlaubt es dem Entwickler, und insbesondere dem, der das Framework nicht selbst erstellt hat, den Überblick zu behalten.

Nach eigenen Angaben entstand Centurion vornehmlich aus dem eigenen Bedarf. Als Front-End-Entwickler und Mitgründer der Webdesign-Schmiede Room 316 Studios benötigt Hough natürlich stets eine solide Basis für die Entwicklung des nächsten Kundenprojekts. Wie Hough in einem Blogpost zum Framework erläutert, brauchte er Jahre, zu erkennen, dass, ungeachtet der schlussendlichen Optik, allen Web-Projekten Gesetzmäßigkeiten und grundlegende Elemente gemeinsam sind. Diese versuchte er für sich zu erarbeiten. Als Ergebnis entstand Centurion.

Centurion ist so angelegt, dass es prinzipiell die Basis eines beliebigen Themes für ein beliebiges CMS oder auch ein reines Frontend sein kann. Mittlerweile trägt Centurion die Versionsnummer 3 und befindet sich weiterhin in reger Entwicklung. Die letzten größeren Änderungen am Projekt datieren aus der Zeit zwischen Weihnachten und Silvester. Offenbar ist Hough, der sich offensiv zu seinem Glauben bekennt, auch hinsichtlich seiner Projekte sehr leidenschaftlich.

Ungeachtet der Bezeichnung als Framework ist Centurion eher als Boilerplate angelegt, dabei aber nicht so limitiert. Ich denke, Hough würde nicht widersprechen, wenn man Centurion irgendwo in der Mitte zwischen den beiden Ansätzen einordnete.

Sollten Sie übrigens trotz hoher Versionsnummer noch nie von Centurion gehört haben, so wundern Sie sich nicht. Die ersten beiden Versionen des Frameworks verwendete Hough ausschließlich für seine eigenen Projekte. Erst mit der aktuellen Version geht er an die Öffentlichkeit und stellt das Projekt unter den Lizenzen GPL und MIT zur kostenlosen Nutzung auch in kommerziellen Projekten zur Verfügung.

Centurion – starke Anleihen bei Bootstrap und 960.gs

Mich erinnert Centurion an zwei Projekte, die ich bereits seit langem kenne. Das Grid von Centurion erinnert nicht nur von der Ausdehnung mit seinen 960 Pixeln, sondern auch hinsichtlich seiner Syntax an 960.gs, welches ich bereits vor vier/fünf Jahren erstmalig zum Einsatz brachte. Das grafiklose Styling grundlegender Bedienelemente, insbesondere der Buttons erinnert stark an Twitters Bootstrap. Auch der grundlegende Klassen-Ansatz lässt an die großen Vorbilder erinnern.

Will man in Centurion ein Grid definieren, das die 12 verfügbaren Spalten in vier gleiche Container trennt, so verwendet man die Syntax class=“grid–3”. In 960.js würde man den identischen Effekt unter Verwendung von class=“grid_3” erzielen. Anders als 960.gs, das auch mit 16 Spalten arbeiten kann, ist Centurion auf das 12 Spalten-Layout begrenzt.

Neben dem Spalten-Layout ist auch das gesamte optische Styling klassen-basiert. So erreicht man diese schicke Tabellenoptik:

Durch das Hinzufügen dieser Klasse zum Table-Element:

Damit der optische Effekt korrekt funktioniert, muss allerdings auf eine semantisch korrekte Auszeichnung der Tabelle geachtet werden, etwas, das nicht jeder Webdesigner, speziell die, die schon sehr lange dabei sind, gewohnt sein wird. So muss das aussehen:

Table Header
Content This is longer content
Table Footer

Centurion – responsiv mit Media Queries

Hough verspricht voll responsives Verhalten bis hinunter zu 320 Pixeln Bildschirmbreite. Setzte er in der ersten Version des Frameworks noch auf JavaScript, um das responsive Verhalten zu gewährleisten, also Stylesheets per JavaScript in Abhängigkeit von der Screen-Größe zu wechseln, verwendet Centurion seit Version 2 konsequent Media Queries. Das Grid verhält sich sogar im ewigen Sorgenkind Internet Explorer responsiv, die meisten übrigen Elemente allerdings nicht. In der Tat gab sogar responsives Design, respektive dessen radikalere Diktion “Mobile First”, überhaupt erst den Denkanstoß, aus dem sich letztlich Centurion entwickelte.

Schlussendlich kann ich zum jetzigen Zeitpunkt nichts negatives zu Centurion sagen, mit Ausnahme der Tatsache, dass derzeit die Dokumentation hauptsächlich aus Lücken besteht. Das sei einem Projekt, dass seit 10 Tagen öffentlich ist, allerdings verziehen. Die wenigen fertigen Teile der Anleitung lassen indes erkennen, dass Hough den Part sehr ernst nimmt. Was da ist, ist gut. Mit Hilfe der Community soll ein “robustes” (Zitat des Entwicklers) Werk daraus werden, das die Verwendung von Centurion nicht gerade zum Kinderspiel, aber doch so leicht wie möglich machen soll.

Links zum Beitrag:

Kategorien
Webdesign

Aller guten Dinge sind drei – Das Smashing Book #3 “Redesign The Web” ist da

In eigener Sache: lange hat die Web-Community darauf gewartet, und nun ist es endlich hier – Das Smashing Book #3! Frisch gedruckt, ordentlich verpackt und fertig zum Versand, wartet es nur auf den interessierten Leser.

The Smashing book #3

Was steckt hinter dem Leitthema “Redesign the Web”?

In den letzten Jahren hat sich einiges im Web getan. Das Repertoire des Webdesigners ist größer geworden, ebenso die Leistungsfähigkeit der Browser. Designer haben clevere Code- und Designtechniken entwickelt, stehen dabei indes neuen Herausforderungen und neuen Technologien gegenüber. Die Veränderungen sind grundlegend und zwingen uns, veraltete Herangehensweisen zu ersetzen. Es ist an der Zeit, die üblichen Methoden zu überdenken und neu zu erfinden: It is time to redesign the Web!

Die Smashing Books helfen, neue Wege zu gehen. Die Bücher behandeln alles, was man benötigt, um effektive und moderne Webseiten zu erstellen. Bekannte Experten teilen ihr praktisches Wissen mit dem Leser und stellen völlig neue Konzepte vor, die zu einem zukunftsfähigen Webdesign führen.

Das Buch versammelt Beiträge von renommierten Autoren wie Paul Boag, Christian Heilmann oder Andy Clarke und wurde von nicht weniger bekannten Experten wie Jon Hicks, Paul Irish oder Elliot Jay Stocks geprüft und korrigiert.

Smashing Book #3 (Printed & eBook)

The Smashing book #3

Über 40 Leute haben an diesem Projekt mitgewirkt. Der Inhalt wurde mehrfach überarbeitet, um jedes einzelne der 11 Kapitel zu optimieren.

Das Smashing Book #3 behandelt unter anderem die Themen innovatives Coding, Design und UX-Techniken. Zudem befasst es sich mit den Eigenheiten von Mobile und Emotional Design. Vorgestellt werden auch praktische Techniken im Umgang mit HTML5, CSS3 und JavaScript, sowie Methoden zum Workflow im Responsive Webdesign. Das Buch regt zum Umdenken an.

(Eine Inhaltsangabe und Technische Details gibt es im offiziellen Release-Post).

Smashing Book #3⅓ — The Extension

The Smashing Book #3 - The Extension

Da das Buch den Rahmen einer einzigen Publikation gesprengt hat, entschied sich das Smashing-Team, eine Erweiterung zu veröffentlichen: Smashing Book 3⅓ – The Extension.

Die Extension stellt die Macht des Storytelling im Webdesign vor, bearbeitet Trends im Navigationsdesign sowie die Anwendung von Inhaltsstrategien – oft unterschätzte Prozesse. Diese Strategien werden anhand des Responsive Redesigns der Smashing Magazine-Website dargestellt.

(Eine Inhaltsangabe und Technische Details gibt es im offiziellen Release-Post)

Coverdesign und Artwork

Mit ihrem frischen Coverdesign hat Veele Pieters aus Belgien einen neuen Designstandard für die Smashing Books geschaffen. Ihre Gestaltung des Smashing “S” spiegelt die unterschiedlichen Aspekte des modernen Webdesigns wieder.

Smashing Book #3

Die einleitenden Illustrationen der einzelnen Kapitel wurden von Kate McLelland entworfen. Wie im Smashing Book 2, spielen auch hier Tiere eine wichtige Rolle. Diese wurden von Kate kreativ in die Typographie integriert und unterstreichen das Motto “Redesign The Web”

Das Smashing Book #3 gibt es in unterschiedlichen Ausgaben und Kombinationen – separat, als Druck-Bundle, als eBook-Bundle und als Druck- und eBook-Bundle. Beide Bücher haben ein Flexicover, eine Fadenbindung und ein Lesezeichenband. Sie werden aus Berlin verschickt. Die eBooks gibt es als praktisches PDF, verpackt im Zip-Format, sowie als EPUB und im Kindle-Format. Jetzt ist der richtige Zeitpunkt, zum Kauf zu schreiten!

Die ersten (englischsprachigen) Kritiken von Christopher Butler, David Bushell, Cameron Chapman und Jeremy Girard liegen vor. Das Smashing-Team freut sich über weitere Meinungen. Eingeloggte Kunden können auch auf den jeweiligen Produktseiten (ganz unten) ein Feedback mit ihrer Bewertung abgeben.

(dpe), (sl)