Wie haben sie es gemacht?: Shopify - Alles dreht sich um die Details

Wenn Sie noch nie von Shopify gehört haben, haben Sie sich vielleicht unter einem Felsen niedergelassen. Shopify ist einer der beliebtesten Dienste für die Online-Erstellung von E-Commerce-Lösungen und hat kürzlich seine nach vorne gerichtete Website neu gestaltet.

Heute werden wir uns einige der feineren Details des Redesigns ansehen und ein wenig darüber sprechen, wie das Redesign erreicht wurde. Lass uns eintauchen!

Alles über Responsive

Die Umstellung auf Responsive ist die wichtigste Änderung, die Shopify bei dieser Neugestaltung vorgenommen hat, und der Detaillierungsgrad an jedem Haltepunkt lässt keinen Benutzer zurück.

Shopify ist ein großartiges Beispiel für Designentscheidungen basierend auf der Bildschirmgröße. Schauen wir uns einige dieser Beispiele an, beginnend mit der Homepage.

Für die Dauer dieses Artikels verwenden wir den Begriff "mobile" in Bezug auf den kleinsten Haltepunkt, "tablet" für die nächste Haltepunktgröße und "desktop" für die höheren Haltepunkte. Es gibt mehr als nur drei grundlegende Haltepunkte in diesem Design, aber diese Begriffe geben uns einen Rahmen zum Nachdenken über Geräte.

Homepage, Header

Mobile

Bei der mobilen Größe sehen wir einen klaren Aufruf zum Handeln, Erste Schritte, der zweimal wiederholt wird. Wir sehen auch eine minimale Version des shopify-Logos, einen zentrierten Slogan und einen vertikal gestapelten grünen Farbblock mit einer überlagerten Funktion eines Shopify-Kunden. Oben links in der Kopfzeile befindet sich eine Menüschaltfläche im Hamburger-Stil.

Tablette

Sobald wir uns dem Tablet-Haltepunkt nähern, können wir sehen, dass sich die Präferenz vom vertikalen Stapeln weg verschiebt und stattdessen der Inhalt horizontal platziert wird. Der Detaillierungsgrad oder die „Inhaltsauflösung“ nimmt zu. Wir sehen ein detaillierteres Logo (immer noch zentriert), einen größeren Text und das Bild des Shopify-Kunden zeigt mehr Details.

Am interessantesten ist vielleicht, dass der grüne Block vom vertikalen Stapel zu einer horizontalen Ausrichtung wechselt und auf der rechten Seite des Headers schwebt. Wir sehen auch eine Anmeldung-Schaltfläche neben dem primären Aufruf zum Handeln oben in der Kopfzeile. Bei der Tablet-Größe sehen wir immer noch das Menü im Hamburger-Stil.

Desktop

Die höchste Detailstufe im Header finden Sie in der Desktop-Version des Headers. Das Logo wird links ausgerichtet und das Hamburger-Menü wird durch ein explizites Menü ersetzt. Wir behalten die horizontale Ausrichtung bei, die im Tablet-Haltepunkt angezeigt wird. Auf der linken Seite wird der Aufruf "Erste Schritte" in eine Schaltfläche zum Senden von Formularen mit einem Textfeld umgewandelt, in das der Benutzer seine E-Mail-Adresse eingeben kann. Darunter sehen wir einen brandneuen Inhalt: "Vertrauen von über 100.000 Ladenbesitzern."

Diskussion

Der Header ist eine Fallstudie zum Treffen von Entscheidungen für Mobilgeräte. Was sind die wichtigsten Elemente, die niemals entfernt werden sollten? Welche Elemente sind für jeden Haltepunkt und alle Geräte geeignet, die üblicherweise in diesen Haltepunkt passen? Shopify hat sich beispielsweise dafür entschieden, das Image eines einzelnen Shopify-Kunden an allen Haltepunkten zu verwenden, auf Desktops jedoch nur die quantitative Meldung "Vertrauenswürdig von über 100.000* Ladenbesitzern" anzuzeigen. Diese Art von Entscheidungen sind übergeordnet und mehr als ästhetisch ausgerichtet.

*Hinweis: Seit wir diesen Artikel schreiben, hat Shopify diese Zahl auf 120.000 aktualisiert.

