Design und Konzept sind doch ein ganz anderes paar Schuhe und hat doch jetzt nix mit dem Problem zu tun.

Weshalb sollen Bilder denn nicht skalieren? Das ist mir ein Rätsel.

Ich wollte lediglich wissen weshalb das Layout so springt. Wie man es reproduzieren kann hatte ich ja geschrieben. Wenn ich mir das Beispiel im FF ansehe wird nämlich immer derPlatz freigehalten für das Bild.

Das die Browser das sehr gut können ist klar. Aber wo liegt der Vorteil des skalierens angesichts immer besserer Smartphones mit höherer Auflösung.
Das will ich noch nicht ganz verstehen.
Die meisten Browser der Smartphones können ja so ziemlich jede Webseite ganz gut darstellen, dann gibt es so Funktionen, wie doppelt das Bild antippen und es vergrössert sich, etc.

Wenn es zukünftig nur noch Smartphones mit Retina-Display geben sollte, muss man dann dennoch eine Seite für die Smartphones optimieren oder kann man sich das sparen, so wie Apple das vorschlägt.

__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.

Gerade für hochauflösende Displays ist es sinnvoll, Bilder im Browser zu skalieren, sonst sehen sie unscharf aus. CSS-Pixel sind etwas anderes als Gerätepixel.
Auch die hochauflösenden Geräte brauchen responsive Design, damit Webseiten gut nutzbar sind. Das iPhone mit Retina-Display ist aus CSS-Sicht nicht anders als das Vorgängermodell.

Ich habe schon oft Links zu Quellen gepostet, die sich mit Responsive Design befassen. Die Suchfunktion hilft sicher beim Auffinden.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

Wenn man auf einem ziemlich kleinen Smartphone Display eine Webseite betrachtet, möchte ich trotzdem keine Desktop Version sehen.

Wir reden hier aber immer noch von den Bildern, oder?

Das die Seite sich anpasst steht, denke ich, hier nicht zur Diskussion und wird von mir auch nicht in Frage gestellt, sondern lediglich das automatische skalieren bei unterschiedlichen Bildschirmgrössen.

__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.

Ich empfehle mal folgenden Artikel, der sich mit der Bilderproblematik auseinandersetzt:
Clown Car Technique: Solving Adaptive Images In Responsive Web Design | Smashing Coding

__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.

explanator, die Bilder müssen sich mit anpassen, wenn sich die Website anpasst. Bitte belies dich zum Stichwort Responsive Design. Da wirst du immer auch etwas über Bilder zu lesen bekommen.
edit: Die Clown-Car-Technik ist experimentell.
Auch wenn man Bilder in verschiedenen Gröẞen ausliefert: Man muss die Bilder flexibel machen in einem fluiden Layout. So viele Größen kann man gar nicht ausliefern, dass alles abgedeckt wird.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

@fricca
Gerade weil ich mich viel belese kenne ich die Problematik.

__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.

@fricca hast du evtl. noch einen Tip, weshalb der graue Footer in meinem Beispiel kurzzeitig nach oben springt wenn ich die Eigenschaft height:auto nutze?

Dann ist es umso unverständlicher, was du hier von dir gibst.

Ethan Marcotte hat den Begriff des Responsive Web Design geprägt; die wesentlichen Merkmale sind fluides Raster, flexible Bilder und Mediaqueries.
Es gibt auch ein Buch von ihm.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken