Webseitenstruktur - HTML5 & CSS

[Martin_Online]

In den letzten Tagen habe ich mir sehr viel Gedanken gemacht ob ich meine Webseite auch fürs Handy gut aussehen lassen soll. Ich bin der Meinung, dass man eigentlich daran nicht vorbei kommt auch wenn es meiner Meinung nach extrem viel Arbeit ist. Aber lieber jetzt zu beginn als später alles wieder umzubauen.

Deshalb meine Frage an die HTML5 und CSS Fachleute hier im Forum (natürlich auch alle anderen, die gerne mit diskutieren wollen)

Meine Vorstellung sieht wie folgt aus (ACHTUNG GANZ EINFACH MIIT PAINT)

Oben am Bildschirmrand soll meine Navigation platziert werden, der Bereich (Hintergrund) geht über die volle Breite, allerdings soll der Content Bereich nicht breiter als 980px werden.  Links oben soll ein Logo platziert werden, rechts 2-3 Navigationspunkte

Darunter Name der Bilder eventuell ein kleiner Text (was noch nicht sicher ist), auf der rechten Seite ein Bereich für FB, Twitter usw..

Jetzt kommen wir zum Hauptteil

Auf der Linken Seite, ist ein Suchbereich mit Checkboxen sowie Imputfelder, daneben hier in rot gekennzeichnet immer vier Bilder in einer Reihe, das Bild bekommt ein Titel sowie eine Beschreibung.  Wie viele Bilder es werden, kann ich noch nicht sagen, sollte also dynamisch sein.

Über den Bilder ist ein Dropdown mit dem man die Bilder sortieren kann (nach Datum) Darüber ist hier in blau gekennzeichnet eine Auflistung aller Kategorien immer 2 untereinander und 4 nebeneinander.

So das wäre im groben meine Aufteilung. Jetzt die Frage an euch, wie sollte ich dieses umsetzten, dass es am Handy auch toll aussieht und wie könnte das HTML5 Grundgerüst aussehen?

Außerdem stelle ich mir die Frage, sollte ich meine Seite z.B. auf „Bootstrap“ aufbauen, da hätte ich den Vorteil, die Spalten werden auf dem Handy richtig umgebrochen. Lieber drauf verzichten, oder lieber drauf setzten?

Oder gibt es noch andere Optionen die ich nutzten kann, dass ich mich um das Responsive Angelegenheiten nicht so viel Gedanken machen muss?

Meine Idee zum HTML wäre dieses

  
<main>  
<header id="header">  
  <div class="logo"></div>  
  <nav>  
    <ul>  
      <li><a href="#">Link1</a></li>  
      <li><a href="#">Link2</a></li>  
      <li><a href="#">Link3</a></li>  
    </ul>  
  </nav>  
</header>  
  
<section id="content">  
  <article>  
    <h2>Name der Bilder</h2>  
    <p>KatName usw...</p>  
  </article>  
  
  <article>  
    <ul>  
      <li><a href="#">Twitter</a></li>  
      <li><a href="#">Facebook</a></li>  
      <li><a href="#">usw----</a></li>  
    </ul>  
  </article>  
  
</section>  
  
<aside>  
  <h2>Suche</h2>  
  Hier kommen die Suchfelder & Checkboxen rein  
</aside>  
  
<footer>  
  Hier kommen noch ein paar Infos über die Seite rein  
</footer>  
</main>  

[MrMurphy]

Hallo

In den letzten Tagen habe ich mir sehr viel Gedanken gemacht ob ich meine Webseite auch fürs Handy gut aussehen lassen soll.

Das ist heutzutage doch bereits Standard. Über 50% der User sind mit Tablett / Smartphone im Internet unterwegs. Und das mit steigender Tendenz.

Ich bin der Meinung, dass man eigentlich daran nicht vorbei kommt

Besser eine späte Erkenntnis als gar keine.

auch wenn es meiner Meinung nach extrem viel Arbeit ist.

Das ist falsch. Wer mit HTML5 / CSS3 arbeiten will sollte es zunächst lernen. Die sind doch grade für die unterschiedlichen Ausgabegeräte ausgelegt. Damit ist das Erstellen von Seiten viel einfacher geworden als mit den Hilfslösungen vergangener Zeiten. Zudem gibt es damit kaum (Ausnahmen bestätigen die Regel) noch Probleme mit den unterschiedlichen Browsern.

