Im Februar sorgte eine Information aus der CSS-Arbeitsgruppe des W3C für einige Aufmerksamkeit. Daniel Glazmann führte in seinem bekannten Blogeintrag aus, dass einige Browserentwickler überlegten das -webkit-Prefix einzuführen, da es eine (zu) große Anzahl von Webseiten gab, die sich nicht um die Prefixe anderer Browser scherten und lediglich für -webkit- entwickelten. Mit der Ankündigung von Opera zukünftig auch auf WebKit zu setzen schien dieser Trend noch weiter unterstützt zu werden.

Gestern veröffentlichte allerdings das Entwickler-Team von Chrome, dem hauseigenen Browser von Google, einen Blogeintrag, in dem sie darüber sprachen, in Zukunft eine neue Rendering-Engine einzusetzen. Diese Engine hört auf den Namen ›Blink‹ und verfolgt folgende Mission: »To improve the open web through technical innovation and good citizenship«.

Bei Blink handelt es sich um einen WebKit-Fork, weshalb in naher Zukunft nicht mit großen Abweichungen von WebKit zu rechnen sein wird, was sich im Laufe der Zeit jedoch ändern könnte.

Im eben erwähnten Blogeintrag des Chrome-Entwicklerteams heißt es:

»… we believe that having multiple rendering engines—similar to having multiple browsers—will spur innovation and over time improve the health of the entire open web ecosystem.«

Quelle: The Chromium Blog – Blink: A rendering engine for the Chromium project

The Verge bringt noch folgenden Aspekt ins Spiel:

»Most interesting of all is what this could mean for Google — it currently is trying to gain traction with Chrome OS, which of course is based almost entirely on the Chrome browser. A more powerful rendering engine could mean more powerful and useful apps within Chrome OS.«

Quelle: The Verge, Google forks WebKit with new Blink rendering engine for Chrome

Auch wenn sich zunächst „gefühlt“ nicht viel ändern wird, könnte diese Entscheidung dazu führen, dass die befürchtete Konzentration auf -webkit- nicht weitergehen wird, und somit Webseiten bewusst plattform- und browserübergreifend entwickelt werden.

Bevor wir uns den technischen Fragen nähern, hier eine kurze Definition des Begriffes ›favicon‹ aus der Wikipedia:

Ein Favicon (kurz für favorite icon, engl. für Favoriten-Symbol) ist ein kleines, 16×16 oder 32×32 Pixel großes Icon, Symbol oder Logo, das unter anderem in der Adresszeile eines Browsers links von der URL angezeigt wird und meist dazu dient, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen.

Quelle: Wikipedia: Favicon

Ursprünglich war das Favicon für die Ausgabe in Browsern vorgesehen, mittlerweile kommt es jedoch auch auf den Startbildschirmen von Smartphones und unter Windows 8 häufig vor, was die Frage nach Größe und Möglichkeiten der Einbindung aufwirft.

Es bietet sich daher an, ein Favicon in unterschiedlichen Größen anzubieten. Mittlerweile halte ich die Verwendung von „klassischen” Favicons in 32×32 Pixeln und für den Einsatz auf Startbildschirmen 144×144 Pixel oder 241×241 Pixel für sinnvoll. Das wären dann 4 Dateien:

• 32×32 Pixel – png und ico (klassische Favicons)
• 144×144 Pixel – png (transparenter Hintergrund, für Windows 8)
• 241×241 Pixel – png (Apple-Touch-Icon)

Diese Icons sollten laut des eingangs erwähnten Artikels folgendermaßen eingebunden werden:

<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!–[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]–>
<!– or, set /favicon.ico for IE10 win –>
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">
    

Da der IE10 keine Conditional Comments mehr annimmt, sollte zusätzlich zu diesen Angaben ein favicon.ico im Root-Verzeichnis der Webseite liegen. Auf den Startbildschirmen der iOS-Geräte gibt es die Möglichkeit die Icons entweder mit Überlagerungen darstellen zu lassen, oder durch den Zusatz -precomposed unverändert.

Weitere Artikel zum Thema:

• Jonathan T. Neal – Understanding the Favicon.
• Jonathan Snook – Making A Good Favicon
• Jon Hicks – Create the perfect favicon
• Martin Wolf – Apple Touch Icon und Reeder

Tools

• Photoshop-Plugin für ico-Export
• Mac-App: Icon Slate

Die sozialen Medien sind die digitale Straße, und dort können Hashtags zu Internetdemonstrationen werden. Wie bei ihren nicht-digitalen Vorbildern wird durch die schiere Größe der digitalen Versammlung sichtbar, was den Leuten wichtig ist, aber unterpubliziert erscheint.

Quelle: Sascha Lobo – Die Mensch-Maschine: #digitaleöffentlichkeit – S.P.O.N.

Die öffentliche Sichtbarkeit dieses Filtermechanismus spricht aus meiner Sicht für das Medium Twitter, gerade im Vergleich mit Facebook oder Google+. Twitter scheint mir für eine solche Art der Kommunikation weitaus besser geeignet zu sein, als die auf Pinnwände und Ähnliches konzentrierte Netzwerke.

Mit diesem Eintrag möchte ich nur kurz auf die technische Seite dieses Hashtags hinweisen, inhaltlich habe ich mich hier kurz darauf bezogen.

Tanja und Johnny, die unter anderem durch ihr Blog spreeblick.com bekannt sind, wenden sich mit diesem Buch vor allem an Eltern und andere, die mit der Erziehung von Kindern und Jugendlichen betraut sind. Die beiden sind selbst Eltern zweier Söhne, und sowohl technik- als auch internetaffin. Hier schreiben also zwei Personen, die sowohl das Internet aus ihrer Sicht, aber auch aus dem alltäglichen Umgang ihrer Heranwachsenden damit kennen. Diesen Erfahrungsschatz stellen sie in diesem Buch den geneigten Leserinnen und Lesern zur Verfügung. Anhand einiger Stichworte möchte ich hier kurz darüber schreiben.

Vertrauensvoll

Tanja und Johnny schreiben aus einer vertrauensvollen Perspektive. Sie vertrauen ihren Söhnen, auch im Umgang mit Computer und Internet, und das spürt man an unzähligen Stellen im Buch. Diese vertrauensvolle Perspektive steckt an, und lädt dazu ein, einen partnerschaftlichen Umgang der Eltern mit ihren Kindern, auch im Umgang mit Computer und Internet, zu pflegen.

Keine Panik!

Aus diesem Vertrauen, und dem eigenen Wissen um das Internet, seiner schönen und hässlichen Seiten, resultiert eine Haltung, die nicht von Panik, aber dennoch mit bedacht vorgeht. Am Anfang des Buches vergleichen sie das Internet mit Bielefeld, und sprechen darüber, wie wichtig es ist sich in einer Stadt auszukennen, um unbehelligt darin leben zu können.

Selbstverständlichkeit

Das Internet ist eine Selbstverständlichkeit. Unsere Kinder zweifeln an der Funktionsfähigkeit eines Computers, wenn dessen Verbindung zum Internet gestört ist. Für sie ist der Zugriff auf das Internet so selbstverständlich wie für uns das Wasser aus dem Wasserhahn. Unsere Kinder wachsen selbstverständlich mit dem Internet auf. Wir erinnern uns noch an unsere ersten E-Mail-Adressen (zu Beginn des Studiums), für unsere Kinder gab es keine Zeit ohne Internet.

Verspielt

Wir machten unsere ersten Schritte im Internet als wir bereits Autofahren konnten – so alt sind wir schon – unsere Kinder machen ihre ersten Schritte auf dem Boden der Tatsachen und im Internet, beinahe Gleichzeitig. Daher begegnen sie dem Internet verspielt. Sie sehen sich Videos auf YouTube an, die wir für reine Zeitverschwendung halten, lernen dabei aber die unglaublichsten Dinge. Sie bedienen das Adressfeld des Browsers oder das Suchfenster von Google mit einer Leichtigkeit und auf gut Glück, dabei finden sie Perlen und Steine.

