Ein Desktop-Browser sehr schmal zusammenzuzwängen, kann Ihnen eine vage Vorstellung davon vermitteln, wie ein responsives Design funktioniert, aber es ist keine genaue Darstellung eines tatsächlichen kleinen Bildschirmgeräts. Und tatsächlich sind es die tatsächlichen kleinen Bildschirmgeräte, für die wir hier gestalten, nicht andere neugierige Designer, die ihre Browser schmal zusammenzwängen =).
In diesem Screencast öffnen wir den iOS-Simulator (kostenlos bei XCode auf einem Mac dabei) und nehmen einige Design-Anpassungen vor, basierend auf dem, was wir dort sehen. Nach meiner Erfahrung ist der Simulator sehr genau in dem, was Sie auf dem echten Gerät sehen. Ich habe jedoch auch Unterschiede gesehen – zum Beispiel den Speicherverbrauch. Kurz nach dem Start dieser Website hatte ich Abstürze im mobilen Webkit (crashing on mobile webkit) – und das passierte nicht im Simulator.
Eine Sache, die wir tun, ist, den 3D-gestapelten Papiereffekt bei der schmalsten Media-Abfrage zu entfernen. Wir stellen auch fest, dass die Anzeige in der Kopfzeile zu einem horizontalen Scrollen auf dem Handy führt, was unerwünscht ist, wie wir uns dem mobilen Layout nähern. Glücklicherweise konnten wir das sofort nachverfolgen, aber manchmal sind diese Dinge schwer zu finden und man versteckt einfach `overflow-x` auf dem Body, was wir hier letztendlich tun.
Wir passen auch einige Schriftgrößen für den kleineren Bildschirm an.
Vielleicht gehen Sie in einem späteren Video darauf ein, aber könnten es Browser-Kompatibilitätsunterschiede sein?
Der iOS-Simulator ist Safari. Ich weiß, Chrome und Safari sind sich sehr ähnlich, aber ich bin mir nicht sicher, ob es Unterschiede zwischen Chrome und Mobile Safari gibt.
Ein paar Werkzeuge, die ich für RWD auf einem Windows-Rechner nützlich fand (ich habe keine Verbindung zu diesen Werkzeugen, sie sind einfach großartig und funktionieren auch auf dem Mac).
1. Ein Chrome-Add-on namens Window Resizer, mit dem Sie spezifische Bildschirmauflösungen für Ihren Browser einstellen können (Danke Treehouse dafür).
2. Adobe Edge Inspect (früher Adobe Shadow). Dieses dupliziert im Grunde den Inhalt Ihres Browserfensters und zeigt ihn auf einem mobilen Gerät an.
Ich habe das bereits in einem früheren Screencast erwähnt, aber für Windows benutze ich das hier, ich denke, es ist das Beste. Ripple emulator
Was halten Sie davon, die Website zuerst für mobile Geräte zu erstellen und dann nach und nach mehr für Tablets und Desktops hinzuzufügen? Ich höre Leute darüber sprechen, zuerst für mobile Geräte zu gestalten, weil man sich auf den Inhalt konzentriert. Tun das andere auch und hätten Sie, Chris, das hier zuerst tun sollen?
Übrigens, ich liebe die Videos. Ich lerne viel und merke auch, dass Selbstgespräche normal sein müssen, da ich dasselbe tue, wenn ich Websites entwickle.
Ich halte das für einen großartigen Ansatz – eher für Web-Apps. Es zwingt Sie, zu kürzen und zu vereinfachen, nur wegen des Mangels an Bildschirmplatz. Das ist eine große Sache für Apps, die bestimmte Dinge nicht kürzen können, da sie für das, was die App tut, absolut entscheidend sind.
Weniger wichtig für Web-Sites. Immer noch vereinfachen, aber man muss nicht so viel kürzen. Das Ziel ist hauptsächlich Lesbarkeit und Navigierbarkeit, was einfachere Probleme sind als beispielsweise ein Drag-and-Drop-Formularersteller.
Mobile First ändert Ihre Prioritäten. Für eine Website wie CSS-Tricks ist MF wohl WENIGER wichtig, weil die meisten Leute, die die Website nutzen, Entwickler vor einem Computer sind und nicht an ihren iPhones entwickeln (testen ja… entwickeln, bezweifle ich), aber ich bin sicher, Chris hat beim Design für Desktop auch an Mobile gedacht.
Ich würde eher widersprechen, dass es generell für Web-Sites weniger wichtig ist. Es hängt immer noch von der Zielgruppe und dem Inhalt der Website ab. Wenn Sie bereits eine Website haben, sind Google Analytics eine Goldgrube für solche Informationen.
Viele Leute nutzen ihr Handy als primäres Computergerät. Dann gibt es noch diejenigen, die Tablets und Phablets als primäre Geräte nutzen!
Es hängt von Ihrem Inhalt und Ihrer Zielgruppe ab, aber ich würde vielleicht in Betracht ziehen, für etwa 600px Breite als primär zu gestalten. Breitere Versionen (Desktop) und mobile Versionen können von dieser Breite aus reagieren. Wenn Sie ein iPad haben, schauen Sie sich
…ups… schauen Sie sich http://niarchive.org/trails/causeway-coast-salmon/ auf Ihrem iPad an. Mir gefällt, wie sie das schmale Layout in einen „Lesemodus“ überführen.