u1amo01 - Webdesign

Themenanpassung

nospam@example.com (Klaus) — Sat, 25 Feb 2012 19:26:11 +0100

Bin am Schrauben. u1amo01.de sieht gut aus und passt sich an kleine Bildschirme an.

Für das Blog kommt der gleiche Aufbau und das fast gleiche, leicht erweiterte CSS zum Einsatz. Nur das mit der Darstellung auf Handys klappt nicht. Wahrscheinlich habe ich irgendwo ein falsches Komma gesetzt. Oder so.

Mir gefällts.

Layout-Rolle rückwärts

nospam@example.com (Klaus) — Thu, 23 Feb 2012 08:43:00 +0100

Bin gestern bei einer Google-Suche auf meinem eigenen Blog gelandet. Zumindest sah es auf den ersten Blick so aus. War ein s9y-Blog mit 2k11. Das Standard-Layout sieht so gut aus, dass mir Änderungen schwer fallen. Und große Bilder im Header habe ich wegen der Bandbreitenverschwendung noch nie gemocht.

Also zurück zur Füllhalterversion. Die kommt ohne mir unbekannte Scripte aus. Auch wenn Änderungen des CSS' nicht ganz so einfach wie eine Fahrradwartung sind. Muss die Anpassung an alle möglichen Ausgabegeräte eben noch ein bisschen warten.

Erste Schritte zur responsiven Webseite

nospam@example.com (Klaus) — Tue, 21 Feb 2012 23:17:02 +0100

u1amo01.de, 320x480 Ansicht iPhone

Das Blog ist vorerst (?) mit dem Rundum-Sorglos-Fertigpack 2k11 versorgt. Auf Bernds iPhone sieht das gut aus.

Ehe ich über die Website der ~~gefräßigsten~~ besten Big Band von allen herfalle, übe ich an meiner eigenen Webseite. Mühsam ernährt sich das Eichhörnchen ...

Ach ja, das Heft »Responsive Web Design« von Ethan Marcotte kann ich empfehlen (Dan Cederholm hat das Werk schon vor Monaten gelobt – ja, ich weiß ich bin spät dran. Besser zu spät als nie).

Lesbarkeit geht vor

nospam@example.com (Klaus) — Fri, 17 Feb 2012 21:10:00 +0100

Die Füllhalterversion dieses Blogs wurde so gelobt, dass ich mich fast nicht traue, das nach 3 Monaten zu ändern.

Aber Lesbarkeit geht vor. Jeden Tag sehe ich Dutzende von Leuten im Zug, die mit ihren Smart Phones spielen. Höchste Zeit also, diesem Trend Rechnung zu tragen. Die Zeiten, als man eine Webseite für zwei, drei gerade übliche Bildschirmgrößen bauen konnte, sind vorbei.

Das Theme »2k11« von Matthias (soll beim nächsten Serendipity-Release ~~Standard werden~~ enthalten sein) hat mir auf den ersten Blick gefallen. Und es passt sich automagisch an eine Vielzahl von Anzeigegeräten an. Bis ich das selbst so zusammengestrickt bekäme, müsste ich eine Menge lesen und herumprobieren. Und dann wäre es immer noch nicht halb so gut.

Also – tataaa! – hier ist das neue Bloglayout: »2k11« mit einer Handvoll zusätzlicher Zeilen in der user.css. Wie das auf verschiedenen Kleingeräten aussieht, kann man sich über das nützliche Tool von Matt Kersley ansehen.

Lesestoff für Webdesigner

nospam@example.com (Klaus) — Mon, 23 Jan 2012 14:45:32 +0100

Vor einigen Jahren habe ich unsere Bandwebsite http://www.buenotebigband.de/ komplett überarbeitet. Danach habe ich hauptsächlich an der Verbesserung der Navigation gearbeitet. Seit 2008 wurden nur noch Kleinigkeiten geändert, wie z. B. die letztes Jahr eingebaute Timeline.

Mittlerweile hat sich die Webwelt weitergedreht. Früher war es ausreichend, beim Design an einige wenige Bildschirmgrößen bzw. Auflösungen zu denken. Heutzutage gibt es mehr Ausgabegeräte und Formate, als man sich merken kann: PCs, Notebooks, iPads, Smartphones und so weiter.

