Homepage smartphone-fähig machen?

Hallo,
ich habe eine (selbstgestrickte) Homepage in html, mit der ich in Bezug auf die Darstellung auf einem PC zufrieden bin. Nun möchte ich gerne die Seitendarstellung handyfähig machen. Beim Googeln bin ich auf eine Reihe von Lösungsansätzen gestoßen, die aber ziemlich grob zu sein scheinen und die Seiteninhalte reichlich konfus zerschnippeln.
Was wäre die überzeugendste Lösung für mein Problem, ich meine, ohne dass ich die html-Strukturen völlig neu schreiben muss? Geht das über WAP? Muss ich eine „zweite“ Webseite anlegen? Gibt es so etwas wie Konverter oder Dienste, die das Problem elegant lösen (auch wenn es was kosten sollte)?
Gruß,
lynndinn

1 Like

Guten Morgen lynndinn,

ich habe eine (selbstgestrickte) Homepage in html, mit der ich
in Bezug auf die Darstellung auf einem PC zufrieden bin.

Nur, dass das keiner missversteht, das HTML von lynndinn hat natürlich in erster Linie mal keinen Einfluss darauf, wie die Darstellung ist. Denn die wird nur mit CSS gemacht und HTML ist nur für die Semantik.

Nun möchte ich gerne die Seitendarstellung handyfähig machen.

Das geht insofern eigentlich ganz einfach, als dass Du Dir nur ein Handys schnappen und Deine Seiten ansehen musst. Alles, was Dir nicht gefällt, musst Du abändern.

Beim Googeln bin ich auf eine Reihe von Lösungsansätzen gestoßen,
die aber ziemlich grob zu sein scheinen und die Seiteninhalte
reichlich konfus zerschnippeln.

Nein, dann kann das nicht das richtige gewesen sein. Möglicherweise bist Du auf alte Tutorials von vor 10 oder mehr Jahren gestoßen.

Was wäre die überzeugendste Lösung für mein Problem, ich
meine, ohne dass ich die html-Strukturen völlig neu schreiben
muss?

HTML neu schreiben? Nein, natürlich nicht. Am HTML ändert sich doch gar nichts. HTML hat doch mit der Darstellung gar nichts zu tun, die Bedeutung der Inhalte (die mit HTML festgelegt wird) ändert sich ja nicht, nur weil sie in einem Handy dargestellt werden sollen. Eine Überschrift ist nicht nur auf einem Desktop-PC eine Überschrift, sondern auch auf dem Handy. Und eine Adresse ist auf dem Handy auch eine Adresse, genauso wie ein Textabsatz. Und es gibt auch keinen Grund, eine wichtige Textpassage auf dem Handy nicht mehr wichtig sein zu lassen.

Geht das über WAP? Muss ich eine „zweite“ Webseite
anlegen?

IMHO hat WAP schon lange ausgedient. IIRC war das eine Sprache für steinzeitliche Handys.

Gibt es so etwas wie Konverter oder Dienste, die das
Problem elegant lösen (auch wenn es was kosten sollte)?

Wozu bräuchtest Du die?

Du willst nur die Darstellung Deiner Website auf das Handy anpassen? Dann mach doch genau das! Darstellung ist ja bekanntlich nur eine Sache von CSS. Wenn Du also Deine Website nach gängigen Entwicklungsstandards erstellt hast, HTML nur für die Semantik verwendet hast und das Layout und die Optik nur mit CSS gemacht hast und dabei immer strikt Inhalt von Layout getrennt hast, dann schreibst Du einfach ein zweites Stylesheet für media=„handheld“ - fertig.

Mehr ist das nicht.

Wenn Du allerdings Deine Website auf falschen Vorstellungsn aufgebaut hast, mit Hilfe von Tutorials aus den 1990er Jahren, womöglich Lyout mit Tabellen oder mit divs gemacht hast, dann merkst Du jetzt, dass das völlig falsch war und Du eigentlich nur zwei Möglichkeiten hast:

  1. Eine zweite Website erstellen
  2. Alles neu machen (empfohlene Variante; dabei HTML und CSS richtig lernen).

