Kategorien
Netzwelt Webdesign/Gestaltung

Rosa gegen Brustkrebs (Pink for October) (Update)

Pink for OctoberMit der Aktion Pink for October wollen Webdesigner und -entwickler aus Amerika ihre Webseiten den ganzen Oktober hindurch in Rosa (engl. Pink) erstrahlen lassen, um so auf den in Amerika stattfindenen Monat des Brustkrebs hinzuweisen. Ziele der Aktion sollen vor allem höhere Spendensummen und (bisher noch in Klammern) die Internationalisierung dieses Tags sein.

Schöne Sache wie ich find’, aber hoffen wir mal, dass mit dem Rosa nicht allzusehr übertrieben wird. Drüben beim Tom in der Schweiz könnt ihr euch schon mal ein wenig auf die Farbe des Weboktobers einstimmen ;)

Update: Bin leider noch nicht dazu gekommen, hier rosa zu streichen, aber das wird schon noch :)

Kategorien
Browser

IE3 – IE7 auf einem System

Wahrscheinlich war es bisher noch nie so leicht, Webseiten auf ihre Kompabilität in verschiedenen Internet Explorer-Versionen zu testen. Tredosoft bietet zur Zeit den IE7 als Standalone-Variante (ohne Installation) und die IE-Versionen 3-6 in einem Paket an.

Anstatt den IE7 als Standalone-Variante laufen zu lassen, kann er auch einfach installiert werden. Dazu noch das Multiple IE-Paket dazu und das testen kann beginnen. Und für Linux-User gibt es den IE auch.

Danke Dr. Web für diesen Hinweis.

Kategorien
Software

Widgets

Das, was sich damals Microsoft bei Windows 98 mit dem Active Desktop gedacht hat, hat Apple mit den aktuellen Mac OS X Widgets wohl nahezu perfektioniert. Windows Vista wird auf diesen Zug aufspringen, wann auch immer es nun veröffentlicht wird. Wer jetzt schon welche haben möchte, schaut bei Yahoo! Widgets oder im oben erwähnten Wikipedia-Artikel nach. Ich nutz sowas derzeit nicht, aber das Kommentar-Widget von Martin Labuschin find ich recht bemerkenswert. Hätte ich einen Apfel, würde ich mir als allererstes die Designer’s Toolbox von Michael Preidel installieren.

Ein kleiner Gedanke am Samstag Mittag. Schönes Wochenende :)

Kategorien
Allgemein

W3C Unicorn – HTML und CSS gleichzeitig validieren lassen

Webseiten-Validät zu testen war bisher immer sehr klickreich. Zum HTML testen musste der HTML-Validator genutzt werden, für CSS-Überpfungen der CSS-Validator. Das W3C hat bestimmt gemerkt, dass das auf Dauer etwas mühselig ist, und stellt nun alles auf einmal zur Verfügung. Es nennt sich Unicorn und testet das CSS und HTML gleichzeitig. Warum man dafür derzeit JavaScript benötigt, wird mir nicht ganz klar, aber es ist ja auch noch eine Alpha-Version.

A clear, simple, concise and complete assessment of the quality of a web page. Being able to get results of validation of HTML, checking of the style sheets, finding broken links, and more, much more, without having to visit ten different pages and services. That would be a rare sight, but it’s not a fantasy. We give you: The unicorn (public preview)

WC3 Weblog

Auf auf, testet eure Webseiten!

Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

Wie erreicht man mobile Webseiten?

(Dieser Artikel benötigt eine Aktulisierung, die ich bald vornehmen werde, da sich bei diesem Thema einiges getan hat. Wer sich mal anschauen möchte, wie das mit dem iPhone funktioniert: hier entlang )

Jeder, der mit seinem Handy im Internet unterwegs war, wird sich manchmal gefragt haben, ob es nicht spezielle Versionen »für unterwegs« von seinen Lieblings-Webseiten gibt. Natürlich gibt es da einige, beispielsweise die Fahrplanauskunft der Deutschen Bahn, Google und eBay Unterwegs. Diese Versionen sind speziell an den Zugang per Handy angepasst, das heißt kleinere Dateien, weniger Grafiken und sehr schlichte Gestaltung. Mehr Beispiele bei MarcTV: Internet auf dem Handy.

Natürlich könnte man einfach hingehen und die Webseite so gut nach Webstandards umbauen, dass man sie auch im Handybrowser benutzen kann. Einfach ein paar passende HTML– und CSS-Anweisungen – Stichwort Medienangaben – und fertig ist das ganze. Super, braucht man sich keine weitere Subdomain merken, einfach so wie zu Hause. Leider weiß man nur nicht so genau, welcher Handybrowser wieviel CSS versteht und was er daraus gemacht. Außerdem braucht’s ja auch nicht jede Funktion auf einer Website, die man unterwegs abrufen möchte.

Problematik

Deswegen werden weiterhin spezielle Versionen für Handys oder den Handheld/Palm/etc. entwickelt. Ein Dilemma dabei ist, dass jedes Angebot eine andere Art wählt, wie man diese angepasste Webseite aufrufen kann, das wurde ja schon in den 3 Beispielen deutlich: Subdomain mobile. bei der Deutschen Bahn, Unterverzeichniss /xhtml bei Google und nochmal eine andere Subdomain wap. bei eBay.

Hey, blöd, da herrscht kein bisschen Einigkeit. Welcher normale Google-Nutzer vermutet denn unter /xhtml ein angepasstes Google, wer zuckt bei dem Begriff WAP (oder auch W@P; was ist eigentlich mit i-mode?) (eBay) nicht automatisch zusammen (langsam, teuer, nicht bunt genug) und warum benutzt die Deutsche(!) Bahn bitte den englischen Begriff mobile?

Ein einheitlicher Standard muss her

Schluss damit, ein passender Standard muss her, zwei stehen zur Auswahl.

.mobi

.mobi ist der Versuch von ICANN, Vodafone, Microsoft und sonstigen hohen Tieren bekannten großen Firmen in der Computer- und Telekommunikationsbranche, eine neue Top-Level-Domain für mobile Webseiten zu etablieren, also Domains wie bahn.mobi, karten.mobi oder restaurants.mobi

m.

m. oder auch moburl, die Alternative, spart uns 3 Zeichen zum tippen und setzt einfach auf die Subdomain m., also m.fahrplan.de, m.dailyquote.com, und so weiter.

Persönlich find ich die m./moburl-Alternative besser, vor allem, weil man sich 3 Buchstaben schenken kann. Jeder, der die ein oder andere Kurznachricht getippt hat, weiß was das heißt und ist froh über jede Tipperei weniger. Und wozu eine neue Internet-Domain? Eine weitere Alternative wären Browser-Weichen, aber es gibt höchstwahrscheinlich so viele verschiedene Handybrowser, dass man das niemanden in der Web-Abteilung antun möchte. Mit GMail oder hier in Deutschland GoogleMail hat diese Aktion auch schon einen prominenten Vorreiter, wie die Internetseite von moburl stolz verkündet:

So let’s just make mobile life a bit easier and establish a new address-standard for mobile content: pull up a m.dot moburl like Google just did with m.gmail.com. mobURL

Egal, wofür die Internetwelt sich entscheiden wird, ein einheitlicher Standards ist von Nöten und längst überfällig.

Kategorien
Textpattern

Import von WordPress nach textpattern und seine Probleme

Derzeit teste ich den Umstieg von WordPress auf textpattern, dabei hab ich bisher 2 Probleme feststellen können:

Bildbeschreibungen als eigener Beitrag

Hat man in WordPress zuvor Bilder hochgeladen und passende Beschreibungen vergeben, werden diese Beschreibungen als eigener Beitrag importiert. Folge ist, dass man nun erstmal diese Beiträge aussortieren und löschen muss. Nervige Angelegenheit ;)

Textile mag nur getrennte Überschriften und Absätze

Anscheinend kommt Textile nicht damit klar, wenn man zuvor die Überschriften direkt über den nachfolgenden Absatz geschrieben hat, also so:

<h2>Überschrift</h2>
Nachfolgender Absatz

In der HTML-Ausgabe kommt dann sowas heraus:

<p></p><h2>Überschrift</h2><br>
Nachfolgender Absatz

Steckt zwischen h2-Element und nachfolgendem Absatz eine Leerzeile, klappt es wie am Schnürchen und die Ausgabe ist korrekt:

<h2>Überschrift</h2>

nachfolgender Absatz

Mit einer entsprechenden Datenbankabfrage könnte man nun natürlich hinter jedem abschließenden h2-Element eine neue Zeile hinzufügen, aber was ist, wenn dieser schon existiert? Bekommt dann das nachfolgende (durch Textile erzeugte) p-Element noch ein br verpasst?

Fazit

Der Umstieg von WordPress auf textpattern bringt einiges an Überraschungen mit. Dies dürfte auch erst der Anfang sein, mal sehen was da noch so auf mich zukommt.

Kategorien
Intern

Serverperformance

Ich hab da mal ‘ne Frage an euch: Lädt meine Website in letzter Zeit überdurchschnittlich lang oder hat sie mal Ausfälle?

Mir kommen die Ladezeiten manchmal zu lang vor, vielleicht auch nur Einbildung, aber ich frag mal lieber nach.

Kategorien
Gestaltung und Design Typographie Webdesign/Gestaltung

Tipps zu hellem Text auf dunklem Grund

In Light text on dark background vs. readability von Roger Johansson geht’s mal wieder um die Probleme und Tipps zu weißem/hellen Text auf schwarzen/dunklen Hintergrund. Besonders im Hinblick auf die Lesbarkeit. Oftmals verwischen sich die hellen Buchstaben zu einem nicht lesbaren Brei. Die wichtigsten Regeln einmal zusammengefasst:

Schriftgröße

Als allererstes sollte man eine ausreichende Schriftgröße verwenden. Mini-Texte jenseits der 10px sollten generell vermieden werden, lesbar wird es so ab 12px. Auf eine geeignete Schriftart ist wie immer auch zu achten!

Beispiel zur Schriftgröße ansehen.

Zeilenabstand vergrößern

Um die Lesbarkeit zu steigern und keinen Textbrei zu erhalten, sollte der Zeilenabstand vergrößert werden. Am einfachsten geht dies mit der CSS-Anweisung line-height: Ein Beispiel: line-height: 1.4em;. Dies würde den Zeilenabstand um 40 % der Schriftgröße erhöhen.

Beispiel zum erhöhten Zeilenabstand ansehen.

Wie man sieht, hat die Lesbarkeit enorm zugenommen. [Feed-Abonnenten sollten einfach mal die Original-Seite anschauen und das Stylesheet neu laden (F5 drücken).]

Laufweite erhöhen (sperren)

Zusätzlich zum Zeilenabstand kann man auch noch die Abstände zwischen den Buchstaben vergrößern: letter-spacing: 0.03em;. Hierbei ist es wichtig, das ganze nicht zu übertreiben! Außerdem sollte man hier auch die Wortabstände per word-spacing vergrößern, da es bei hohen Werten sonst schwer werden könnte, Zwischenräume und Leerzeichen auseinanderzuhalten. Dieser Wert sollte über dem Buchstaben-Abstand liegen.

Beispiel zur erhöhten Laufweite ansehen.

Kontrast

Der Kontrast zwischen Hintergrund- und Textfarbe sollte ausreichend genug sein, beide voneinander zu unterscheiden, aber auch nicht zu groß oder auch grob ausfallen, da dies auf Dauer schwer für die Augen werden kann. Wählt man für den Hintergrund die Farbe Schwarz #000 und gibt dem Text ein dunkles grau wie #666, dann ist der Text kaum zu erkennen. Färbt man den Text allerdings weiß (#FFF) wird es wieder besser mit der Lesbarkeit.

Beispiel zum Kontrast ansehen.

Natürlich gelten diese Regeln auch bei dunkel-auf-hell-Webseiten. Vielen Dank nochmal an Christoph für seine Hinweise in den Kommentaren.

Weitere Infos