Bonuspunkte: Verwendung des <picture>-Elements und der Daten-URI-Bilder

Es ist zu beachten, dass Shopify viele webstandardfreundliche Reaktionstechniken verwendet, z. B. die Verwendung des <picture>-Elements. Hier ist das Markup für das Bild von Corrine Anestopoulos:

1

<picture class="merchant-header__photo js-window-loading">

2

  <!--[if IE 9]><video style="display: none;"><![endif]-->

3

  <source srcset="/assets2/homepage/homepage-person@desktop-4f0656677d8cda087a8df30e0d18c41a.png, /assets2/homepage/homepage-person@desktop-2x-452c196f174ecb74a2ec50f660e36af0.png 2x" media="(min-width: 990px)">

4

  <source srcset="/assets2/homepage/homepage-person@tablet-bb9c6db8102779be1709b489c8e46208.png, /assets2/homepage/homepage-person@tablet-2x-cd42bc0f6914581344be9bbc13f76e05.png 2x" media="(min-width: 750px)">

5

  <!--[if IE 9]></video><![endif]-->

6

  <img srcset="/assets2/homepage/homepage-person@mobile-0bd643463b033a47b989120d96348c0f.png, /assets2/homepage/homepage-person@mobile-2x-c4ea79e2203797bff7c24cf823c271f4.png 2x" alt="Shopify Merchant, Corrine Anestopoulos">

7

</picture>

Das <picture>-Element lädt Fotos mit unterschiedlicher Auflösung basierend auf der Auflösung des Geräts, um Probleme wie doppeltes Herunterladen, Missbrauch des CSS-background-image und nicht-semantisches Laden von JavaScript zu vermeiden. Auf diese Weise können Geräte mit hochauflösenden Bildschirmen Bilder mit höherer Auflösung anfordern. Beachten Sie, dass Sie auf keiner der neu gestalteten Seiten von Shopify pixelige Bilder finden.

Shopify verwendet auch Base-64-codierte Daten-Uris, um bestimmte Bilder im gesamten Design zu definieren, einschließlich der leichten Textur auf dem grünen Block in der Kopfzeile. Dies vermeidet unnötige zusätzliche HTTP-Anforderungen und ist besonders effektiv für UI-Bilder mit kleineren Details, die nicht in SVG konvertiert werden können, sowie für sich wiederholende Muster.

Apropos SVG: Das Shopify-Logo verwendet auch eine Base-64-codierte Daten-URL, um ein SVG-Bild zu definieren. Dies funktioniert auf die gleiche Weise wie bei den vorherigen uri-codierten Bildern.

Navigation

Die primäre mobile Navigation basiert auf einer ausgeblendeten Seitenleiste außerhalb des Bildschirms, die angezeigt wird, wenn auf das Hamburger-Menü geklickt oder es berührt wird.

Die Animation wird mit transform und translateX in Kombination mit der folgenden Übergangsregel ausgeführt:

1

transition: transform 0.6s cubic-bezier(0.66, 0, 0.41, 1);

Die Schublade selbst ist auf position: fixed, mit einer overflow-y zum scroll. Wenn die Schublade geöffnet wird, erhält das Körperelement eine Klasse js-drawer-open, die die Höhe auf 100% und den Überlauf auf versteckt setzt. Dies verhindert, dass der Benutzer bei geöffnetem Navigationssystem durch die Inhaltsseite blättert.

Auf einigen internen Seiten befindet sich eine sekundäre Navigation, bei der es sich lediglich um ein stilisiertes <select>-Element handelt. Hier ist das CSS, mit dem das <select>-Element stilisiert wird:

1

.nav__mobile__select { 

2

    width: 100%; 

3

    background: transparent url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3…wIDUuMTkyLDMuNzM1IDguODY1LDAuMDEgMTAuMjg5LDEuNDE0IAkiLz4KPC9nPgo8L3N2Zz4K") no-repeat right center; 

4

    border: none; 

5

    -webkit-appearance: none; 

6

    -moz-appearance: none; 

7

    -ms-appearance: none; 

8

    -o-appearance: none; 

9

    appearance: none; 

10

    color: #767676; 

11

    }

Wieder sehen wir die Daten-Uri-Technik, die für den Abwärtspfeil auf der rechten Seite der Auswahl verwendet wird, sowie die appearance regel, die Browser-Stile auf Basisebene definiert.

