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>