Also höchste Zeit, auch als Hobbywebmaster den Hintern hochzukriegen. Und sich mit aktuellen Techniken beschäftigen. Eine gute Übersicht an Lesestoff dazu bietet Matthias unter Responsive Ressourcen 2011.

Wer lieber Papier in die Hand nimmt: da kann ich die kurz und bündig verfassten Hefte von »A Book Apart« empfehlen.

PS: die Blue-note-Seite im Wandel der Zeit kann man sich in der Artikelkomplettansicht anschauen.

Continue reading "Lesestoff für Webdesigner"

Neu: jetzt auch mit Katzen-Content!

nospam@example.com (Klaus) — Thu, 15 Dec 2011 12:20:00 +0100

Nein, keine Panik. Das wird keine feste Einrichtung hier im Blog. Die HTTP-Status-Katzen von Felix Rieseberg sind einfach gut. Musste ich verlinken.

Die Füllhalterversion

nospam@example.com (Klaus) — Sat, 19 Nov 2011 15:40:00 +0100

Nachdem ich entdeckt hatte, daß mein Bloglayout verblüffend den Fahrkartenautomaten der Bahn ähnelt, musste etwas anderes her.

Ein schöner Header in »Scriptina« oder einer englischen Schreibschrift. »Libelle« hat mir gut gefallen. Nur wollte ich keine 75,- EUR dafür zahlen.

Schließlich dachte ich: vergiß all die sterilen Schriften und schreib den Header selbst.

Gesagt, getan.

Alt:

Neu:

Was sich geändert hat? Der Header ist handgeschrieben, die Lila-Links wurden durch Tintenblau ersetzt, die runden Ecken der Boxen wurden begradigt und Schatten gibt es auch keine mehr. Ich gebe zu, dass das nur Kleinigkeiten sind. Eigentlich sollte sich noch mehr tun; nur habe ich in der Zwischenzeit ein anderes Blogsystem gesehen, das ich vielleicht ausprobiere. Mal sehen.

Die Fahrkarten bitte

nospam@example.com (Klaus) — Mon, 14 Nov 2011 07:31:14 +0100

Als ich neulich einem Fahrkartenautomaten der Bahn fasziniert beim Booten von Windows XP zugeschaut habe, ist mir aufgefallen, dass mein Blogdesign dem neuen Design der Automatenoberfläche verflixt ähnlich sieht.

Ach du liebes Lieschen!

Ich sollte mir schleunigst etwas neues einfallen lassen ...

Kinoblog aufgehübscht

nospam@example.com (Klaus) — Wed, 29 Jun 2011 17:43:00 +0200

Das Kinoblog nebenan hatte schon immer einen dezenten schwarzen Header mit einem Schriftzug in »Kinescope«.

Zeit für etwas neues. Den Experten muss ich ja nicht sagen, was das für ein Filmstreifen ist.

Terminpläne übersichtlich anzeigen mit CSS

nospam@example.com (Klaus) — Tue, 15 Mar 2011 16:42:37 +0100

Das Smashing Magazine veröffenlicht ausgezeichnete Artikel rund ums Webdesign. Gestern erschien dort der Beitrag Technical Web Typography: Guidelines and Techniques von Harry Roberts.

Neugierig habe ich mich auf dessen Homepage umgesehen. Und den für mich als Webmaster der Blue note BIG BAND hochinteressanten Text Coding up a semantic, lean timeline gefunden.

Sowas muss auf die Bandseite! Harry hat die Verwendung genehmigt, also steht dem nichts mehr im Wege. Here we go.

Nachtrag: nachdem ich mir den Wolf gesucht habe, wo ich Beispiele für »time« in HTML5 finde – das alles und noch viel mehr gibt es beim HTML5 Doctor.

Ein Layout je Artikel

nospam@example.com (Klaus) — Mon, 14 Dec 2009 21:26:12 +0100

Eine eindrucksvolle Sammlung von Weblogs (oder vielleicht sollte man es besser Webmagazin nennen?), die jeden Artikel mit individuellem Layout versehen: Unicqe Article Design bei Coldheat.

Sehenswert!

via praegnanz.de

Trend?

nospam@example.com (Klaus) — Wed, 25 Nov 2009 23:05:00 +0100