Das gleiche primäre Menü wird sowohl unter Tablet- als auch unter mobilen Haltepunkten verwendet, das sekundäre Menü wird jedoch nur unter dem mobilen Haltepunkt verwendet. Am Desktop-Haltepunkt werden die Menüs explizit angezeigt, wobei das sekundäre Menü auf Seitenebene oben auf der Seite angezeigt wird. Die Navigationsleiste selbst verwendet Headroom, ein JavaScript-Plugin zur Steuerung der Anzeige einer klebrigen Navigationsleiste basierend auf verschiedenen Aktionen. Auf den internen Seiten wird beispielsweise die primäre Navigationsleiste ausgeblendet, wenn der Benutzer nach unten scrollt und nur die sekundäre Navigationsleiste sichtbar bleibt. Sobald der Benutzer jedoch beginnt, wieder nach oben zu scrollen, wird die primäre Navigationsleiste erneut angezeigt.

In Bezug auf Schiebemenüs hat Shopify eine interessante Strategie gewählt, um auf Klicks auf Call-to-Action-Schaltflächen zu reagieren: eine Schiebeschublade auf der rechten Seite des Bildschirms mit einem Menü. Diese Schublade wird sowohl auf dem Tablet als auch auf dem Handy angezeigt. Auf dem Desktop werden die Formulareingaben über einem halbtransparenten schwarzen Vollbildhintergrund im Modalstil abgelegt.

Seite "Online verkaufen"

Die Seite „Online verkaufen“ bietet einige besonders interessante Überlegungen für reaktionsschnelle Überlegungen.

Handlungsaufforderung für den Header

Das Header-Bild ist die erste offensichtliche Überlegung, da es an jedem Haltepunkt seine Größe ändert. Am Desktop-Haltepunkt tritt jedoch eine subtilere Änderung auf. Anstatt nur die Schaltfläche "Geschäft erstellen" bereitzustellen, wird ein Formular mit drei Feldern angezeigt, in dem Benutzer aufgefordert werden, sich anzumelden und ein Geschäft in einem einzigen Formular zu erstellen. Dies folgt dem gleichen Muster wie beim Aufruf der Homepage zum Handeln.

Schieberegler für den Inhaltsbereich

Ein weiteres Inhaltsmodul, das an mehreren Stellen wiederholt wird, wird auf der Seite Online verkaufen angezeigt. Am mobilen Haltepunkt ist das Modul im Wesentlichen ein Akkordeon von Inhaltsabschnitten mit jeweils einer Kopfzeile und einer + Schaltfläche, die den Abschnitt anzeigt. Wenn dies angezeigt wird, kann der Benutzer auf eine - Schaltfläche klicken oder diese berühren, um diesen Abschnitt auszublenden.

An den Haltepunkten für Tablets und Desktops wechselt das Modul jedoch zu einer detaillierteren horizontalen Schaltflächennavigation.

Jede Schaltfläche in der Navigation ist einem Inhaltsblock zugeordnet. Die Schaltflächenkopie ändert sich von längeren, aussagekräftigeren Überschriften zu einzelnen Wörtern, die von einem Symbol begleitet werden. Die Inhaltsabschnitte selbst enthalten größere Bilder, die dem Titel des Abschnitts zugeordnet sind.

Das gleiche Muster wird zweimal auf der Seite „Online verkaufen“ angezeigt. Das Akkordeon wird auch an anderer Stelle wiederverwendet, einschließlich am mobilen Haltepunkt auf der Seite "Features". Ein interessanter Unterschied besteht jedoch darin, dass das Akkordeonmodul nicht immer von denselben oben beschriebenen Tastenabschnitten begleitet wird. Auf der Seite "Features" sehen wir auf der linken Seite eine feste Inhaltsnavigation mit scrollbaren, immer sichtbaren Inhaltsabschnitten auf der rechten Seite.

Informationsauflösung: Bildauswahl

