Viele Einstellmöglichkeiten hat man nicht. Man kann allerdings aus 12 verschiedenen Effekten auswählen, mit denen man dann problemlos weiter arbeiten kann. Nicht Besonderes, aber durchaus eine kleine Empfehlung wert.

CSS Text Shadow Generator

Das war es dann auch schon wieder!
Euer Wishu

Navigation

Sehr ansprechend finde ich die Navigation auf der linken Seite, die permanent sichtbar ist. Wenn das Fenster zu niedrig ist, werden nicht anzeigbare Menüpunkte einfach unter »Mehr« gesammelt und sichtbar, sobald man mit der Maus drüber fährt. Das Beste an der Navigation ist wohl, dass man sie fast komplett anpassen kann. Man kann die Position der Icons so anpassen, wie man mag oder nicht benötigte Icons unter »Mehr« sammeln. Einzig »Übersicht« ist nicht bewegbar, das wird man aber auch kaum brauchen. Wenn man mit der Maus über »Fotos« fährt, dann bekommt man ein kleines Menü, welches ich geteilter Meinung sehe. Einerseits ist es sicherlich praktisch, allerdings auch nicht notwendig, da ich nach wie vor oben rechts meinen Mitteilen-Button habe, unter dem ich diese Funktion auch habe. Wäre das für jeden Menüpunkt vorhanden, wäre es sicherlich nicht schlecht, so einzig und allein für Fotos, halte ich es für unnütz.

Profil

Hübsch gemacht finde ich das neue Profil. Endlich ein großes Profilbild und endlich ein Profilbanner. Ich hatte zwar noch keine Zeit mir einen zu erstellen, aber die Idee mag ich. Klar, hat Facebook auch, aber bei Google+ ist es nicht so wuchtig und angenehmer mit dem Profilbild vereint. Schön finde ich auch, dass ich die Wahl habe zwischen 5 Bildern und dem Banner. Zudem wird der Banner auch im Miniprofil angezeigt, hier mal als Beispiel Google.

Chat

Endlich hat der Chat einen prominenteren Platz gefunden. Was hat es mich aufgeregt, dass der Chat (Ist übrigens Google Talk, hat also auch jeder auf seinem Android-Smartphone) immer nur eine Nebenrolle hatte. Ich chatte so ziemlich täglich damit und das kleine Futzelding links war nicht nur hässlich, sondern auch fummelig. Die rechte Seite wird nun vom Chat dominiert. Wenn das Fenster zu klein ist, taucht er so auf, wie man es früher vom Facebook gewohnt war. Kleiner Balken unten rechts, der die Kontakte zeigt, wenn man drauf klickt. Hier hat Google also wieder mitgedacht.

Kritik

Allerdings gibt es auch eine ganze Menge, die Google einfach richtig heftig versemmelt hat. An vielen Punkten hat Google einfach nicht nachgedacht und ich frage mich teilweise wirklich, welche Köpfe an diesen Stellen geschraubt haben, denn schön, praktisch oder sinnvoll ist oftmals anders.

Whitespace

In erster Linie wird Besitzern von großen Monitoren auffallen, dass der Platz rechts neben dem Stream schlichtweg leer ist. Google selbst sagt, sie haben damit noch was vor. Befürchtungen um Platz für Werbung haben sie zerstreut. Dennoch bleibt der Ärger groß. Vorher war Google+ zentriert, da war es kein Problem, ob links oder rechts mal eben 400px über waren. Jetzt liegt das Ding aber links an und es fällt schon gewaltig auf. Ein wenig Abhilfe könnt ihr euch mit folgendem Snippet schaffen.

#content:not(.dUoFge) #contentPane {  
max-width: 960px !important;
margin:auto !important;
}
#contentPane>div.HTk6wd {
margin:0 !important;
}

