zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Grafik, Design, Typografie
Seite neu laden Webseitenraster - are grids good?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.05.2007, 10:13
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard Webseitenraster - are grids good?

Der Einfachheit halber verlinke ich mal ein schweizerisches Blog, welches einige Quellen und Hilfsmittel zum Thema Webseitenrasterung, (insbesondere den Link zu Khoi Vinhs interessantem Beitrag zum diesjährigen SXSW ) zusammengetragen hat.
Es sind beileibe nicht alle, wer noch was weiß, immer her damit.

Grids are good!

Worum geht es?

Das Layout einer Webseite kann auf verschiedene Weise festgelegt werden.
So Pi mal Daumen, wie jeder mal angefangen hat bis hin zu einem Raster, an welches man sich hält.

Der Vorteil des Rasters ist eine gewisse Harmonie und gewissermaßen natürlich entstehende Proportionen, gleich, wie die Elemente auf der Seite verteilt werden.

Der Nachteil ist die Gebundenheit an ein Raster (Grid).
Freilich kann man sich ein Raster so wählen, dass es möglichst flexibel ist.
Manche nehmen dafür EM als Ausgangseinheit, eine gute Idee, wie ich finde.
Vielleicht setze ich das auch mal ein - wenn ich die Berechnung gelernt habe oder eines der auf der Webseite vorgestellten Tools benutze.

In jedem Fall sehr sehenswert, das pdf von Khoi Vinh.
Was haltet Ihr davon?
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.05.2007, 12:06
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

Der folgende Buchtipp von Marc passt auch recht gut zu diesem Thema. Hab mir das Buch bereits bestellt und schonmal etwas überflogen.

Die Arbeit mit Gittermodellen (Webseitenrasterung) wird recht anschaulich mit Beispielen erklärt.

http://xhtmlforum.de/44633-buchtipp-...tml#post325696

Zitat:
Zitat von marc Beitrag anzeigen
Sowohl auf dem deutschsprachigen, als auch auf dem englischsprachigen Büchermarkt existiert eine Vielzahl an guten Büchern zur technischen Nutzung von XHTML und CSS. Häufig wird in den Einleitungen dieser Bücher erläutert, warum der Einsatz von guter Struktur und CSS zur Gestaltung einer Website sinnvoll ist. Andy Clarke, Designer und Webentwickler aus Großbritannien, bietet in seinem Buch beides – technisch anspruchsvolle Hilfe und eine praxisnahe Begründung für dein Einsatz von CSS – und legt noch ein wertvolles Paket drauf: Inspiration!

Transcending CSS ist in vier Kapitel gegliedert: Entdeckung (Discovery), Prozess (Process), Inspiration und Transzendenz (Transcendence). Auf den ersten 100 Seiten der rund 350 Seiten erläutert der Autor dem Leser, was er unter dem Begriff „Transcending CSS“ versteht. Andy Clarke führt mit anschaulichen Codebeispielen im ersten Kapitel an das Thema „überschreitende CSS“ heran und unterstreicht noch einmal die Wichtigkeit von Semantik in diesem Context. Dem Leser werden hier, wie auch in den anderen Kapiteln, kleinere Aufgaben gestellt, die das „semantische Sehen“ und das Verständnis für die geschriebenen Dinge im Buch schulen.

Der Abschnitt „Process“ behandelt Themen wie Workflow, das Arbeiten mit Wireframes (Drahtgittermodell) und das Erstellen und Einsetzen von interaktiven Prototypen anstelle von statischen Layouts. Letzterer Teil ist besonders gut ausgearbeitet und stellt die Vorteile von interaktiven Prototypen beim Kunden dar. Abgerundet wird „Process“ mit einem Praxis-Workshop, in dem der Leser gezeigt bekommt, wie er einen solchen Prototypen effektiv und in guter Qualität erzeugt.