In zwei Abschnitten, "Nehmen Sie Ihren Laden mit, wohin Sie gehen" und am Ende unter "Wir sind hier, um Ihnen zu helfen, 24 Stunden am Tag, 7 Tage die Woche", werden Bildauswahlmöglichkeiten an verschiedenen Haltepunkten getroffen. Im Abschnitt "Nehmen Sie Ihren Laden mit, wohin Sie auch gehen" wird das Bild eines iPhones nur am Tablet-Haltepunkt und darüber angezeigt. Im Abschnitt „24/7“ zeigt ein Bild von Kundendienstmitarbeitern sieben Personen an Haltepunkten für Mobilgeräte und Tablets, wächst jedoch auf 13 Personen am Haltepunkt für Desktops. Dies wird mit dem Element <picture> erreicht:

1

<picture>

2

  <!--[if IE 9]><video style="display: none;"><![endif]-->

3

  <source srcset="/assets2/support/gurus-white@desktop-76b9f1d671a43c72cb51ea40597e126c.jpg, /assets2/support/gurus-white@desktop-2x-70a9f83d819f8a4217d3afe2c7f01caf.jpg 2x" media="(min-width: 990px)">

4

5

  <!--[if IE 9]></video><![endif]-->

6

  <img srcset="/assets2/support/gurus-white@mobile-b020f30373b7452fd36452bc19616936.jpg, /assets2/support/gurus-white@mobile-2x-9aea44236e0c4c2440a32940caaae200.jpg 2x" alt="Shopify support gurus">

7

</picture>

Beachten Sie das IE9-spezifische <video>-Element. Dadurch kann IE9 die <source> verwenden. Shopify verwendet auch Scott Jehls Picturefill, eine Polyfill für das Bildelement, die die meisten gängigen Browser unterstützt. (Informationen zur Browserunterstützung finden Sie hier.)

Testimonial Karussell

Am mobilen Haltepunkt werden die Testimonials als einzelne Elemente in einem Karussell angezeigt.

Bei Tablettengröße und größer werden diese Folien parallel zueinander angezeigt.

Es ist nicht ganz klar, warum Shopify ein Karussell anstelle einer vertikalen Anordnung der Elemente verwendet hat, aber es könnten einige fundierte Vermutungen angestellt werden. Beispielsweise wollte Shopify möglicherweise nicht den vertikalen Raum opfern, der zum Stapeln der Testimonials erforderlich ist, damit der Benutzer schneller zum endgültigen Aufruf zum Handeln gelangen kann. Oder es könnte einfach eine ästhetische Wahl sein.

Preisseite

Die Preisseite kann als eine der wichtigsten Seiten einer bestimmten Service-Marketing-Seite angesehen werden. Aus diesem Grund ist es fast sicher, dass die Entscheidungen von Shopify auf dieser Seite sorgfältig durchdacht wurden. Schauen wir uns an, wie sich der Inhalt im Verlauf der verschiedenen Haltepunkte ändert.

Mobile

Der Benutzer wird gebeten, einen Plan auszuwählen, der seinem Budget entspricht, und hat drei Optionen: Online verkaufen, im Geschäft verkaufen oder beides.

Wenn Sie eine dieser Optionen auswählen, werden die Preismodule an die von Ihnen gewählte Situation angepasst. Diese Änderung geht auch mit einer Änderung der Farbe einher. Eine subtile Designentscheidung von Shopify war die Verwendung von Gelb für „Online“, Blau für „Im Laden“ und Grün für die Kombination für beide; Dies ist besonders clever, da durch die Kombination von Blau und Gelb tatsächlich Grün entsteht.

Sobald der Benutzer seine Verkaufsstelle ausgewählt hat, werden ihm vertikal angeordnete Blöcke angezeigt, die den Preis und den Namen des Plans sehr deutlich anzeigen. Jeder Block enthält außerdem eine Dropdown-Liste "Plan-Details", in der die detaillierten Informationen des Plans wie Rate und Funktionen angezeigt werden.

FAQs werden unten im zuvor besprochenen Akkordeonmodul angezeigt. Die Akkordeon-Überschriften beziehen sich auf die Arten von Fragen, und jeder Abschnitt enthält mehrere Fragen. Dies unterscheidet sich von dem üblichen Ansatz, für jede Frage ein Akkordeon zu erstellen.

Tablette

Am Tablet-Haltepunkt werden sowohl die POS-Auswahl als auch die Preisblöcke in ein horizontales Layout verschoben.

