Eine Seite für alle Fälle

geschrieben von Pawel

Es gab Zeiten, da durften Ärzte nicht für sich werben. Heute hat sogar mein Zahnarzt eine Website. Er hat mir versichert, dass ihn darüber zunehmend auch neue Patienten finden. Es gibt also anhaltend Anwendungsfälle mit relativ konstanten Inhalt. Dazu habe ich ja auch schon mal im Blog geschrieben. Hier reicht eine Seite (Onepager), die aber mit Javascript in Kleinteile "zersägt" wird, um die Inhalte ein bisschen abzusetzen und die gesamte Seite lesbarer zu gestalten.

Wenn ich die (momentane) HTML5-Spezifikation nicht völlig falsch verstanden habe, kann man jeden Inhaltszusammenhang in eine section packen. Da Javascript dafür sorgt, dass jeweils nur ein Bereich angezeigt wird, mutet es wie eine mehrseitige Präsenz an. Damit werden Ressourcen gespart, da insgesamt weniger Daten übertragen werden. Es gibt keine zusätzlichen Requests, da das CSS und Javscript im head des Dokuments stehen. Bei kleinen Dateien lohnt die Auslagerung in seperate Dateien nicht.

Diese Vorteile kommen noch mehr zur Geltung, wenn die Seite mit einem Smartphone genutzt wird. Das coole an Smartphones ist, dass sie spätestens alle 2 Jahre erneuert werden und Javascript immer läuft.

Desktoprechner werden steuerlich in 4-5 Jahren abgeschrieben und noch länger genutzt. Daher finden sich dort noch ein paar Uraltbrowser, deren Zeit aber abläuft. Netscape 4.6 ist ja auch verschwunden.

Auf mobilen Geräten kann man CSS @media-queries voraussetzen. Selbst wer unbedingt Windows Mobile benutzt und nicht reflexartig Opera Mobile installiert hat, findet nach dem Mango-Update jetzt den IE9 vor, der dies auch versteht. Für mich sind damit handheld-Angaben obsolet.

Für meinen konkreten Anwendungsfall ist es wichtiger auf den Fall zu reagieren, wann die Navigation nicht mehr ins portrait-Format passt. Seltsamerweise gibt es im Netz nicht viele Tipps, die sich mit der Navigation auf kleinen Screens auseinandersetzen. Ich habe nur ein Tutorial auf CSS-Tricks gefunden, das mir aber nicht gefiel. Ich wollte ein Menü, das ich auch noch treffe, nachdem ich meiner Mutter den Garten umgegraben habe.

Ich habe die Navigation gestaltet und brauchte nur noch einen Button, um die Navigation sichtbar bzw. unsichtbar zu machen. Der Button sollte gut sichtbar und erreichbar sein. Die zunächst naheliegende Variante, den button mit Pseudoelementen zu kreeiren habe ich wieder verworfen. Einerseits ist ein solcher Button im Firefox Mobile schwer bedienbar und andererseits fällt sofort auf, dass touch- und hover-Events sich deutlich unterscheiden. Das Mobiltelefon bemerkt natürlich nicht, dass der Finger weg ist und die Navigation bleibt solange sichtbar, bis der Finger irgendwo auf den Screen tippt. Unschön.

Bei meiner Lösung galt es sicherzustellen, dass der mit Javscript erzeugte button nur bei der Verwendung der mobilen @media-queries gezeigt wird, . Empfohlen sei hier die Angabe max-device-width. Angaben ohne -device- interpretieren manche Mobilbrowser nicht. Das Ungetüm

mobile = window.getComputedStyle($t('html')[0], null).getPropertyValue('border-top-style') === 'dashed' ? 'true' : 'false';

fragt nach einen bestimmten Stilmerkmal des html-Elements, dem ich für kleine Screens, oben eine gestrichelte Linie zugewiesen habe. Einige mobile Browser habe diese tatsächlich angezeigt, weswegen ich die Liniestärke auf 0 gesetzt habe. Wenn das Stilmerkmal vorhanden ist, muss also die @media-query funktionieren. Glücklicherweise beherrschen auch alle diese Browser .getComputedStyle. Es gibt neuere Smartphones, die im landscape-Modus mehr Pixel anzeigen, als die hier angesetzten 600px. Daher wird bei jedem resize-Event, also auch beim Drehen, die Funktion checkScreen() aufgerufen. Damit bei kleineren Displays nicht ständig neue Buttons entstehen, muss überprüft werden, ob er noch nicht erzeugt wurde. Mit .removeChild(button) ist er nur aus dem DOM entfernt, aber noch vorhanden. Diesen Fall galt es zu berücksichtigen. Die Mobilvariante ist jetzt fertig.

Die allgemeinen Stilregeln verhelfen auch alten IE's zu einer bedienbaren Seite. Moderne Browser zeigen mehrere Spalten sowie CSS-Muster. Letztere können erheblich Performance kosten.

Demo eines Onepagers für alle Displaygrößen

Kategorie: CSS , Ideen , JS , Layout | Kommentare (0) | Trackbacks (0) | Permalink

SVG in VML konvertieren

geschrieben von Pawel

Thomas Magnum würde sagen:

Ich weiss was Sie jetzt denken und Sie haben recht.

VML ist das diese steinzeitliche, proprietäre Vektorsprache von Microsoft, die von den Browsern nur der Internet Explorer interpretiert?

Im Gegensatz dazu ist SVG doch leistungsfähiger und wird auch vom kommenden IE9 nativ unterstützt. Zudem kann das Format direkt aus gängigen Vektorprogrammen erzeugt werden.

