Umstellung alter Homepage auf responsive

[Zweifler]

Hallo,
ich soll eine Homepage auf den neuesten Stand bringen. Dabei bin ich auch auf das Forum gestoßen und habe vieles über "responsive" gelesen, wie man einen Text responsive macht, wie ein Bild, wie eine Tabelle,...
Die unterschiedlichen Vorgehensweisen haben mich verwirrt und zweifeln lassen, ob ich das schaffe (daher mein Pseudonym).
Vielleicht gibt es aber folgende Lösung:
Bild, Tabelle und Text in ein <div>
<div> irgendwie responsive machen, d.h. wenn sich die Bildschirmgröße verändert sich die div-Größe und parallel dazu alles was sich in dem div befindet.

Ob so etwas möglich ist?

[Der Martin]

Hi,

Dabei bin ich auch auf das Forum gestoßen und habe vieles über "responsive" gelesen, wie man einen Text responsive macht, wie ein Bild, wie eine Tabelle,...

dabei stellt sich erstmal die Frage, was verschiedene Leute unter responsive verstehen. Ich verstehe darunter, dass sich die Darstellung so gut wie möglich an Browserfenstergröße, Format, Zoomfaktor und vorgegebene Standard-Schriftgröße anpasst. Zum Beispiel, dass Elemente mit der Fenstergröße mitwachsen oder -schrumpfen, oder dass sie sich anders anordnen.

Das tut ein HTML-Layout aber teilweise schon von sich aus, soweit man es nicht mit CSS daran hindert.

Bild, Tabelle und Text in ein <div>

Warum? Wenn Bild, Tabelle und Text die Bestandteile deiner Webseite sind, dann haben sie bereits zwei gruppierende Elemente um sich herum: body und html. Ein weiteres Element zur Gruppierung braucht es da wirklich nicht.

<div> irgendwie responsive machen, d.h. wenn sich die Bildschirmgröße verändert sich die div-Größe und parallel dazu alles was sich in dem div befindet.

Auch ein div-Element ist von sich aus in gewisser Weise responsiv: Es füllt automatisch die verfügbare Breite aus, wächst und schrumpft in seiner Breite mit dem Browserfenster. Und es passt seine Höhe automatisch dem Inhalt an.

Das tun die umgebenden Elemente body und html aber auch. Du gewinnst also nichts.

Ob so etwas möglich ist?

Das kommt drauf an, wie deine Webseite prinzipiell aufgebaut ist, wie sie aussehen soll, und was du konkret unter responsiv verstehst.

Live long and pros healthy,
 Martin

[Zweifler]

Hallo,

dabei stellt sich erstmal die Frage, was verschiedene Leute unter responsive verstehen. Ich verstehe darunter, dass sich die Darstellung so gut wie möglich an Browserfenstergröße, Format, Zoomfaktor und vorgegebene Standard-Schriftgröße anpasst. Zum Beispiel, dass Elemente mit der Fenstergröße mitwachsen oder -schrumpfen, oder dass sie sich anders anordnen.

So habe ich es mir auch vorgestellt. Demnach behindert das CSS meine Seite.

[Matthias Scharwies]

Servus!

Hallo,

dabei stellt sich erstmal die Frage, was verschiedene Leute unter responsive verstehen. Ich verstehe darunter, dass sich die Darstellung so gut wie möglich an Browserfenstergröße, Format, Zoomfaktor und vorgegebene Standard-Schriftgröße anpasst. Zum Beispiel, dass Elemente mit der Fenstergröße mitwachsen oder -schrumpfen, oder dass sie sich anders anordnen.

So habe ich es mir auch vorgestellt. Demnach behindert das CSS meine Seite.

Jein!

Ja, wenn du im CSS feste Breitenangaben hast. Das wäre der Fall, wenn es im Markup viele div-Elemente geben würde. Diese „Div-Suppe“ kannst du stehenlassen und nur die float:xxx und width-Angaben entfernen.

Nein, wenn Du Tabellen zum Layouten hast. Die sind auch ohne CSS starr und stören -> weg damit!

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Hallo,
ich soll eine Homepage auf den neuesten Stand bringen. Dabei bin ich auch auf das Forum gestoßen und habe vieles über "responsive" gelesen, wie man einen Text responsive macht, wie ein Bild, wie eine Tabelle,...
Die unterschiedlichen Vorgehensweisen haben mich verwirrt und zweifeln lassen, ob ich das schaffe (daher mein Pseudonym).

Nur Mut! Pflichtlektüre:

• HTML/Tutorials/responsive_Webdesign/bestehende_Webseiten_umbauen

Vielleicht gibt es aber folgende Lösung:
Bild, Tabelle und Text in ein <div>
<div> irgendwie responsive machen, d.h. wenn sich die Bildschirmgröße verändert sich die div-Größe und parallel dazu alles was sich in dem div befindet.

Ob so etwas möglich ist?

Die Tabelle wird sich gegen Formatierungen „wehren“, will heißen: Es ist sehr schwierig Tabellen, die zum Layout verwendet wurden, jetzt anders als vorher geplant anzuordnen.

Am besten wäre es die Tabellen-Elemente table, tr, td im Editor zu suchen und zu streichen. Das hast Du nur noch Klartext, Bilder und Links und kannst dein Layout neu aufbauen.

Ohne Formatierung passt es wsl. besser als vorher auf mobilen Geräten!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Zweifler,

