640x480.de

Beiträge aus dem Was-mit-Medien-Alltag

Bildschirmauflösungen

„Die Web-Seite soll ganz auf den Bildschirm passen“, sagte der Auftraggeber. „Auf welchen?“, fragten wir.

Bildschirmauflösungen als SVG
Bildschirmauflösungen als SVG • MK

Weil wir solche oder ähnliche Wünsche des Öfteren hören und uns sehr daran liegt, unsere Auftraggeber zu professionalisieren, hat Martin mal wieder eine kleine SVG-Fingerübung gemacht.

Herauskam eine Grafik, die eine subjektive Auswahl von 27 der aktuell verfügbaren nativen Auflösungen von Mobiltelefon-, Tablet- und Desktop-Monitoren zeigt. Die tatsächlich dargestellte Auflösung (Stichworte Retina, virtuelle Auflösung) wird hier noch nicht berücksichtigt.

Eine dynamische Grafik, gekoppelt an die jeweilige Piwik-Statistik einer Website, ist in Arbeit.

17.12.2012 | 3 Kommentare

Thüringer Kreativradar 2012

Heute fand die Preisverleihung zum zweiten Thüringer Kreativradar statt. Wir hatten dieses Mal mitgemacht, aber nicht gewonnen. Trotzdem wollte ich mir die angekündigte Ausstellung nicht entgehen lassen.

Bahnhofstraße 4a in Erfurt, erstes Obergeschoss. Schaumstoffplatten-Deckenverkleidung, graublauer Spannteppich, schlechte Luft. Matthias Machnig, Thüringer Minister für Wirtschaft, Arbeit und Technologie, redet vor ungefähr 70 Menschen, hauptsächlich Studierende, über die Bedeutung der Thüringer Kreativwirtschaft. Es werden Zitate von Bill Gates (1981: „Niemand wird jemals mehr als 640k RAM benötigen!“), Ken Olsen („Es gibt keinen Grund dafür, dass jemand einen Computer zu Hause haben wollte.“), Harry M. Warner („Wer zum Teufel, will denn Schauspieler sprechen hören?“), Avery Brundage („Wir sind 60 Jahre ohne Fernsehen ausgekommen und werden es weitere 60 Jahre tun.“), Darryl F. Zanuck („Der Fernseher wird sich auf dem Markt nicht durchsetzen. Die Menschen werden sehr bald müde sein, jeden Abend auf eine Sperrholzkiste zu starren.“) – allesamt zu finden auf diversen Web-Seiten wie dieser hier – zum Besten gegeben.
Nein, sie haben sich alle geirrt, es kam ganz anders. Die Thüringer Kreativwirtschaft mache 1,6 Milliarden Euro Umsatz im Jahr… Er suche nicht weniger als „den neuen Bill Gates und den neuen Steve Jobs in Thüringen“, sagt der Minister. Aha.

Danach ergänzt der Chef der Thüringer Agentur für die Kreativwirtschaft unter anderem, dass es in diesem Jahr „ungefähr 130 Einreichungen“, also 30 Prozent mehr* gab, als 2011. Schön.

Dann werden die elf, vorab informierten Preisträger einzeln nach vorn gerufen. Ein Jurymitglied (den Namen konnte ich leider nicht verstehen) ergänzt die spaßigen Minister-Kommentare zu Firmennamen wie „Dicke Katze“, „Comake Shoes“ oder „Igelhaus“ um das, was der Jury besonders gut gefallen hat. Die grafische Umsetzung der 30x30-Blätter wird auffällig oft erwähnt. Dagegen wird auf die Erfüllung der Kriterien der Aufgabenstellung nicht eingegangen. Und – leider wird keine einzige Einreichung gezeigt.

Nach 35 Minuten ist alles vorbei. Es gibt ein Gruppenfoto mit Minister, Sekt und Häppchen werden angekündigt, Hände geschüttelt. An zuvor leeren blauen Tafeln, „die Thüringen symbolisieren sollen“, hängen nun die Blätter der Preisträger.
Die Ausstellung aller Einreichungen, deretwegen ich zu dieser Veranstaltung gefahren bin – obwohl man ja eine Woche vor Weihnachten auch andere Dinge zu tun hat, kann ich nicht entdecken. Habe ich die übersehen? Wurde die erst später „rausgeholt“, oder gab es noch ein Zimmer, das ich nicht gesehen habe?

Leider konnte ich länger warten. Denn trotz zwischenzeitlich geöffnetem Fenster war die Luft irgendwie stickig.

* 2011: 99 Bewerbungen, 2012: 125 Bewerbungen
125/99 = 26% (Na ja, man hätte auch „gut ein Viertel mehr“ sagen können…)

p.s. Nur vier der elf Preisträger hatten ürbigens mit den einleitenden Zitaten zu Technik zu tun. Sonst ging es um Bambus, Illustration, Schuhe, Illustration, Musik, Porzellan – ganz der Vielfalt der Kreativwirtschaft entsprechend…

17.12.2012 | 1 Kommentar

Webdienstag #3

Der Webdienstag zum Thema CSS am 11.12.2012

Mit dabei wieder Jens Weber (mediaarchitecture), Daniel Schmidt (xpdt), Marko Meister (netz-meister) im Büro bei Kohlhaas & Kohlhaas.

Nachdem der Input zu SASS ausfiel, haben wir selbst unser Halbwissen zusammengeworfen und uns einen Überblick über SASS und LESS verschafft. Dabei ging es um den Erfahrungsaustausch zu den jeweiligen Ansätzen (Frameworks nehmen vs. mit leerem File anfangen) zu Bootstrap, dem Sinn und Nutzen von Grid-Systemen und vielem mehr.

Neben diesen technischen Details wurde das Thema responsive Websites gestreift insbesondere Fragen zum Nutzen der Linearisierung unter anderem in Hinblick auf Barrierefreiheit: Zoom erlauben ja/nein, Wechsel zwischen den responsive-Stufen durch den Nutzer selbst, etc. Lebhaft war auch die Diskussion zu Ansätzen zu adaptive/responsive Images und auch dieses Thema ruft nach Fortsetzung.

Zu späterer Stunde drehte sich das Gespräch um Themen des Medienkonsums (anhand aktueller Beispiele aus den eigenen Kinderzimmern) und Rants in sozialen Netzen.

Der Abend war wieder sehr angenehm und horizonterweiternd. 

Die letzten drei Veranstaltungen waren ein guter Anfang für den Webdienstag. Im nächsten Jahr wollen wir stärker auf Vorträge und Workshops setzen, um zusätzlich zur (notwendigen) Presseschau und dem Halbwissen-Tratsch ganz konkrete Inputs zu bekommen.

Es geht am 8. Januar 2013 weiter mit einem Workshop zu processing

12.12.2012 | 3 Kommentare

Die Farbe des Jahres 2013

Pantone hat «Emerald» gewählt.

Pantone Color of the Year 2013 #009B77
Pantone Color of the Year 2013 #009B77

Pantone ernennt jedes Jahr eine Farbe zur «Color of the Year». Nächstes Jahr ist es Emerald, also Smaragdgrün. Die Farbnummer ist PANTONE 17-5641. Als Web-Entwickler sollte man sich allerdings eher die Hex-Kombination #009B77 oder den RGB-Wert 0, 155, 119 merken.

Mehr Informationen bei Pantone selbst.

07.12.2012 | Noch keine Kommentare

15 Thesen für die (digitale) Zukunft

t3n hat in die Glaskugel geschaut. Wie geht das so alles weiter mit der Technik und vor allem mit dem Leben damit? Das sind spannende Fragen – nicht nur kurz vor dem Jahreswechsel.

t3n hat 15 Thesen aufgestellt, wovon einige Lust auf die nächsten Jahre machen andere aber anpornen, es möglichst nicht so weit kommen zu lassen.

Programmiersprachen als Schulfach sind längst überfällig. Das wird kommen (müssen). Die Lesediskussion ist das Eine, aber die Technik-Geister zu beherrschen, die nun mal in der Welt sind ist das Andere. Die nächste Generation darf nicht total abhängig werden von den Tools der Konzerne (doofer Trend: Tablets überall). Wir müssen in der Lage bleiben, eigene Tools zu bauen (guter Trend: Minicomputer wie Raspberry Pi und Arduino).

Auf die Haushaltsautomatisierung, Fernsehen und Lieferungen am gleichen Tag kann ich verzichten, ebenso wie auf noch mehr Werbung und Selftracking. Das Nicht-mehr-ohne-sein (Kein Rückzug mehr vom Digitalen) kenne ich schon am egenen Leib. Man kann sich da schön einlullen lassen. Und auch die restlichen Thesen sind eher dystopischer Natur und rufen bei mir eher den Wunsch nach der Insel hervor.

Eine schöne Anregung zur Offline-Diskussion über die Feiertage.

(schriebs 21:24 bei einem analogen Glas Rotwein das Vinyl von «Spirit of Eden» von Talk Talk auf dem 1210 und das MacBook auf dem Schoß auf der Couch – was für eine Welt … immer mit einer Gehirnhälfte an der Arbeit)

07.12.2012 | 5 Kommentare

Bildbehandlung in flexiblen Layouts

Unser Ansatz zum Thema adaptive/responsive images

Problematik: bestmögliche Bildqualität bei optimalen Ladezeiten. Auslieferung unterschiedlicher Bildgrößen für Desktop oder Smartphone.

