praegnanz.de büro für intervernetzte medien

Unser Weblog

Drittes Buch zur Webtypografie im Anmarsch

Gerrit, 24.06.2015

Nach meinem eigenen, inzwischen leicht angestaubten Buch über Webtypografie, hat sich vor einem Jahr auch mein amerikanischer Bloggerkollege Jason Santa Maria des Themas angenommen, im Rahmen von A Book Apart.

Nun folgt noch ein Kollege von der Insel, in diesem Falle Richard Rutter – auch bekannt von clagnut.com –, und bittet bei Kickstarter um 12.000 Pfund für ein weiteres (englichsprachiges) Werk zum Thema. Hier das Pitchvideo:

Zum Kickstarter-Projekt

Funfact: Richard Rutter hat mir vor 11 Jahren dabei geholfen, die EM-Einheit in CSS zu verstehen.

(via Typography.guru)

Kommentare

Javascript Toolsammlung

Gerrit, 19.06.2015

Notiz: Hier der aktuelle Stand an empfehlenswerten UI-Frameworks, wie wir ihn aktuell nach Bedarf einsetzen.

Ach ja, jQueryUI gilt es zu vermeiden, wenn irgendwie möglich!

Kommentare [8]

„Sans Francisco“: Zwei Schriften, sie alle zu knechten (update)

Gerrit, 11.06.2015

Es hat sich herumgesprochen, dass Apple nach einem kurzen Ausflug ins Helveticaland nun alles auf eine Karte setzt, was die Systemtypografie angeht: Die bei der Apple Watch eingeführte Schrift San Francisco soll es nun auch unter iOS und OS X richten und das Helvetica-Disaster wieder gut machen.

Gute Idee! Doch so ganz einheitlich ist die Lage derzeit nicht: Unter iOS 9 und OS X El Capitan kommt nämlich (zumindest in den Beta-Varianten) eine modifizierte Version der Uhren-Frisco zum Einsatz, die etwas bauchiger und gänzlich ohne linear-vertikale Linienführung im o und e auskommt. Es ist die Lilo & Stitch-Version der San Francisco (gell, Timo?), und fällt darüber hinaus einen Hauch größer aus – bei gleichem nominellen Schriftgrad:

Sans Francisco im vergleich

Grundsätzlich ist es um die Einzigartigkeit und Charakterstärke der Sans Francisco eher so mau bestellt – vergleichbare Schriften sind absolut nichts Neues, und insbesondere Google hat bereits seit den beginnenden Zehnerjahren mit der Roboto eine verdammt ähnlichen Schriftfamilie am Start, die kontinuierlich weiterentwickelt und ebenfalls auf allen erdenklichen Anwendungen und Systemen zum Einsatz kommt.

Ähnlich wie die Roboto vermischt auch die San Francisco Elemente des modernen Klassikers Univers (1957, Adrian Frutiger) mit Elementen der DIN-Schrift (1926, Ludwig Goller), die insbesondere als FF DIN (1995, Jan-Albert Pool) und etwas später als DIN Next (2009, Akira Kobayashi) in typografischen Kreisen Furore machte.

Im Grunde nichts Neues also: bewährte neutralstmögliche Grotesk-Kost, die jedoch mit Liebe zum Detail für moderne Screens optimiert wird. Wie gut die „Sans Francisco“ unter iOS und OS X tatsächlich funktionieren wird, muss man über einen längeren Zeitraum ausprobieren; Apple ist sicher motiviert, hier weitere Verbesserungen anzubringen. Auf den ersten Blick wirkt mir das auf dem iPhone jedoch alles ein wenig zu rund und lieblich – die unmodifizierte Watchversion wäre wohl einen Hauch prägnanter gewesen. Wir werden sehen, ob sich das bis zum Release im Herbst noch ändert!

Update am 13. Juni:

Apple zeigte auf der WWDC in Form eines exzellenten Vortrags des hauseigenen Schriftentwerfer Antonio Cavedoni (hier die Videoaufzeichnung) dass meine obige Analyse grob zutrifft, und was grundsätzlich technisch und gestalterisch hinter der SF steht. Extrem sehenswert, auch für nicht-eingefleischte Typografen!

Darüber hinaus lassen sich die beiden Schriftfamilien nun auch offiziell herunterladen. Vom ungezügelten Einsatz der Fonts im Rahmen von kommerziellen Projekten rate ich aus rechtlichen Gründen derzeit jedoch noch ab!

Kommentare [5]

Meine praktische Streamingwelt

Gerrit, 20.04.2015

