[GELÖST] Mobile Website

brandy · 19. Dezember 2012 20:31

Ich habe heute ein Anfrage erhalten, ob ich eine Webseite auch für Iphone und Androids adaptieren kann.
Ein Kollege hat das schon mal gemacht und der hat einfach die Bildschirmgröße ausgelesen und dann ein eigenes Template dafür gemacht. Heute bei meinen Recherchen hab ich herausgefunden, dass sich das media queries nennt.
Gibts hierzu Tipps welche man beachten soll oder was man auf keinen Fall machen soll - vielleicht hat schon jemand Erfahrungen damit?
Vielen Dank!

otter24 · 19. Dezember 2012 22:47

Yipp..

zunächst ein paar inspirationen mediaqueries.es

dann kannst Du für den Anfang mal 2 CSS Frameworks ausprobieren . Das eine ist Yaml4
Da das un D entwickelt wurde gibt es auch viele Tipps in D. Yaml ist recht einfach zu durchschauen und Du siehst gleich wie sich das mit den media queries verhält.

Zum anderen gibt das Fundation das kommt mit allem pipapo daher und ist acuh schon deutlich komplexer und bringt ne Menge addons ( Slider, Tabs etc etc mit.) Wie gesagt das ist aber auch ein Brocken.

Es gibt noch viele andere Frameworks.

Du mußt die Frameworks nicht nutzen und kannst natürlich auch alles selber schreiben. So hast Du aber sofort was in der Hand und kannst das Verhalten sehen. Vor allem kann man das Design auch so ohne weiteres umsetzten? Zum anderen ist es nicht mit den Media queries getan, Bilder wollen richtige eingebaut und in der entsprechenden Auflösung eingebunden, bzw bereitgestellt werden. Navigationslösungen Formulare etc. etc. Man muss sich ne menge Gedanken vorher machen zur Struktur der Seite und des Content.

Ach und es ist tatsächlich so wenn Du deine "eigenen" CSS entwickelst. "Mobile First" also erst die kleinen Auflösungen erstellen und sich dann bis FUll HD hoch arbeiten. Ich komm damit inszischen besser zurecht als umgekehrt,

Ein unablässiges Tools.
Für den Firefox gibt das die Web Developer Toolbar, da kannst Du eine Vorschau der verschiedenen Auflösungen generieren für den ersten groben überblick. So richtig kontrollieren kannst das erst auf den Zielgeräte also nen Tablett und nen Smartphone zur Hand ist schon gut.
Für den Chrome und Safari gibt das auch solche "Responsive Viewer"

und eins noch ... um die alten IE gurken brauchst dich nicht kümmern, die gibt das kaum auf den Smartphones ;-)
Also ran an den Speck, Du willst keine anderen Seiten mehr machen, wenn Du damit angefangen hast.

Gruß aus HH

brandy · 20. Dezember 2012 09:05

Vielen Dank für die motivierende Antwort!

Ich hab mich jetzt mal über die verschiedenen Frameworks informiert - Gumby hört sich für mich sehr interessant an.
Ich verstehe aber die grundsätzliche Verwendung der Dinger nicht - ich lade da eine Datei herunter - wie implementiere ich das ganze dann auf eine Seite?
Vielen Dank!

otter24 · 20. Dezember 2012 10:47

Eigentlich ganz einfach.

Du erstellst nen neues CMSMS Template. Ich gehe meist so vor. Also wenn ich was gaaaanz neues ausprobiere.
Wenn man schon erste Seiten gebaut hat überspringe ich diesen Schritt und verwende schon etwas weiterentwickeltes von mir.

1. Ich erstelle in CMSMS ein neues Template.
2. Dann baue ich das vom Framework mitgelieferte HTML ins Template ein. ( Ohne Menu und den anderen Krams der bei CMSMS dabei ist.)
3. Dann lade ich die Dateien hoch ( JS und CSS) verknüpfe die Dateien, bei einem Fundation Template würd das in etwa so aussehen.

Hier klicken, um den Code zum Kopieren zu markieren

[== Templateisch ==]
  <link rel="stylesheet" href="uploads/css/foundation.css">       
<script src="uploads/js/modernizr.foundation.js"></script>
.....

Dann kann man zumeist schon etwas sehen...

Tja und dann den Rest einbauen. Den Contentblock {content}musst Du natürlich erstmal irgendwo einbauen sonst kannst das Template nicht speichern.
Bei Menu muss Du wahrscheinlich über den Menumanager ein neues Menu erstellen ( minimal am besten) und im Menutemplate ggf. ein paar Anpassungen machen. z.b die ul class="".. Genauso siehts mit der Suchefunktion und den Formularen etc aus.

Du kannst natürlich auch das CSS anpassen.

Achte immer darauf das alle Dateien die Du einbindest auch geladen werden... ;-)
Ja und dann geht das Styling los..

So das ist mein Weg. Frag jemand anderes und Du bekommst einen anderen Weg geliefert. For Sure ;-)

brandy · 20. Dezember 2012 11:14

Cool, vielen Dank!

czarnowski · 20. Dezember 2012 11:58

Bei einer umfangreichen Website wird man schnell bemerken das man im mobilen Bereich nicht ohne einen erheblichen Teil an Javascript auskommen wird.