Natürlichkeit

Tanja und Johnny berichten von der Versiertheit ihrer Söhne im Umgang mit den unterschiedlichen Geräten, Webseiten und Spielen. Sie berichten davon, dass wir von unseren Kindern jede Menge Kniffe lernen können, die sie sich nebenbei erwerben, und die für sie selbstverständlich sind. Unser Kinder sind flink, sie lernen schnell mit dem Medium Internet umzugehen, intuitiv wissen sie, dass die Antwort auf das Internet das Internet selbst ist. Bei einer Herausforderung beginne sie nach der Lösung im Internet zu suchen, und entwickeln schnell einen Riecher für die richtige Fährte.

Sozialkompetenz und Lebenserfahrung

Unsere Kinder gehen versierter mit den technischen Neuerungen um als ihre älteren Begleiter, wir jedoch haben mehr Lebenserfahrung und dadurch hoffentlich auch etwas mehr Sozialkompetenz. Unsere Aufgabe und Verantwortung ist es, nach Tanja und Johnny daher, unsere Kinder auch im Internet in diesen Punkten zu unterstützen.

Positiver Realismus

Die beiden Autoren schreiben hier mit einem positiven Realismus. Sie beschönigen weder die hässlichen Ecken des Internets und den Umgang damit, noch malen sie den Teufel an die Wand und sehen überall nur Gefahren. Aus meiner Sicht finden sie in dem Buch eine sehr gute Balance, die auf ermutigende Weise einlädt mit den anvertrauten Kindern einen guten Umgang mit dem Internet zu erlernen. Sie geben sowohl praktische Tipps, sei es im Umgang mit YouTube und Facebook, als auch Hinweise zur Einstellung des Routers. Zwischen diesen hilfreichen Tipps erzählen sie augenzwinkernd eigene Erlebnisse und lassen ihre Haltung den Heranwachsenden und dem Internet gegenüber durchscheinen.

Das Buch »Netzgemüse, Aufzucht und Pflege der Generation Internet« ist ein sehr gelungenes Handbuch, dass uns Eltern dazu einlädt das Internet gemeinsam mit unseren Kindern (neu) zu entdecken, und in einer vertrauensvollen Haltung mit unseren Kindern gemeinsam die richtigen Schritte zu gehen. Aus diesem Grund empfehle ich die Lektüre allen, die mit der Erziehung von Heranwachsenden betraut sind.

Auf netzgemüse.de finden sich weitere Informationen zum Buch, und hier kann ein Auszug aus einem Kapitel des Buches gelesen werden.

Entscheidungen darüber, welche Inhalte ohne Rücksprache mit Personen die darin vorkommen, veröffentlicht werden können, folgen meiner Ansicht nach am Besten der Abwägung in welchem Rahmen sie stattgefunden haben. Hatte die erwähnte Begebenheit einen öffentlichen Charakter, ändert sich der Rahmen durch die Veröffentlichung nicht. Liegt jedoch eine Begebenheit zu Grunde, die in privaterem Rahmen stattfand, empfiehlt sich eine Rücksprache mit den betreffenden Personen.

In einem Artikel zu Straßenfotografie las ich vor einiger Zeit, dass der betreffende Fotograf, dessen Namen mir momentan leider entfallen ist, darauf achtet, dass Menschen von denen er Fotos veröffentlicht darauf nicht unvorteilhaft aussehen. Ich finde das zusätzlich zu oben gesagtem eine gute Faustregel für die Veröffentlichung von Inhalten.

Welchen Faustregeln folgt ihr?

Hintergrundbilder werden durch die Verwendung der appearance-Eigenschaft jedoch obsolet. Die Eigenschaft wird in zwei Fällen eingesetzt:

