Share
Als je nog nooit van Shopify hebt gehoord, ben je misschien onder een rots gaan wonen. Shopify is een van de meest populaire services voor het online maken van e-commerce-oplossingen en onlangs hebben ze hun front-facing site opnieuw ontworpen.
Vandaag zullen we enkele van de fijnere details van het herontwerp bekijken en een beetje praten over hoe het herontwerp werd bereikt. Laten we erin duiken!
De overgang naar responsief is de primaire verandering die Shopify heeft aangebracht in dit herontwerp en het detailniveau bij elk breekpunt laat geen gebruiker achter.
Shopify is een geweldig voorbeeld van ontwerpbeslissingen op basis van schermgrootte. Laten we een paar voorbeelden eens bekijken, te beginnen met de startpagina.
Voor de duur van dit artikel gebruiken we de term 'mobiel' met verwijzing naar het kleinste breekpunt, 'tablet' om naar de volgende breekpuntgrootte te verwijzen, en 'bureaublad' om naar de hogere breekpunten te verwijzen. Er zijn meer dan alleen drie basis-breekpunten in dit ontwerp, maar deze termen bieden ons een kader voor het denken over apparaten.
Bij de mobiele grootte zien we een duidelijke oproep tot actie, Begin, wat twee keer wordt herhaald. We zien ook een minimale versie van het shopify-logo, een gecentreerde slogan en een verticaal gestapeld groen kleurenblok met een overlay-functie van een Shopify-klant. In de linkerbovenhoek van de kop wordt een menuknop van een hamburger-stijl geplaatst.
Zodra we naar het breekpunt van de tablet gaan, zien we dat de voorkeur weggaat van verticaal stapelen en dat de inhoud horizontaal wordt geplaatst. Het detailniveau of "inhoudresolutie" neemt toe; we zien een meer gedetailleerd logo (nog steeds gecentreerd), grotere tekst en het beeld van de Shopify-klant toont meer details.
Misschien wel het meest interessante is dat het groene blok verschuift van de verticale stapel naar een horizontale uitlijning, zweefde naar de rechterkant van de kop. We zien ook een Log in knop naast de primaire call-to-action boven aan de header. Bij de tabletgrootte zien we nog steeds ook het menu in hamburgerstijl.
Het hoogste detailniveau in de header is te vinden in de desktopversie van de header. Het logo wordt uitgelijnd met links en het hamburgermenu wordt vervangen door een expliciet menu. We behouden de horizontale uitlijning die wordt weergegeven in het breekpunt van de tablet. Aan de linkerkant, de Begin call-to-action wordt omgezet in een knop voor het verzenden van formulieren, met een tekstveld waarin de gebruiker zijn e-mailadres kan invoeren. Hieronder zien we een gloednieuw stuk inhoud, 'vertrouwd bij meer dan 100.000 winkeleigenaars'.
De header is een casestudy bij het nemen van beslissingen voor mobiel. Wat zijn de belangrijkste elementen die nooit mogen worden verwijderd? Welke elementen zijn geschikt voor elk breekpunt en apparaten die gewoonlijk in dat breekpunt passen? Shopify heeft er bijvoorbeeld voor gekozen om de afbeelding van één Shopify-klant op alle onderbrekingspunten te gebruiken, maar toont alleen het kwantitatieve bericht "Vertrouwd door meer dan 100.000 * winkeleigenaren" op desktops. Dit soort beslissingen zijn van hoger niveau en zijn meer dan esthetisch gefocust.
*Notitie: sinds we dit artikel begonnen te schrijven, heeft Shopify dit aantal bijgewerkt naar 120.000.
Accentsconagua
Opgemerkt moet worden dat Shopify veel web-standaard-vriendelijke responsieve technieken gebruikt, zoals het gebruik van de
De achtergrond afbeelding, en niet-semantische JavaScript-laden. Hierdoor kunnen apparaten met een hoge resolutie schermen afbeeldingen met een hogere resolutie aanvragen; Merk op dat u geen gepixelde afbeeldingen zult vinden op een van de opnieuw ontworpen pagina's op Shopify.
Shopify maakt ook gebruik van met base 64 gecodeerde data-uri's om bepaalde afbeeldingen in het hele ontwerp te definiëren, inclusief de lichte textuur op het groene blok in de kop. Hiermee wordt een onnodig extra HTTP-verzoek vermeden en is dit bijzonder effectief voor UI-afbeeldingen met kleinere details die niet naar SVG kunnen worden geconverteerd en patronen die zich herhalen.
Over SVG gesproken, het Shopify-logo maakt ook gebruik van een base-64 gecodeerde data-uri om een SVG-afbeelding te definiëren. Dit werkt op dezelfde manier als de vorige uri-gecodeerde afbeeldingen.
De primaire mobiele navigatie is afhankelijk van een verborgen zijbalk buiten het scherm die verschijnt wanneer op het hamburgermenu wordt geklikt of aangeraakt.
De animatie is bereikt met behulp van transformeren en translateX, in combinatie met de volgende overgangsregel:
overgang: transformeer 0.6s cubic-bezier (0.66, 0, 0.41, 1);
De lade zelf staat ingesteld op positie: vast, Met een overflow-y regel ingesteld op rol. Wanneer de lade wordt geopend, ontvangt het lichaamselement een js-lade open klasse, die de hoogte instelt op 100% en overloopt naar verborgen. Dit voorkomt dat de gebruiker door de inhoudspagina scrolt terwijl de nav open is.
Een secundaire navigatie is aanwezig op sommige van de interne pagina's, die eenvoudig gestileerd is element. Hier is de CSS die wordt gebruikt om de stijl te styliseren element:
.nav__mobile__select width: 100%; achtergrond: transparante URL ("data: image / svg + xml; base64, PCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3 ... wIDUuMTkyLDMuNzM1IDguODY1LDAuMDEgMTAuMjg5LDEuNDE0IAkiLz4KPC9nPgo8L3N2Zz4K") no-repeat rechts midden; rand: geen; -webkit-uiterlijk: geen; -moz-uiterlijk: geen; -ms-uiterlijk: geen; -o-uiterlijk: geen; uiterlijk: geen; kleur: # 767676; Opnieuw zien we de data-uri-techniek die wordt gebruikt voor de pijl naar beneden aan de rechterkant van de selectie, evenals de verschijning regel, die basisbrowserstijlen definieert.
Hetzelfde primaire menu wordt gebruikt onder zowel tablet- als mobiele breekpunten, maar het secundaire menu wordt alleen onder het mobiele breekpunt gebruikt. Bij het bureaublad-breekpunt worden de menu's expliciet weergegeven, waarbij het secundaire menu op paginaniveau boven aan de pagina wordt weergegeven. De navigatiebalk zelf maakt gebruik van Headroom, een JavaScript-plug-in voor het besturen van de weergave van een kleverige navigatiebalk op basis van verschillende acties. Op de interne pagina's verbergt bijvoorbeeld de primaire navigatiebalk terwijl de gebruiker naar beneden scrolt en alleen de secundaire navigatie zichtbaar blijft, maar op het moment dat de gebruiker weer naar boven schuift, verschijnt de primaire navigatiebalk opnieuw.
Scroll naar beneden, weg
Blader omhoog, daar is hetOver schuifmenu's gesproken, Shopify heeft gekozen voor een interessante strategie om te reageren op klikken op call-to-action-knoppen: een schuiflade met een menu aan de rechterkant van het scherm. Deze lade wordt op zowel tablet als mobiel weergegeven; op het bureaublad vallen de formulierinvoeringen over de bovenkant van een volledig transparante semi-transparante zwarte achtergrond, in modale stijl.
De pagina "Online verkopen" bevat enkele bijzonder interessante overwegingen voor responsieve overwegingen.
De headerafbeelding is de eerste voor de hand liggende responsieve overweging, omdat deze bij elk breekpunt van grootte verandert. Maar er vindt een meer subtiele verandering plaats op het bureaublad breekpunt. In plaats van alleen een Maak je winkel knop verschijnt een formulier met drie velden, waarin gebruikers worden uitgenodigd om zich aan te melden en een winkel te maken in één formulierinzending. Dit volgt hetzelfde patroon vanaf de startpagina-oproep tot actie.
Een andere inhoudsmodule die op meerdere plaatsen wordt herhaald, wordt weergegeven op de pagina Verkopen online. Bij het mobiele breekpunt is de module in wezen een accordeon van inhoudsecties, elk met een koptekst en een + knop die de sectie onthult. Bij onthulling kan de gebruiker op a klikken of deze aanraken - knop om dat gedeelte te verbergen.
Op de tablet- en bureaublad-onderbrekingspunten verandert de module echter in een meer gedetailleerde horizontale knopnavigatie.
Elke knop in de navigatie is gekoppeld aan een inhoudsblok. De knopkopie verandert van langere, meer beschrijvende koppen in afzonderlijke woorden, vergezeld van een pictogram. De inhoudsecties zelf bevatten grotere afbeeldingen die zijn gekoppeld aan de sectietitel.
Ditzelfde patroon verschijnt tweemaal op de pagina "Online verkopen". De accordeon wordt ook elders gebruikt, ook op het mobiele breekpunt op de pagina Functies. Een interessant verschil is echter dat de accordeonmodule niet altijd wordt vergezeld door dezelfde knopsecties die hierboven zijn beschreven. In het geval van de pagina Functies zien we een navigatie met een vaste inhoud aan de linkerkant, met schuifbare, altijd zichtbare inhoudssecties aan de rechterkant.
In twee secties: "Neem uw winkel mee naar waar u ook gaat" en aan het einde onder "We zijn hier om u te helpen, 24 uur per dag, 7 dagen per week", worden bij verschillende breekpunten beeldkeuzen gemaakt. In het gedeelte 'Je winkel meenemen waar je ook bent' verschijnt de afbeelding van een iPhone alleen bij het breekpunt van de tablet en hoger. In de sectie "24/7" toont een afbeelding van vertegenwoordigers van de klantenservice zeven personen op breekpunten voor mobiele apparaten en tablets, maar groeit tot dertien personen aan het bureaublad. Dit wordt bereikt met behulp van de
Let op de IE9-specificatie element; hierdoor kan IE9 de. gebruiken
Op het mobiele breekpunt tonen de getuigenissen als afzonderlijke elementen in een carrousel.
Bij het tabletformaat en groter laten deze dia's zich parallel aan elkaar zien.
Het is niet helemaal duidelijk waarom Shopify ervoor koos om een carrousel te gebruiken in plaats van een verticale opstelling van de elementen, maar er konden wel enkele oplettende schattingen worden gemaakt. Shopify wilde bijvoorbeeld niet de verticale ruimte opofferen die nodig was om de getuigenissen te stapelen, zodat de gebruiker sneller tot de laatste oproep tot actie zou kunnen komen. Of het zou gewoon een esthetische keuze kunnen zijn.
De prijspagina kan worden bekeken als een van de belangrijkste pagina's op een bepaalde servicemarketingpagina. Om die reden is het vrijwel zeker dat de beslissingen van Shopify op deze pagina nauwkeurig zijn doordacht. Laten we eens kijken naar hoe de inhoud verandert in de loop van de verschillende breekpunten.
De gebruiker wordt gevraagd om een plan te kiezen dat bij zijn of haar budget past en krijgt drie opties: verkopen online, verkopen in de winkel of beide.
Als u een van deze opties kiest, worden de prijsmodules aangepast aan de specifieke situatie die u hebt gekozen. Deze verandering gaat ook gepaard met een verandering in kleur. Een subtiele ontwerpbeslissing van Shopify was om geel te gebruiken voor "online", blauw voor "in winkel" en groen voor de combinatie voor beide; dit is bijzonder slim, omdat het combineren van blauw en geel feitelijk groen produceert.
Nadat de gebruiker zijn verkooppunt heeft gekozen, worden deze vervolgens voorzien van verticaal gerangschikte blokken die de prijs en de naam van het plan heel duidelijk weergeven. Elk blok bevat ook de vervolgkeuzelijst 'Plan details' om de gedetailleerde informatie van het plan te bekijken, zoals tarief en functies.
Veelgestelde vragen verschijnen onderaan in de accordeonmodule die eerder is besproken. De accordeonheaders verwijzen naar de soorten vragen en elke sectie bevat meerdere vragen. Dit verschilt van de algemene benadering van het maken van een accordeon voor elke vraag.
Bij het tablet-onderbrekingspunt verschuiven zowel de kassa van het verkooppunt als prijsblokken naar een horizontale lay-out.
Details worden nu getoond zonder dat u in elk inhoudsblok hoeft te klikken op een vervolgkeuzemenu. De kassa voor het verkooppunt verschuift ook van tekst naar tekst met een pictogram. Het "Professional" -plan is enigszins verticaal verschoven ten opzichte van de andere twee plannen en is gemarkeerd als het "meest populaire" plan. Zowel op de tablet als op de mobiele breekpunten is een "Starter" -plan ontworpen om veel minder aandacht te trekken en omvat niet de Probeer Shopify gratis oproep tot actie. Interessant is dat hetzelfde gebrek aan focus wordt toegepast op het Shopify Plus-plan, dat voor grootschalige plannen op ondernemingsniveau is.
Veelgestelde vragen leven niet langer in een accordeon en worden in plaats daarvan weergegeven in een lay-out met twee kolommen.
De enige wijziging in de inhoudsopmaak op de desktopomvang is dat de minder geconcentreerde plannen naast de drie primaire plannen in een vierde kolom worden geplaatst.
Voorbeelden van Shopify-thema's zijn uiteindelijk de beste manier om de flexibiliteit en use-cases voor Shopify te communiceren. Deze pagina's hebben een paar goede voorbeelden van responsieve interactiviteit gebruikt die we graag willen vermelden.
Modale vensters op mobiele apparaten hebben vaak last van een gebrek aan opzettelijke ontwerpoverwegingen voor mobiele gebruikers. Dit is niet het geval voor de 'voorbeeld'-modals van Shopify. Gericht op bijna-volledig-schermbeelden, biedt het modale navigatiepijlknoppen en metadata hieronder.
Als u naar een tabletopmaak overschakelt, zweven de pijlen en metagegevens naar rechts van de afbeelding. De overgang tussen elke modaal maakt gebruik van a schaal en vervagen kenmerk verschuiving. De overgang suggereert een zoomeffect in en uit de index van afbeeldingen. Wanneer de modaal open is, zijn zowel een call-to-action als een × knoppen aanwezig zijn die de juiste exitpaden voor de gebruiker bieden.
Het raster zelf biedt contextuele filters waarmee de gebruiker op verschillende pagina's door verschillende soorten thema's kan navigeren. Het schaal- en dekkingsverschuivend effect wordt hier ook weergegeven.
Shopify's strategie voor voettekstnavigatie onthult nog een andere situatie waarin inhoudsresolutie wordt gebruikt. Bij het mobiele breekpunt worden twee kolommen weergegeven:
bij de tablet en grotere onderbrekingspunten worden twee volledig nieuwe secties geïntroduceerd, die meer directe toegang bieden tot interieurdetails en "autoriteit" -pagina's (op inhoud gebaseerde pagina's die gezag over een specifiek onderwerp vestigen).
Uiteindelijk laat dit zien dat Shopify een strategie voor het oplossen van inhoud heeft bepaald: welke inhoud moet beschikbaar zijn op allemaal breekpunten, op allemaal apparaten, versus welke inhoud zou alleen beschikbaar moeten zijn als het onroerend goed op het scherm dat van een desktop of tablet is? Dit soort vragen leidt tot een betere algehele contentstrategie en zou ongetwijfeld onderdeel moeten zijn van alle responsieve ontwerpinspanningen.
Shopify is er in geslaagd om een verbluffend nieuw ontwerp te maken, met een hoge integriteit, zowel in de ontwikkeling van de inhoud als in responsieve overwegingen.
Bovendien hebben ze enkele van de beste technieken gebruikt die moderne browsers te bieden hebben. Hoewel er nog steeds pagina's zijn in het ecosysteem van Shopify die nog niet zijn overgeschakeld naar het nieuwe technieken en ontwerpsysteem, bieden de front-facing site en primaire marketingpagina's een solide en uniek responsief ontwerpmodel voor webontwerpers en front-end ontwikkelaars om te leren van.
