HTML Anfänger: Responsives Design

Beitrag lesen

Hallo,

ich baue mir gerade eine kleine neue Webseite auf. Natürlich möchte ich diese gleiche so umsetzten, dass diese auf allen Geräten gut aussieht.

Mein Aufbau hat in etwa diese Form wenn die Seite mit einem großen Bildschirm aufgerufen wird.

http://img5.fotos-hochladen.net/uploads/entwurfymhqwnbg64.png

Dieser Entwurf sollte auch so bleiben (hat persönliche Gründe). Nun eben meine Frage wie könnte ich daran weiter arbeiten, dass die Seite nicht nur kleiner geschoben wird, denn irgendwann kommen wir an einem Punkt an wo es einfach nur scheiße aussieht. Meine Idee war folgende:

Das Logo bekommt bei einer Handy Größe die volle Breite, darunter ein Button der übe die ganze Zeile geht mit der Bezeichnung „Navigation“ klickt man da drauf schiebt sich der ganze Content nach unten und die Navigation erscheint, ebenfalls pro Punkt eine Zeile.

Die Box auf der rechten Seite verschwindet komplett, ist auf einem Handy nicht wichtig, hier könnte man auch einen Navigationslink einblenden lassen, der den Inhalt (Kundenmeinungen) anzeigt.

Der Inhalt, klar der wird unten komplett angezeigt, erst die Überschrift dann Text.

Die Grafik darüber, da bin ich ehrlich gesagt noch am überlegen ob diese einfach ganz raus fliegt. Verbraucht nur unnötig Platz und Traffic. Was ich dann allerdings mit dem Text und dem Slogen mache, ist mir noch nicht klar. Könnte ich rein von der Reihenfolge über meinen Content packen, denn auch auf dem großen Bildschirm ist dieser immer im Zusammenhang mit dem Text, der darunter erscheint.

Vielleicht habt Ihr ja noch eine Idee was ich machen könnte. Ach ja, sind die User gewöhnt, dass auf kleinen Ausgabegeräten Bereiche komplett wegfallen oder z.B. wie ich es vor habe nur über einen Link zu finden ist?