• um plattformspezifisches Aussehen zuzuweisen
• um plattformspezifisches Aussehen zu entfernen

Bei den Suchfeldern wollen wir das Aussehen, welches ihnen von Seiten der iOS-Entwickler zugedacht wurde, entfernen. Dazu kann folgende Zeile verwendet werden:

-webkit-appearance:none;

Sollen nur die inneren Schatten des Eingabefeldes entfernt werden, hilft folgende Zeile:

-webkit-appearance:caret;

Sollen darüber hinaus noch die Rundungen der Ecken zurückgesetzt werden, kann ergänzend zu oben genannten Zeilen der border-radius auf 0 gesetzt werden.

Hier noch zwei Links zu den Artikeln auf die ich mich hier beziehe, und die darüber hinaus auch die appearance-Eigenschaft der Mozilla-Browser behandeln:

• Trent Walton: CSS Webkit Appearance
• CSS Tricks: Appearance

Fügt man folgenden Code in die functions.php ein, werden Klassen mit den Kategorie-IDs dem body-Tag zugewiesen:

// add category IDs to the body class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes[] = 'cat-' . $category->cat_ID;
	return $classes;
}
add_filter('body_class', 'category_id_class');

Wer die Klassen in derselben Formatierung auch dem jeweiligen Eintrag zuweisen möchte, kann dies durch hinzufügen folgender Zeile erreichen:

add_filter('post_class', 'category_id_class');

Da zur Gestaltung des Eintrags bereits Kategorie-Klassen zur Verfügung stehen, und eine doppelte Zuweisung (body_class & post_class) redundant ist, würde ich davon absehen.

In meinem Fall wollte ich die IDs der Kategorien in der Klasse verwenden, was zu Klassen führt, die beispielsweise »cat-13« heißen. Auf diese Weise kann ich mit der Liste der Kategorien interagieren, ohne bei neuen Kategorien nochmals an den Code zu müssen.

Es lassen sich natürlich auch die Namen der Kategorien als Klassen ausgeben, dazu wird die Zeile in der die Ausgabe der Klasse bestimmt wird folgendermaßen verändert:

$classes[] = $category->category_nicename;

—
Die hier geschilderte Idee basiert auf dem Eintrag zur body_class im WordPress-Codex.

Sublime Text 2 wirkt auf mich wie eine gute Weiterentwicklung der von mir bisher genutzten Editoren. Die Möglichkeit ein Dokument an unterschiedlichen Stellen gleichzeitig zu bearbeiten, ist für mich mittlerweile so normal, dass ich es in anderen Anwendungen vermisse.

Anfang der Woche stellte Martin seine Sublime-Text-Einstellungen vor, seine Einladung die eigenen Einstellungen ebenfalls vorzustellen, nehme ich hiermit an. Meine Einstellungen sind recht ähnlich, sie unterscheiden sich vor allem in der Schriftgröße, und darin, dass ich gerne alle Dokumente zunächst als neue Tabs öffnen möchte, weshalb ich „open_files_in_new_window“ auf „false“ gesetzt habe.

{
	"color_scheme": "Packages/Color Scheme - Default/iPlastic.tmTheme",
	"font_face": "Source Code Pro",
	"font_size": 15,
	"word_wrap": true,
	"highlight_line": true,
	"caret_style": "phase",
	"translate_tabs_to_spaces": true,
	"open_files_in_new_window": false
}

Die Einstellungen lassen sich bis ins kleinste Detail anpassen, und so werde ich wahrscheinlich auch noch direkt in die Farbwerte der Syntax-Hervorhebung eingreifen.

Welche Einstellungen verwendet ihr?

-
Nachdem Lea Verou mich auf der Smashing Conference begeistert hatte, habe ich mich auf ihrer Webseite umgesehen, und hier und da mit den von ihr entwickelten Tools gespielt, ab heute ist nun in diesem Blog Prism, der von ihr entwickelte syntax highlighter im Einsatz.

