640x480.de

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

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

Akira2-Logo

Akira2 steht in den Startlöchern. Die ersten drei neuen Websiteprojekte arbeiten bereits mit der aktuellen Betaversion, um letzte Fehler für Benutzer auszuschalten.

Akira2-Logo
Akira2-Logo

In diesem Zusammenhang wollen wir natürlich auch die Akira-Website überarbeiten. Eines unserer aktuellen Lieblingsspielzeuge, SVG, soll darauf auch wieder eine Rolle spielen, als animiertes Logo. Der Schriftzug mit seinen zerlegten Buchstaben steht für die Modularität und Anpassungsfähigkeit des Systems. Unser Feriengast Arthur hat in den letzten Tagen die Animationseffekte von SVG ausgelotet und das Resultat kann sich sehen lassen. Ob das Logo wirklich so auf die Website kommt, wird sich zeigen. Einen Freischaltungstermin gibt es noch nicht - erstmal steht die Arbeit am CMS selbst im Vordergrund.

26.10.2012 | 1 Kommentar

Dislike

Letzten Sonntag in der Max-Liebermann-Straße in Weimar: am Wegesrand steht ein Karton…

2 Bilder. Klicken Sie auf ein Bild um die Diaschau zu starten.

Da steht ja was. Das  kenn’ ich doch.

Darin liegt das Architektenhandbuch der AKT – vor ziemlich genau drei Jahren von uns gesetzt. Offensichtlich wollten die Besitzer es nicht mehr, fanden es aber auch zu schade zum Wegwerfen.

Da lag es einsam in der Kiste und wartete.

„Gut, dass man Websites nicht wegwerfen kann“, dachte ich. Obwohl – wäre eigentlich cool, wenn man als Leser resp. Besucher Websites, die man nicht (mehr) braucht, „wegwerfen“ könnte. Es gibt immer nur Likes aber keine Dislikes. Das ist doch blöd.

04.10.2012 | Noch keine Kommentare

Betriebsblind

Wie wir eine PC-Tastaturbelegung zeichneten.

Tastaturbelegung Mac
Tastaturbelegung Mac • Zeichnung: Birgit Kohlhaas

Wir hatten den Auftrag für ein Programmheft mit Weiterbildungsveranstaltungen für Sektretärinnen. Unsere Idee: auf einer Umschlagklappe bringen wir eine Tastaturbelegung unter, damit die schönen typografischen Anführungszeichen, Ellipsen, Apostrophen usw. ihren Weg in Briefe, Anschreiben, Informationsblätter u.v.a.m. finden. Gesagt – getan und erst mal mit dem Naheliegenden angefangen: der gemeinen Mac-Tastatur. Als diese halbwegs fertig war, stand die PC-Tastatur auf dem Programm. Die Recherche auf einem unserer Alt-Rechner ergab, dass da nix war. Also Wikipedia angeworfen mit dem Ergebnis, dass da wirklich nichts ist, was nicht schon auf der Tastatur selbst zu sehen ist. Sonderzeichen werden am PC tatsächlich nach wie vor via Einfügen > Sonderzeichen oder über die Kombi Alt-Taste + Ziffern erzeugt. Die einfachsten Sachen geraten in Vergessenheit, wenn man immer nur mit einem System arbeitet. Also haben wir die Idee verworfen und dafür jetzt die fast fertige Illustrator-Datei einer Mac-Tastatur auf der Festplatte.

24.09.2012 | 1 Kommentar

Blog-Navigation

Im Rahmen der Neugestaltung eines Blogs stellte sich bei uns die Frage nach der Blättern-Funktionalität im News-Stream. Eine Blitz-Recherche auf von mir häufig gelesenen Blogs erbrachte hier kein einheitliches Bild. Es gibt bei diesem Thema also entweder unterschiedliche Ansätze oder – was ich für wahrscheinlicher halte – das entsprechende Backend stellt eine bestimmte Art der Navigation bereit, die vom Frontend-Entwickler nicht geändert werden konnte, wollte, wurde.

7 Bilder. Klicken Sie auf ein Bild um die Diaschau zu starten.

Blog-Navigation: fontblog.de Blog-Navigation: daily-ivy.de Blog-Navigation: indiskretionehrensache.de

Einheitlich und damit als gemeinsamer Nenner annehmbar ist die Tatsache, dass die Beiträge/Meldungen von neu nach alt sortiert sind.

Und ab da beginnen die Interpretationsmöglichkeiten:

  1. Die Metapher für die Organisation der Meldungen ist ein Zeitstrahl. Dieser beginnt in der Vergangenheit links und erstreckt sich in die Zukunft nach rechts. Die neueste Meldung hat ihren Platz damit ganz rechts auf dem Zeitstrahl. Will ich also zu älteren Beiträgen zurück, dann muss ich folgerichtig „nach links“ blättern. (z.B. www.fontblog.de, www.daily-ivy.de, www.indiskretionehrensache.de)
  2. Wie in einem Schnellhefter befinden sich alle Meldungen auf Seiten aufgeteilt, wobei die neuesten Meldungen (= aktuelle Seite) immer davor geheftet werden (Ein System, was mir übrigens schon in der Schule immer gegen den Strich ging. Logischer finde ich die Variante die neuesten Aufzeichnungen hinten an den Block anzuheften.) In diesem Fall blättere ich also „nach rechts“, um zu den älteren Meldungen zu gelangen. (z.B: www.praegnanz.de, www.designtagebuch.de, www.bildblog.de)
  3. Die Meldungen werden von oben nach unten sortiert, die Metapher ist also ein Stapel, auf den immer oben eine neue Meldung drauf kommt. In dem Fall blättere ich „nach unten“, um zu früheren Meldungen zu kommen. Da im Blog auf der ersten Seite ja üblicherweise schon mehrere Meldungen von neu nach alt von oben nach unten organisiert sind, hat diese Variante auch eine gewisse Logik. (z.B. http://www.fscklog.com/)

Gibt es weitere?

31.05.2012 | Noch keine Kommentare

Web ist komplex

Das Web ist komplex geworden. Spricht man von außen betrachtet von einer Website, dann können in diesem Projekt je nach Auftraggeber, Zielgruppe und Umfang mittlerweile zahlreiche Teilprojekte und Herausforderungen stecken. Dass sich die Technologien verändern, ist – so lange ich das (seit 1994) beobachten kann – normal. Die explosionsartige Geschwindigkeit, mit der neue Techniken entwickelt werden, sich durchsetzen und wieder verschwinden, ist aber erst in den letzten maximal zwei Jahren entstanden. Ein Ende ist dabei nicht abzusehen.

Arbeitsraum des Web-Developers
Arbeitsraum des Web-Developers • @ Martin Kohlhaas, Stand 14.01.2011

Nachfolgend stelle ich einen Ansatz zur Strukturierung der Themenfelder innerhalb einer Website-Entwicklung zur Diskussion. Zwischen den Themenbereichen gibt es natürlich Überschneidungen. Nicht alle Aspekte spielen für alle Projekte eine Rolle. Viele Aspekte können bei kleinen Projekt in Personalunion und integriert bearbeitet werden. Jeder dieser Bereiche eignet sich aber auch für eine gesonderte Betrachtung und Bearbeitung und bietet die Möglichkeit für Aufgabenteilung, Spezialisierung und Arbeit im Netzwerk. 

Konzept

Aufgabenstellung und Projektdefinition, Designidee

Projektmanagement

Kalkulation, Koordination, Präsentation, Kundenkontakt

Content Management

Datenanalyse, Datenbankkonzept, Informationsarchitektur, Systemauswahl, Systeminstallation, Online-Shop (ggf. sogar als eigene Kategorie)

Front-End-Entwicklung

Template-Design, Interaktionsdesign, Grafikarbeiten, Stylesheets

Web-Typografie

Schriftwahl, Wahl der Einbettungstechnik, Mikrotypografie (via Stylesheets und direkt im Content)

Mobile Devices

Browserweichen, Template-Design für verschiedene Plattformen

App-Entwicklung

Programmierung, Interfacedesign, Datenaustausch

Kommunikation und soziale Netzwerke

E-Mail, Newsletter, RSS, Setup Netzwerkprofile, Blog, Twitter, Podcast, Skype

Infrastruktur

Serverinstallation, Provider(-kommunikation), Installation beim Kunden (E-Mail, Datenaustausch)

Schulung

Update 12.01.2011, 19:13: Zur Illustration und besseren Übersicht der Zusammenhänge habe ich die Stichpunkte mal in ein Bild gepackt.

Update 14.01.2011, 14:41:  Weil mir das Bild zu statisch war, habe ich daraus eine Website gemacht, die unter www.640x480.de/webdeveloper/ zu finden ist.

12.01.2011 | Noch keine Kommentare