MacGamper

Kategorie: Web-Entwicklung

  • PNG-Bilder optimieren

    Dem PNG-Format gehört im Web die Zukunft, so viel ist klar. Bessere Qualität, Alphatransparenz und eine bessere Kompression lassen die betagten Webformate GIF und JPG schnell einmal alt aussehen. Doch gerade bei 24 Bit PNG’s entstehen trotzdem schnell einmal ziemlich bandbreitenfressende Bilder. Die bereiten bei den hierzulande verbreiteten Zugangsgeschwindigkeiten und Flatrates zwar den wenigsten Anwendern noch Kopfzerbrechen, doch schnell werden dabei wachsende Zielgruppen, wie die mobil surfenden User vergessen, bei denen teure Datentarife und eingeschränkte Geschwindigkeiten durchaus noch eine wichtige Rolle einnehmen.

    Leider holt selbst Photoshop beim PNG-Export meist nicht das Maximum aus der möglichen Komprimierung raus. Hier lohnt sich ein Blick auf das Freeware-Tool ImageOptim (Mac OS X 10.4, 10.5), das verschiedene Optimierungsbibliotheken nutzt, um auch noch die letzten überflüssigen Kilobytes aus einer Datei zu pressen. Ein Test mit einem Ordner aus Photoshop exportierter PNG-Bilder lieferte dabei folgende Resultate:

    Liste der abgearbeiteten Files in ImageOptim mit Angaben zur jeweiligen Einsparung nach Komprimierung.

    Bis zu 37% konnten dabei zusätzlich eingespart werden. Je nach Bildgrösse also schnell einmal die eine oder andere Sekunde Wartezeit, die einem Besucher hier erspart werden kann. Das Programm braucht für diese Berechnungen allerdings seine Zeit, läuft aber natürlich bequem im Hintergrund. Auch der oben gezeigte Screenshot brachte es von ursprünglich 39 KB aus Photoshop auf neue 29 KB nach der Optimierung (-26%).

    Gefunden via Playround

  • Design. Kantine. Web Typography. Namics. Danke.

    Heute war ich in Zürich an der ersten Design. Kantine. bei Namics zu Gast. Das Thema der Veranstaltung war Web-Typografie: Geschichte, Möglichkeiten, Ausblick auf aktuelle und kommende Trends und Techniken (Stichwort CSS3). Für mich als gelernten Jünger Gutenbergs natürlich die Gelegenheit, das Schwelgen in Lehrzeiten-Nostalgie mit dem heutigen Beruf zu vereinen. Die brennenden Fragen, ob man denn ein Hurenkind auch auf dem iPad kennt, oder ob es für teure Websites auch einen Schuber gibt, blieben dann aber doch offen.

    Nichtsdestotrotz ein gelungener Auftakt für die kommenden Anlässe und Namics zeigte sich als toller Gastgeber, denn nicht nur die Teilnahme war kostenlos, auch zum anschliessenden Lunch wurde gleich noch eingeladen. In diesem Sinne: Herzlichen Dank und man darf schon gespannt sein auf die nächste Kantine mit dem Thema Augmented-Reality.

    Design. Kantine. Web Typography. Namics. from Claus Medvesek

  • HTML-Newsletter richtig coden

    ?Dank Microsoft und Outlook 2007, aber auch dank der zahlreichen Webmail-Dienste, werden HTML-Newsletter auch in Zukunft nichts mit dem Coding einer standardkonformen Website gemeinsam haben. Table-Layouts, Inline-Styles und weitere Relikte aus der düsteren Web-Vergangenheit gehören hier zum täglich Brot des geplagten Webdesigners.

    Aus diesem Grunde habe ich mir in den letzten Jahren die nützlichsten Artikel, die mir zu diesem Thema untergekommen sind gesammelt:

    Weitere nützliche Links, die diese kleine Sammlung ergänzen, würden mich freuen.

  • Code Snippets

    Etwas vom wichtigsten für die effiziente Arbeit als Webworker ist aus meiner Sicht der Einsatz einer gut sortierten Snippets-Sammlung. Egal ob HTML, CSS, JavaScript oder andere Sprachen: Täglich, wöchentlich oder zumindest regelmässig werden gleiche oder ähnliche Code-Teile in verschiedenen Projekten gebraucht. Diese dann jedes Mal wieder frisch zu schreiben braucht nicht nur viel Zeit, sondern ist natürlich auch eine gewisse Fehlerquelle. Schneller geht es, wenn man sich eine gute Bibliothek mit den häufig gebrauchten Snippets anlegt und diese auch regelmässig erweitert und verbessert.

    Viele Applikationen bieten dafür eine tolle interne Verwaltung solcher Snippet-Sammlungen. Ich selber benutze am Mac dafür Coda, Espresso und TextMate, die dafür über eine eigene Verwaltung verfügen. Natürlich reicht dazu im Grunde aber auch bereits ein Ordner mit Textfiles auf dem Desktop, in die man die einzelnen Snippets ablegt.

    Chris Coyier hat sich in seinem Blog CSS-Tricks die Mühe genommen eine solche Snippets-Bibliothek anzulegen, die schon sehr umfangreich ist und vielleicht als Ideenquelle oder Ergänzung für die eigene Snippets-Sammlung dienen kann: Code-Snippets

  • HTML 5 und CSS 3 in der Praxis, Teil 1: Ausgangslage

    Dieser mehrteilige Artikel dokumentiert anhand eines realen Projektes, wie weit sich HTML 5 und CSS 3 bereits heute in der Praxis einsetzen lassen und wo Vorteile aber auch Stolpersteine zu finden sind.

    Was schon länger angenommen wurde, ist seit kurzem offiziell: Das W3C hat sich entschlossen, per Ende 2009 die XHTML 2.0-Arbeitsgruppe einzustellen (ich habe berichtet). Mit diesem Beschluss dürfe das Interesse und hoffentlich auch die Weiterentwicklung von HTML 5 zusätzlich an Fahrt bekommen. Aber auch die fast untrennbar mit HTML verbundene Formatierungssprache CSS wartet seit 1998 auf ein grösseres Update auf Level 3.

    (mehr …)

  • YouTube und Digg verabschieden sich von IE6

    YouTube fordert seine User zu einem Umstieg auf einen modernen Browser auf
    In den vergangenen Tagen haben gleich zwei Branchengrössen angekündigt, den Support für den acht Jahre alten Internet Explorer 6 einzustellen: YouTube (Screenshot oben) und Digg werden in naher Zukunft auf die IE6-Kundschaft verzichten. Das insbesondere für Frontend-Entwickler grosse Sorgenkind (um es mal sehr milde auszudrücken) IE6 bringt es immer noch auf einen relativ hohen Marktanteil von gegen 10%. Warum man trotzdem auf IE6 verzichten will und kann, und warum irgendwelche Update-Meldungen auf der Website die Benutzer kaum zu einem Umstieg bewegen werden, schildert Digg in seinem Blog.

    (mehr …)

  • WAI-ARIA: Rollen für dummes HTML

    Asche über mein Haupt; seit heute gibt mein WordPress-Template noch einige Warnungen zusätzlich aus! Und das hat ausnahmsweise einen guten Grund: Ich habe meine HTML-Struktur mit ein paar Zusatzattributen zu mehr Semantik verholfen, indem ich verschiedenen Elementen Rollen zugewiesen habe. Doch für was sind diese Rollen, wem dienen sie und wie werden sie angewendet?

    (mehr …)

  • XHTML 2 ist tot, es lebe HTML 5

    Was die Spatzen schon länger von den Dächern pfiffen, ist seit diesen Tagen offiziell: Die XHTML Arbeitsgruppe des W3C wird die Weiterentwicklung des XHTML 2-Standards einstellen. Somit dürfte der Weg zu einem hoffentlich «baldigen» neuen HTML 5-Standard geebnet sein.

    Einige Stimmen dazu aus der Blogosphäre:

    Weiterführende Links zum Thema HTML 5 laufend aktualisiert in unseren Guidelines.

  • Firefox 3.5 im Überlick

    Mit einem halben Jahr Verspätung soll es heute soweit sein: Firefox 3.5 (aka 3.1) soll heute – 30.6.2009 – erscheinen. Eine schnellerere JavaScript-Engine, einige HTML 5-Elemente und besserere CSS-Unterstützung sind dabei einige der Highlights. Alle Neuerungen werden auf Golem.de ausführlich erklärt.

    Video: Firefox 3.5 – Test (3:06)

  • Coding Guidelines for Webdevelopment

    In der Webentwicklung gibt es vielfach nicht einfach richtig oder falsch, sondern auch dort führen viele Wege nach Rom. Trotzdem ist es gerade bei der Arbeit im Team wichtig, dass durch gewisse Leitplanken Standards geschaffen, die Qualität gesichert und Einsteigern die Einarbeitung erleichtert werden kann.
    Bei backslash haben wir uns darum entschlossen, unsere Entwicklungsrichtlinien in Form eines Wikis öffentlich zu machen: guidelines.backslash.ch

    (mehr …)