That should be the story we tell our kids when they ask who invented the Internet. Yes, we should tell them about the long-view government spending that paid the initial salaries, and the entrepreneurs who figured out a way to make the new medium commercially viable. But we shouldn’t bury the lead. The Internet was built, first and foremost, by another network, this one made up not of servers but of human minds: open, decentralized, peer.

Steven B. Johnson, The Internet? We Built That

Andy Clarke

Thema und Sprecher dieser ersten Session waren im Vorfeld geheim, und so eröffnete Andy Clarke den zweiten Tag der Smashing Conference als “Überraschungsredner”. Sein Vortrag beschäftigte sich ebenfalls mit Responsive Webdesign, und den Auswirkungen auf Workflow und geschäftlichen Aspekte.

Mir gefiel sein integrativer Ansatz, der Designer und Entwickler miteinander arbeiten lässt, und sowohl Grafikprogramme als auch Editoren zum Zuge kommen lässt. Auf diese Weise spielen sich Designer und Entwickler die Bälle zu, wodurch ein dynamischer Prozess entsteht, in den die Kunden miteinbezogen werden. Sofern es möglich ist versuchen Andy und sein Team direkt beim Kunden zu arbeiten.

Bei der Präsentation der Arbeit sollten keine falschen Erwartungen geweckt werden. Daher sollten keine Photoshop-Dateien präsentiert werden, sondern Prototypen. Am Besten finden diese Präsentationen in einem Raum statt, in dem sich Kunden und das Team befinden. Die eigenen Gefühle sollten bei diesem Treffen vor der Tür abgelegt werden, da es beim Feedback um das Produkt und nicht um die Person des Designers geht.

Lea Verou – CSS secrets: another 10 things you might not know about CSS

Lea Verou lud uns auf eine Entdeckungsreise in die Welt der neuesten CSS-Entwicklung ein. An ihrer Session gefiel mir vor allem auf welch gute Art sie die angesprochenen Aspekte live im Browser umsetzte und erklärte. Ihre Präsentation findet sich hier.

Josh Brewer – Responsive times call for responsive Measures

Josh Brewer sprach davon, dass im Web sehr viel gelesen wird. Um das Leseerlebnis im Web zu verbessern beschäftigte er sich zunächst mit den Grundlagen des Editorial Design. Dabei stieß er auf Muster und geometrische Grundlagen, die ihn dazu animierten Ausflüge in die Mathematik zu unternehmen, um den geheimen Code für optimale Darstellung von Text zu finden. Bei diesen Ausflügen wähnte er sich dem Ziel sehr nahe, nur um etwas später festzustellen, dass ihm seine Lösung um die Ohren flog. Manche von euch erinnern sich an dieses Bild, oder?

Er gab nicht auf, und entwickelte ein jQuery-Plugin, das den Text entsprechend der Fenstergröße anpasst. Und damit den Media-Queries vor allem die Anpassung des Layouts zuweist. Dieses Plugin findet sich hier auf github.

Tim Ahrens – Webfonts Backstage and on Stage

Tim Ahrens hielt einen Vortrag zu Webfonts, aus Sicht eines Schriftentwicklers. Dabei gewährte er Einblicke in den Prozess der Entstehung einer Schrift, wie diese auf unterschiedlichen Bildschirmen dargestellt wird, und was die Formate (woff, eot, ttf) bedeuten, in denen Webfonts ausgeliefert werden.

Seine Tipps zur Auswahl von Schriften und die Ermutigung mit letter-spacing, line-height, und word-spacing zu spielen gefielen mir sehr gut.

Wer etwas mehr über Font-Rendering lesen möchte, dem sei sein Artikel auf smashingmagazine.com empfohlen.

Jonathan Snook – Your CSS is a mess

