Blog

  • Infografik der Woche

    veröffentlicht von Martin Kohlhaas am 09.10.2015 in mobiles Web, Recherche

    Diese Woche mit mobiler Beschleunigung

    The Cost of Mobile Ads, Bild: Bildschirmfoto aus http://www.nytimes.com/interactive/2015/10/01/business/cost-of-mobile-ads.html?_r=3
    The Cost of Mobile Ads, Bild: Bildschirmfoto aus http://www.nytimes.com/interactive/2015/10/01/business/cost-of-mobile-ads.html?_r=3

    Grund für diesen Beitrag ist das Accelerated Mobile Pages (AMP) Project, über das in den letzten Tagen hier und da berichtet wurde. Natürlich auch auf heise.de. Die wiederum haben den Artikel The Cost of Mobile Ads on 50 News Websites der New York Times verlinkt, aus dem die heutige Grafik kommt.

    Für Freunde der analogen Infografik habe ich noch einen Link auf einen Wired-Artikel: What Infographics Looked Like Before Computers

    Was übrigens AMP angeht, so bin ich mir noch nicht sicher, was ich davon halten soll. Habt Ihr eine Meinung dazu? Schreibt mal einen Kommentar … oder wir diskutieren das zum nächsten Webmontag am 12. Oktober.

  • no more ‘mobile’

    veröffentlicht von Martin Kohlhaas am 14.02.2013 in mobiles Web, Recherche · 1 Kommentar

    Ein Plädoyer für eine differenziertere Betrachtung des Themas «mobile web sites» kommt von Jim Ramsden, einem britischen Designer.

    Hintergrund ist die Vielzahl von Geräten, Gelegenheiten und Bedingungen unter denen man mobil auf Inhalte zugreift. So heißt «mobil web surfen» z.B. nicht automatisch «langsam, mit kleinem Bildschirm», sondern kann sich mit Retina-Display und LTE-Geschwindigkeit vom Surfen im Büro kaum unterscheiden. Ramsden plädiert für eine präszisere, beschreibende Verwendung von Begriffen also z.B. Bezeichnungen wie «kleine Bildschirme», «Bildschirme mit geringer Auflösung», oder «begrenzter Bildausschnit». 

    Nicht zuletzt, wenn es darum geht, dass Inhalte in Desktop- und Mobilversion aufgeteilt werden zeigt sich, dass eine solche Erweiterung der Webdesign-Diskussion für Mobilgeräte Sinn macht und notwendig ist. 

    Zum Artikel vom 10.02.2013 auf jimramsden.com

  • Bildschirmauflösungen

    veröffentlicht von Birgit Kohlhaas am 17.12.2012 in CSS, Lab, mobiles Web, SVG, Vermittlung · 3 Kommentare

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

    Bildschirmauflösungen als SVG, Bild: MK
    Bildschirmauflösungen als SVG, Bild: 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.

  • Bildbehandlung in flexiblen Layouts

    veröffentlicht von Martin Kohlhaas am 26.11.2012 in Lab, mobiles Web, Nähkästchen, Responsive Webdesign · 5 Kommentare

    Unser Ansatz zum Thema adaptive/responsive images

    Symbolbild Bildschirmgößen + 1 Bild
    Symbolbild Bildschirmgößen

    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.

    img 2

    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

  • „beyond tellerrand 2012“ - Zusammenfassung bei t3n

    veröffentlicht von Martin Kohlhaas am 22.11.2012 in Link-Tipps, mobiles Web, Recherche

    19. und 20. November in Düsseldorf

    Mein Lieblingszitat aus dem Artikel (Vortrag Mark Boulton): „Er plädierte dafür, mit dem Nimbus, dass man den Rezeptionsprozess von Website-Besuchern unter Kontrolle habe, zu brechen. Vielmehr müssten Webentwickler und -Designer die Anpassungslogik von Responsive Design adaptieren und sie mehr als nur im bloßen Webdesign anwenden – sondern eben auch in ihrer täglichen Arbeit.“

    oder auch gut: (Vortrag Mat Marquis): „statt Buzzword Bingo … die drei wichtigsten Säulen von Responsive Webdesign in den Fokus rücken: Ein Flexibles Grid, Media Queries und Flexible Media and Images …“

    Zum Artikel bei t3n 

  • The State of The Internet

    veröffentlicht von Martin Kohlhaas am 04.10.2012 in mobiles Web, Recherche · 3 Kommentare

    Unter diesem Titel veröffentlichte Business Insider eine Sammlung von Folien zum Stand und den Prognosen rund um unseren Lieblingsspielplatz.

    The future is mobile, The State Of The Internet, Alex Cocotas, Business Insider, Bild: http://www.businessinsider.com/state-of-internet-slides-2012-10
    The future is mobile, The State Of The Internet, Alex Cocotas, Business Insider, Bild: http://www.businessinsider.com/state-of-internet-slides-2012-10

    Es werden alle nur erdenklichen Bereiche behandelt: „Internet vs. Old Media“, „Werbemarkt“, „Mit welchen Geräten geht man ins Netz?“, „Wer macht die Geschäfte“, usw.

    Für uns als Webdeveloper sind natürlich die Fragen der Nutzung sehr interessant. Und da ist die Prognose eindeutig. Letztendlich spiegelt es auch nur das wider, was wir selbst jeden Tag erleben: Es gibt eine „Arbeitszeit im Internet“ am Desktop und dann gibt es eine - immer länger werdende - Zeit, die man per mobilem Gerät, smart phone oder tablet ebenfalls im Netz ist. Und beide Zeiten vermischen sich immer mehr, da man ja zum Beispiel auf dem Weg zum Geschäftstermin nochmal die Newsfeeds durchsieht, Mails checked oder ähnliches. 

    Insofern, um wieder auf den Entwickleraspekt zurückzukommen, fallen immer mehr diejenigen Websites auf, die nicht für diese Geräte optimiert sind. Uns wenn man die ausgewählte Grafik betrachtet, dann macht es Sinn, Websites nicht nur für den parallelen Einsatz auf mobilen Geräten zu optimieren, sondern sie von Grund auf, als mobile Websites zu entwickeln, die auch auf dem großen Bildschirm eine gute Figur machen. Das Konzept heißt „mobile first“ und wie bei allen anderen Trends der letzten Jahre wird es auch hier eine Weile dauern, bis sich ein Gefühl für das richtige Maß und die geeignetsten Gestaltungsmittel einfindet.

    Links