Google+ Design an die eigenen Bedürfnisse anpassen: Breitere Spalten und feste Navigationsleiste
Google hat mit den Designanpassungen für Google+ wieder einmal rege Diskussionen ausgelöst. Verwundert wohl auch weniger, schließlich gab es schon mehrere große Designanpassungen bei denen sich nie alle Benutzer zufrieden zeigen. Die Ambivalenz zeigt sich auch bei uns in den Kommentaren, als Caschy euch gestern Abend zeigte, wie man den Google+ Stream wieder automatisch aktualisiert. Die Geschmäcker sind wie immer sehr verschieden, daher zeigen wir euch einen Weg, wie ihr das Design an eure persönlichen Bedürfnisse zurechtbiegt.
[werbung]
Die erste Umstellung werden die meisten von euch schon gefunden haben. Das mehrspaltige Layout bricht mit den bisherigen Gewohnheiten und versucht mehr Informationen auf einen Blick zu bieten. Sieht bei Pinterest oder bei Inhalten mit vielen Bildern auch gut aus, bei reinen Textbeiträgen finde ich den Lesefluss aber störend. Stellen wir dies also zuerst unter Mehr oben in der Menüleiste um.
Sieht danach aber meiner Meinung nach immer noch nicht optimal aus, die einzelne Spalte ist nun sehr schmal dargestellt und verschwendet dann recht viel Platz. Breitere Spalten gefallen mir da schon deutlich besser, zudem kann die linke Navigationsleiste ruhig dauerhaft eingeblendet sein und ich muss nicht jedes mal nach oben links um dieses aufzuklappen.
Stefan Münz hat dazu einen praktischen Tipp auf Google+ gepostet, der mithilfe von Stylisch (gibt es für Chrome, Firefox, Opera und Safari) die Spaltenbreite von 520 auf 900 Pixel bringt. Nachdem ihr Stylish über die bekannten Wege installiert habt, installiert dieses benutzerdefinierte Stylesheet und die Spalten sind deutlich breiter. Dies kann man sich jetzt aber noch an die eigenen Wünsche anpassen. Begebt euch daher in die Erweiterungsleiste, klickt auf das Symbol von Stylish und wechselt über Bearbeiten in die Eigenschaften.
Ich verwende dafür folgenden Code aus einzelnen Kommentaren auf Google+, der z.B. die Seitenleiste immer anzeigt. Einiges ist von euch selbst anpassbar, die relevanten Stellen sind kommentiert.
#contentPane > div[jsaction] > div:last-child > div:first-of-type,
#contentPane > div > div[jsaction] > div:last-child > div:first-of-type {
width: 1050px !important;
}
#contentPane div[guidedhelpid="streamcontent"] {
width: 800px !important;
}
#contentPane div[guidedhelpid="streamcontent"] > div > div {
width: 800px !important;
}
#contentPane div[guidedhelpid="streamcontent"] > div > div > div {
width: 800px !important;
}
#contentPane div[guidedhelpid="sharebox_launcher"] > div {
width: 868px !important;
max-width: 768px !important;
}
#contentPane div.dQ {
width: 768px !important;
max-width: 868px !important;
}
#contentPane div.VC {
font-size: 15px !important;
}
#contentPane div.hqcudc {
font-size: 15px !important;
}
#contentPane div.vFgtwf {
font-size: 14px !important;
}
/* Seitenleiste fest anzeigen und ohne Animation! */
.hpLg1e {
width:190px!important;
margin-left:-30px!important;
-webkit-box-shadow:none!important;
box-shadow:none!important;
overflow:hidden;
}
.Nj.mu>div {
margin-left:180px!important;
}
/* Beiträge und Kommentare vollständig anzeigen */
.DIcL3e,.Gm {
max-height:none!important;
}
.JBNexc.a-n,.syxni.a-n,.lZkdDe.pFZ7Ne {
display:none!important;
}
/* Keine Kommentarbox mehr! */
.mP {
max-height:none!important;
}
/* Neue Beiträge anzeigen rechts */
.a-f-e.c-b.c-b-M.f8ocqf.Ri07Rc {
right:-920px!important;
}
/* Leiste oben */
.gb_gbsf {
top:-100px!important;
}
.gb_gbsf > .gbt.gbtn {
top:140px!important;
}
.FVPtwe,.SfVZpc,.gIdB1,.KiWa0b,.ohUUPb {
top:0!important;
}
.oBgpme.ODc6zb.AYoUUe {
top:-100px!important;
}
.WrxPu {
margin-top:0!important;
}
.XXuWB.iYjCM.gIdB1{
background-color:#fff!important;
}
.eE.Fp a, .wm a, .Mi a {
color:#427fed!important;
}
.eE.Fp a:visited, .wm a:visited, .Mi a:visited {
color:#1f3b6f!important;
}
Diesen könnt ihr einfach so in den Editor bei Stylish einfügen, speichert ihn ab und nach dem Neuladen der Seite sollte Google+ in etwa dem oberen Screenshot entsprechen. Das einzige Problem was mich jetzt noch stört ist, dass sich Google+ etwas träge anfühlt. An der generellen Geschwindigkeit kann Google gerne noch etwas arbeiten. Wer mit Google+ in der mehrspaltigen Ansicht keine Probleme hat, kann natürlich weiterhin dabei bleiben, mir gefällt es nach diesen Optimierungen aber deutlich besser.
Danke, nun sieht G+ doch wieder ganz passabel aus.
Ich finde das neue D-Sign auch enorm unschön! Mir macht das Verweilen auf der Seite gar keinen Spaß mehr.
bei “
/* Beiträge und Kommentare vollständig anzeigen */
.DIcL3e,.Gm {
max-height:none!important
und
/* Keine Kommentarbox mehr! */
.mP {
max-height:none!important
}
fehlt das Semikolon… müsste also übersehen werden, wenn man das so als Stylesheet einbindet…
Patrick, die meisten schauen g+ auf dem Tablett und Smartphone. Bemess dem Browser doch nicht soviel Aufmerksamkeit. Wenn es auf dem Desktops so aussieht wie auf dem Tablett , dann bekommt man schon mal kein Alien Gefühl. Imho sehr gut das neue design.
Frickelscheiss, sorry.
@Ansgar: Ich nutze es fast nur auf dem Desktop, von daher die Anpassung. Steht jedem frei es zu nutzen oder zu lassen 😉
@Konstantin Danke.
Habe das Script mal ein wenig auf noch größere Bildschirme angepasst.
Für meinen 24″ Monitor find ich einfach besser, wenn 1400px (statt 900) für die Beiträge vergeben sind…
Passt jetzt aber nicht mehr mit der dauerhaft angezeigten Seitenleiste, dafür müsste man eventuell 1300 Pixel für die Beiträge erlauben…
Hier geht’s zum angepassten Script – für diejenigen, die das Script aus dem Beitrag installiert haben gehts leicht: Google+ aufrufen, auf das Stylish-icon klicken und für das Script dann „Bearbeiten“ auswählen und den kompletten Text mit dem von mir ersetzen…
Alle anderen müssen ein neues Stylish-script anlegen
@Ansgar: Kannst Du das belegen, bzw. gibt es da irgendwelche Zahlen dazu (rein aus Interesse)? Ich kenne kaum jemanden, der das mobil nutzt, geschweige denn ausschließlich mobil.
Danke für den Style! Damit wird G+ wieder benutzbar.
Und welches von beiden wird dann angezeigt, @moinmoin?
Noch eine kleine Modifikation; wem das dauerhaft eingeblendete Menü zu gross ist, hier mal eines nur mit den Icons. Das hilft auch auf den Seiten wie Fotos usw., wo sonst das Menü den Inhalt zu weit überdeckt…
/* Seitenleiste fest anzeigen und ohne Animation! +Nur Icons anzeigen */
.hpLg1e {
width:50px!important;
margin-left:-30px!important;
-webkit-box-shadow:none!important;
overflow:hidden;
}
.A9a, .bOa, .krQ2me, .cC0Rte, .aDCFEe, .xWmffd, .xzfrxe, .jsnqwd, .IvwRoc, .Um8btf, .qfWBDb, .c6sYue {
display:none;
}
/* Ende */
Ist noch nicht perfekt; bei einem Seiten-Reload werden komischerweise die ausgeblendeten Texte abgeschnitten angezeigt, bis man den Tab einmal aus dem Fokus nimmt und dann wieder aufruft….
Änderung, um die Texte wirklich zuverlässig loszuwerden: (nur der relevante Teil)
.A9a, .bOa, .krQ2me, .cC0Rte, .aDCFEe, .xWmffd, .xzfrxe, .jsnqwd, .IvwRoc, .Um8btf, .qfWBDb, .c6sYue {
display:none;
visibility:hidden;
color:#ffffff;
}
Und so sind auch die Texte unter dem Menü („Feedback“ usw.) zuverlässig ausgeblendet:
.A9a, .bOa, .krQ2me, .cC0Rte, .aDCFEe, .xWmffd, .xzfrxe, .jsnqwd, .IvwRoc, .Um8btf, .qfWBDb, .c6sYue, .lZkdDe, .pFZ7Ne {
display:none;
visibility:hidden;
color:#ffffff;
}
@Sascha ich find grad die zahlen web/mobile nicht mehr. Was ich gefunden hab :http://marketingland.com/google-hits-135-million-users-27904 von vor 1/2 Jahr.
Ich habe für Chrome noch Zoomy installiert. Damit kann ich Webseiten zoomen (ähnlich wie bei Opera). Der Vorteil, es merkt sich die Einstellungen für die jeweilige Seite und auch für Unterseiten. Ich habe nun Cachys Skript installiert, dazu noch gezoomt, und jetzt passt es perfekt für mich 🙂
Danke 🙂
Google+ what?
Achso das Hässlichen SocialNetwork für Designer!?
Viele Große Bunte Bilder, Text verschwindent klein, nutze ich sein Monaten nicht mehr.
Danke für deine Bemühungen aber nutzt nichs auf einem Tablet.
Auf einem Tablet im Browser ist Google+ nicht zu ertragen und als App auch nicht wirklich.
Die Entwicklung Google und Mobil ist zur Zeit einfach eine Katastrophe.
man muss selber dran rumfrickeln, damit G+ wieder einigermaßen aussieht? Da hat Google ja mal alles richtig gemacht, NICHT.
Google ist dafür verantwortlich, dass seine Services angenehm zu nutzen sind, nicht die User.
… ich verstehe es nicht, warum seit Eröffnung des Dienstes Google+ sehr oft das Design komplett ausgewechselt wird und man als Benutzer immer wieder sein Profil und Coverphoto neu einstellen muss. Ärgerlich ist auch, dass das Coverphoto mit Profilbild auf dem Desktop, Tablet und Smartphone jeweils an anderer Stelle steht und ein anderes Format hat.
Interessant ist auch zu wissen, wie man das Headerbild (Banner) oben kleiner bekommt, was ja von Haus aus leider nicht vorgesehen zu sein scheint.
Dazu einfach das Bild in der passenden 1080p-Auflösung hochladen, auf das Bild klicken, bearbeiten, zuschneiden in der Höhe, abspeichern, überschreiben und voilá, kein flächendeckender Header mehr. 😉