Hallo,

Zu dem Thema ist noch nicht allzuviel zu finden und ich weiß auch nicht ich welches Forum das am besten passen würde, deshalb mal hier:

Ich bin dabei, ein Konzept für eine Webseite zu erstellen und möchte dazu auch die mobile Version der Website visualisieren. Ich arbeite da in Photoshop und mit externen Entwicklern zusammen die das dann nachher umsetzen werden. Nun stellt sich mir die Frage: wie gehe ich hier am besten vor?

Welche Maße nehme ich hier z.B. generell? Die Pixelmaße des Displays eines iPhones oder Galaxys sind ja zu groß weil man noch das Browserfenster mitrechnen muß. Gibt es da Richtlinien? Und wie würdet ihr das am besten visualisieren nacher? Früher gab's in der CS ja Device Central, heute mit CS6 gibt's Edge Inspect aber das ist eher für schon fertig programmierte Seiten. Oder nutzt ihr sowas wie Skala Preview o.ä.?

Würde mich freuen über einige Tipps zum Thema :)

Viele Grüße,
Sacha

Hi,

Zu diesem Thema gibt es aber jede Menge Lösungen und Tutorials und Frameworks.

Also ich verwende einen Grid Aufbau und Media Querys, das funktioniert sehr gut auf weitestgehend allen Endgeräten.

Alternativ kannst du für mobile Geräte separate Templates machen, aber der Aufwand ist dann höher.

ob CS6 die richtige Wahl ist weiß ich nicht, aber um tiefere CSS Kentnisse wirst du nicht herum kommen.

Gruß Sven

Hallo Sven,

Zitat

gibt es aber jede Menge Lösungen und Tutorials und Frameworks.

Ja, klar. Das Internet ist voll mit Tutorials. Hab bisher aber nichts gefunden, das den Workflow ein bisschen klar darstellen würde ...

Zitat

verwende einen Grid Aufbau und Media Querys

Bei meiner Frage geht es nicht um die Umsetzung sondern nur das Konzept/Design.

Zitat

aber um tiefere CSS Kentnisse wirst du nicht herum kommen.

Ist klar, aber davon rede ich ja gar nicht ;-) siehe oben. Mir geht es hier erst mal nur darum, den Part möglichst korrekt zu erledigen der vor der ersten Zeile HTML kommt ...

Gruß,
Sacha

Hi,

ich verstehe deine Probleme nicht was das mit dem Konzept oder Design aufsich hat.

Entweder mache ich eine Seite für alle Endgeräte oder ich mache für mobile Geräte etwas separates. Dann brauchst du ein neues Konzept.

Im ersten Fall ändert sich nichts in Bezug auf alte Technologien.

Die Kentnisse über die Möglichkeiten von Media Querys sollten die Fragen über ein Konzept beantworten.

Eventuell beachtest du beim Entwurf schon Darstellungen, Bilder, Schriften usw.
Selbst das kann man mit CSS dynamisch anpassen.

Ansonsten fällt mir dazu nichts mehr ein. Ich habe schon mehrere Projekt mobilgerecht gemacht und hatte diese Probleme noch nicht.

Gruß Sven

Hi Sacha,

evtl. wirst Du dort fündig, die machen sehr viel
in der Richtung:

http://tympanus.net/codrops/collective/

Hallo Sacha

Schau doch einmal hier nach http://twitter.github.io/bootstrap/.
Ich denke, dass dir dies weiterhelfen könnte. Es ist ein geniales Framework und ich denke, dass du die Garfik bestens darauf abstimmen kannst.

Eben habe ich mein erstes Projekt damit realisiert und ich denke, dass ich wohl die meisten Sites nun damit aufbauen werde, wenn vom Kunden die Darstellung auf dem Handy erwünscht ist.

Ich habe übrigens unter https://www.facebook.com/dynpg einen kleinen Beitrag dazu geschrieben.

Grüessli
Urs

Hallo,

bin auch gerade im Einarbeiten mit bootstrap. Benutzt Du denn LESS oder arbeitest Du Dich durch die fertigen CSS-Sheets?

Grüsse Gunther

Hallo Gunther

Ganz offen muss ich gestehen, dass ich dies noch nicht kannte. Immer wieder wird man als Einzelkämpfer mit neuen und faszinierenden Möglichkeiten konfrontiert. LESS ist das eine - aber da ist auch SASS.

Wir sind immer am Lernen. Bootstrap ist genial, doch auch da gibt es so viele Möglichkeiten, welche erst entdeckt werden wollen.

Grüessli
Urs