zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grid-Design vs. flexibles Design - Geschmackssache?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.07.2008, 14:34
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2008
Beiträge: 83
accessoire befindet sich auf einem aufstrebenden Ast
Standard Grid-Design vs. flexibles Design - Geschmackssache?

Was ist denn nun zu empfehlen? Ist es nur Geschmackssache, oder wie schauts aus mit den Vor - und Nachteilen. Beim Grid-Design wird gerne mal der Text einfach abgeschnitten, wenn man die Schrift vergrößert und das passt mir nicht wirklich in den Kram.

Mal noch eine grundlegende Verständnisfrage: Frameworks wie z. B. YAML, blueprint & co. dienen dazu das Programmieren zu erleichtern, richtig? Heißt dass, dass diese Programme wie z. B. Dreamweaver ersetzen oder wie genau verwendet man sie?

Geändert von accessoire (15.07.2008 um 14:49 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.07.2008, 14:58
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

Yaml und Co., das sind keine Programme, sondern wie gesagt CSS framework´s.
Diese bieten einen Rahmen (Frame) der einem das Arbeiten erleichtern kann, bedürfen aber der Einarbeitung.
Ein Grid ist eine Designhilfe, mittels der ein Layout anhand eines Layout-Gitters erstellt wird. Dazu muss man nicht unbedingt ein framework nutzen.
Grids sind mit KnowHow durchaus auch flexibel zu machen (Stichwort em).

Hier ein gutes Beispiel wie man Grids erkennen und einsetzen kann - es gibt dazu viel mehr, bis hin zu untergeordneten Micro-Grids:
Subtraction: Grid Computing… and Design
Quelle: Andy Budd::Blogography: Layout Grid Bookmarklet

Ich selber nutze Yaml und Co nicht, aber habe mich Anhand dieser Lektüre sehr mit Grids im Entwurfsprozess angefreundet.

Geändert von paracelsus (15.07.2008 um 15:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.07.2008, 20:08
Benutzerbild von RottenRoller
Benutzer
neuer user
 
Registriert seit: 12.05.2008
Ort: Flingern rules!
Beiträge: 53
RottenRoller befindet sich auf einem aufstrebenden Ast
Standard

apropos flexible layout/grid design/dirk jesse.

die neue browsergeneration wirft ein paar neue aspekte in den raum:
Flexible Layouts: Challenge For The Future | How-To | Smashing Magazine

sollte man sich mal reingezogen haben...
__________________
www.freizeitler.de
Mit Zitat antworten
  #4 (permalink)  
Alt 16.07.2008, 10:06
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

Grids als solches haben erstmal wenig mit Zooming zu tun.
Aber schon richtig, ein Grid flexibel zu kriegen ist mühsam. Demzufolge und weil die Browser das Pagzooming bald alle können werden (?) überlege ich schon, ob ich meine bisherige em Methode aufgebe und wieder zu Pixelorientiertem Design gehe - was mir als vom Print kommender natürlich auch mehr liegt.

Ich personlich finde das Pagezooming sehr innovativ und wichtig, da dabei auch die wenigsten Layouts (ausser im IE 7) zerbrechen, Bilder mitgezoomt werden - ganz ohne CSS Trickserei.

Aber ob flexibel oder starr, Grids sind ein perfektes Mittel fürs Layout - siehe Zeitungen ... ohne Gitter wäre jede Tageszeitung zur Unübersichtlichkeit verdammt.
Mit Zitat antworten
  #5 (permalink)  
Alt 16.07.2008, 12:06
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von accessoire Beitrag anzeigen
Was ist denn nun zu empfehlen? Ist es nur Geschmackssache, oder wie schauts aus mit den Vor - und Nachteilen. Beim Grid-Design wird gerne mal der Text einfach abgeschnitten, wenn man die Schrift vergrößert und das passt mir nicht wirklich in den Kram.
Es gibt momentan viele leidenschaftlich kommentierte Blog-Beiträge dazu, wobei die Begriffe "Grid vs. flexibel" oft ein bisschen wischi-waschi gebraucht werden und jeder etwas anderes damit meint. Deswegen erst mal ein paar Worte vorweg:
  • Ein Grid ist vom Wort her einfach nur ein Raster zum Gestalten. Zeilen und Spalten, die die zu gestaltende Fläche systematisch aufteilen. Designer verwenden diese Raster seit Ewigkeiten, z. B. auf der Basis des goldenen Schnitts.
  • Die Bezeichnung Grid-Design oder auch Grid-Layout hat sich für Layouts eingebürgert, die meist feste Pixel-Breiten haben und sich stark an einem Raster orientieren. Beispiel sind mit Blueprint erstellte Designs.

1. Fest versus flexibel: Pixel, em und %
Ein Grid-Design kann aber durchaus flexibel sein. Dazu muss man die Breiten statt in px in % oder em definieren.

So hat YAML-Erfinder Dirk Jesse die Beispielseite von Blueprint mit festen Breiten mit Hilfe von YAML Subtemplates nachgebaut: Blueprint Beispielseite - flexible Breiten. Dirk hat auch einen Artikel zur Entstehung der flexiblen Variante geschrieben.

Ein Grid-Layout müsste also nicht zwangsläufig feste Pixelbreiten haben. Die Orientierung an einem Raster ist grafisches Grundwissen, wie es sehr schön in dem von paracelsus verlinkten Buch beschrieben wird. Die Umsetzung dieses Rasters auf Webseiten könnte aber genausogut mit % oder em erfolgen. Man findet "Raster" und "Pixel" oft zusammen, weil eine von Papier und Photoshop geprägte DENKWEISE eine natürliche Tendenz in Richtung Pixel zu haben scheint.


2. Inhaltsbezogene Vorgehensweise: Zuerst HTML, dann CSS
Neben "flexibel vs. fest" gibt es noch einen bemerkenswerten Unterschied:
  • Normalerweise schreibt man HTML und gestaltet diese Elemente dann mit CSS. Man geht vom Inhalt aus. Diesen Ansatz verfolgt YAML. Es gibt ein allgemeines HTML-Grundgerüst, die eigentliche Gestaltung erfolgt aber im CSS.
  • Die "Grid-Frameworks" machen das genau andersrum: Es gibt eine fertige CSS-Sammlung. Dieses CSS wird nicht verändert. Die Gestaltung erfolgt im HTML über die Zuweisung von Klassen für die HTML-Elemente.
Andy Clarke beschreibt diesen Unterschied in "Transcending CSS" ab S. 55 mit dem Satz "Mit CSS gestylte Seiten werden oft immer noch 'von oben nach unten, von links nach rechts' konstruiert", nur halt mit DIV statt mit TABLE.

Er empfiehlt stattdessen "Die inhaltsbezogene Vorgehensweise": Zuerst nur strukturelle HTML-Elemenente, dann das Design. Und er bringt wunderschöne und überzeugende Beispiele. Bemerkenswert daran ist, dass er von Haus aus Grafikdesigner ist und trotzdem den inhaltsbezogenen Ansatz bevorzugt, weil der der Flexibilität des Mediums "Web" besser entspricht.

Das was heute als "Grid-Layout" bezeichnet wird, verfolgt NICHT die inhaltsbezogene Vorgehensweise, weil das grafische Raster als Ausgangspunkt genommen wird.

Um die Verwirrung zu komplettieren: Man kann natürlich sehr wohl inhaltsbezogen arbeiten und das dann mit einem Raster gestalten. Man muss halt nur anders DENKEN, aber wer will das schon. Schließlich sind wir alle Gewohnheitstiere...
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«

Geändert von pmmueller (16.07.2008 um 12:11 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 16.07.2008, 12:39
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

Zitat:
Zitat von pmmueller Beitrag anzeigen
Um die Verwirrung zu komplettieren: Man kann natürlich sehr wohl inhaltsbezogen arbeiten und das dann mit einem Raster gestalten.
Ich gebe Dir vollkommen recht. Gerade oben stehender Satz ist der Ansatz nach dem ich zu arbeiten versuche. Ich konnte mich nie mit Yaml anfreunden obwohl ich dafür keinen Grund nennen kann - mag auch Gewohnheit sein, habe aber dutzende Seiten angesehen die damit erstellt wurden, und die sind teilweise sehr überzeugend.

Layout Gitter sind ein äußerst bewährtes Mittel zur Gestaltung - ich habe erst kürzlich angefangen dies auch für Websites zu übernehmen da ich vorher mehr vom Print weg wollte.
Weiter oben genanntes Buch hat mir aber gezeigt, das ich da auf dem Holzweg war.
Demnächst ist meine erste Gitterbasierende Seite online - ein Redesign meiner alten Gemeindeseite - wo ich, sehr leider, nicht inhaltlich verantwortlich bin.
Mit Zitat antworten
  #7 (permalink)  
Alt 16.07.2008, 12:41
Benutzerbild von Gumbo
XHTMLforum-Kenner
 
Registriert seit: 22.08.2004
Ort: Trier
Beiträge: 2.733
Gumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekannt
Standard

Was ich viel verwirrender finde sind die vielen unterschiedlichen Bezeichnungen: fixed, liquid, fluid, flexible, elastic, jello, adaptive, etc. Wer soll da noch durchsteigen?
__________________
Markus Wulftange
Mit Zitat antworten
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
flexibles Design, Screenhöhe steffis CSS 0 12.04.2011 17:07
Header flexibles Design in IE: Hintergrundbild und Kachel Bulldog (X)HTML 3 02.08.2005 23:38


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:44 Uhr.