Ich glaube um das Jahr 2007, als das iPhone vorgestellt wurde und der iPod noch sehr populär war, dämmerte es vielen, dass man in Zukunft möglicherweise nicht mehr alle Daten für das persönliche Entertainment ständig mit sich herumschleppen würde. Das Internet würde es wohl richten, dass man auch auf einem mobilen Gerät mit nur 8GB oder 16GB Speicher alle Songs und alle Filme angucken könnte, die man besitzt. Allein die schlechte UMTS-Verbreitung und die grotesk überteuerten mobilen Datentarife standen uns noch im Wege – und natürlich entsprechende Cloudservices, die damals ja noch nicht so hießen, und die heute auch eher Streamingdienste heißen.

Einige Jahre später sind wir so einigermaßen angekommen. Nicht alles ist perfekt, aber im Jahre 2007 hätte ich den jetzigen Zustand meiner Entertainment-Welt für die verdammte Zukunft gehalten! Ähm, ja. Willkommen in der Zukunft, 28-jähriger Webdesign-Blogger!

In den letzten Monaten habe ich mich auf vier interessante Dienste eingeschossen, um meine SSD-Kapazitäten zu schonen und den allgegenwärtigen Zugriff auf Unterhaltung zu ermöglichen. Los geht’s mit

Kommerzieller Musik

Die vielen Musik-Streaming-Dienste am heutigen Markt sind beinahe nicht auseinanderzuhalten, aber immerhin existieren sie, sind bezahlbar (8–10 Euro im Monat), und haben alle ein mehr oder minder identisches Gesamtrepertoire. Die Künstler verdienen kaum Geld mit ihnen, aber immerhin mehr als mit Napster 1, schätze ich – und das wahre Geld steckt eh in Konzerten und Merchandising. Von daher fiel meine Wahl auf Spotify, weil sie die ersten ernstzunehmenden Player am Markt waren und weil Jon Hicks die Genre-Icons gemacht hat. Spotify rockt – bis auf die kaputte Integration in RunKeeper, aber das wird noch.

(Ernsthaft: Beim Joggen übers Feld live gestreamte Musik aus dem Internet hören, wie fucking 2015 ist das?)

Abwegige Musik

Nicht alles gibt’s bei Spotify – schon gar nicht selbstgemachte Tunes von früher, und eben auch nicht die Musik von der netten Liveband aus dem kleinen Pub in Cornwall. Aber gerippte CDs, Fundstücke aus den frühen Phasen von mp3.com (wer erinnert sich?), sowie von LP digitalisierte Raritäten von Jean-Michel Jarre überlasse ich ebenfalls nicht der lokalen Speicherung. Als mir iTunes in the Cloud zu teuer wurde, bin ich zu Google Music gewechselt, die eine anständige Browser-App, eine gute iOS-App und kein Speicherlimit besitzen. Hier findet sich all der Kram, der es bisher nicht zu Spotify geschafft hat, wie die seltsame Single „The Visitors“ von Gino Soccio von 1979.

Filme und Serien

Zum Glück ist zwischen 2002 und 2012 genügend gutes Material produziert worden, dass es noch ein wenig dauern kann, bis ich mir mal wieder eine Serie oder einen Film bei iTunes kaufen muss. Die Bewegtbild-Streamingdienste machen’s möglich. Lange Zeit war ich dem Früheinsteiger Watchever treu – doch so langsam ist das für mich leergeguckt, und besonders viel gutes Neues kommt gerade nicht nach, also habe ich derzeit den Plan, noch alles verwertbare auf Prime Instant Video zu konsumieren und dann später zu Netflix zu wechseln, wo ich wiederum meine 10 Euro im Monat investieren werden, um andere Dinge zu gucken. Für Abwechslung ist gesorgt, und solange ein munterer Wettstreit um die aktuellsten und hochwertigsten Deals im Gange ist, bleibt das auch erstmal so. Derzeit kein Bedarf nach illegalen Kopien – ich wüsste gar nicht, wann ich diese gucken sollte!

Private Fotos

Endlich hat auch Apple umgestellt vom seltsamen „Die neuesten Fotos in der Cloud, die alten Sachen auf der Platte“ zum deutlich intelligenteren „Alle Fotos in der Cloud, und die neusten obendrein noch auf dem Gerät“. Mit der neuen Fotos-App auf allen OS-X- und iOS-Geräten habe ich nun endlich Parität auf allen meinen in Benutzung befindlichen Geräten, was die selbstgemachten Fotos und Videos angeht. Finally. Und es klappt echt gut: keine Dubletten, keine Verluste, flottes Scrollen und sichtbares Potenzial nach oben, was die Möglichkeit der Organsiation angeht. Aber zuerst ist mal wichtig zu wissen, dass die iCloud-Fotobibliothek so ziemlich der erste Cloudsync-Dienst ist, den Apple stolperfrei hinbekommen hat. Dafür zahle ich auch meine 4 Euro im Monat, wenn auch ein 50GB-Volumen für mich völlig ausreichen würde.