Manche Dinge kann man mit Javascript pur erschlagen, bequemer wird es mit einer Lib wie Jquery und es wird damit auch einfacher.
Aus meiner Erfahrung ist Jquery das z.Z. am besten funktionierende Lib - das würde ich nutzen.

otter24 · 20. Dezember 2012 14:47

Yipp sehe ich auch sooo deswegen wäre fundation auch das Framework der Wahl, weil das Jquery schon mitbringt. und ziemlich verzahnt mit jquery ist.

rage_all · 20. Dezember 2012 16:26

Die letzten Projekte habe ich mit Skeleton umgesetzt.
Ich fand die Lernkurve überschaubar und JS war nur eine Option, keine Pflicht.

Klar, inzwischen gehört es ja komplett dazu, User erwarten heutzutage ja schon dass es eine schöne Bildergalerie gibt mit zoombaren Bildern und evtl. sogar schon "Like-Buttons" drin.
Wenn jQuery die Pflicht ist, nähm ich das auch - werde Eure Tipps also nachher mal ansurfen... smile

Wollte aber unbedingt noch meinen Senf dazu geben! So. big_smile

brandy · 27. Dezember 2012 14:07

@otter24:
Ich hab mir jetzt mal eine Testinstallation aufgesetzt und probiere mit Foundation herum - cmsms.davidb.at

Oben hab ich mal ein Logo eingebunden. Was mir jetzt aber unklar ist: Muss ich jetzt alles in den CSS-Dateien stylen, oder kann ich mir zusätzlich einen Stylesheet erstellen, diesen dem Template zuweisen und hier Änderungen machen? Wollte dies nämlich gerade mit dem Body-background machen und es funktioniert leider nicht...

Eine weitere Frage wären die Bildgrößen - wie geb ich diese am besten an, damit sie sich immer schön dem Framework anpassen?

Danke...

otter24 · 27. Dezember 2012 14:45

brandy schrieb:

Muss ich jetzt alles in den CSS-Dateien stylen, oder kann ich mir zusätzlich einen Stylesheet erstellen, diesen dem Template zuweisen und hier Änderungen machen? Wollte dies nämlich gerade mit dem Body-background machen und es funktioniert leider nicht...

Das kannst Du halten wie Du möchtest. Normalerweise ist es besser die Anweisungen in einem seperaten CSS zu überschreiben. Du musst halt die CSS Dateien so einbinden das Du die Kaskade einhälst.
Wenn Du dich "verzettelst" hast Du immer noch die Orginal Anweisungen. und du hast den Vorteil das man schneller mal sache ausprobieren kann.

brandy schrieb:

Eine weitere Frage wären die Bildgrößen - wie geb ich diese am besten an, damit sie sich immer schön dem Framework anpassen?

img {
height: auto;
width:100%;
}

Damit passen sich die Bilder automatisch, bzw sie werden meist runterskaliert. Größer als ihre ursprüngliche Größe werden sie nicht... Aber ... Das bedeutet auch das 2 Dinge damit machst, die die Performance drücken. Zum einen lädst Du die Bilder immer in voller größe runter, das kost Bandbreite und knabbert an der imaginären Mobilflatrate und zum und 2. bürdest Du dem Browser ( letztendlich dem Prozessor) die Skalierung der Bilder auf. Für die Entwicklung der Seite OK!
Wenn Sie live ist solltest Du andere Lösungen ausprobieren

Du musst mal nach Image Responsive suchen da gibt das eine ganze Reihe von Ansätzen.

Background-image kannst Du für die jeweiligen Sprungpunkte einbauen.

brandy · 27. Dezember 2012 15:22

Ok gut, bin jetzt schnell mal auf diese Lösung gestoßen -http://adaptive-images.com/ - Was verwendest du für einen Ansatz? Vor allem wie funktioniert das Ganze in Verbindung mit dem Gallery-Modul?

Allgemein muss ich jetzt ja bei jedem Abstand relativ denken - also jedes padding, margin usw. darf keine Fixzahl mehr sein, oder?

Die meisten Lösungen verwenden ja Javascript - gibts hierzu keine Probleme mit den Smartphones?

Beitrag geändert von brandy (27. Dezember 2012 16:19)

brandy · 28. Dezember 2012 13:21

Gut Klenkes hat eine Frage schon mal beantwortet:
http://www.cmsmadesimple.de/forum/viewtopic.php?id=2826

Forum für CMS/made simple

#1 19. Dezember 2012 20:31

[GELÖST] Mobile Website

#2 19. Dezember 2012 22:47

Re: [GELÖST] Mobile Website

#3 20. Dezember 2012 09:05

Re: [GELÖST] Mobile Website

#4 20. Dezember 2012 10:47

Re: [GELÖST] Mobile Website

#5 20. Dezember 2012 11:14

Re: [GELÖST] Mobile Website

#6 20. Dezember 2012 11:58

Re: [GELÖST] Mobile Website

#7 20. Dezember 2012 14:47

Re: [GELÖST] Mobile Website

#8 20. Dezember 2012 16:26

Re: [GELÖST] Mobile Website

#9 27. Dezember 2012 14:07

Re: [GELÖST] Mobile Website

#10 27. Dezember 2012 14:45

Re: [GELÖST] Mobile Website

#11 27. Dezember 2012 15:22

Re: [GELÖST] Mobile Website

#12 28. Dezember 2012 13:21

Re: [GELÖST] Mobile Website

Fußzeile des Forums