Schon vor vielen Monaten hat Jason Santa Maria seine Website radikal verändert. Anstelle eines durchgängigen Layouts für alles hatte jeder Bereich plötzlich ein anderes Aussehen. Mittlerweile hat das jeder einzelne Blogartikel.

Am Anfang dachte ich noch »Hey, was für eine bescheuerte Idee!«. Das hat sich nach einiger Zeit geändert; und auch dieser Artikel »Stop designing Websites, start designing posters« hat mich ins Grübeln gebracht.

Die Seite der Big Band ist mir schon eine Weile zu langweilig, die repräsentiert optisch eher einen Haufen Beamter als ein Rudel, ähm, von Individualisten, das mit Begeisterung eine Musikrichtung pflegt, die ziemlich ausser Mode ist.

Ich hab mal versucht, erste Entwürfe zu basteln. Natürlich kann ich keine Saxophonistin auf die Eingangsseite nehmen, da meutern die Blechbläser. Das ist nur mal so eine Idee: ein Musiker oder eine Gruppe neben dem Text; vielleicht auch einfach nur Instrumente. Kann ja beim Workshop fotografieren, was noch fehlt.

Vielleicht hat ja einer der Mitleser eine Meinung zu alledem

Aktuelles Layout

Idee Homepage

Idee Terminplan

Save IE6!

nospam@example.com (Klaus) — Wed, 01 Apr 2009 18:53:10 +0200

Ein Anliegen, das alle betrifft, die sich auch nur ein wenig mit Webdesign beschäftigen: Rettet den Internet Explorer Vers. 6.

Gründe gibt es viele:

Proven technology. Itâ€™s been around since 2001.

NO bugs.

No unnecessary features that use up valuable screen space, such as tabs.

Handles GIF transparency.

First with AJAX technology (XMLHttpRequest, available since IE5).

Renders all pages as they are supposed to look by the only standard that really matters.

Consistent rendering of pages makes it the web designerâ€™s best friend.

The most aesthetically pleasing web browser logo.

Highly secure (has received lots of security updates).

Clear interface.

Danke für diesen wichtigen Link, Mark!

Werkzeugkiste

nospam@example.com (Klaus) — Fri, 13 Mar 2009 17:45:00 +0100

Seit ewigen Zeiten verwende ich bei meinem Firefox die Erweiterung Web Developer. Ein praktisches Werkzeug, das unter anderem Referer unterdrückt und Java, Javascript und Cookies abschalten kann. Dazu gibt es Messwerkzeuge, viele Infos und natürlich die Möglichkeit, Webseitenelemente hervorzuheben.

Am meisten nutze ich die Möglichkeit, CSS-Angaben zu verändern und die Ergebnisse zeitgleich angezeigt zu bekommen. Ist alles zur Zufriedenheit geändert, kann man die Datei bequem lokal speichern.

Neuerdings verwende ich auch Firebug. Ein feines Werkzeug!

Einmal installiert macht es sich in der rechten unteren Bildschirmecke bequem. Und bisher habe ich es immer angecklickt, um bei einer Webseite unter die Haube zu schauen und zu sehen, welche CSS-Eigenschaften für ein Element wirksam sind und wo sie gesetzt werden (natürlich kann das Tool viel mehr; siehe Homepage).

Es geht aber viel einfacher, wie mir Matthias gestern erklärt hat. Man fährt einfach mit der Maus an die Stelle der Webseite, über die man Infos haben will, klickt dann mit der rechten Maustaste das Kontextmenue auf und wählt »Element untersuchen«. Und schon liefert Firebug alles, was man über das CSS dieses Elements zu wissen gibt.

Nochmal vielen Dank, Matthias.

Firefox must haves

nospam@example.com (Klaus) — Wed, 05 Nov 2008 12:37:00 +0100

Nebenbei benutze ich das Blog auch als Denkzettel.

Wenn mal wieder alles schiefgeht und Firefox komplett neu zu installieren ist, hier die IMO absolut notwendigen Firefox-Add-ons:

Der Link, der über »Weitere Suchmaschinen hinzufügen …« geöffnet wird, lässt sich mittels »about:config« setzen. Dazu muss der Wert browser.search.searchEnginesURL in z. B. http://mycroft.mozdev.org/download.html geändert werden.

Fast vergessen: NoScript, gut für die Sicherheit, schlecht für die Webnutzung.