Besonders gut hat mit der dritte Teil zum Thema Inspiration gefallen, in dem Clarke sehr gut veranschaulicht, wie man seine Seite von Grund auf konzipiert und gestaltet. Er führt den Leser über Beispiele von anderen Web-Entwicklern und der Aufschlüsselung der Nutzung von Rastern in Zeitschriften hin zum Einsatz von Rastern beim Aufbau einer Website. Gespickt mit vielen Tipps für den Alltag, warum es z. B. Sinn macht ein Skizzenbuch zu führen, endet das dritte Kapitel mit der Hinleitung zum Titelthema, indem er mit viel Theorie in „die Kunst“ des Webdesign einführt.

Der letzte Abschnitt des Buches ist gefüllt mit Code- und Bildbeispielen. Der Leser erhält jede Menge handliche Anleitungen zum Thema „Transcending CSS“. Andy Clark macht einen Ausflug in die Möglichkeiten, die der Web-Entwickler mit CSS3 hat und veranschaulicht zum Abschluss fortgeschrittene Layouttechniken.

Insgesamt ist diese Buch sehr empfehlenswert und sollte im Bücherregal neben den Standardwerken von Dan Cederholm, Eric Meyer und Jeffrey Zeldman nicht fehlen. Es ist eine gute Ergänzung zu den Büchern der gerade genannten Personen und regt an bisher Gelerntes noch einmal mit anderen Augen zu betrachten. Die Zielgruppe sind eher fortgeschrittene Anwender, die mit den Grundlagen von CSS vertraut sind. Der Leser erhält Anregungen zu Planungsprozessen, seinem Workflow und viele hilfreiche Tipps, sowie eine satte Portion Inspiration. Das Englisch von Andy Clarke ist kein einfaches Schulenglisch, jedoch für Leser mit halbwegs guten Englischkenntnissen kein Problem. Meine persönliche Vermutung ist, dass die Übersetzung ins Deutsche nicht lang auf sich warten lässt.



Broschiert - 352 Seiten – New Riders
Preis: Euro 33,89
Erscheinungsdatum: Dezember 2006
ISBN: 0321410971
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.01.2008, 15:26
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Nachdem nun seit dem Erstposting beinahe ein dreiviertel Jahr vergangen ist, fällt auf, dass in der Zwischenzeit auf Raster (grids) basierende Layouts weltweit stark zunehmen.

Viele internationale Sites [4, 5] haben inzwischen die Vorteile dieser Layouts erkannt und setzen sie konsequent um. Und auch in Deutschland sieht man neuerdings - insbesondere im Bereich Zeitungen und Zeitschriften - die zunehmende Umstellung bisheriger, traditioneller Layouts auf Grids.

Zur Technik:
Auf code.google.com hat sich die Projektgruppe 'Blueprint' [2] gebildet, die ein komplettes Grundgerüst entwickelt hat, das die Entwicklungszeit solider und anspruchsvoller CSS-Rastersites deutlich herabsenkt. 'Blueprint' beinhaltet vorgefertigte, leicht zu verwendende Raster, anspruchsvolle Typografie und weitere sehenswerte Features. Selbst ein Druck-Stylesheet ist in dem kostenlosen Download-Paket vorhanden.
Der Nachteil von Blueprint ist die Bindung an fixe Breiten. Eine Version für flexible Breiten ist in Vorbereitung.

Im deutschsprachigen Bereich bietet der Österreicher Wolfgang Gerhard mit "Multiflex 5" [2] ein komplettes, lizenzfreies CSS-Paket an, das ebenfalls fixe Grids beinhaltet.

Speziell für flexible Grid-Layouts hat der lettische Webdesigner Kaspars D. die Site konstruktors.com [3] ins Netz gestellt. Er bietet neben "simple CSS-Snippets for creating grid & column based layouts" auch fertige Musterseiten an.

[1] Blueprint-Projektgruppe
[2] "Multiflex 5" von Wolfgang Gerhard
[3] Konstruktors.com von Kaspars D.

Beispielseiten für fixe Grids:
[4] The New York Times
[5] iA Informationsarchitekten Japan / Oliver Reichenstein


edit: Ich seh gerade, dass iA.Informationarchitects ebenfalls ein fertiges Template anbietet: The Ideal Website goes Open Source

Geändert von EvT (30.01.2008 um 16:44 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 30.01.2008, 17:40
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

Danke für die Links!
Mit Zitat antworten
  #5 (permalink)  
Alt 31.01.2008, 13:11
Benutzerbild von kampfgnom
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 22.11.2006
Ort: Radebeul
Beiträge: 1.808
kampfgnom befindet sich auf einem aufstrebenden Ast
Standard

Auch von mir einen herzlichen Dank.
Da ich gerade bei der planung meines neuen Layouts bin (Danke PARA!!!), is das sehr nützlich
__________________
Meine Spielwiese: http://blog.kanedo.net
Ich bei Flickr? Da: Flickr: Fotostream von kanedo-projekt
Für open Source Liebhaber: open Com

Auch ich Zwitschere als @kanedo
Mit Zitat antworten
  #6 (permalink)  
Alt 01.02.2008, 11:19
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Moni!

Aus meiner Sicht stellen Grids eine Kampfansage an die Flexibilität einer Website dar! Wenn vor allem mit grafikbasierten Breiten gearbeitet wird, dann ist der größte Vorteil einer Website ohne wirkliche Not verschenkt - finde ich schade!

Grids kommen aus dem Bereich Print-Layout - dort sollten sie besser auch bleiben! Auch wenn sehr viel Printlayouter ihre Arbeitsweise gern 1 zu 1 ins Web übertragen sehen möchten - man muss sich ihrem Wunsch ja nicht unüberlegt beugen!
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #7 (permalink)  
Alt 01.02.2008, 11:45
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Hallo Dieter

sehe ich nicht so. Du kannst grids auf em's aufbauen und dann sind die genauso flexibel wie alles andere auch. Worum es geht ist, eine immanente Struktur zu schaffen, die bei Templates und Untertemplates oder Änderungen irgendwelcher Art gleich den visuell-strukturellen Rahmen vorgibt, so dass sich Änderungen harmonisch einfügen - weil eben das Konzept schon vorher erstellt wurde.

Die Arbeit macht man sich in der Regel sowieso, halt nur nicht so konsequent.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #8 (permalink)  
Alt 01.02.2008, 11:48
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo, Andir!

Das befürchte ich:
Zitat:
Wenn vor allem mit grafikbasierten Breiten gearbeitet wird,
Da liegt für meine Begriffe der Hase im Pfeffer.
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #9 (permalink)  
Alt 01.02.2008, 12:02
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Naja, die meisten Leute verwenden sowieso pixelbasierte Layouts, daher dürfte deren Anteil nicht ansteigen. Eine erhöhte Mißbrauchsgefahr sehe ich da nicht, eher die Möglichkeit, dass sich die Leute mit den visuell-strukturellen gegenseitigen Abhängigkeiten besser auseinandersetzen und so zu besseren Layouts kommen.

Merke: Je besser eine Seite gestaltet ist, desto besser kann sie der Nutzer bedienen. Klare visuelle Aufteilungen und Hierarchien helfen dabei.

Edit: Ah,. Hasenpfeffer... lecker
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 01.02.2008, 12:29
Benutzerbild von Geronimo
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.06.2004
Beiträge: 2.641
Geronimo sorgt für eine eindrucksvolle AtmosphäreGeronimo sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Dieter Beitrag anzeigen
Aus meiner Sicht stellen Grids eine Kampfansage an die Flexibilität einer Website dar!
Nicht zwangsläufig. Der Trend geht ohnehin weg von einer reinen Schriftvergrößerung und hin zu einer Layoutvergrößerung.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Google - Der eigene Browser FloZen Offtopic 154 21.09.2008 15:13
Nicht valieder Code von Map24 sveniboy (X)HTML 7 06.11.2005 20:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:42 Uhr.