Kommentare [4]

Unser ComputerBase-Workflow

Gerrit, 30.03.2015

Als wir Anfang 2014 die erste Anfrage für ein Redesign von ComputerBase erhielten, waren wir zunächst einmal skeptisch. Auch wenn Philip und ich früher selbstverständlich Motherboards geschraubt, Jumper gesetzt und sogar casegemoddet haben, so ist unsere aktive PC-Bastelzeit doch schon einige Jahre her. Und die mutmaßliche Zielgruppe von ComputerBase schien uns – vor allem aufgrund des Designs – geradewegs aus dieser Zeit entgegenzuspringen. Ob unsere Vorstellungen eines modernen, universellen Webs dazu kompatibel sein würden?

CB

Die drei Gründer und Geschäftsführer konnten uns jedoch schnell davon überzeugen, dass sie voll und ganz hinter den aktuellen Entwicklungen im Web stehen, man würde das nur gerade nicht so sehr am Design erkennen. Und tatsächlich: Ein Blick in den Quelltext bestätigte, wie nah man am Puls der Entwicklungen war: HTML5-Semantik, CSS3-Techniken, WebP-Bildformat – alles pfeilschnell vom Server ausgeliefert – Hut ab! Unter der Haube war alles auf Stand, und wir wurden ganz offenbar nur in Sachen Design gebraucht, nicht aber für die Umsetzung in ein neues Markup. Doch wie fängt man so eine Zusammenarbeit an? Ist das nicht ein Paradebeispiel für einen völlig hippen Responsive Workflow? Durchaus, irgendwie. Auf unsere Weise eben!

Der Rahmen

Zunächst einmal waren uns seitens der Werbevermarktung gewisse Grenzen gesetzt. ComputerBase ist als kostenloses Angebot von der Werbung abhängig, muss deren Realitäten akzeptieren. Die ideale Maximalbreite der Website beträgt somit 1000 Pixel – Grund sind unter anderem sogenannte Fireplace-Ads, also Anzeigen, die sich oben, links und rechts komplett um die Website herumlegen. Doch auch unabhängig von Werbebannern sind mehr als 1280 Pixel natürlich keine gute Idee, wenn man nicht unendlich lange Zeilen oder alternativ einen Friedhof voller Seitenboxen anschauen möchte.

Die kleinste unterstützte Breite hingegen liegt bei klassischen 320px, und von dort aus geht es stufenlos bis hin zu den erwähnten 1000px. Eine stufenbasierte Lösung, die bestimmte Werbeformate noch homogener hätte integrieren können, wurde schnell wieder verworfen. Ebenso die bis dato verwendete separate Mobilversion mit zurechtgestutzten Inhalten. Ähnlich wie andere Newsangebote im Netz sollte es schon ein einheitliches HTML-Gerüst mit responsivem CSS sein – keine Version soll benachteiligt sein, universelles Webdesign eben.

Mobile First – naja, so ähnlich

Wie nähert man sich nun so einer Mammutaufgabe? Denn ComputerBase ist nicht eine einfache Firmenwebsite, sondern ein komplexes Konstrukt mit vielen unterschiedlichen Bereichen, Inhaltstypen und Sonderfällen, die sich seit 1999, dem Jahr der Gründung, angesammelt haben. Wir entschieden uns, das Design „von innen nach außen“ aufzubauen und mit dem Kernstück zu beginnen – der Newsauflistung nebst Thumbnail (welches am Anfang übrigens noch farbcodierte Icons waren). Diese Newsauflistung verträgt ca. 320–600 Pixel Breite und eignet sich somit sowohl als einspaltiges Element für Smartphones, aber auch als Hauptspalte auf breiteren Viewports.

Ausgehend von diesem Kernelement entwickelten wir das gesamte Drumherum und bauten Schritt für Schritt die äußeren Schichten auf, bis das grobe Layout für alle Geräte stand. Insbesondere die Desktop-Startseite folgt dabei dem „neuen“ Paradigma im Webdesign, welches bekanntlich weg geht von einer Hauptspalte und einer davon völlig unabhängigen Seitenleiste. Vielmehr ist das Layout nun in mehrere vertikal gestapelte Bereiche aufgeteilt, die jeweils ihren eigenen Haupt- und Nebenbereich haben, sowie von horizontalen Thumbnail-Teaserleisten unterbrochen werden.

CB6

Die Artikel-Einzelansicht bricht komplett mit ihrer Seitenleiste und ist auf allen Geräten einspaltig, was ihr Luft zum Atmen gibt und gerade bei längeren Testberichten hochwertig und reichhaltig wirkt. Quasi zum Nulltarif lösen wir dadurch auch das Problem mit den Marginalboxen auf Smartphones und Hochkant-Tablets, die man bei nachträglicher Responsivierung nur schwer in den Griff bekommt. Es gibt sie einfach nicht :-)

