CSS Off Ergebnisse

Nun, nach einer verpassten Frist sind die Ergebnisse da! Sie können alle Bewertungen durchsuchen und die Einträge der Leute auf der CSS Off Ergebnisseite einsehen.

Gewinner

Natürlich haben all diese Leute eine tolle Arbeit geleistet. Zu ihrem Vorteil werden wir einfachein wenigkonstruktive Kritik üben.

1. Platz – Steven Schrab – Eintrag ansehen

Hinweise: Gehen Sie etwas lockerer mit der Bildkomprimierung um. CSS-Bildersetzung für den Titel sah gut aus, wäre aber unpraktisch gewesen.

2. Platz – Edd Sowden – Eintrag ansehen

Hinweise: IE 8 hätte von etwas Fallback-Unterstützung für transparente Alphakanäle profitiert. IE 6 hatte das Roh-Stylesheet, was normalerweise großartig ist, aber für diesen Wettbewerb wäre es gut gewesen, es zu unterstützen.

3. Platz – Mustafa Quilon – Eintrag ansehen

Hinweise: Bevorzugt hätte ich Helvetica am Anfang des Schriftartenstapels gegenüber Gill Sans. Die Schatten auf den Fußzeilen, als sie unter die Artikelseite gingen, wurden verpasst.

4. Platz – Pam Griffith – Eintrag ansehen

Hinweise: Diefont-stretchEigenschaft führte zu großen Unterschieden bei der Schriftart im Header zwischen WebKit und Gecko.

Diese Gewinner wurden kontaktiert, die wiederum die Gewinnerkommentatoren auf dem Originalbeitrag auswählen werden. Sobald diese ausgewählt wurden, werden diese Personen kontaktiert und dann beginnt die Preisauswahl.

Insgesamt

Jeder, der teilgenommen hat, sollte sich selbst auf die Schulter klopfen. Insgesamt haben alle eine tolle Arbeit geleistet und sollten stolz sein. Es war für einen guten Zweck und gute Übung. Ich erwähne das nur, weil ich sicher bin, dass einige von euch mit ihrer Punktzahl unzufrieden sein werden. Nehmen Sie es nicht zu ernst...

Bewertung

Die Einträge wurden von mir und Doug Neiner bewertet. Wir bewerteten jeweils verschiedene abwechselnde Teile jedes Eintrags. Sie kennen mich wahrscheinlich. Hier ist Doug

Doug ist Designer, Entwickler und Inhaber von Pixel Graphic Design Studio. Er ist CTO von Fuel und Blogger bei Fuel Your Coding. Er hat auch eine persönliche Website.

 

Wir bewerteten auf der folgenden 100-Punkte-Skala

Sauberer, konsistenter Stil	1 – 10 Punkte	Gesamter Code (HTML/CSS) organisiert und lesbar
Semantik	1 – 5 Punkte	Smarte Elemente und Klassen-/ID-Namen verwendet. Bonus für HTML5
Ordnerorganisation	1 – 5 Punkte	Struktur des Ordners war sinnvoll und gut organisiert
Originaldesign abgeglichen	1 – 20 Punkte	Wie nah es am Original-Mockup in einem modernen Browser war
Gute Entscheidungen Punkte	1 – 20 Punkte	Smarte Entscheidungen getroffen: Dinge, die Text sein sollten, waren Text, der Button wurde auf eine clevere, flexible Weise umgesetzt, Rollover sahen gut aus usw.
Unterstützung für moderne Browser	1 – 10 Punkte	Firefox 3, Safari 4
Unterstützung für etwas veraltete Browser	1 – 5 Punkte	IE 7
Unterstützung für alte Browser	1 – 5 Punkte	IE 6
Dateigröße	1 – 10 Punkte	Der größte (vernünftige) Eintrag erhielt eine 1, der kleinste eine 10, dann wurde er auf dieser Linie bewertet
Bildqualität	1 – 10 Punkte	Wie die Bilder aussahen. Dies sollte die Dateigröße ausgleichen. Die meisten Punkte erhielten Einträge, die schöne Bilder mit kleinen Dateigrößen kombinierten.
Gesamt	Maximal 100

Spezifische Problembereiche

Wir waren bei den Schriftarten ziemlich nachsichtig, wenn es um das ganze Helvetica Neue-Zeug ging. PCs haben diese Schriftart nicht, daher war es in Ordnung, wenn Sie Bildersetzung im Header verwendeten. Die Verwendung von Bildersetzung für den Artikeltitel ist jedoch keine gute Idee, daher wurde dies abgezogen. Ich hätte lieber eine falsche Schriftart als etwas so Unflexibles gesehen.

Nach all dieser Bewertung sind dies die Dinge, die den Leuten am meisten zu schaffen machten

1. Zeilenhöhe

Es gab Text im gesamten Mockup mit einer Vielzahl von Zeilenhöhen. Dies wurde oft übersehen oder falsch eingeschätzt. Die Zeilenhöhe ist entscheidend für die Darstellung von gut lesbarem Text.

2. Dezente Schatten

Als die drei kleinen Linien unter die Artikelbox gingen, war dort ein dezenter Schatten.

3. Raster

Die Beine der Uhr passten gut zu den Kanten der drei Fotoboxen im Mockup. Viele Designs haben das nicht richtig hinbekommen. Wenn die Uhr in einer flexiblen Breite platziert war, aber bei einer Fenstergröße etwa der Größe des Mockups übereinstimmte, war das akzeptabel.

4. Webtext

Der Text in den drei „Zitat“-Boxen unten war Georgia in drei verschiedenen Farben. Das hätte definitiv Webtext über diesen Boxen sein müssen, keine Bilddatei, auch wenn es sich um eine Bildersetzung handelte oder ein ordentliches ALT-Attribut hatte. Webtext rendert besser, ist einfacher zu aktualisieren, auswählbar usw.

Interessante Einträge

Keiner dieser Einträge war ein Gewinner, aber sie alle haben interessante Dinge getan, schauen Sie mal rein!

#103 – Fest positionierter Footer und der Inhalt gleitet darunter.
#117 – Quellcode anzeigen =)
#104 – Eines der Beispiele mit Animationen für die Arme der Uhr
#58 – Komplette Neuerfindung des Designs
#127 – Vielleicht der einzige Versuch, die Uhr fest zu positionieren
#11 – Verwendete die MagicLine

Zusammenfassung

Es war ein langer Weg! Die wichtige Lektion, die wir beim Organisieren der Veranstaltung gelernt haben, ist, dass es viel mehr Arbeit ist, als die ursprüngliche Idee vermuten ließ. Aber wir haben es geschafft! Nächstes Mal werden wir offener über den Zeitrahmen sprechen und den Prozess besser ausarbeiten. Einige Sponsoren wären gut, um die Sache für alle kostenneutral zu halten.

Falls Sie es oben verpasst haben, die Ergebnisse sind hier.