Webseitenstruktur - HTML5 & CSS

[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