Da ich jetzt auch mit einem iPhone unterwegs bin, habe ich meine Homepage etwas angepasst, damit man sie mit dem iPhone etwas besser ansehen kann. Eigentlich kann man mit dem Safari jede Website ansurfen und sie wird auch vernünftig dargestellt, allerdings ist eine vereinfachte Webseite ab dem kleinen Bildschirm etwas besser lesbar.
Meine Seite ist nun auch über http://i.t-error.ch/ erreichbar. Einige Dinge werde ich dort sicher noch anpassen, aber so kann man die Texte sehr gut lesen und auch schnell einen Kommentar verfassen. Ich würde mich natürlich auch über Feedback von anderen iPhone-Usern freuen. Und so sieht das dann aus:

Über Falki bin ich wieder auf den Dienst Browsershots gestossen. Jeder, der schon mal eine Homepage erstellt hat kennt das Problem wohl. Man hat das Design fertig gestellt und schaut es dann in einem anderen Browser an. Und es sieht völlig anders aus.
Bei privaten Homepages ist das ja nicht so gravierend, aber Firmen Homepages sollten doch in jedem Browser gleich aussehen. Und valides (X)HTML und CSS garantiert ja auch nicht, dass die Homepage überall gleich aussieht (IE).
Nun kann man ja nicht jeden Browser auf dem Computer installiert haben und zudem gibt es ja auch noch Darstellungs-Unterschiede im Firefox unter Windows und Linux. Nicht zuletzt auch wegen den verschiedenen Schriftarten.

Browsershots ermöglicht es einem zu sehen, wie eine Homepage in verschiedenen Browsern aussieht. Einfach die URL eingeben und die gewünschten Browser auswählen. Alle momentan populären Browser stehe zur Verfügung. IE, Firefox, Opera, Safari und das auch unter Windows, Linux und Mac OS.


Ich habe meine Seite natürlich auch getestet und bin wirklich zufrieden mit dem Ergebnis. Sogar im IE 6, der ja nicht gerade für seine CSS Kompatibilität bekannt ist, sieht die Seite sehr gut aus. Nicht zuletzt dank dem IE 6 CSS hack.


Der einzige Browser, in dem es überhaupt nicht gut aussieht ist der IE 5. Allerdings mache ich da keine grossen Aufwände mehr, damit die Seite auch dort gut aussieht. Sehr viele Benutzer sind mit dem IE 5 ja nicht mehr unterwegs.
Man achte auf die Navigation

Wie schonmal erwähnt arbeite ich momentan an einem neues Design für die Homepage. Das Grunddesign steht momentan und ich bin auch wirklich damit zufrieden. Und auf etwas bin ich besonders stolz. Die Seite sieht im Firefox und Opera unter Linux und Windows genau gleich aus. Eigentlich keine grosse Kunst, aber das besonders schöne: Auch im Internet Explorer 7 wird die Seite korrekt angezeigt. Der Grund warum ich IE 7 und nicht einfach IE schreibe, ist eigentlich der Grund warum ich diesen Beitrag schreibe. Im IE 6 sieht es nicht mehr so rosig aus. Die Seite sollte eigentlich zentriert sein, aber im IE 6 klebt sie schön am linken Rand. IE 6 und CSS verträgt sich leider nicht so gut.

Die neue Seite ist ähnlich aufgebaut, wie die jetzige. Oben ein Header, danach das Menu und dann auf der linken Seite eine Navigation und rechts daneben der Inhalt. Aufs gröbste gekürzt sieht der Code so aus:

<div id="main">
    <div id="navLeft">
        Navigation
    </div>
    <div id="content">
        inhalt
    </div>
</div>

Nur mit HTML kommt man da natürlich nicht so weit, also braucht man auch noch etwas CSS Code:

#main {
    width:                   745px;
    margin-top:              5px;
    margin-bottom:           0px;
    margin-left:             auto;
    margin-right:            auto;
    }