Meine Vorstellung sieht wie folgt aus (ACHTUNG GANZ EINFACH MIIT PAINT)

Mit der Vorgehensweise fangen die Probleme bereits an. Bei HTML5 / CSS3 steht der Inhalt (also die Information) im Vordergrund. Deshalb ist es auch am sinnvollsten zunächst den Inhalt semantisch korrekt zu erstellen und danach das Layout auszurichten.

Deine Vorgehensweise, zunächst ein Layout vorzugeben und dann die Information reinzupressen entstammt dem vorigen Jahrtausend und ist bereits seit CSS2 veraltet. Auch wenn viele Webdesigner das bis heute nicht einsehen - und "trotz" HTML5 / CSS3 entsprechend veraltete Seiten erstellen.

Damit kommen diese Überlegungen

Oben am Bildschirmrand soll meine Navigation platziert werden, ... So das wäre im groben meine Aufteilung. Jetzt die Frage an euch, wie sollte ich dieses umsetzten, dass es am Handy auch toll aussieht und wie könnte das HTML5 Grundgerüst aussehen?

viel zu früh. Ob die Aufteilung sinnvoll ist können dir ohne Inhalt nur Scharlatane sagen - mit dem entsprechenden Wahrheitsgehalt. Ohne konkreten Inhalt kann niemand seriöse Angaben zu deinen Wünschen machen. Außer, das die auf den ersten Blick ziemlich veraltet erscheinen.

Außerdem stelle ich mir die Frage, sollte ich meine Seite z.B. auf „Bootstrap“ aufbauen, da hätte ich den Vorteil, die Spalten werden auf dem Handy richtig umgebrochen. Lieber drauf verzichten, oder lieber drauf setzten?

Bootstrap ist eine Hilfe. Ob du das benutzt oder nicht hängt von deinem Wissen und deinen Vorstellungen ab. Es ist weder gut noch böse.

Mit Bootstrap kann man einerseits super Webauftritte erstellen. Andererseits ist es durch sein (wenn auch sehr flexibles) Raster wieder einschränkend auf die Gestaltung. Dem Inhalt wird nicht wie wünschenswert der komplette Vorrang eingeräumt.

Oder gibt es noch andere Optionen die ich nutzten kann, dass ich mich um das Responsive Angelegenheiten nicht so viel Gedanken machen muss?

Andere Vorlagen? Jede Menge. Um Gedanken für das Responsive Design wirst du bei keiner herumkommen. Allerdings scheinst du das Integrieren eines Responive Design vom Aufwand her deutlich überzubewerten. Das wie ergibt sich aus dem Inhalt und die Umsetzung ist schnell erledigt.

der Bereich (Hintergrund) geht über die volle Breite, allerdings soll der Content Bereich nicht breiter als 980px werden.

Autsch - schon wieder grüßt das letzte Jahrtausend.

Aufwändig wird es bei deiner Vorgehensweise. Wenn du erst ein ziemlich starres Layout erstellst, dann den Inhalt hineinquetscht und das ganze dann responsive machen willst ist der Zeit- und Denkaufwand wesentlich höher. Damit würde deine Angst vor dem Responsive Design quasi von selbst erfüllen.

Das ist so, als würdest du bei einem Haus zunächst das Dach auf Stelzen bauen und dann die Etagen und den Keller darunter. Dann wird der Aufwand auch deutlich höher, da bei jedem Arbeitsschritt Rücksicht auf das Dach genommen werden muss, da es beim Ausheben des Kellers standfest bleiben muss oder Kräne nicht eingesetzt werden können oder hohe LKWs nicht bis an den Rohbau fahren können.

Dann wird der Bau auch teurer und dauert länger als bei den Nachbarn.

Das gleiche gilt für dein inhaltsleeren HTML-Grundgerüst. Ob das sinnvoll ist kann auch erst mit konkretem Inhalt beurteilt werden.

Kurz: Du machst dir das Webseiten-erstellen selbst schwer, indem du nach veralteten Regeln aus dem letzten Jahrtausend vorgehst.

Der einzige Trost: Du bist nicht alleine. Mit HTML5 und CSS3 sind viele überfordert.

Gruss

MrMurphy

[Martin_Online]

Kurz: Du machst dir das Webseiten-erstellen selbst schwer, indem du nach veralteten Regeln aus dem letzten Jahrtausend vorgehst.

