Wie kann ich meine selbstgeschriebe Webseite Handy tauglich machen?

...komplette Frage anzeigen

6 Antworten

Im Wesentlichen durch das notwendige Knowhow in CSS um ein ausreichend schlankes Layout zu gestalten, das mittels Media-Queries (https://www.w3schools.com/cssref/css3_pr_mediaquery.asp) oder generell flexibler Werte in der Lage ist sich an den verfügbaren Platz anzupassen.

Leider gibt es keinen allgemeingültigen Weg wie man ein bestehendes Design funktional in ein responsive Design oder zumindest adaptive Design (https://blog.kulturbanause.de/2012/11/adaptive-website-vs-responsive-website/) umschreibt. In manchen Fällen sind die Layouts so ungünstig und kompliziert verschachtelt dass man effektiv nochmal bei 0 beginnt oder explizit für Smartphones, Tablets u.A. Geräte eine eigens gestaltete Variante bereit stellt und auf diese weiterleitet. (http://www.kaempf-nk.de/webseitengestaltung/blog/mobile-webseiten-umleitung.html)

Hallo

Das können wir nicht beantworten ohne die Seite zu kennen.

Zunächst muss der Quellcode den Richtlinien vom aktuellen HTML und CSS entsprechen.

Dann müssen störende CSS-Anweisungen entfernt oder angepasst werden.

Zum Schluß werden die Anpassungen mittels Media Queries hinzugefügt.

Ich gehe mal davon aus dass dir bewußt ist, dass die Darstellung sich dann auch ändert, aber halt nach von dir eingefügten Regeln.

Gruss

MrMurphy

Genereller Tipp: Mit den Floats sparsam sein, fixe Breiten vergeben, nicht zu groß anlegen. Für simples HTML ists auch gut einfach die Website in Photoshop aufzubauen und zu slicen, was geht einfach als div. mit Bg einfügen. Ist zwar Oldschool funktioniert aber gut ;)

Sonst lässt sichs aus der Ferne schlecht sagen was du verbessern kannst ohne die Website zu sehen.

AlexXxej 09.05.2017, 08:49

mit Photoshop aufbauen und slicen... made my day

0
isibisi18 09.05.2017, 11:34

Was denn? Ist ne alte Methode aber bei simplen Websites mit fixem Layout kanns durchaus ein praktisches Mittel sein. Gerade für Anfänger gut um sich mit allem vertraut zu machen.

0

Du kannst die Seite responsiv / adaptiv gestalten indem du 
Media Queries in deiner css Datei verwendest.

Beispiel:
@media(max-width:500px)
{
   .box1{
        width: 500px;
   }
}

Du kannst mir eine Freundschaftsanfrage senden.
Dann kann ich dir alle Fragen beantworten.

Man kann Webseiten so anpassen, das die sich dem Browser anpassen, ich mache es z.B. immer so, dass ich mit JavaScript die Webseite für die Geräte passend steuern lasse.

Genaueres über Freundschaftsanfrage und direkter Nachricht

css bietet dir die Möglichkeit mit media queries Änderungen je nach Fenstergröße vorzunehmen. Das Stichwort dabei ist jedoch Mobile First, sprich du machst deine Webseite für die Handygröße und nimmst die Änderungen für größere Skalierungen vor. Sieht dann z.B. so aus:

.burgermenu {
  width: ...
  height: ...
  usw.
}

@media screen and (min-width: 970px) {
  .burgermenu {
    display: none;
  }
}

Was möchtest Du wissen?