Details werden jetzt angezeigt, ohne dass Sie auf ein Dropdown-Menü in jedem Inhaltsblock klicken müssen. Die Kassenauswahl wechselt auch von Nur-Text zu Text mit einem Symbol. Der "Professional"-Plan ist leicht vertikal von den beiden anderen Plänen versetzt und als "beliebtester" Plan gekennzeichnet. Sowohl am Tablet- als auch am mobilen Haltepunkt soll ein "Starter" -Plan viel weniger Aufmerksamkeit erregen und beinhaltet nicht den Aufruf "Try Shopify for Free" zum Handeln. Interessanterweise wird der gleiche Mangel an Fokus auf den Shopify Plus-Plan angewendet, der für Pläne mit hohem Volumen auf Unternehmensebene gilt.

FAQs leben nicht mehr in einem Akkordeon, sondern in einem zweispaltigen Layout.

Desktop

Die einzige Änderung im Zusammenhang mit dem Inhaltslayout bei der Desktopgröße besteht darin, dass die weniger fokussierten Pläne neben den drei Hauptplänen in eine vierte Spalte eingefügt werden.

Leuchtkasten „Beispiele“

Beispiele für Shopify-Themen sind letztendlich der beste Weg, um die Flexibilität und Anwendungsfälle für Shopify zu kommunizieren. Auf diesen Seiten wurden einige großartige Beispiele für reaktionsschnelle Interaktivität verwendet, auf die wir hinweisen möchten.

Mobile Lightbox-Erfahrung

Modale Fenster auf Mobilgeräten leiden häufig unter einem Mangel an absichtlichen Designüberlegungen für mobile Benutzer. Dies ist bei Shopify-Beispielmodalen nicht der Fall. Das Modal konzentriert sich auf Bilder im Vollbildmodus und bietet unten Navigationspfeiltasten und Metadaten.

Beim Wechsel zu einem Tablet-Layout werden die Pfeile und Metadaten rechts neben dem Bild angezeigt. Der Übergang zwischen jedem Modal verwendet eine scale und fade -Attributverschiebung. Der Übergang deutet auf einen Zoomeffekt innerhalb und außerhalb des Bildindex hin. Zu jeder Zeit, wenn das Modal geöffnet ist, sind sowohl eine Handlungsaufforderung als auch eine × Taste vorhanden, die dem Benutzer geeignete Austrittspfade bieten.

Das Raster selbst bietet Kontextfilter, mit denen der Benutzer auf der Seite durch verschiedene Arten von Themen navigieren kann. Der Skalierungs- und Opazitätsverschiebungseffekt wird auch hier wiedergegeben.

Footer

Die Strategie von Shopify für die Fußgängernavigation zeigt eine weitere Situation, in der die Auflösung von Inhalten angewendet wird. Am mobilen Haltepunkt werden zwei Spalten angezeigt:

Am Tablet und an größeren Haltepunkten werden zwei völlig neue Abschnitte eingeführt, die einen direkteren Zugriff auf Innendetails und "Autorität"-Seiten ermöglichen (inhaltsbasierte Seiten, die die Autorität für ein bestimmtes Thema festlegen).

Letztendlich zeigt dies, dass Shopify eine Strategie für die Auflösung von Inhalten festgelegt hat: Welche Inhalte sollten an allen Haltepunkten auf allen Geräten verfügbar sein, und welche Inhalte sollten nur verfügbar sein, wenn die Bildschirmfläche die eines Desktops oder Tablets ist? Diese Art von Fragen führt zu einer besseren allgemeinen Inhaltsstrategie und sollte wohl Teil aller reaktionsschnellen Designbemühungen sein.

Schlussfolgerungen

Shopify hat es geschafft, ein beeindruckendes Redesign mit hoher Integrität sowohl bei der Inhaltsentwicklung als auch bei den reaktionsschnellen Überlegungen durchzuführen.

Darüber hinaus haben sie einige der besten Techniken eingesetzt, die moderne Browser bieten. Obwohl es im gesamten Shopify-Ökosystem noch Seiten gibt, die noch nicht auf die neuen Techniken und das neue Designsystem umgestellt wurden, bieten die nach vorne gerichteten Website- und primären Marketing-Seiten ein solides und einzigartiges Responsive-Design-Modell, das Webdesignern und Front-End-Entwicklern zum Lernen zur Verfügung steht von.