Jonathan Snook ermutigte dazu ordentliche Stylesheets zu schreiben, so dass sie übersichtlich bleiben, und (auch in Teams) gut zu betreuen sind. Zunächst gliedert Snook die Webseite, um die Styles in Bereiche aufzuteilen (base, layout, modules, state, themes). Seiner Ansicht nach sollten die Klassen so bezeichnet werden, dass auf den ersten Blick klar wird welche Aufgabe sie haben. Den Styles soll seiner Meinung nach nur jeweils eine Aufgabe aufgetragen werden.

Er plädierte für die Verwendung der Child-Zuordnung (>), so dass jeweils nur die betreffenden Elemente beeinflusst werden, und sich die Anweisungen nicht »wild« über die Webseite fortpflanzen.

Ein einprägsames Zitat aus seinem Vortrag:

»Don’t code for the page. Code for the system.«

Brad Frost – Beyond media queries. Anatomy of an adaptive web design

Brad Frost beschäftigte sich auch mit »Responsive Webdesign« und wies darauf hin, dass dieser Begriff auf dem Besten Wege ist eine, von seiner ursprünglichen Bedeutung gelöste Vokabel zu werden, die für all das steht was »new and shiny« ist. Er bezeichnete in diesem Zusammenhang RWD als Spitze des Eisbergs und nahm uns mit unter Wasser. Responsive Webdesign ist seiner Meinung nach eine Unterkategorie von Adaptive Webdesign, wobei es um weit mehr geht als nur um visuelle Anpassungen.

Für seine Präsentation verwendete er 5 Prinzipien von adaptivem Webdesign:

1. Zugänglichkeit
2. Flexibilität
3. Performance
4. Anreicherung
5. Zukunftsoffenheit

Aarron Walter – The real me

Aarron Walter ermutigte dazu die eigene Stimme herauszufinden, so dass die Kommunikation eine persönliche Note erhält. Ihm geht es dabei vor allem darum ein Erlebnis zu gestalten, das sich aus einer Stimme, Persönlichkeit und Geschichte speist. Dies kann sowohl auf die eigene Kommunikation als auch auf die Kommunikation von Organisationen angewendet werden.

In Anlehnung an sein Buch »Designing for Emotion« zeigte er Beispiele, erläuterte sein Vorgehen und zeigte das Arbeitsblatt anhand dessen die unterschiedlichen Schritte zu einer solch persönlichen Kommunikation erarbeitet werden können.

Abschließend sprach er darüber, wie sich in großen Teams ganz natürlich ist die Tonalität der Kommunikation verändert, die Stimme jedoch gleich bleiben sollte. Um dies in ihrem Team bei MailChimp zu gewährleisten, entwickelten sie ein Tool, dass hier für alle Zugänglich ist. Weitere Informationen zu seinem Vortrag finden sich auf seiner Webseite.

Christian Heilmann – to be announced

Christian Heilmann hatte die Ehre den letzten Vortrag der Smashing Conference zu halten, und tat dies auf direkte und ausgezeichnete Weise. Zunächst sprach er über unterschiedliche Wahrnehmungen, denen er begegnet – die einen reden beständig vom Ende des Webs, und von der großen Zukunft von Apps. Während er die Entwicklungen des Webs sieht, und es als sehr lebendig wahrnimmt. Heilmann ist ein Advokat des offenen und freien Webs, und legte mit seinem Vortrag den Finger auf den ein oder anderen blinden Fleck von Webdesign-Trends, wie bspw. Optimierung für Retina-Displays, die eine ganze Menge von Usern ausschließt.

The web is a medium, its more TV and radio than a software.

Die Präsentation von Christian Heilmann, in der er auch noch auf Mitwirkungscharakter verweist, findet sich hier.

_
Jetzt sitze ich wieder zu Hause, die Konferenz ist vorbei – ich habe es sehr genossen dabei sein zu können – soviel steht fest, dennoch beende ich diesen Beitrag nun, und spare mir einen allgemeinen Rückblick für später auf.