Alle Beiträge mit dem Schlagwort „Spalten”
27. Oktober 2009 von Dieter | 14 Kommentare
Layout von Webseiten-Infos.de geändert
Aus folgenden Gründen habe ich in den letzten Tagen das Layout von Webseiten-Infos.de geändert:
- Ich hatte festgestellt, dass die Webseiten einschließlich der Startseite von Webseiten-Infos.de zu viele Links enthalten. Jede Seite deutlich über 100. Deshalb entfernte ich die Schlagwortwolke (tag cloud) aus dem Layout. Inzwischen habe ich es geschafft die Anzahl der Links auf der Startseite auf 80 zu reduzieren.
- Darüber hinaus fand ich aber auch die drei zusätzlichen Spalten über dem Fußbereich (Footer) überflüssig. Deshalb verlagerte ich deren Inhalt (neueste Kommentare, verwandte Themen und Linkliste) grundsätzlich in die rechte Spalte (Sidebar). Zum Entfernen der zusätzlichen Spalten über dem Fußbereich (Footer) musste ich bei dem hier eingesetzten Theme YAML Green (Update) im Administrationsbereich (Backend) über Design > Current Theme Options > Grundlayout Einstellungen > zusätzlicher Container über dem Footer lediglich “keiner” auswählen und mittels “Optionen speichern” festlegen.
- Des weiteren ersetzte ich die Icons aus der bisherigen Sprite-Grafik sprite.gif durch sprite3.gif. Dabei entfernte ich die Icons für interne Links und versuchte mehr Konsistenz bei den Icons herzustellen. Damit der weiße Hintergrund bei den Icons auch für die Kommentare passt, habe ich bei den Kommentaren die Hintergrundfarbe entfernt. Für den Hinweis auf die fehlende Konsistenz bei den Icons herzlichen Dank an toscho (siehe seine Kommentare beim Blogbeitrag “Neues Fenster für alle Seiten?“).
- Bei den Kommentaren habe ich den PHP-Code des Themes YAML Green in der functions.php so verändert, dass in der rechten Spalte (Sidebar) nun die Namen der Kommentierenden verlinkt sind und nicht der Titel des jeweiligen Blogbeitrags. Zudem wird nun in der mittels title-Attribut ausgezeichneten Kurzinfo (dem Tooltip) sowohl der Name des Kommentierenden als auch der Titel des Blogbeitrags ausgegeben. Wegen fehlender Programmierkenntnisse musste ich zwar die Methode Versuch und Irrtum (try and error) anwenden, aber es klappte.
- Auf der Hilfeseite habe ich dann die alten Icons einschließlich deren Erläuterung entfernt und die neuen Icons mit Erläuterungen ergänzt. Die bisherige Auflistung habe ich hierbei durch eine tabellarische Darstellung ersetzt.
- Den Text für die an oberster Stelle in der rechten Spalte (Sidebar) befindliche Checkbox “Externen Link in neuem Fenster öffnen?” habe ich um die Icons für externe Links ergänzt und angepasst.
- In der CSS-Datei habe ich die Abstände und gepunkteten Trennlinien in der rechten Spalte (Sidebar) geändert. Dadurch hat sich der typografische Weißraum (Leerraum, Whitespace) dort verringert und wirkt sie nun kompakter.
- Ferner entfernte ich in der rechten Spalte (Sidebar) bei der Suche die Überschrift. Sie sollte hoffentlich gleichwohl noch leicht zu finden und zu erkennen sein.
- Schließlich lagerte ich für die Pflege der Webseiten Bestandteile des Codes aus den verschiedenen Sidebar-Dateien in dem von mir modifizierten WordPress-Theme YAML Green mittels include in eigene Dateien aus. Das soll mir künftige Änderungen vereinfachen, da ich sie so nur noch einmalig an der jeweiligen includierten Datei vornehmen muss.
Ich hoffe sehr, diese Anpassungen beim Layout verbessern die Benutzerfreundlichkeit (Usability) von Webseiten-Infos.de.
Ich könnte noch einige Zeilen in der CSS-Datei einsparen, wenn ich die CSS-Anweisungen für die zusätzlichen Spalten über dem Fußbereich (Subcolumns) entfernen würde. Dann könnte ich allerdings nicht mehr direkt die zusätzlichen Container über dem Fußbereich (Footer) mit lediglich einem Klick aktivieren. Deshalb scheue ich davor zurück.
Als Nächstes beabsichtige ich nun die Zugänglichkeit (Barrierefreiheit, Accessibilty) von Webseiten-Infos.de zu verbessern. Dazu möchte ich versuchen, das von toscho berichtete Problem mit einer vom Nutzer bei seinem Browser festgelegten Mindestschriftgröße in den Griff zu bekommen.
Rückmeldungen und konstruktive Kritik sind wie immer willkommen.
Infos
Webseite veröffentlicht am Dienstag, den 27. Oktober 2009, um 22:36 Uhr, zuletzt geändert am
Mittwoch, den 28. Oktober 2009, um 23:53 Uhr.
Kategorie: Webdesign
Schlagworte: CSS-Sprites, Icons, Layout, Sidebar, Spalten, Themes, Webseiten, WordPress, YAML Green
1. Alex L.
Kommentar vom 29. Oktober 2009 um 04:33
Ich habe als Erstes meinen allgemeinen Browser-Test durchgeführt und rief deine Blogstartseite in den gängigen Browser mit neuester Version auf. Dies waren Chrome, IE 8, Opera 10, Safari und sogar Netscape Navigator.
Bei diesem Test ging es mir darum, ob die Blogstartseite ohne Weiteres aufgerufen wird. Ja das ist der Fall
Naja, ich bin kein Webdesigner und kann nur die Benutzerfreundlichkeit des Blogs und das schnelle Zugreifen auf die Bloginhalte beurteilen. Mir persönlich passt der neue Aufbau und das Design soweit.
Ich komme auf der Startseite zurecht, kann die Inhalte leserlich gesehen, gut wahrnehmen und finde alles, wenn ich was suche. Vll. liegt es auch daran, dass ich selbst blogge, wobei die SuMa-Besucher ein Blog als Solches inhaltlich ganz anders wahrnehmen!?
2. Dieter
Kommentar vom 29. Oktober 2009 um 10:05
@Alex
Vielen Dank für Deinen Browsertest!
Das Testen in verschiedenen Browsern ist wichtig, aber zeitraubend. Ergänzend sei noch darauf hingewiesen, dass Webseiten auch mit dem Firefox und Internet Explorer getestet werden sollten (siehe hierzu auch meine Blogbeiträge “Webseiten mit Browsern testen” und “Webdesign mit verschiedenen IE-Versionen testen“).
Es freut mich sehr, dass Du Webseiten-Infos.de benutzerfreundlich empfindest.
Solche Rückmeldung – egal ob positiv oder negativ – helfen mir bei der Beantwortung der Frage, wo noch Optimierungsbedarf und -potential besteht oder nicht.
Suchmaschinen nehmen eine Website ähnlich wahr wie der Textbrowser Lynx. Es gibt im Web aber auch Seiten, die Dir eine Ansicht wie durch einen Suchmaschinen-Spider ermöglichen.
3. Alex L.
Kommentar vom 29. Oktober 2009 um 21:34
Gerne
Der Browser-Test sagt zumindest einiges aus und man kann dann mit dem Ergebnis je nachdem etwas anfangen bzw. arbeiten.
Bei Firefox gehe ich immer aus, dass der Standard-FF-Nutzer immer die neueste Version des FF drauf hat und da man selbst dieselbe hat, sollte eigentlich alles im Lot sein.
Ich weiß auch, dass noch sehr viele Nutzer den eigenen FF nicht aktualisieren, aus welchem Grund auch immer!? Haben die älteren FF-Versionen überhaupt die automatische Update-Möglichkeit? Das weiß ich gar nicht mehr.
Danke für die weiterführenden Linkverweise. Woraufhin ich die Spider-View ausprobiert habe. Naja es kam nur aneinandergereihter Text dabei heraus (hatte etwas anderes erwartet
), aber es ist dennoch gut zu wissen, wie so was seitens eines SuMa-Spiders vonstatten geht.
4. Dieter
Kommentar vom 29. Oktober 2009 um 23:39
@Alex
Ich wusste auch nicht mehr, seit wann der FF eine automatische Update-Möglichkeit hat.
Über eine Suchanfrage bin ich auf einen lesenswerten Artikel zum Thema Autoupdate beim Firefox (Nachtrag vom 6. Juni 2011: Die Website mit dem Artikel ist leider nicht mehr online) gestoßen. Im Prinzip verfügte danach schon der Firefox 1.0 über eine Autoupdate-Funktion.
Die weiterführenden Links habe ich gerne gegeben. Links sind das Salz in der Web-Suppe.
Noch ein kleiner Nachtrag, weil Du mehr als nur den reinen Text bei der Darstellung wie ein SuMa-Spider eine Webseite sieht, erwartet hattest:
Der Google-Spider kann übrigens inzwischen nicht nur den Text, sondern in eingeschränktem Maße auch Flash-Dateien crawlen.
5. Alex L.
Kommentar vom 1. November 2009 um 09:02
@Dieter,
ich habe nach wie vor diese Auto-Updatefunktion und ich frage mich, warum manche Blogbesucher immer noch mit FF 2+ unterwegs sind. Wird das Update einfach ignoriert? Ich sehe in den Blogzugriffen in G-Analytics, dass viele Webuser aus mir unerklärlichen Gründen nicht mit der aktuellen Browser-Version im Web am Werk sind.
Das stimmt schon, dass man ohne die Linkverweise es ganz schlecht hat, vor allem auf den Blogs und auf den Contentseiten sowieso.
Für Webseiten mit diversen Flashinhalten ist es natürlich wie Weihnachten, dass Google Spider zahlreiche Flashs abgrasen können. Für reine Content-Blogs mit ein paar Pics und Screenshots ist das weniger von Bedeutung, nehme ich mal an. Aber es gibt Blogs, welche gerne Videos einsetzen. Das ist es schon wieder anders.
Dass Google auf dieser Schiene weiterentwickeln will/wird, gefällt mir ja dennoch.
6. Dieter
Kommentar vom 1. November 2009 um 11:54
@Alex
Die Beliebtheit und der damit verbundene Erfolg des Firefox beruht in einem erheblichen Maße auf den Addons und Themes. Dadurch kann jeder Nutzer ihn ganz nach seinen Bedürfnissen anpassen (Stichwort: Personalisierung). Wenn eine neue Version des Browsers herauskommt und eingesetzte Addons oder das Theme nicht damit kompatibel sind, dann schrecke auch ich erst einmal vor dem Update zurück. Das betrifft gerade die großen Versionssprünge (siehe hierzu beispielsweise auch meinen Blogbeitrag “Firefox 3.5 steht zum Download bereit“).
Natürlich gibt es auch noch weitere Gründe, aber das würde hier zu weit führen.
7. Alex L.
Kommentar vom 19. November 2009 um 18:25
FF als Webbrowser ist für mich unersetzbar, das ist ganz klar. Opera hat zwar auch vielerlei Widgets und Co. zum Installieren, aber warum Opera wenn Firefox lebt.
Ich habe übrigens gemerkt, dass der Grad der Addons-Inkompatibilität mit jeder neueren FF-Version ein Stückchen zurückgeht.
Fazit: Die Entwickler geben sich Mühe
8. Dieter
Kommentar vom 21. November 2009 um 11:49
FF als Webbrowser ist für Webentwickler aufgrund einiger Addons gerade zu Pflicht!
Nur exemplarisch seien da Firebug, YSlow, HTML Validator, Web Developer, ColorZilla und MeasureIt genannt.
Und sie alle laufen unter der aktuellen Version 3.5.5 des Feuerfuchses.
9. Alex L.
Kommentar vom 23. November 2009 um 02:59
Alle ausser HTML-Validator und Measurelt habe ich auch in meinem FF installiert. Hin und wieder nutze ich ein paar davon, wenn es ein gravierendes Blog-Problem besteht bzw. entstanden ist.
Also für einen leidenschaftlichen Webmaster sind viele dieser Erweiterungen eher ein Muss und wir WordPressler nutzen diese ja auch gerne.
10. Dieter
Kommentar vom 23. November 2009 um 07:37
HTML-Validator und MeasureIt sind sehr hilfreich, wenn man wie ich großen Wert auf Validität legt und gerne am Theme “schraubt”. Ich setze hier das geniale WordPress Theme YAML Greeen von Michael Preuss ein und habe es inzwischen kräftig modifiziert.
Firefox und WordPress haben ja einiges gemeinsam (siehe hierzu meinen Blogbeitrag “Gemeinsamkeiten von WordPress und Firefox“). Das dürfte neben den praktischen Webworker-Addons beim Firefox ein weiterer wichtiger Grund für die hohe Verbreitung des Firefox bei WordPresslern sein.
11. Alex L.
Kommentar vom 27. November 2009 um 17:22
Also dein Theme finde ich sowieso sehr übersichtlich und schnell, wenn man hier und her wechselt. Und ich habe mich bei dem Entwickler soeben etwas umgeschaut, finde eine Variante des Themes nämlich in Coffee-Farben mit der widget-fähigen Footerbar für meine Bedürfnisse ideal.
Separate Comments und Pingbacks sprechen einen Blogger so oder so an, keine Frage. Vielleicht schaue mir das mal in meiner Blogvorschau an. Das könnte NextYear was werden
.
Das die WordPressler sich in Firefox sehr wohl fühlen, entgeht mir ebenfalls nicht und ich persönlich mag den IE ganz und gar nicht, aber den deinerseits empfohlenen IE-Tester habe ich meiner Blogdomain dennoch angetan. Das Ergebnis war ganz ok.
Natürlich steht unsere alte gute Mozilla für die Vielfalt der Addons und Erweiterungen, was bei der Browserauswahl unter anderem mit am wichtigsten ist.
12. Dieter
Kommentar vom 27. November 2009 um 22:44
Ach das geht runter wie Öl. Danke Alex!
Eine ebenfalls modifizierte und auf Performance, sprich Geschwindigkeit optimierte Fassung des YAML Coffee Theme von Michael Preuß habe ich übrigens in meinem derzeit inaktivem Blog auf Jurafernstudium.de eingerichtet.
Ich warte ja sehnsüchtig auf das Premium-Theme Xtreme von Michael, das ebenfalls das CSS-Framework YAML verwenden wird. Das wird bestimmt der Knaller!
Zurück auf den Boden der Tatsachen. Das immer noch aktuelle Problemkind unter den Browsern. Webseiten-Infos.de sieht dank den IE-Hacks des CSS-Frameworks YAML noch akzeptabel beim IE6 aus. Beim IE5 und IE5.5 gibt es dagegen schon unansehnliche Darstellungsfehler. Das liegt aber nicht an YAML, sondern an meinen mangelnden Fähigkeit die Modifizierungen des Themes YAML Green auch optimal mit IE-Hacks für diese antiquierten Browser zu versehen.
Dein Blog sieht mit dem IE6 auch ok aus. Herzlichen Glückwunsch. Das ist nicht selbstverständlich.
13. olgakandyuk
Kommentar vom 5. Mai 2010 um 14:01
Vielen Dank für diesen Browsertest!
14. Dieter
Kommentar vom 5. Mai 2010 um 19:16
Gern geschehen!