Beiträge aus dem Was-mit-Medien-Alltag
Das Projekt zeigt die grafischen Möglichkeiten der aktuellen Web-Techniken.
Der Freelance-Web-Developer John Galantini hat in seiner Freizeit den Plan der Londoner Tube in HTML5 und CSS „and a tiny bit of jQuery“ umgesetzt. Das Ergebnis ist beeindruckend. http://www.csstubemap.co.uk/index.html
24.05.2013 | Noch keine Kommentare
Style-Sheet-Dateien können mitunter recht lang und komplex werden. Was bei der Neuentwicklung einer Website noch gehen mag, wird bei späteren Änderungen schnell zum Zeitfresser.
Wenn man dazu noch den Anspruch hat, mit so wenig Tags und Klassen wie möglich auszukommen, einen gewissen Anspruch an die „Quelltext-Ästhetik“ hat und – vor allem – eine konsistente Darstellung aller Website-Elemente anstrebt, ist das Schreiben von CSS-Dateien per Hand eine mühselige und – insgesamt betrachtet – zeitaufwendige Sache.
Als Alternative zum Erzeugen von CSS mithilfe eines selbstgemachten PHP-Skripts gibt es seit 2007 Sass und seit 2009 Less.
Letztendlich schreibt man das CSS dann immer noch per Hand, kann aber dank Variablen, so genannten Mixins, Funktionen und Verschachtelungen eine Menge Code sparen. Auch bei (nachträglichen) Änderungen ist man schneller – vorausgesetzt natürlich man hat sich die Struktur des CSS und die darin enthaltenen Abhängigkeiten gut überlegt, denn ohne nachzudenken geht es auch hier nicht.
Was mir persönlich noch fehlt, ist ein eingebauter CSS-Tidy/-Cleanser. Das wäre cool.
11.02.2013 | 1 Kommentar
„Die Web-Seite soll ganz auf den Bildschirm passen“, sagte der Auftraggeber. „Auf welchen?“, fragten wir.
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
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
Websites brauchen Icons und Symbole zur besseren Lesbarkeit. Diese wurden bisher direkt als Bild eingebunden bzw. über CSS als Hintergrundbild platziert.
Für die nächste Version unseres CMS verzichten wir auf Bilder für die Darstellung von Symbolen und nutzen stattdessen die Schriften von symbolset.com.
So lassen sich Funktionen wie compose «Neuer Artikel», oder Statusinformationen wie public «freigegeben» oder locked «gesperrt» sehr einfach darstellen.
Schön ist auch, dass sich alle Symbole ganz einfach farblich anpassen lassen femaleavatar maleavatar – und das einfach per CSS ohne jedes Icon mehrfach vorhalten zu müssen (ja, das geht mit transparenten icons und wechselnden Hintergrundfarben per CSS auch).
Die Symbolschiften finden wir like und haben sie schon ganz in unser love geschlossen.
10.10.2012 | 4 Kommentare