Bildauslieferung im Grid-System (wie es bisher war)

Bei Seiten mit festen Layouts (z.B. www.architekten-thueringen.de, 24er-Grid nach dem 960 Grid System) ist von vornherein durch das Template klar, welche Bildgrößen benötigt werden, z.B: Projekt-Kurzansicht (grid6 = 230px), Projektdetailseite, Bild über ganze Inhaltsspalte (grid12 = 470px), Großansicht in der Lightbox (grid18 = 710px) und so weiter.

Beispiel für Bildgrößen im festen Layout: Projekt-Kurzansicht, Projektdetail, Großansicht
Beispiel für Bildgrößen im festen Layout: Projekt-Kurzansicht, Projektdetail, Großansicht

Diese Größen werden in der Projekt-Konfiguration festgelegt:

$GLOBALS['imageSizesReceiver']['grid_3'] = array(110,110);
$GLOBALS['imageSizesReceiver']['grid_4'] = array(150,150);
$GLOBALS['imageSizesReceiver']['grid_5'] = array(190,190);
$GLOBALS['imageSizesReceiver']['grid_6'] = array(230,230);
$GLOBALS['imageSizesReceiver']['grid_12'] = array(470,470);
$GLOBALS['imageSizesReceiver']['grid_18'] = array(710,710);
$GLOBALS['imageSizesReceiver']['grid_24'] = array(950,950);

Beim Hochladen eines Bildes in das CMS werden die entsprechenden Bildgrößen sofort berechnet und im Dateisystem abgelegt. Beim Ausliefern der Seite werden dann jeweils die richtigen Bildgrößen an der richtigen Stelle angezeigt.

Bildauslieferung im flexiblen Layout (das ist neu)

Für das Webdesign unserer flexiblen Layouts (z.B. www.baukultur-thueringen.de) gehen wir einen anderen Weg. Hier ändert sich die benötigte Bildgröße nicht nur nach der Stelle der Verwendung des Bildes im Template, sondern auch noch je nach Ausgabegerät.

Beispiel-Seite mit verschiedenen Bildgrößen und flexiblem Layout

Wir gehen vom Template für den großen Monitor aus und definieren Bildgrößen für die verschiedenen Layoutboxen (volle Breite, halbe, drittel, viertel, sechstel, usw.) Für die kleineren Bildschirme werden diese Breiten in die jeweilig gewünschte Breite übersetzt (so wird z.B. aus einer halben Box auf dem Desktop eine ganze Box auf dem Smartphone, aus einer Viertelbox eine Halbe, etc.)
Die entsprechende Tabelle in unserer Konfiguration sieht dann so aus:

$GLOBALS['imageSizes']['full']=array(1600=>960, 1024=>960, 768=>768, 480=>480);
$GLOBALS['imageSizes']['half']=array(1600=>480, 1024=>480, 768=>480, 480=>320);
$GLOBALS['imageSizes']['third']=array(1600=>768, 1024=>768, 768=>480, 480=> 320);
$GLOBALS['imageSizes']['twothirds']=array(1600=>768, 1024=>768, 768=>480, 480=>320);
$GLOBALS['imageSizes']['quarter']=array(1600=>240, 1024=>240, 768=>480, 480=>320);

Auch die Behandlung der Bilder im CMS (Akira) erfolgt nun anders. Beim Hochladen wird nur das Originalbild im Filesystem abgelegt. Die Skalierung erfolgt erst bei der Auslieferung einer Seite – das skalierte Bild bleibt im Filesystem liegen. Das hat jeweils beim ersten Aufruf eines Bildes in einer bestimmten Auflösung eine kleine Verzögerung zur Folge. Alle weiteren Aufrufe nutzen dann das vorgerechnete Bild.

Im Seitenheader ermitteln wir das Ausgabegerät über Javascript und legen diese Angabe in einem Cookie ab.

<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>

Damit wird also beim ersten Laden der Seite auf einem Gerät festgelegt, welche Bildgrößen ausgeliefert werden und das bleibt dann (auch trotz Änderung der Browsergröße erhalten). Der Desktop ist hier ein Sonderfall, weil nur dort Größenänderungen Sinn möglich sind. Auf Mobilgeräten lade ich die Seite ja immer mit der gleichen Auflösung.

Noch eine kleine Abgrenzung zum Schluss: Wir haben hier nicht nach einer Lösung für vollflächige Hintergrundbilder gesucht, die beim Browser resizing dynamisch nachgeladen werden. Im Vordergrund steht bei uns die effektive Darstellung und Auslieferung von Bildern im Seiteninhalt.

Weitere Ansätze für responsive images in einem Artikel bei speckyboy design magazin

26.11.2012 | 5 Kommentare