Beim Schreiben des Stylesheets für Handys musst Du Dir halt auch Gedanken darüber machen, ob Du gewisse Inhalte ausblendest (display:none), weil sie fürs Handy ungeeignet sind, ob Du Inhalte anders anordnen lässt, damit man nicht so viel in alle Richtungen scrollen muss. Ein dreispaltiges Layout bietet sich für breite Viewports an, für große Bildschirme mit maximierten Browserfenstern. Nicht so sehr für Netbooks und noch weniger für Handys. Wenn Du bisher Dein Menü an einer Seite hast, dann wäre es auf einem Handy möglicherweise besser, das Menü oben anzuordnen.
Wenn Du natürlich ein ähnliches Erscheinungsbild für Deine Website auf allen Endgeräten haben willst, dann solltest Du vielleicht auch die bisherige Website entsprechend anpassen. Aber das alles ist ja ein Klacks, wenn Du Inhalt und Layout immer strikt getrennt hast. Das ist eben das A und O beim Erstellen von Websites.

Ich hoffe, ich konnte Dir den richtigen Weg weisen. Wenn noch Fragen sind (denn alles kann man natürlich nicht in einen einzigen Forumsbeitrag quetschen), dann stelle sie!

Liebe Grüße,
-Efchen

Nun möchte ich gerne die Seitendarstellung handyfähig machen.

Das geht insofern eigentlich ganz einfach, als dass Du Dir nur
ein Handys schnappen und Deine Seiten ansehen musst. Alles,
was Dir nicht gefällt, musst Du abändern.

Du meinst die Änderungen, die Du an einem Reisebus dürchführen musst, wenn Du die 24 Stunden von Le Mans gewinnen willst?

Was wäre die überzeugendste Lösung für mein Problem, ich
meine, ohne dass ich die html-Strukturen völlig neu schreiben
muss?

HTML neu schreiben? Nein, natürlich nicht.

Oh, doch!

Am HTML ändert sich doch gar nichts.

Wenn ich von einem zeitgemäßen Responsive Design ausgehe, dann stht als erstes eine Änderung auf HTML5 an.

Geht das über WAP? Muss ich eine „zweite“ Webseite
anlegen?

IMHO hat WAP schon lange ausgedient. IIRC war das eine Sprache
für steinzeitliche Handys.

Naja, das Wireless Application Protocol (WAP) ist ein Mischmasch aus Protokollen, einer Auszeichnugssprache und noch ein paar anderer Techniken…

Gibt es so etwas wie Konverter oder Dienste, die das
Problem elegant lösen (auch wenn es was kosten sollte)?

Wozu bräuchtest Du die?

Ist doch eigentlich egal, da es sowas nicht gibt. :wink:

Du willst nur die Darstellung Deiner Website auf das Handy
anpassen? Dann mach doch genau das! Darstellung ist ja
bekanntlich nur eine Sache von CSS. Wenn Du also Deine Website
nach gängigen Entwicklungsstandards erstellt hast, HTML nur
für die Semantik verwendet hast und das Layout und die Optik
nur mit CSS gemacht hast und dabei immer strikt Inhalt von
Layout getrennt hast, dann schreibst Du einfach ein zweites
Stylesheet für media=„handheld“ - fertig.

Um auf den oben erwähnten Bus zurückzukommen, Du ziehst einfach die Gardienen vor der Fenstern zu. Sorry, aber die Variante ist eigentlich murks.

Mehr ist das nicht.

