Ok, also habe ich diese Frage, die mich schon eine ganze Weile nervt, ich werde versuchen, sie im Detail zu erklären.
Ich entwerfe eine normale Marketing-Website und habe zuerst die Desktop-Version mit dem Standard-Bootstrap-Raster (12 Spalten, 30 Pixel Dachrinnen) erstellt. Ich mache keinen Code (ich weiß, ich sollte).
Als ich nun gebeten wurde, sowohl Tablet- als auch mobile Versionen zu erstellen, kam mir diese große Frage in den Sinn. Wie verhält sich insbesondere dieses Raster bei kleineren Auflösungen? Es würde Sinn machen, dass im iPad, das klein ist, aber immer noch eine gute Auflösung hat, der Standard von 12 Spalten und 30 Pixel Bund steht. Dies würde dazu führen, dass die Website nur einige Container anpasst und in der Größe ändert, und es würde immer noch funktionieren.
Mein Problem ist mit dem Handy. Wenn wir am Haltepunkt ankommen, bleiben die gleiche Anzahl von Spalten und die gleiche Bundsteggröße gleich? Denn bei 30-Pixel-Rinnen werden die Spalten kleiner oder gleich groß wie die Rinne. Oder sollte ich einfach einen Haltepunkt setzen und 8 Spalten löschen und nur 4 verlassen?
Wie soll das Grid dann in einer PSD-Datei aussehen, die auf Mobile abzielt? Oder zumindest, was ist der beste Ansatz?
Danke
Es verhält sich so, wie Sie ihm sagen, dass es sich verhalten soll. Mit anderen Worten, diese Frameworks geben Ihnen ein Raster, mit dem Sie arbeiten können ... aber Sie müssen damit arbeiten. Sie müssen entscheiden, welche Breakpoints verwendet werden sollen und was mit jedem Breakpoint geschehen soll. Was ändert die Größe, was wird schmaler, was wird in eine neue Zeile umgebrochen, was wird ausgeblendet, was wird angezeigt, usw., usw.
Idealerweise tun Sie dies MIT dem Entwickler, anstatt separate PSD-Dateien zu erstellen.
Was ich auf der Foundation 6-Site gelesen habe, ist, dass das Raster mit Dachrinnen skaliert werden kann. Wenn ich in Sketch 3.5 (die beste App gegenüber Photoshop für responsives Design) für meine Zeichenflächen „Responsive Web“ auswähle, generiert das Raster automatisch Skalierungen, sodass die Dachrinnen an den beiden mobilen Unterbrechungspunkten schmaler werden.
Bei einer Unterbrechung von 768 Pixeln bleibt das Skizzenraster beispielsweise 12 Spalten mit einem Bundsteg von 10 Pixeln. Und bei einer mobilen Pause von 320 Pixel skaliert die Rinne auf 4 Pixel. Es ist gut zu wissen, denn dies ist Ihr minimaler linker und rechter Rand für Ihre EINE Spalte im 320-Pixel-Darstellungsbereich.
Die Grundidee ist, dass auf einem Telefon die Spalten zusammenfallen, sodass Sie nur noch eine Spalte haben.
Wenn Sie dies auf dem Desktop haben:
[ column1 ] [ column2 ] [ column3 ]
… dann sollten Sie auf einem Telefon Folgendes sehen:
[ column1 ]
[ column2 ]
[ column3 ]
Dies geschieht alles mit einfachem HTML+CSS.
Vielleicht möchten Sie sich Skeleton ansehen , eine kostenlose HTML+CSS-Boilerplate für responsives Design, die für mich wirklich gut funktioniert hat. Das Raster und die Breakpoints sind bereits definiert. Sie können es verwenden oder nicht, aber es ist zumindest wirklich lehrreich. Möglicherweise müssen Sie es nicht einmal herunterladen. Ändern Sie einfach die Größe des Browserfensters auf der Skeleton- Website und Sie werden sehen, wie die Spalten zusammenfallen. Aber die Vorlage selbst ist eine großartige Ressource für Designer, da Sie eine PSD mit sehr wenig Arbeit in eine responsive Website konvertieren können.
Ich mache keinen Code (ich weiß, ich sollte).
Ich gehöre also nicht zu den Leuten, die denken, dass jeder programmieren sollte, aber die Sache ist die, HTML+CSS ist nicht wirklich Programmieren. Es gibt keine Logik, keine Variablen, keine Bedingungen, keine Schleifen. HTML+CSS sieht auf den ersten Blick sehr schwierig aus, aber sobald Sie nur ein wenig darüber erfahren haben, stellen Sie fest, dass ein HTML-Tag einem Objekt auf der Photoshop-Leinwand entspricht (z. B. ist ein Text, der in ein ap-Tag eingeschlossen ist, nur ein Text Objekt) und eine CSS-Regel entspricht den Eigenschaften, die Sie mit den Panels von Photoshop auf dieses Objekt anwenden (z. B. Einstellen einer Breite und Höhe, Hinzufügen eines Schlagschattens). HTML+CSS. Sie sprechen bereits die Sprache von Objekten und Eigenschaften und Pixelmaßen, Sie müssen nur ein alternatives Vokabular lernen.
Dies ist ein großartiges Buch, das vielen Designern, die ich kenne, geholfen hat. Es wurde speziell für Leute geschrieben, die sich nicht für Code begeistern. Es hat einen sehr hellen Ton und deckt nur die Grundlagen ab.
Dies ist mein Arbeitsablauf, was ich im Laufe der Zeit einfacher fand:
Beim Entwerfen von PSDs für responsives Design machen Sie normalerweise auch HTML und CSS (plus JS), daher müssen Sie die Tablet-/mobile Website nicht wirklich in Photoshop entwerfen, Sie müssen nur daran denken, dass Sie es brauchen, um die zu ändern Layout, wenn kleinere Bildschirme erkannt werden.
Daher müssen Sie über gute Kenntnisse in Media Queries verfügen , ein grundlegendes Beispiel ist:
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
*Dies erkennt Ihre Bildschirmbreite, und wenn der Bildschirm eine Mindestbreite von 480 Pixel hat, ändert es die Hintergrundfarbe: Beispiel
Wenn Sie dies wissen, können Sie auf eine Tablet-Bildschirmbreite abzielen und das gewünschte CSS schreiben, das sich auf Ihr Layout auswirkt, und auch eine andere Regel für eine Telefonbildschirmbreite mit einem anderen CSS schreiben, wie z.
body{ background-color: black; }
@media screen and (max-width: 480px){ body {background-color: red;} }
@media screen and (max-width: 300px){ body {background-color: green;} }
Übersetzung:
Die Hintergrundfarbe des Körpers ist schwarz . Wenn die Bildschirmbreite gleich oder kleiner als 480 Pixel ist , ändern Sie die Hintergrundfarbe in Rot , aber wenn die Bildschirmbreite gleich oder kleiner als 300 Pixel ist , ändern Sie die Hintergrundfarbe in Grün .
Hoffe das hilft.
EDIT: Haha, ich habe gerade gesehen, dass diese Frage vor 10 Monaten gestellt wurde. :)) Wie auch immer, hoffe das hilft jemandem.
Zach Saucier