#navLeft {
    margin-left:             0px;
    width:                   160px;
    float:                   left;
    }

#content {
    margin-left:             165px;
    width:                   580px;
    }

Grundsätzlich ist es derselbe Code wie bei dieser Seite, nur hat der Container #main eine feste Breite und ist zentriert, oder sollte es zumindest sein. Wie gesagt funktioniert dieser Code im Firefox, Opera und IE7 wunderbar, nur im IE 6 ist die Seite nicht zentriert. Der Container wird ja mit den Elementen margin-left:auto; und margin-right:auto; zentriert. Nur scheint das im IE 6 nicht zu funktionieren.
Kennt da jemand eine andere, funktionierende Lösung? Idealerweise XHML und CSS valide?

Microsoft denkt schon über den IE 8 nach. Natürlich soll die Sicherheit besser werden, das sagen sie ja jedes mal. Zudem soll die Standardkompatiblität verbessert werden. Und genau da hat Microsoft in meiner Meinung immer noch eine Menge zu tun.
Allerdings sollte man sich da keine grossen Hoffnungen machen. Chris Willson, Projektleiter von Microsoft, sagte zur Kompatiblität folgendes:Quelle: Heise Online

Dass ich da anderer Meinung bin, muss ich wohl nicht erwähnen. Microsoft könne nun endlich mal aus vergangenen Fehlern lernen und einen Standardkompatiblen Browser auf den Mark werfen. Aber nein, der Browser muss kompatibel zu Seiten sein, die sich nur an den Quasistandard des Internet-Explorers halten.

In letzter Zeit ist mir vermehrt aufgefallen, dass immer mehr Webseiten eine feste Breite für ihr Design verwenden. Vor allem bei Blogs ist das weitverbreitet. Das typische Blogdesign hat eine feste Breite, oben ein Logo und entweder oben, links und/oder rechts eine Navigation. Es sieht also so aus:

Ich frage mich aber, was der grosse Vorteil an einer festen Breite ist. Ich habe hier im Geschäft eine Auflösung von 1680x1050 Pixel. Mit dieser Auflösung sieht die Homepage der Gratiszeitung Heute so aus:

Das ist doch Schade. Ich muss sehr weit nach unten scrollen, aber horizontal hätte die Webseite gut 2.5 mal Platz. Dass man das herunterscrollen, vor allem bei Blogs, nicht verhinden kann, ist mir klar. Aber das heisst ja nicht, dass man das Browserfenster nicht ausnutzen darf. Vor allem werden heuzutage immer mehr Widescreen Bildschirme verkauft und die wenigsten Leute können/wollen ihren Bilschirm um 90 Grad drehen.
Für den Webdesigner ist es halt schon von Vorteil, wenn er eine feste Breite hat. Man kann Bilder genau einpassen und auch der Text sieht immer genau gleich aus. Für den User bringt einevariable Breite in meiner Meinung aber einen klaren Vorteil. Man mehr Text lesen ohne immer wieder herunterscrollen zu müssen. Ich habe misch schon oft über Webseiten geärgert, die einen langen Text haben und ich dann nach jedem Abschnitt wieder herunterscrollen muss, nur weil die Seite nur halb so breit wie mein Bildschirm ist. Für mich als (Hobby) Webdesigner ist es zwar ein höherer Aufwand. Wenn dies allerdings eine höhere Usability mit sich bringt, ist dieser Auswand sicher auch gerechtfertigt.
Ich wäre erfreut, wenn ich in Zukunft mehr Webseiten (auch Blogs) sehen würde, die den Bildschirm auch ausnützen würden. Den eigentlich könnte ich ja immer noch mit einer Auflösung von 800x600 surfen. Ich hoffe, ich sehen in Zukunft mehr Webseiten mit einem solchen Design

Wie man Kunst und Webdesign zusammenbringt. Fenstergrösse nicht ändern.

Via Vazifar's Blog