Sicher bekommst Du auf diese Art eine „funktionierende“ mobile Site, aber zeitgemäß ist das nicht unbedingt. Mit einem zweiten CSS nach „media=handhled“-Manier kann ich zwar Elemente ausblenden oder (herunter-)skalieren, übertragen werden die Daten nichtsdestotrotz - bei den im Allgemeinen durchaus schmalbandigen Mobilverbindungen nicht gerade sinnvoll. Auch die Definition „Handheld“ an sich ist recht schwammig: 480x640 wird genauso behandelt wie 1280x720
Da ist es wesentlich sinvoller sich der Media Queries von CSS3 zu bedienen und auf die tatsächliche Nutzung und die Beschränkungen des jeweiligen Geräts einzugehen.

Beim Schreiben des Stylesheets für Handys musst Du Dir halt
auch Gedanken darüber machen, ob Du gewisse Inhalte
ausblendest (display:none), weil sie fürs Handy ungeeignet
sind,

Das bedeutet ja, daß es auf der nicht-mobilen Version der Website überflüssige Inhalte gibt. Warum werden sie dann nicht direkt dort entfernt?

ob Du Inhalte anders anordnen lässt, damit man nicht so
viel in alle Richtungen scrollen muss.

Auf einer mobilen Website sollte immer nur in eine Richtung gescrollt werden, nämlich rauf/runter, exotische Varianten wie Obamas Site, bei der das Menü von Links reingewischt wird, ausgenommen.

Ein dreispaltiges
Layout bietet sich für breite Viewports an, für große
Bildschirme mit maximierten Browserfenstern. Nicht so sehr für
Netbooks und noch weniger für Handys.

Daher auch Media Queries anstelle von Media Types.

Wenn Du bisher Dein Menü
an einer Seite hast, dann wäre es auf einem Handy
möglicherweise besser, das Menü oben anzuordnen.

Wenn Dein Menü aber 5 Ebenen tief geht, dann hast Du auf mobilen Devices immer ein Problem…

Wenn Du natürlich ein ähnliches Erscheinungsbild für Deine
Website auf allen Endgeräten haben willst, dann solltest Du
vielleicht auch die bisherige Website entsprechend anpassen.

Mir ist noch keine Website begegnet, die man hätte mal schnell auf mobil trimmen können. Ein solches Vorhaben sollte man immer mit einer Neugestaltung verbinden.

Aber das alles ist ja ein Klacks, wenn Du Inhalt und Layout
immer strikt getrennt hast. Das ist eben das A und O beim
Erstellen von Websites.

Nein, ist es nicht (ein Klacks). Glaub mir.

Gruß

osmodius

Moin,

Nein, ist es nicht (ein Klacks). Glaub mir.

Ich würd mal sagen: Es kommt immer darauf an! :smile:

Schönen Abend,
-Efchen

vielen Dank für eure Antworten. Ok, ich sehe ein, dass ich meine Homepage neu stricken muss, vor allem die Startseite. Gibt es denn (gute) Baukästen für Dummies, die dann wenigstens meine bisherigen weiteren Seiten so wiedererkennen, dass ich da nicht komplett von vorne anfangen muss? Ich habe jetzt leider nicht unbedingt die Zeit, mich in höhere Programmierkenntnisse einzuarbeiten.
Gruß,
lynndinn

Hallo,

Ok, ich sehe ein, dass ich
meine Homepage neu stricken muss, vor allem die Startseite.

Nicht nur die Startseite. Du brauchst ein anständiges Layout ohne Frames und eine gute technische Basis, damit der Wartungsaufwand der Site niedrig bleibt und die Site jederzeit mühelos weiterentwickelt werden kann.

Gibt es denn (gute) Baukästen für Dummies

Nein.
Dummies können keine Websites erstellen und Baukästen auch nicht.
Es wird immer eine „Bastelei“ bleiben, die nichts halbes und nichts ganzes bietet.