sicherlich kannst Du ein paar genauere Tipps bekommen, wenn Du uns die Homepage verrätst.

Dann beantworten sich auch Fragen wie:

• Ist diese Homepage mit irgendeinem Tool erstellt worden und demnach voller Artefakte dieses Tools?
• Verwendet sie Zusatzbibliotheken?
• Ist es statisches HTML oder werden die Seiten am Server durch ein Programm (z.B. ein PHP Script) erzeugt?
• Ist es am sinnvollsten, das vorhandene HTML Gestrüpp auszureißen und komplett neu aufzubauen?
• Wieviele Seiten umfasst der umzustellende Webauftritt

Von deinem Auftraggeber solltest Du erfragen, welches responsive Verhalten er sich vorstellt und wo er spezielles Verhalten wünscht. Sie/Er soll auch entscheiden, auf welchen Browsern die Seite noch "gut" aussehen soll. Viele moderne Features funktionieren nämlich im Internet Explorer nicht, oder anders, und wenn der Auftrag ist, dass auch im Internet Explorer die volle Layout-Pracht zu erscheinen hat, gibst Du ihn am besten gleich wieder ab. Im IE sollte man nicht mehr anstreben, als dass die Inhalte noch lesbar sind.

Man macht es heute eigentlich so, die Seite zunächst für einen sehr schmalen Viewport (also geringe Breite) zu gestalten, und mittels CSS auf breitere Viewports anzupassen. Schmales Layout bedeutet aber auch, dass kein Platz für ein Menü ist, und dann braucht man ggf. ein Popup-Menü.

Es wäre auch gut zu wissen, wie Du Dein eigenes Know How einschätzt, bei HTML, CSS und JavaScript.

Rolf

[Zweifler]

• Ist diese Homepage mit irgendeinem Tool erstellt worden und demnach voller Artefakte dieses Tools?

Nur HTML, CSS und ganz wenig javascript

• Verwendet sie Zusatzbibliotheken?

Noch nichts entdeckt

• Ist es statisches HTML oder werden die Seiten am Server durch ein Programm (z.B. ein PHP Script) erzeugt?

Statisch

• Ist es am sinnvollsten, das vorhandene HTML Gestrüpp auszureißen und komplett neu aufzubauen?

Kann ich nicht abschätzen

• Wieviele Seiten umfasst der umzustellende Webauftritt

5

Von deinem Auftraggeber solltest Du erfragen, welches responsive Verhalten er sich vorstellt und wo er spezielles Verhalten wünscht. Sie/Er soll auch entscheiden, auf welchen Browsern die Seite noch "gut" aussehen soll. Viele moderne Features funktionieren nämlich im Internet Explorer nicht, oder anders, und wenn der Auftrag ist, dass auch im Internet Explorer die volle Layout-Pracht zu erscheinen hat, gibst Du ihn am besten gleich wieder ab. Im IE sollte man nicht mehr anstreben, als dass die Inhalte noch lesbar sind.

Zitat: Soll überall gut aussehen, in älteren Browsern nicht nötig.

Es wäre auch gut zu wissen, wie Du Dein eigenes Know How einschätzt, bei HTML, CSS und JavaScript.

HTML 2-3, CSS 3-4, JavaScript 4

Was ich inzwischen in einem neueren Beitrag gelesen habe, ist die Größensteuerung der Texte mit mediaqueries bzw. mit dem clamp bzw. min/max möglich.
Dazu habe ich eine Frage.
Muss man nun diese Angabe für jede mögliche Textart machen (h1, h2,..., p, div, ...)

[Matthias Scharwies]

Servus!

• Ist diese Homepage mit irgendeinem Tool erstellt worden und demnach voller Artefakte dieses Tools? Nur HTML, CSS und ganz wenig javascript
• Ist es statisches HTML oder werden die Seiten am Server durch ein Programm (z.B. ein PHP Script) erzeugt? Statisch
• Ist es am sinnvollsten, das vorhandene HTML Gestrüpp auszureißen und komplett neu aufzubauen? Kann ich nicht abschätzen
• Wieviele Seiten umfasst der umzustellende Webauftritt 5

Das ist doch machbar!

Es wäre auch gut zu wissen, wie Du Dein eigenes Know How einschätzt, bei HTML, CSS und JavaScript. HTML 2-3, CSS 3-4, JavaScript 4

Was ich inzwischen in einem neueren Beitrag gelesen habe, ist die Größensteuerung der Texte mit mediaqueries bzw. mit dem clamp bzw. min/max möglich.
Dazu habe ich eine Frage.
Muss man nun diese Angabe für jede mögliche Textart machen (h1, h2,..., p, div, ...)

Nein, wenn Du hier im Forum mitgelesen hast: Da ging's um Spezialfälle.

Normal reicht ein

body {
  font-size: 1em;
}

Nimm mal eine Webseite von Dir und setze die Inhalte (nicht die Tabellen-Elemente) in unser Grundgerüst.

Wie sieht das aus?

Dann kannst du Stück für Stück übertragen!

@zweifler - Schreib mal eine Email an [e-mail] .

Herzliche Grüße

Matthias Scharwies

[Tabellenkalk]

Hallo,

Nimm mal eine Webseite von Dir und setze die Inhalte (nicht die Tabellen-Elemente) in unser Grundgerüst.

Linkservice: Grundgerüst im Tutorial

Gruß
Kalk