Wenn SVG heute auf einer großen Seite verwendet wird, dann meist mit der Javascriptbibliothek Raphaël, um für die IE eine VML-Grafik zu erzeugen. Das ist solange nötig, bis die IE-Familie sich völlig erneuert hat, was noch 2-3 Jahre dauern wird.

Jede Lösung bleibt begrenzt, da das Format Filter, Animation u.v.m. nicht unterstützt. Statische Grafiken können aber auch ohne Javascript recht einfach halbautomatisch konvertiert werden.

Innerhalb von Inkscape sollten alle Farbverläufe durch gut abgrenzbare Vollfarben ersetzt werden.

Die Grafik wird dann im odg-Format gespeichert, welches OpenOffice versteht. Dieses Format ist so armselig, da es keine Farbverläufe anzeigtt. Die Grafik kann jetzt mit OO Draw geöffnet und per Kopieren und Einfügen in eine OpenOffice Textdokument kopiert werden, um es als doc (Word)-Datei abzuspeichern.

Wenn diese Datei jetzt mit dem Microsoftprodukt geöffnet wird, ist die Vektorkonvertierung bereits geschehen. Ab Word 2007 kann sogar die Grafik editiert werden und bestimmte Farbverläufe wieder hinzugefügt werden.

Ich empfehle die zu erstellende html-Datei als iframe in einen switch einzubinden, wie ich es im Blog schon erläutert habe. Nur Klugscheißer optimieren die niemals valide Datei per Hand weiter.

Wie das aussieht, kann man sich bei den Alternativgrafiken von meiner Batik-Seite abschauen.

Kategorie: Ideen , Layout , SVG | Trackbacks (0) | Permalink

Weniger Bilder durch CSS Icons

geschrieben von Pawel

Vor langer Zeit gab es eine Arbeitsgruppe, die sich mit der Zukunft beschäftigte, die XHTML2 heißen sollte. In den Entwürfen war auch mal die Abschaffung des img-Tags angedacht. Zunächst mutet es skurril an, sich eine Website ohne Bilder auszudenken. Stellt man jedoch den Inhalt in den Vordergrund, dann ist es nicht mehr so absurd. Der Entwurf sah ja ohnehin vor, Medieninhalte über das object-Tag einzubinden, wozu dann auch ausgewählte Bilder gehören können. Schmuckbilder im Markup sollten der Vergangenheit angehören.

Die Zeiten haben sich geändert und jeder Gestalter nutzt Schmuckbilder nur innerhalb der CSS. Damit diese nicht zuviel Ladezeit kosten, werden sie fachgerecht in eine einzige Bilddatei zusammengesetzt und an verschiedenen Stellen mit verschieden Teilen eingeblendet. Diese sogenannten Sprites erleichtern die optische Hervorhebung von Zitaten, Aufzählungen, Loginfeldern usw. . Damit schienen alle Möglichkeiten des modernen Webdesigns ausgereizt, bis Nicolas Gallagher mit seinen CSS-GUI-Icons nachwies, dass moderne Seiten anscheinend doch ohne Bilder auskommen können, ohne nach digitaler Steinzeit anzumuten.

Nicolas Idee beruht darauf, dass er bis zu 4 Pseudoelemente erzeugt, die er innerhalb der Liste absolut positioniert. Hauptsächlich werden die Ränder der neuen Elemente gebogen und gedreht, um typische Icons damit zu erzeugen. Es geht nicht in alten Internet Explorern, funktioniert aber problemlos in der kommenden Version 9, die mittels -ms auch CSS-Transformationen beherrscht.

Bei der Konzeption einer heutigen Website muss noch berücksichtigt werden, dass mit Opera einer der wichtigsten Mobilbrowser border-radius noch nicht interpretiert. Wohl deshalb kennzeichnet der Erfinder seinem Vorschlag noch als experimentell.

Wer in der beeindruckenden Vielfalt noch etwas vermisst, findet genügend Anregungen für eigene Experimente:

/* PAGE CURL */
/* a rectangle, border-radius should hide the topright corner */
.page a:before {
    left:5px;
    width:8px;
    height:12px;
    border:2px solid #c55500;
    -moz-border-radius-topright:7px
    -webkit-border-top-right-radius:7px;
    border-top-right-radius:7px;
    background:transparent;
}

/* a triangle with position on the top right corner of the rectangle */
.page a:after {
    left:11px;
    border-width:3.5px;
    border-style:solid;
    border-color:transparent transparent #c55500 #c55500 ;
    margin-top:-10px;
    background:transparent;
}

/* lines on the page*/
.page:after {
    left:8px;
    width:5px;
    height:1px;
    margin-top:-2px;
    border-top:2px double;
    border-bottom: 2px double;
    border-color:#c55500;
    background:transparent;
}

.page a:hover:before,
.page a:focus:before,
.page:hover:after,
.page a:active:before {
    border-color:#730800;
    background:transparent;
}

.page a:hover:after,
.page a:focus:after,
.page a:active:after {
    border-color:transparent transparent #730800 #730800;
}

Mein Icon stellt ein stilisiertes Blatt mit umgeknickter Ecke dar. Nicolas Idee lässt sich auch auf andere HTML-Elemente übertragen, wie die

Demo einer Loginbox

ohne Bilder zeigt. Seine Idee ist damit ein Meilenstein, der das Weblayout ähnlich voranbringen wird, wie 2003 die "Sliding Doors".

Kategorie: CSS , Ideen , Layout | Kommentare (0) | Trackbacks (0) | Permalink