Der Workflow

Wir haben über ein Jahr an ComputerBase v6 gearbeitet, und das in ständigem Austausch mit der Geschäftsführung, die gleichzeitig als Projektleiter und HTML-Prototyper fungierte. Wir haben jedes noch so unbedeutende Mikroelement des neuen Designs erst besprochen, dann per Photoshop skizziert, manchmal auch per WebInspektor gebaut, wieder besprochen, wieder geprototyped, und dann letztlich in die echten HTML/CSS-Templates aufgenommen. Besonders gerne genommen, vor allem im späteren Verlauf des Projektes: Der kombinierte WebInspektor-Photoshop-Workflow, und der geht so:

Wir laden den aktuellen Stand des Projektes in den Browser, und verändern per WebInspektor die Parameter, die sich am schnellsten dort verändern lassen, z. B. die Gesamtbreite einer Newsliste mit entsprechend neu umbrechenden Zeilen. Dann nehmen wir davon einen Screenshot, laden es im Photoshop und machen dort solche Veränderungen, die sich mit einem Pixelprogramm schneller umsetzen lassen, wie das freie Verschieben von ganzen Layout-Blöcken. Auch wenn es unorthodox klingt, ist so ein gemischter Workflow letztlich die effizienteste Methode für uns gewesen.

(Natürlich hatten wir ursprünglich einen rein browser- und gitbasierten Workflow angestrebt, diesen aber im Laufe der Wochen immer mehr vernachlässigt. Letztlich war Steffen vom CB-Team für den finalen Code verantwortlich, und wir haben ihm über Mockups häppchenweise zugearbeitet.)

Die Kontroverse

Noch nie durften wir eine Website entwerfen, die so viele Leser hat wie ComputerBase, und die ihren Lesern auch so am Herzen liegt. Es tummelt sich eine äußerst aktive Community im Forum, die dort seit vielen Jahren einen Lebensraum gefunden hat. So etwas ist uns natürlich grundsätzlich nicht fremd. Die Vehemenz allerdings, mit der das neue Design nun auf Nichtgefallen stößt, erstaunt uns seit der ersten Sneak Preview Anfang des Monats jeden Tag aufs Neue. Man übertreibt nicht, wenn man behauptet, dass dem CB-Team und uns eine leidenschaftliche Wut entgegengebracht wird.

Viele der Meldungen sind absolut nachvollziehbar und aus der Perspektive der Stammleser auch berechtigt, manche Kommentare sind jedoch auch sehr unsachliche und emotionale Affektäußerungen. Man kann hier in Reinkultur beobachten, wie eine Marke, die sich aus Logo, Webdesign und Inhalt zusammensetzt, vermeintlich in den Besitz der Community übergegangen ist und nun droht, sich dieser wieder zu entfremden.

Insbesondere weil auch unsere kleine Agentur nun Ziel der verbalen Attacken ist, möchte ich noch ein paar Worte dazu verlieren. Auch wenn es viele Leser in der Aufregung nicht mitbekommen haben, ist das neue ComputerBase-Design keine Auftragsarbeit, die Anfang 2014 bestellt und März 2015 geliefert wurde. Es handelt sich vielmehr um eine extrem enge und inzwischen auch freundschaftliche Zusammenarbeit zwischen dem Gründerteam, welches ComputerBase seit 1999 mit Herzblut betreibt und unserer visuellen Weberfahrung, die bis ins Jahr 1996 zurückgeht. Stichworte wie „WordPress-Template“ und „Ich bau euch in 15 Minuten was Besseres“ sind also nicht angebracht und entlarven massive Unkenntnis der Materie.

ComputerBase ist thematisch seit einigen Jahren deutlich vielfältiger als es der erste Eindruck vermitteln mag: iPhone, AndroidWear, StartUps und Netzpolitik gehören genauso zum Repertoire wie die Klassiker Grafikkarten, First-Person-Shooter und CPU-Kühler. Unsere Aufgabe bestand nicht zuletzt darin, eine für alle Themenfelder angemessene visuelle Darstellung zu finden, und insbesondere neue Leser nicht durch das inzwischen veraltete Design abzuschrecken.

Nicht alle alteingesessenen CB-Leser werden diesen Relaunch mitgehen wollen, das machen die Kommentare deutlich. Doch wir zählen darauf, dass die ComputerBase-Themenvielfalt nun offener, leichtgewichtiger und professioneller in Szene gesetzt wird. Also: Wem eine unabhängige und ehrliche Technik-Berichterstattung am Herzen liegt, und wer sich designtechnisch im Jahr 2015 wohler fühlt als im Jahr 2003 – hier bitte klicken ;-)

Kommentare [28]