Vielen Dank für deine sehr ausführliche Antwort. Wenn ich dich richtig verstanden habe, fange ich mit einer leeren weißen Seite an, lass erstmal alle Daten aus meiner Datenbank ausgeben, schlicht alles untereinander? Dann mache ich mir Gedanken was für ein Mobilen User wichtig ist und was nicht. Verstehe ich dich hier richtig?

Wenn ich diese Informationen meinem Grafiker gebe sagt dieser, Martin du spinnst, wie soll ich dir ein Design machen, wenn du selber nicht sicher bist, wie wo was platziert werden soll.

Außerdem habe ich heute gelesen, dass man seine Media Queries nicht an einen Breite z.B. 480px anpassen soll, sondern dem Inhalt wenn z.B. Texte schlecht zu lesen oder wenn z.B. eine Werbung ausgeblendet werden muss.

Auf der anderen Seite lese ich hier im Forum, man sollte die Breiten auf EM anpassen  http://forum.de.selfhtml.org/?t=217576&m=1494960 was ist jetzt richtig EM oder auf den Inhalt achten? Und vor allem wie kann ich ALLE Gängingen Geräte testen? Ich habe hier ein Handy.

Wie machst du ein Responsives Design?

[1UnitedPower]

Meine Herren!

Wenn ich diese Informationen meinem Grafiker gebe sagt dieser, Martin du spinnst, wie soll ich dir ein Design machen, wenn du selber nicht sicher bist, wie wo was platziert werden soll.

Das liegt in der Natur der Sache. Ein Grafiker ist kein Designer. Ein Grafiker, kennt sich vielleicht mit Photoshop aus und verstehst etwas von Farblehre, aber er bastelt am Ende eben Grafiken und keine Designs. Du bist ein Programmierer, die kümmerst dich darum, dass Geschäftslogik funktioniert, du bastelst Programme, keine Designs. Es fehlt die Rolle eines Designers, der sich mit User-Interface-Gestaltung auskennt, der euch ein… nun… ein Design bastelt. Der Übergang dabei ist natürlich so nicht starr, wie ich es gerade versinnbildlicht habe, aber ich glaube bei euch herrscht schlicht Unklarheit darüber, wer diese Rolle spielen soll, dass muss in der realen Welt keine dritte Person sein, aber ihr solltet zumindest die Zuständigkeiten klären. Und auf gar keinen Fall sollte jede dieser Rollen völlig separat gespielt werden, da ist sehr viel Kommunikation unter den Verantwortlichen notwendig.

[Gunnar Bittersmann]

@@Martin_Online:

nuqneH

Wenn ich diese Informationen meinem Grafiker gebe sagt dieser, Martin du spinnst, wie soll ich dir ein Design machen, wenn du selber nicht sicher bist, wie wo was platziert werden soll.

Wo was platziert werden soll, IST Design. Schon WAS platziert werden soll, ist Design. Und beides ist wichtiger als wie das am Ende aussehen soll.

„Design ist nicht nur, wie es aussieht und wie es sich anfühlt. Design ist, wie es funktioniert.“ (Steve Jobs)

Siehe Jesse James Garretts berümtes Diagramm. Das Buch sollte man auch gelesen haben. IIRC gibt’s das (zumindest die erste Auflage) auch auf deutsch.

was ist jetzt richtig EM oder auf den Inhalt achten?

Beides ist richtig. Wie kommst du darauf, dass das eine das andere ausschließen würde?

Und vor allem wie kann ich ALLE Gängingen Geräte testen?

Simulatoren. Noch besser: Open Device Lab.

Qapla'

[Martin_Online]

Beides ist richtig. Wie kommst du darauf, dass das eine das andere ausschließen würde?

Wie hier geschrieben http://forum.de.selfhtml.org/?t=217576&m=1495118

[molily]

Hallo,

Siehe Jesse James Garretts berümtes Diagramm.

Das ist so gut, das sollte ich mir eigentlich hundertfach ausdrucken und jedem Kunden beim ersten Treffen auf den Tisch knallen…

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Siehe Jesse James Garretts berümtes Diagramm.

Das ist so gut, das sollte ich mir eigentlich hundertfach ausdrucken und jedem Kunden beim ersten Treffen auf den Tisch knallen…

Da isses wieder (am Ende des Artikels).

Qapla'