Sieht leicht aus? ist es auch. aus der rechten Box die verschiedenen Größen raus ziehen und sie in dem linken Raster platzieren. Was mit fehlt? Eine Zurück-Taste, um den letzten Schritt rückgängig zu machen, aber das lässt sich durch den Reset-Button verkraften. Sobald auf jeden Fall das komplette Raster voll ist, kann man auf den »Show the Code«-Button klicken und bekommt *Trommelwirbel* genau! Den Code. Einfacher geht’s nicht und praktisch ist es alle Male.

Insgesamt kann man damit 892 verschiedene Layouts erstellen, was der Entwickler durch ein Poster (PDF) und durch ein Video auch mal eben beweist. Klasse Sache also, werde es beim nächsten Projekt sicherlich mal berücksichtigen.

3×4 Grid Builder

Das war es dann auch schon wieder!
Euer Wishu

Ich nutze das Tool des Öfteren Mal. Auch mein Android-Formular wurde komplett damit erstellt, als ich kurz Langeweile hatte. Schnell mal eben was testen, ist eigentlich immer praktisch, gerade wenn man immer mal wieder was am Design ändert. Zum Beispiel an einem Blog, dort gibt es keine Live-Vorschau, wenn ich was Ändere. Wenn ich die CSS-Datei anpasse, dann ist sie auch live. Mit CSSDesk hat man ein kleines Tool zur Hand, welches euch etwas helfen kann. Wie gesagt, ich nutze es sehr gerne und empfehle es seit einige Zeit auch immer wieder. Nun seid ihr dran

CSSDesk

Das war es dann auch schon wieder!
Euer Wishu

Wie so viele Infografiken ist auch diese leider nur auf englisch verfügbar, sodass sie hier wohl nicht jeder lesen kann, wer allerdings im Bereich Webdesign arbeitet, ist der englischen Sprache zumeist mehr oder weniger mächtig. Ich warne schon einmal vor, es ist wirklich recht viel Text, allerdings wie oben bereits erwähnt, wirklich interessant – zumindest wenn man sich dafür interessiert. Am Ende der Infografik finden sich dann noch Vorhersagen für die nächsten Jahre.

A Brief History of Web Standards

Das war es dann auch schon wieder!
Euer Wishu

(via)

Nein, das Teaserbild habe ich nicht in Photoshop gedreht, das ist ein spontan erhaschter Screenshot von Google, wenn man eine bestimmte Suchphrase eingibt. Wenn man bei Google nach do a barrel roll sucht, dann dreht sich Google erst einmal, bevor man sich die Suchergebnisse ansehen kann. Ihr wollte es selbst ausprobieren und auch nochmal ein gekipptes Google sehen? Hier:

Google – tilt Google – do a barrel roll

Habe es in IE9, FF7, Chrome 15 und Opera 11.52 getestet und nur bei Firefox und Chrome hat es funktioniert. Scheinbar können die anderen beiden das per CSS noch nicht umsetzen.

Das war es dann auch schon wieder!
Euer Wishu

(via)

Genau so wie Spieleanfragen und Anwendungsanfragen, kann man auch leider die Umfragen nicht direkt mit einem Rutsch blockieren. Auch gibt es keine Möglichkeit generell zu sagen, dass man Fragen in seinem Stream nicht haben möchte, man kann höchstens die gesamte Person ausblenden oder auch nur die Statusmeldungen. An dieser Stelle muss Facebook noch nachbessern, so wie ich allerdings das Facebook-Team einschätze, kann man darauf ewig warten.

Was aber, wenn ich die Statusmeldungen lesen will, mir die Umfragen allerdings vollkommen Wurst sind? Genau ich kann mit einem Trick die Umfragen bei Facebook ausblenden. Das Ganze funktioniert mit CSS und somit in jedem Browser, der eine Manipulation des Browserstylesheets ermöglicht. Also quasi in jedem handelsüblichen Browser. Für Chrome und Firefox gibt es hier die Erweiterung Stylish, die einem diese Arbeit abnimmt.