Dies mal eben in Stylish oder ähnliche Erweiterungen für den Browser eurer Wahl eingefügt, auf Google+ gemünzt und schon ist die Seite zentriert. Macht meiner Meinung nach eine ganze Menge aus und ist angenehmer, als den Content ins unendliche zu strecken. Sieht dann so aus: Eine Quick’n'dirty-Übergangslösung, mir reicht es so allerdings erst einmal. Auch wenn man hier und da sicherlich etwas Feintuning einbauen könnte. Das :not(.dUoFge) schließt übrigens die Foto-Seiten aus, die über die ganze Breite gehen.

Schriftfarbe

Was zum Henker hat sich Google dabei gedacht mittelgraue Schrift auf hellgrauen Grund zu packen? Also ganz ehrlich, das geht nunmal gar nicht. Die Lesbarkeit ist wirklich extrem schlecht, sodass ich mich auch hier ran gesetzt habe und das Ganze mal ein wenig anpassen musste, damit es auch mir zusagt. Hier das CSS für die Kommentare, um sie etwas lesbarer zu machen. Was sich Google allerdings bei den Klassennamen dachte, ist mir ein Rätsel.

div.We a.cs2K7c { font-weight:bold !important } div.We a.cs2K7c:hover { text-decoration:underline !important } .wd.bi2Sed div.kH { color:#222 !important; }

So sieht das ganze dann vorher und nachher aus:

Über der roten Linie das, was Google für sinnvoll hielt und unter der roten Linie das, was ich für sinnvoll halte. Die Namen musste ich dick machen, sonst hätten sich diese gar nicht mehr unterschieden und die Übersichtlichkeit wäre flöten gegangen. Zudem noch ein einfacher Hover-Effekt, für die Links, den Google scheinbar für unnötig hielt.

Fotos

Kennt ihr die Fotowand von Google+ mit den Fotos der letzten Tage eurer Eingekreisten? Ja? Ich mochte sie. Gibt es nicht mehr. Der Punkt Fotos im Menü bringt einen zu seinen eigenen Fotos. Mehr nicht. Es dreht sich dort nur noch um sich selbst. Die Fotowand ist verschwunden. Finde ich richtig schade. Ich hoffe, dass Google das Ding wieder zurück bringt.

Kreise

Die Kreise von Google+ Das Markenzeichen. Das Wichtigste. Der Dreh- und Angelpunkt in Google+. Eh und je hatte man die Kreise in der Sidebar und konnte so schnell den Stream wechseln. Die ersten (in meiner Erinnerung) 10 wurden rechts angezeigt. Darunter die Sparks. Mehr anzeigen lassen konnte man sich mit einem Klick auf Mehr. Und jetzt? Das:

Man sieht die ersten 2 Kreise und den kompletten Stream. WTF!? Google. Was soll das? Ganz ehrlich? Rechts daneben ist noch so viel Platz. Ich könnte die ganze Leiste voll haben. Wieso kann ich die Navigation sortieren, was definitiv nett ist, aber nicht notwendig, aber nicht die Anzahl der Kreise bestimmen, die dort angezeigt werden? Ich hätte da gerne ein paar mehr. Das ist so inkonsequent wie dämlich.

Und sonst?

Sonst ist alles ok. Zumindest habe ich bisher nichts gefunden, was mich noch zusätzlich wirklich aufregt. Es ist ein Schritt in die richtige Richtung, allerdings mit Augenbinde und Reiszwecken am Boden. Ich finde es im Gesamten hübsch, es ist wirklich nicht schlecht, aber es ist so unglaublich unfertig, dass es mir momentan nur mit meinen kleinen Anpassungen überhaupt noch Spaß macht.

Was meint ihr?

Mich würde tatsächlich mal eure Meinung dazu interessieren. Was hasst ihr besonders? Braucht ihr vielleicht ein bisschen Hilfe beim umgestalten? Ich kann sicherlich die eine oder andere Änderung schnell zusammen tippseln.
Schreibt’s mir einfach in die Kommentare, sie sind offen und ihr könnt euch auch mit Twitter oder Google+ anmelden

Das war es dann auch schon wieder!
Euer Wishu

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