Primitive Seite -> mobile Darstellung

Noopy · 24. November 2019

Hallo Leute,

ich hoffe ihr könnt mir helfen.

Es geht um eine sehr einfache Homepage, deren Aufbau sich schnell beschreiben lässt:

100 Seiten, Bilder <=700Pixel und Fließtext abwechselnd untereinander angeordnet. Erstellt wurde das ganze mit einer alten Frontpageversion (das ist auch ungefähr mein Niveau.)

Soweit so gut. Das sollte eigentlich auch so bleiben. Eine etwas bessere mobile Darstellung wäre aber schön (wobei Chrome das schon gut macht). Nach Möglichkeit ohne die ganze Seite umzugraben.

Also habe ich mit dem viewport-Befehl experimentiert, das Ergebnis ist aber meines Erachtens schlechter als die Chrome-Anpassung. Im ersten Moment muss ich mobil horizontal scrollen aber einen fixen kleineren Zoomfaktor will ich auch nicht angeben, dann ist das Bild ja bei einem größeren Gerät zu klein!?

Habt ihr einen Tip für mich?

Ist der viewport-Befehl das Richtige und ich habe ihn nur falsch parametrisiert?

Es geht übrigens um diese Seite:

www.richis-lab.de

Danke!

Viele Grüße,

Richard

Sailor · 24. November 2019

Oh je... da hast du wirklich ein echtes 'Schätzchen' ... über 600 Fehler alleine auf der Startseite ... siehe https://validator.w3.org/nu/?d…richis-lab.de%2Findex.htm.

Das alles richtig machen wird sich nicht lohnen.... neu machen und dann gleich richtig mit aktuellem HTML und CSS ist da einfacher.

Aber als kurzfristige Lösung könntest du folgendes versuchen:

Kopiere folgenden Code in den <head>...</head> Bereich aller deiner Seiten:

Code

<meta name=viewport content="width=device-width, initial-scale=1">
<style>
img {
  width: 100%;
  max-width: 700px;
  height: auto;
}
</style>

Und dann prüfe, ob es besser ist oder ob irgendwo Anzeigefehler auftauchen - wenn ja, wieder melden und genau angeben, wo das Problem ist.

Noopy · 26. November 2019

Erst mal danke für die Rückmeldung!

Vielleicht wäre neu machen wirklich die bessere Lösung.

Solange ich wieder bei meinem "rudimentären" Design bleibe ist die Arbeit wahrscheinlich nicht viel mehr aber besser investiert.

Beim Inhalt sollte ich relativ viel mit Copy und Paste arbeiten können.

Dann hätte ich aber noch eine Frage: Frontpage 2003 ist ja anscheinend nicht mehr ganz up to date.

Ich schätze, dass bei euch Könner textbasierte Tools als die besseren angesehen werden. Mir wäre allerdings etwas Frontpage-ähnliches ganz recht. Schließlich reicht mir ein einfaches Design.

Kann ich den Nachfolger, dieses Microsoft Expression Web verwenden oder gibt es bessere Alternativen (die zu meinem Einsatzzweck passen)?

Noopy · 13. Dezember 2019

So, ich habe nun doch angefangen die ganze Seite umzubauen.

Das Grundgerüst steht, die Index-Seite und die ersten sechs Projektseiten sind umgestellt.

Das Design ist sicherlich noch ausbaufähig aber die "Grammatik" sollte jetzt einigermaßen korrekt sein bzw. noch werden.

Sailor · 13. Dezember 2019

Ja das sieht doch schon deutlich besser aus - ich denke auch, dass du gemerkt hast, dass das gar nicht so schwierig ist.

Nur eine Kleinigkeit ist mir aufgefallen. Du nutzt immer noch den veralteten Meta-Tag...

Code

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

Für HTML5 wäre der hier aber richtiger (valide)

Code

<meta charset="utf-8">

Ansonsten kann man sicherlich am Layout und am Design noch etwas verbessern - wenn du dazu dann irgendwann kommst und Probleme/Fragen hast, hier im Forum ist immer jemand, der dir weiterhelfen kann.

Noopy · 13. Dezember 2019

Ahja, das ist mir irgendwie noch durchgerutscht.

Danke!

Stimmt, allzu schwierig ist es wirklich nicht, hauptsächlich Fleißarbeit.

Erst mal alles auf eine ordentliche "Grammatik" umstellen. Vielleicht gehe ich dann noch das Design an. Wobei mir der Inhalt seeehr viel wichtiger ist.

Danke für die Hilfe bzw. vor allem den Anstoß zum Update!

Viele Grüße,

Richard

Primitive Seite -> mobile Darstellung

Jetzt mitmachen!

Teilen