Kurze Erklärung: Normalerweise selektiert man in CSS ein bestimmtes Element mit einer ID oder eine Klasse. Das geschieht dann mit einer Raute (#elementid) oder einem Punkt (.Elementklasse). Wenn es allerdings – wie in diesem Fall – weder eine ID noch eine Klasse gibt, die das Element eindeutig als Umfrage identifiziert muss man etwas anderes finden, was nur Umfragen haben. Hier hat Facebook ein eigenes Attribut namens data-ft erstellt und packt hier Dinge hinein, die das Element näher beschreiben.

In diesem Attribut sind sehr viele Daten drin, meist wiederholen sie sich, nichts einzigartiges also. Bei Umfragen ist allerdings noch ein Part drin, der einzigartig ist. Dieser hat den klangvollen Namen StreamStoryVoteQuestionPoll und findet sich logischerweise nur bei Umfragen. Somit kann in CSS bestimmen, dass jedes Listenelement (li) das im Attribut an irgendeiner Stelle (*=) diesen Part enthält, angesprochen werden soll. In dem Fall mit display:none, was das Ding ausblendet.

Dadurch ist es noch nicht einmal viel Code, es sind nur 3 Zeilen (je nach Formatierung auch nur eine) und ich war so frei die unnützen Menüpunkte »Freunde finden« und »Startseite« oben rechts zu entfernen. Denn auf die Startseite kommt man auch über das facebook-Logo und Freunde finden kann man auch in der linken Sidebar. Dazu kommen also nochmal 3 Zeilen Code:

.topNavLink.middleLink {
display:none;
}

body.home li[data-ft*=StreamStoryVoteQuestionPoll] {
display:none;
}

Das war es auch schon. Die ersten 3 Zeilen behandeln die Menüpunkte und der Teil darunter die Umfragen. Es werden mit diesem Code nur die Umfragen auf dem Stream der Hauptseite und der Listen ausgeblendet, wenn man auf Seiten oder Profile geht, kann man sie noch einsehen. Wer es auch da nicht möchte, kann einfach das body.home entfernen. Dann wirkt das Ding global.

Hier noch kurz die Links zu Stylish:

Stylish für Firefox Stylish für Google Chrome

Das war es dann auch schon wieder!
Euer Wishu

Viel gibt es nicht zu sagen. Die Bedienung ist Kinderleicht und erinnert etwas an Photoshop. Die Möglichkeiten sind nahezu unbegrenzt und die Palette an Presets ist extrem Hilfreich und spart Arbeit. Achso ja, die Browserkompatibilität ist übrigens überragend und deckt nicht nur Chrome, Safari und Firefox ab, wie der oben erwähnte Generator. Selbst der Internet Explorer spielt da mit. Somit steht CSS-Verläufen nichts mehr im Wege!

Ultimate CSS Gradient Generator

Das war es dann auch schon wieder!
Euer Wishu

Wie man auf dem einleitenden Screenshot bereits sieht, sind hier nicht irgendwelche Striche gemeint, die den Hintergrund verzieren sollen, sondern tatsächlich richtige Muster und auch Symbole. Als ich die »Ying und Yang«-Zeichen gesehen habe, war ich sogar wirklich beeindruckt. Weiter unten finden sich übrigens tatsächlich solch langweilige Dinge wie Striche Aber eben vollkommen ohne Grafiken.

Das Interessante ist übrigens, dass es in der CSS3 Patterns Gallery keine einzige Grafik gibt. Alles ist mit CSS gestalten, vom Texteffekt im Header, über die Patterns bis hin zum kleinen Schnipsel der Sprechblase gibt es keine Grafik auf der Seite. Finde ich persönlich recht beeindruckend. Ich habe mich bei dieser Aussage übrigens darauf verlassen, was mir Programme sagen und es wird nirgends ein Bild mitgeschnitten/heruntergeladen, also gehe ich davon aus, dass das stimmt.

Vergleich der 4 großen Browser

Dementsprechend unterschiedlich sieht die Website allerdings auch in den verschiedenen Browsern aus. Allerdings nicht schlecht. Es gibt in keinem Browser Fehldarstellungen, wenn er es nicht kann, lässt er es einfach. So wie es sich gehört. Für Webdesigner also recht erfrischend, da man es einsetzen kann ohne, dass irgendwer Probleme hat. Der, der einen älteren Browser nutzt, bekommt einfach die Hintergrundfarbe.

Warum Opera allerdings nur einen Teil darstellen kann, wundert mich allerdings ein bisschen. Opera kenne ich bisher eigentlich immer als Browser, welcher Standards doch immer recht frühzeitig einbaut, um so mehr freut es mich, dass Deutschlands am meisten verbreiteter Browser und ehemaliger Lieblingsbrowser – Firefox – damit sauber umgehen kann. Bei Chrome überrascht es mich nicht und war zu erwarten.

Ich finde die Idee auf jeden Fall ziemlich genial, naheliegend aber dennoch genial. Ich hoffe, dass diese Seite stark mit Content gefüllt wird, damit wir Webdesigner irgendwann auf ein riesiges Repertoir an BG-Patterns zurückgreifen können. Denn der Vorteil liegt hier klar auf der Hand. Es ist mit Copy-Paste getan, man muss keine Grafiken herunterladen, muss sie nicht einbinden und muss sie nicht verknüpfen. Und ein Nachteil ist in meinen Augen nicht gegeben.

CSS3 Patterns Gallery

Das war es dann auch schon wieder!
Euer Wishu

Somit kann ich recht schnell ansehnliche Verläufe erstellen und habe dabei noch nicht mal die Tipparbeit. Aber eben auch keinerlei Einschränkungen. Beim Farbwähler kann ich den HEX-Code einfügen oder per RGB einfach die Farbe bestimmen. Auch die Helligkeit kann man problemlos einstellen. Der Code wird live aktualisiert ebenso wie eine Vorschau, welche sich neben dem Farbwähler befindet, auf der sich zusätzlich noch Text befinden. Diesen kann man zwar leider nicht gestalten, doch sinnvoll ist es auf jeden Fall.

Direkt zum CSS3 Gradient Generator

Viel mehr gibt es dazu eigentlich gar nicht zu sagen. Und genau aus diesem Grund fasse ich mich auch einfach mal kurz und sage:

Das war es dann auch schon wieder!
Euer Wishu

Der Kampf mit den Webriesen

Die mobile Umsetzung von engadget läd zwar schneller, ist jedoch stark reduziert.

Mit Webriesen sind hier allerdings nicht unbedingt die großen Firmen gemeint, sondern eher die Websites, welche wohl davon ausgehen, dass jeder eine 6000er Leitung oder mehr hat. Seiten wie engadget sind zwar vorbildlich ohne unnötigen Einsatz von Flash entwickelt worden, doch leider hat die Website im unkomprimierten Zustand eine Dateigröße von 2015KB oder auch 2MB. Im komprimierten Zustand sind es immernoch 1241KB also etwas mehr als einen MB.

Dies macht nicht nur im mobilen Web eine schlechte Figur, sondern auch am PC oder Laptop. Zwar hat auch engadget eine mobile Website (endlich), doch hat diese nicht alle Funktionen, wie der große Bruder. Somit warte ich ganze gerne mal etwas länger als eine Minute, bis die Website geladen ist. Zum Glück surfe ich engadget nur selten mal an, doch denke ich, dass es da andere Punkte gibt.

Es gibt natürlich auch noch andere Beispiele, wie eBay. Hier wird zwar auch eine mobile Variante angeboten, doch ist diese kaum wert angesehen zu werden, da sie laut der Adresse noch zu WAP-Zeiten entwickelt wurde. Die vollständige Version von eBay schlägt unkomprimiert mit 845KB zu Buche.

Umsetzung per Stylesheet oder Umleitung?

Jetzt gibt es zwei Möglichkeiten das Ganze umzusetzen. Einmal kann man die einfache und schnelle Möglichkeit nehmen, welche einem CSS bietet oder man nimmt die etwas schwierigere Variante, welche eine Umleitung zu einer speziell angepassten mobilen Website führt

Umsetzung per CSS

CSS bietet glücklicherweise Möglichkeiten um von Gerät zu Gerät verschiedene Stylesheets auszuliefern. Hierbei gibt es verschiedene Medientypen. Darunter auch der Medientyp handheld. Durch diesen kann man gezielt mobile Geräte wie Smartphones, Organizer oder auch Spiele-Handhelds wie die PSP ansprechen.

Damit ist es einem erlaubt zumindest das Erscheinungsbild von Websites gezielt für das mobile Internet anzupassen. Dies kann unter anderem davor schützen, dass man allzu viel horizontal scrollen muss. Dies ist man als Nutzer des mobilen Internets zwar gewohnt, doch ist es immer angenehmer nur vertikal scrollen zu müssen.

Somit lässt sich schnell ein passendes Ergebnis erzielen. Die Site sieht gut aus, Background-Grafiken kann man leicht anpassen, sodass die Ladezeit kürzer wird – aber Moment, was ist mit dem Rest?

Genau! Bilder, welche auf der Website eingebunden sind werden nicht komprimiert. Ebenso der HTML-Code kann bei nicht optimierten Websites zum Flaschenhals werden.
Aus diesem Grund ist es nicht selten, dass eine Umleitung zu einer speziell angepassten mobilen Website wesentlich mehr Sinn macht.

Umsetzung per Umleitung

Bei der Umleitung auf eine speziell angepasste mobile Website hat man viel mehr Möglichkeiten die Ladezeit zu reduzieren. Hier kann man per PHP die Bilder herunterechnen lassen, sodass Abmessungen und/oder Qualität zugunsten der Ladezeit reduziert werden.

Ebenso kann man komplette Teile von HTML und JavaScript weglassen, welche auf der mobilen Variante keinen Sinn machen würden und somit nur unnötig Ladezeit in Anspruch nehmen würden. Hierbei hat man also wesentlich mehr Optimierungspotential, welches man ausschöpfen kann.

Hier gibt es die Möglichkeiten allgemein zwischen mobilen und nicht-mobilen Geräten zu unterscheiden oder direkt nach Gerät/Browser. Ich würde wahrscheinlich die einfache Variante nehmen und würde abfragen ob es sich um ein mobiles Endgerät handelt. Hierbei muss man dann zwar allgmein optimieren, hat allerdings auch weniger Arbeit.

Wenn man allerdings nur zum Beispiel ROMs für Android anbietet, macht es keinen Sinn dies auch für das iPhone zu optimieren und kann sich so auf die verschiedenen Android-Browser und -Auflösungen konzentrieren.

Portrait oder Landscape?

Bei Communitys ergibt die Landscape-Ansicht mehr Sinn als die Portrait-Ansicht

Zudem sollte man überlegen, wie die Präsentation am besten gelingt. Für einen Blog würde es keinen Sinn machen für die Landscape-Ansicht (Wenn man das Phone um 90° nach links dreht – horizontal) zu optimieren, sondern sollte dem Nutzer die Freiheit lassen ob er nun die kurzen Zeilen in der Portrait-Ansicht (So wie man ein Phone für gewöhnlich hält – vertikal) bevorzugt oder lieber alle Bilder im Beitrag sehen kann.

Dann ist mir durch meine Frau allerdings auch ein konkretes Beispiel begegnet, bei welchem es Sinn macht ausschließlich die Landscape-Ansicht zur Verfügung zu stellen. Bei Communitys! Bisher haben wenige Communitys gemerkt, dass das mobile Web immer weiter wächst und bieten deswegen nur sehr rudimentäre mobile Websites an. (Siehe schülerVZ/meinVZ und Facebook)
Eine Jugendcommunity aus Deutschland hingegen macht es richtig. Gemeint ist die kleine Plüschcommunity Jappy. Man mag über diese Plattform denken wie man will (ich bevorzuge es, davon gar nicht erst zu wissen), doch die mobile Website von Jappy ist die beste, die ich bei einer Community je gesehen habe.

Wenn ich mein Gedächtnis abrufe, dann würde ich Jappys mobilen Internetauftritt allgemein als beste mobile Umsetzung einer Website betiteln. Hier wurde alles durchdacht, keine Funktion fehlt (was sehr oft bei mobilen Umsetzungen gemacht wird) und es sieht einfach schick aus (zumindest nicht der 90er-Jahre-Stil, welcher im mobilen Web oft zu finden ist).

Ok, aber ich schweife ab. Auf jeden Fall sollte man sich überlegen, ob man wirklich auf die Portrait-Ansicht optimieren sollte oder ob es bei manchen Auftritten nicht mehr Sinn macht etwas mehr Platz zu nutzen und somit die Landscape-Ansicht vorauszusetzen.

Fazit

Es gibt also einiges zu beachten im mobilen Internet. Viele meinen vielleicht, dass es keinen großen Sinn macht ihre Website für das mobile Web anzupassen (und das sieht man leider auch noch oft), doch der Trend geht in die richtige Richtung.

Auch im mobilen Web oder gerade dort, sind Ladezeiten sehr wichtig. Die Nutzer von Smartphones oder ähnlichem sind es zwar gewohnt etwas länger auf ihre Inhalte zu warten, doch kann ich aus eigener Erfahrung sagen, dass eine gute mobile Umsetzung zum wiederkommen einläd.

Auf jeden Fall kann ich schon mal sagen, dass ich vor habe in Zukunft öfters auch über das mobile Web zu schreiben.

Was haltet ihr davon? Habt ihr noch Tipps zum Thema? Und surft ihr mit euren mobilen Endgeräten lieber auf mobilen Websites oder auf den Versionen, welche man auch auf dem Rechner zu Gesicht bekommt?

Das war es dann auch schon wieder!
Euer Wishu

Die Eigenschaft background ist eine Allround-Eigenschaft, welche alle anderen Eigenschaften enthalten kann um somit Code zu sparen und erneut die Ladezeiten zu verringern.

Wie bereits erwähnt, gibt es fünf Eigenschaften im CSS, welche zu background gehören. Allerdings können diese fünf ohne Probleme in die zusätzliche sechste Eigenschaft eingebunden werden.  Hier noch einmal die 5 Eigenschaften im Überblick:

• background-attachment – Bestimmt ob das Hintergrundbild beim scrollen mitwandert.
• background-color – Bestimmt die Hintergrundfarbe.
  
• background-image – Bestimmt das Hintergrundbild
• background-position – Bestimmt die Position des Hintegrundbildes
• background-repeat – Bestimmt ob und in welche Richtung der Hintergrund wiederholt werden soll.

Allein die Eigenschaftsnamen verbrauchen schon mehr – bei background-attachment ist es sogar mehr als das doppelte, als bei background. Das kann man ganz einfach umgehen. Denn mit der Eigenschaft background kann man sich diesen Code sparen und alle in eine Zeile tun.

Hier mal wieder ein Vergleich, wie es aussehen kann, wenn man alle 5 Eigenschaften benutzt:

background-attachment:fixed;
background-color:#123456;
background-image:url(images/bg.gif);
background-position:bottom right;
background-repeat:no-repeat;

Allein diese Angaben verbrauchen 158Byte. Das geht eindeutig platzsparender. Mit der Eigenschaft background sieht das Ganze so aus:

background:#123456 url(images/bg.gif) bottom right fixed no-repeat;

Die Zeile ist natürlich länger, dafür werden aber nur 67Byte verbraucht, Das ist eine Ersparnis von 91 Byte oder auch 57,59% (sollte ich mich nicht schon wieder verrechnet haben). Das sind sogar noch 10% mehr als bei den Richtungen von margin, padding und den border-Eigenschaften.

Die Reihenfolge, welche ich hier gewählt habe, hat nichts zu bedeuten, das ist einfach die Reihenfolge, an die ich mich gewöhnt habe.

Ich hoffe ich konnte euch erneut helfen euren Code etwas zu entschlacken um Ladezeiten einzusparen.

Das war es dann auch schon wieder!
Euer Wishu