Entweder Du schnappst Dir eine Software wie Wordpress (Blog-Software) und baust darauf eine Website auf, oder Du arbeitest Dich in die Materie ein und lernst HTML/CSS. Wenn Du mehr oder dauerhaft etwas in der Richtung machen willst, dann ist das IMHO unerlässlich.
Dass Websites jeder erstellen kann und das ohne Aufwand und ohne Wissen, das ist lediglich ein Werbeversprechen von Formen die Software verkaufen, die das angeblich für Dich abnehmen können. Aber Semantik kann kein Programm automatisch vergeben, das kann nur der Autor selbst. Und wenn er das kann, dann kann er seinen HTML-Code auch schnell selbst schreiben - denn nichts anderes macht HTML.

Das Aussehen und Layout wird dann mit CSS dazu gezaubert. Das ist ein bisschen komplizierter, aber auch keine Hexerei. Und wenn man es einmal kann, dann kann man zu recht stolz auf sich sein und kann etwas, mit dem man auch in Zukunft weiterhin was anfangen kann. Und die Website wird dann um einiges nutzerfreundlicher und sogar barrierefrei sein.

die dann wenigstens
meine bisherigen weiteren Seiten so wiedererkennen, dass ich
da nicht komplett von vorne anfangen muss?

Entweder Du lässt es so wie es ist, Stil und Technik der 1990er Jahre und lockst damit kaum jemanden an oder vergraulst aufgrund der Frames sogar den ein oder anderen, oder aber Du fängst komplett von vorne an.

Das, was Du da bisher auf die Beine gestellt hast, ist ja nicht wirklich was aufwändiges oder komplexes. Wenn Du Interesse an dem Thema (Webseiten erstellen) hast, dann fang neu an und lerne die Materie richtig. Wir sind Dir hier im Brett HTML/CSS und Homepage gerne dabei behilflich, Dich da Schritt für Schritt durch zu lotsen.

Ich habe jetzt
leider nicht unbedingt die Zeit, mich in höhere
Programmierkenntnisse einzuarbeiten.

Wieso kommen alle immer darauf, das habe etwas mit Programmieren zu tun? HTML und CSS sind beides keine Programmiersprachen und sind ganz sicher keine „höheren Programmiersprachen“. HTML ist so einfach, dass es jeder in 30 Minuten erlernen kann, CSS braucht auch keine Programmierkenntnisse und muss vor allem dauernd angewendet werden, um ein Gefühl dafür zu bekommen. CSS ist etwas komplexer als HTML, aber auch noch weit, weit von dem entfernt, was man können muss, um programmieren zu können.

ZEIT braucht man allerdings immer. Selbst, wenn Du ein etwas vernünftigeres Programm verwendest, oder gar ein professionelles CMS, dann brauchst Du genauso viel Zeit, nämlich um Dich in das Programm einzuarbeiten.

Wenn Du die Zeit nicht hast, dann lass es besser sein oder suche Dir jemanden, der Dir alles erstellt. Wenn derjenige ein CMS einrichten kann, dann macht er die Technik und Du die Texte.

Bin gerne und jederzeit für weitere Fragen offen.

Liebe Grüße,
-Efchen

gut, ich werde die Seite gründlich umkrempeln. Aber solange ich damit noch nicht durch bin, habe ich noch eine Frage:
Wenn ich Links auf meiner Seite aufrufe, die auf ein pdf führen, dann wird beim Smartphone (Galaxy Note) ein Internetdownload gestartet und das pdf erscheint völlig getrennt in dem Ordner „Downloads“. Was muss ich (am Smartphone oder ev. im Quelltext der Seite?) machen, damit das pdf sofort „über“ der gerade benutzten Seite erscheint? Ich meine, so, wie das ja auch auf dem PC ist. Ich habe "target: Seite x " hinter den Link gestellt, aber das hat in Bezug auf das Handy nichts gebracht.
Gruß,
lynndinn

Gibts für Handy-Browser auch ein Acrobat Reader-Plugin? Kein Plugin = Keine Anzeige im Browser.

habe ich jetzt runtergeladen und installiert, dann Handy Neustart. Hat aber immer noch nix gebracht :frowning: