Webseite mobiltauglich machen

TwiiXoRino · 15. Juni 2015

Guten Tag,

ich habe den Auftrag bekommen, eine mobile Webseite zu erstellen. Ich kenne mich einigermaßen gut mit HTML aus, mit CSS eher mittel. Die Hauptseite ist erstellt und soll die normale Webseite für den Desktopbereich sein. Nun soll ich eine abgespeckte Version der Seite erstellen, die dann per Smartphone erreichbar ist. Wie man erkennt, ob es ein PC oder Handy ist, habe ich schon eingestellt und die Umleitung ist aktiv. Jetzt bleibt nur noch die Frage, wie mache ich eine Webseite mobil? Ich will die Seite weiterhin selbst schreiben, am besten mit CSS. Kennt jemand ein gutes Tutorial oder kann mir weiterhelfen?

Habe schon ca. 1 1/2 Stunden gegoogelt, aber die meisten Ergebnisse sind nur Programme, die solche Seiten erstellen.

Viele Dnak im Vorraus!

Grüße, Jens

max_1234 · 15. Juni 2015

Verstehe nicht genau was du willst.
Einerseits sagst du, du hättest HTML drauf, andererseits hast du 1 1/2 Stunden gegoogelt .. nach was denn genau?

Erstelle eine HTML SEITE die sich von der A.) Höhe und B.) Breite her an gängige mobilen Auflösungen anpasst. Percentage = Magic.

mfg,
Max

TwiiXoRino · 15. Juni 2015

Wie stelle ich die Breite bzw. Höhe der Webseite ein?
Ja ich bin nicht der Profi in HTML, bin noch nicht lange dabei, sry dafür...

Madman1209 · 15. Juni 2015

Hi,

die Stichworte sind "responsive design" und "media queries". CSS ist da immens wichtig.

Ja ich bin nicht der Profi in HTML, bin noch nicht lange dabei, sry dafür...

darf man fragen wieso es dann nicht ein Profi macht? Wechselst du auch die Bremsen an den Fahrzeugen der Kollegen?

VG,
Mad

TwiiXoRino · 15. Juni 2015

Das frage ich mich auch, aber mein Chef hat es mir so befohlen und ich kann es nicht ändern...

BeiNacht · 15. Juni 2015

Madman1209 schrieb:
darf man fragen wieso es dann nicht ein Profi macht? Wechselst du auch die Bremsen an den Fahrzeugen der Kollegen?

Noch nicht lange in der IT unterwegs oder?

Ich glaube die Projekte in den ich war, wo ein Profi mit dem Projekt angefangen hat kann ich an einer Hand abzählen.

@OP
Nimm Twitter Bootstrap, das macht es auch für Anfänger sehr einfach ein responsive Design umzusetzen.

max_1234 · 15. Juni 2015

BeiNacht schrieb:
Ich glaube die Projekte in den ich war, wo ein Profi mit dem Projekt angefangen hat kann ich an einer Hand abzählen.

Wieviele gibts davon noch?
Nein ernsthaft, er hat gegoogelt und nichts gefunden.
Jetzt hat er einige Stichworte an denen er sich orientieren kann.

Wenn er jetzt nicht weiter kommt ist er der Falsche dafür.

mfg,
Max

Zornbringer · 15. Juni 2015

ich hab das auch erst kürzlich gelernt. in den letzten 3 wochen hab ich mir ziemlich viel selbst bei gebracht. selfhtml ist ne große hilfe. du hast in chrome dazu noch eine mobile emulation. das ist ziemlich essentiell, wenn du es richtig machen willst. mobil ist auch nicht gleich mobil, da beinahe jedes endgerät eine andere auflösung nutzt. du definierst also quasi für jede auflösung die schriftgröße und abstände in css. das geht mit diesem teil: "@media". wie genau das funktioniert, solltest du selbst rauskriegen. und das wars eigentlich. dass man relative werte nutzt sollte ein no-brainer sein. also, deinen main bereich nicht als 800px breite definieren, sondern als 80% oder was auch immer. bei schriftarten genau das gleiche. relative schriftgrößen nutzen. absolute werte sollten in deiner homepage nicht auftauchen.

Madman1209 · 15. Juni 2015

Hi,

@BeiNacht

Noch nicht lange in der IT unterwegs oder?

So wie es sich anhört: offensichtlich länger als du. Und offensichtlich vor allem in professionelleren Unternehmen.

Ich glaube die Projekte in den ich war, wo ein Profi mit dem Projekt angefangen hat kann ich an einer Hand abzählen.

Traurig und sehr unprofessionell - jedoch keinesfalls die Regel! Sonst gäbe es Firmen wie die, in der ich arbeite nicht, genauso wie etliche IT Cosultants und freiberufliche Entwickler.

@TE

Das frage ich mich auch, aber mein Chef hat es mir so befohlen und ich kann es nicht ändern...

Was für eine Firma seid ihr und ist das eure eigene Homepage? Ist deinem Chef klar, dass eine HP das Aushängeschild und die Visitenkarte ist und man nicht jemanden ohne Erfahrung an so etwas lässt?

VG,
Mad

TwiiXoRino · 15. Juni 2015

Ich bin Praktikant, bitte lasst eure Sachen nicht an mir raus, mit 17 Jahren kann man nicht alles wissen!

fhtagn · 15. Juni 2015

Du kannst dir auch die Computerbase-Startseite angucken (oder andere Unterseiten, aber nicht das Forum). Computerbase hat mehrere Seitenlayouts für verschiedene Displaygrößen seit dem letzten Update mit purem CSS umgesetzt.

Madman1209 · 15. Juni 2015

Hi,

bitte lasst eure Sachen nicht an mir raus, mit 17 Jahren kann man nicht alles wissen

keinesfalls, das tut niemand! Dein Chef sollte das allerdings überdenken. Das ist nicht gegen dich gerichtet!

Wie schon geschrieben, die Stichpunkte einfach mal bei Google eingeben und nochmal melden, wenn etwas unklar ist.

VG,
Mad

HerrRossi · 15. Juni 2015

Ist die Website denn wirklich nur mit HTML/CSS gemacht oder auch mit PHP/MYSQL? Oder gibt es sogar ein CMS?

TwiiXoRino · 15. Juni 2015

Ich habe die Webseite selbst geschrieben mit HTML und CSS.
Ich habe gegoogelt aber kann nicht genau herausfinden, was genau ich ändern muss, damit die Seite NUR mobiltauglich ist, die Seite soll NICHT für den normalden Desktopbenutzer angelegt sein.

Lawnmower · 15. Juni 2015

Wir wärs wenn Du Dir einfache in Buch holst wo HTML5, CSS3 und Responsive Webdesign behandelt werden und Du von Grund auf anfängst das zu lernen. Vorschlag: http://www.amazon.de/s/ref=nb_sb_no...alias=aps&field-keywords=Responsive+Webdesign
Einfach mal so hinklatschen kann man das auf jeden Fall nicht und lass Dich nicht runterziehen, Du bist erst 17 Jahre jung, Du musst erst noch lernen - es ist noch keiner als Responsive Webdesign Gott geboren worden.
Du musst deinem Chef bloss klarmachen dass die Sache nicht von Heute auf Morgen geregelt ist und Du Dich gerne in die Thematik einarbeiten möchtest.

TwiiXoRino · 15. Juni 2015

Wie kann ich denn die Größe einer Webseite mit % angeben? Also kommt das ins HTML oder ins CSS?

Darrel · 15. Juni 2015

Und wieso willst du das so trennen? Ist das eine Vorgabe? Denn genau diese Trennung gibt es mit Responsive Web Design nicht. Man erstellt eine Seite, die sich an die Gegebenheiten des jeweiligen Endgerätes anpasst.

Was du möchtest klingt arg nach einer Domain wie meineseite.de und einer subdomain wie m.meineseite.de, was früher gemacht wurde.

Grundsätzlich bin ich aber auch der Meinung, dass so ein Projekt ohne die nötigen Grundkenntnisse vielleicht ein Level zu hoch ist. Das ist nichts, was man in 1-2 Tagen einfach so drauf hat.

TwiiXoRino · 15. Juni 2015

Ja genau, man soll dann eine Subodmain anklicken können. Es wurde mir von meinem Chef so befohlen und ich muss es nunmal so machen, das ist nicht meine Sache, sondern die des Chefs. Ich muss von der fertigen Webseite nur es so einstellen, dass man es einiger Maßen gut auf dem Handy ansehen kann

DHundt · 15. Juni 2015

Mahlzeit,
Mir ist noch nicht klar, was du eigentlich möchtest.

Soll die Seite NUR für mobile Geräte Nutzbar sein?
Dann kommst du weder mit HTML noch CSS weiter, sondern musst dich mit HTTP (User-Agent) auseinander setzen.

Was definiert ein mobiles Gerät?
Touch-Eingabe? (JavaScript)
Bildschirmgröße? (CSS, responsive Layout, Media-Queries, Viewport)
Netzwerkgeschwindigkeit? (Bildergröße, Kompression, Caching)

Bezüglich CSS würde ich dir empfehlen, wenn du die Grundlagen gelernt hast, mit einem CSS-Präprozessor (SCSS/SASS/LESS) zu arbeiten.

Das sollte an Google-Stichwörtern erstmal genügen ;-)

HerrRossi · 15. Juni 2015

Webseite mobiltauglich machen

Ensign

Captain

Ensign

Fleet Admiral

Ensign

Ensign

Captain

Captain

Fleet Admiral

Ensign

Ensign

Fleet Admiral

Fleet Admiral

Ensign

Maître de cuisine

Ensign

Lt. Junior Grade

Ensign

Ensign

Fleet Admiral

Ähnliche Themen