Mobile Ansicht?
lima-city → Forum → Die eigene Homepage → Homepage Allgemein
angabe
ausprobieren
auto
bedenken
bildschirmdiagonale
code
datei
datum
erlernen
erstellung
erwarten
grafik
klammern
nachdenken
nachteil
ordner
quellcode
realisieren
url
weiterleiten
-
Meine Seite: http://Fantastic-Hogwarts.lima-city.de sieht Amcomputer ganz normal aus. Am Handy ist die Seite aber schrecklich! Wie kann man eine mobile Seite gestalte? Ich habe schon von Möglichkeiten wie css Media quaries gelesen, aber ich check es einfach nicht. Hat jemand Erfahrungen damit?
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Dein Projekt sieht nett aus.
Für Mobilgeräte gibt es verschiedene Möglichkeiten. So wie ich es (die Links sind noch nicht repariert) sehe, empfehle ich Variante a.
a) Zwei komplett verschiedene Seiten für Mobil und Desktop
b) Dynamische Anpassung an die Bildschirmgröße
bb)Stufenweiße Anpassung an die Bildschirmgröße
c) Die von dir genannte Anpassung
a) hat den Nachteil, dass du alles komplett doppelt machen musst. Dafür ist es für dich als Anfänger viel übersichtlicher und einfacher.
b) ist auch einfach umzusetzen, erfordert aber oftmals etwas Nachdenken und nicht alles ist möglich
c) Quasi das Extrem von b)
-
Hallo!
Wenn du dich z.B. für Wordpress entscheidest, kannst du relativ leicht ein responsive bzw. fully responsive Theme wählen. Dann hast du eine Kompatibilität direkt angelegt und muss diese nicht selber bauen.
Das ist die einfachste Variante und schnell zu realisieren. -
Hallo
Die Seite ist auf jedenfall schön gestaltet. Als ich dein Quellcode gesehen habe, ist mir aufgefallen, dass du den Style in die php-Datei eingebaut hast. Das kann man natürlich so machen.
Aber ich würde eine separate CSS-Datei anlegen. Dort kannst Du dann ganz leicht die Seiten ändern. Dann muss Du auch nur einmal Änderungen durchzuführen und alles wird dann übernommen.
Wenn Du eine Responsive-Seite erstellen möchtest, kannst du sehr gut mit relativen Angaben arbeiten, also anstatt 1250px schreibst du 100% usw. Ein Grid-System hilft Dir dabei enorm.
Das mit den Media-Quaries lerne ich jetzt auch neu, aber werde es versuchen, Dir zu erklären.
Du hast ein Logo und diese ist 500px breit und 300px hoch. Auf deiner Seite aber möchtest Du, dass das Logo maximal 300px breit ist. Dann schreiben wir den Code so:
#logo img { width: 300px; height: auto; float: left; }
Die Höhe sollte immer auf 'auto' stehen.
Jetzt möchten wir, dass das Logo, wenn das Bildschirm kleiner als 500px ist, die ganze obere Hälfte bedeckt. Dafür kommen die media-queries ins Spiel. Sie überschreiben sozusagen die vorherige Einstellung:
@media screen and (max-width: 500px) { #logo img { width: 100%; height: auto; } }
@media screen and (max-width: 500px) sagt, dass bis zur Bildschirmdiagonale von 500px das Logo die ganze Breite überdeckt. Wenn dort (min-width: 500px) gestanden hätte, dann würde das Logo erst ab 500px Bildschirmdiagonale die ganze Breite überdeckt.
Innerhalb der Klammern schreiben wir alle Angaben, die wir ändern wollen ganz gewohnt so, als würden wir eine neue CSS-Datei schreiben.
Ich hoffe, ich konnte Dir etwas behilflisch sein :)
Beitrag zuletzt geändert: 12.6.2016 23:22:29 von ayami -
Danke. Ich werde es sofort ausprobieren:D
-
Möglicherweise wäre ein fertiges CMS a la Wordpress wirklich besser für dich. Die einzige Inhaltsseite, die ich zurzeit aufrufen kann enthält auffällig viele HTML-Fehler. Da sind Fehldarstellungen zu erwarten, Browser sind zwar fehlertolerant, aber nicht unbegrenzt. Beispiele:
Seit weit am Anfang steht
</style>
Es gibt aber keinen öffnenden Tag dazu, ist einfach überflüssig. Sehr oft taucht so etwas auf
<h5> <center><b><p style=front-colour: brown">Ich freue mich, das du meine Schule,</center></b></h5>
front-colour gibt es nicht, CSS für Schriftfarbe ist einfach color:farbcode. Tags müssen in der umgekehrten Reihenfolge geschlossen werden, wie sie geöffnet wurden, also
<center><b><p></p></b></center>
Fast am Ende gibt es
<body style="background: url(Joga.jpg)repeat-y 75% 0% , url(Grau.jpg) ; background-position: 50% 50% }">
Zwei body-Tags sind nicht erlaubt. -
Zu bedenken ist auch noch, dass Nutzer von Handies meist auch eine beschränkte Datennutzung haben. Deshalb sind sie nur an den interessanten Fakten und weniger an Grafiken oder Werbung interressiert. Weiterhin unterscheidet sich das Nutzungsverhalten von Mobil und Desktop erheblich.
Deshalb empfehle ich die Erstellung von 2 verschiedenen Seitenkonzepten mit unterschiedlicher Formatierung für Mobil und Desktop. -
Die Vorposter haben recht, ein CMS würde dir die Designgestaltung wesentlich gestalten.
Des weiteren bin ich auch für die Variante mit zwei Designs, klar musst du es doppelt machen aber als Anfänger oder einer der lange nicht mehr gestyltet hat ist das sehr sehr einfach dort sich wiederzufinden.
Eine Idee von mir... Wenn du später fertig mit der Gestaltung der Seiten bist dann könntest du ja eine Automatische Weiterleitung programmieren sprich wenn erkannt wird das es ein Handy ist dann soll er automatisch auf die mobile Seite weiterleiten ... andersherum, wenn es ein PC ist soll er auf die normale Seite weiterleiten. -
Es muss ja nicht immer ein CMS sein.
Am besten ist natürlich, wenn man für die verschiedenen Geräte extra Webseiten hat.
Es gibt noch die Möglichkeit so etwas mit Twitters Bootstrap zu realisieren. Bootstrap selbst ist ähnlich einfach wie die alten Tabellenlayouts, also sehr schnell zu erlernen, wenn man denn schonein paar HTML und CSS Grundkentnisse hat. -
Auch ein kleiner Tipp für deine Übersicht von mir ^^
mach aus https://fantastic-hogwarts.lima-city.de/Computer.html lieber https://fantastic-hogwarts.lima-city.de/pc/index.html und für mobil dann https://fantastic-hogwarts.lima-city.de/mobil/index.html
somit hast du dann 2 Ordner wo alle daten gleich heißen können und das erleichtert die Übersicht enorm. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
