Wix Code: Skab Dynamiske Mobiloplevelser

I en verden hvor mobilbrug dominerer, er det afgørende, at dit website ikke blot ser godt ud på alle skærme, men også fungerer optimalt og leverer en skræddersyet oplevelse. Wix gør et fremragende stykke arbejde med automatisk at tilpasse dit indhold til mobile enheder, men hvad hvis du ønsker at gå et skridt videre? Hvad hvis du vil have specifikke elementer, der kun vises på mobil, eller ændre adfærden af dit site baseret på, hvilken enhed den besøgende bruger? Her kommer Wix Code, nu kendt som Velo by Wix, ind i billedet – et kraftfuldt værktøj, der åbner op for et væld af muligheder for avanceret tilpasning.

Denne artikel dykker ned i, hvordan du kan udnytte Wix Code til at skabe enestående mobiloplevelser, især med fokus på at vise elementer kun på den mobile version af dit website. Vi vil udforske de grundlæggende principper, kodedetaljer og bedste praksis, så du kan give dine mobilbrugere præcis det, de har brug for, uden at gå på kompromis med desktop-oplevelsen.

Forståelse af Wix's Responsive Design

Når du bygger et website i Wix Editor eller Wix Studio, opretter platformen automatisk en mobilversion af dit site. Denne automatiske tilpasning indebærer, at Wix tilpasser dit sites indhold, så det passer til mobilskærme, og skjuler ofte elementer fra desktop-editoren, der ikke er optimeret til mobilbrug. Dette er en stor fordel for hurtig opbygning af responsive sites, men det har sine begrænsninger, især når det kommer til specifikke interaktioner eller indhold, der kun giver mening på én type enhed.

Du har to primære måder at tilpasse mobilversionen af dit website på:

1. Manuel styring i Mobile Editor: Du kan skjule, omarrangere og justere elementer direkte i Wix's Mobile Editor uden at skrive en eneste linje kode. Dette er ideelt til simple ændringer, som at skjule en stor knap på mobil eller ændre tekststørrelser.
2. Skrive kode med Wix Code (Velo): For mere komplekse adfærdsændringer eller dynamisk indhold, der skal tilpasses baseret på enhedstype, er Wix Code løsningen. Dette giver dig fuld kontrol over dit sites logik.

Denne artikel fokuserer udelukkende på den kodebaserede tilgang, som giver dig den største fleksibilitet og kontrol.

Hvorfor bruge Wix Code til mobil-specifikke elementer?

Forestil dig, at du har et flot hover-effekt på dit desktop-site, hvor tekst vises, når musen svæver over et billede. Denne funktionalitet er irrelevant på en mobil enhed, hvor der ikke er nogen mus. I stedet ønsker du måske, at teksten vises, når brugeren tapper på billedet. Eller måske har du et stort kort eller en detaljeret tabel, der ser fantastisk ud på desktop, men fylder for meget på mobil. Du vil hellere vise en forenklet version eller endda et helt andet element på mobil.

Wix Code (Velo) giver dig mulighed for at implementere disse avancerede logikker. Du kan:

• Vise/skjule elementer dynamisk: Sørg for, at visse billeder, tekstbokse, knapper eller endda hele sektioner kun vises på specifikke enheder.
• Ændre funktionalitet: Tilpas, hvordan interaktioner virker. En knap kan f.eks. have én funktion på desktop og en anden på mobil.
• Tilpasse indhold: Vis forskelligt tekstindhold eller forskellige billeder baseret på enhedstypen for at optimere læsbarhed og relevans.
• Forbedre ydeevnen: Skjul tunge elementer på mobil for at forbedre indlæsningstider, hvilket er afgørende for mobilbrugere.

Disse muligheder er essentielle for at levere en fremragende brugeroplevelse på tværs af alle enheder.

Grundlæggende Trin til Mobil-Specifik Kodning med Wix Code

For at skrive kode, der kun kører på mobile enheder, skal du først kontrollere, hvilken enhed koden kører på. Dette gøres ved at omslutte din mobil-specifikke kode i en JavaScript betinget erklæring ved hjælp af wix-window-frontend API'en. Dette API giver dig adgang til information om det vindue, hvor dit site vises.

1. Aktivering af Udviklertilstand

Først og fremmest skal du aktivere udviklertilstand i din Wix Editor. Dette gøres ved at klikke på 'Dev Mode' i topmenuen og vælge 'Turn on Dev Mode'. Dette åbner op for kodeeditoren og giver dig adgang til Velo API'erne.

2. Identifikation af Enhedstype med wix-window-frontend

Nøgleelementet i mobil-specifik kodning er wixWindow.formFactor-egenskaben. Denne egenskab returnerer den type enhed, som den besøgende bruger til at se dit site. De mulige værdier er:

• "Desktop"
• "Tablet"
• "Mobile"

Du importerer wixWindow-objektet fra wix-window-frontend-modulet og bruger det derefter i en betinget erklæring.

Her er et eksempel på, hvordan din kode kan se ud:

import wixWindow from 'wix-window-frontend';

$w.onReady(function () {
 if (wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet") {
 // Kode der kun kører på mobil eller tablet
 $w("#mitMobilElement").show();
 $w("#mitDesktopElement").hide();
 $w("#mobilTekst").text = "Velkommen til vores mobilside!";
 } else {
 // Kode der kun kører på desktop
 $w("#mitMobilElement").hide();
 $w("#mitDesktopElement").show();
 $w("#desktopTekst").text = "Velkommen til vores desktopside!";
 }
});

I dette eksempel antages det, at du har to elementer på din side: #mitMobilElement og #mitDesktopElement. Du designer begge elementer i editoren, men bruger derefter koden til at styre, hvilket af dem der er synligt baseret på enhedstypen.

3. Placering af Elementer

Det er vigtigt at bemærke, at selvom du skjuler et element med kode, vil det stadig være en del af sidens DOM (Document Object Model). For at opnå den bedste ydeevne og undgå layout-skift, bør du overveje at placere de mobil-specifikke elementer, hvor de ikke forstyrrer desktop-layoutet, og vice versa. Ofte kan man placere dem oven på hinanden i editoren og lade koden styre synligheden.

Praktiske Eksempler på Anvendelse

Visning af et specielt mobilbanner

Du har et stort, bredt banner på din desktop-side, men på mobil ønsker du et mindre, vertikalt optimeret banner.

import wixWindow from 'wix-window-frontend';

$w.onReady(function () {
 if (wixWindow.formFactor === "Mobile") {
 $w("#desktopBanner").hide();
 $w("#mobileBanner").show();
 } else {
 $w("#desktopBanner").show();
 $w("#mobileBanner").hide();
 }
});

Her skal du sørge for at have to billed- eller strip-elementer, henholdsvis med ID'erne desktopBanner og mobileBanner, og designe dem passende i editoren.

Tilpasning af interaktioner: Tap vs. Hover

Som nævnt tidligere, kan du ændre interaktionsmønstre. Lad os sige, du har en boks (#infoBox) der skal vise ekstra tekst (#extraText) ved hover på desktop, men ved tap på mobil.

import wixWindow from 'wix-window-frontend';

$w.onReady(function () {
 if (wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet") {
 // Mobil/Tablet: Vis tekst ved tryk
 $w("#infoBox").onClick(() => {
 $w("#extraText").show();
 });
 } else {
 // Desktop: Vis tekst ved hover
 $w("#infoBox").onMouseIn(() => {
 $w("#extraText").show();
 });
 $w("#infoBox").onMouseOut(() => {
 $w("#extraText").hide();
 });
 }
 // Skjul teksten som standard, så den kun vises ved interaktion
 $w("#extraText").hide();
});

Dette eksempel viser, hvordan den samme #infoBox kan reagere forskelligt baseret på enheden, hvilket forbedrer den responsive funktionalitet.

Overvejelser ved Kodning til Mobile Websites

Når du koder til mobile sites med Wix Code, er der flere vigtige faktorer at overveje for at sikre en optimal brugeroplevelse og ydeevne:

• Ydeevne: Selvom du skjuler elementer, indlæses de stadig. Overvej om det er absolut nødvendigt at have alle elementer på begge versioner. Hvis et element er meget tungt (f.eks. et stort videoelement), kan det være bedre at loade et lettere alternativ på mobil eller helt undgå det. Optimer altid billeder og videoer for web.
• Brugervenlighed (UX): Touch-interaktioner er fundamentalt forskellige fra muse-interaktioner. Sørg for, at knapper er store nok til fingre, og at der er tilstrækkelig afstand mellem klikbare elementer. Tænk over, hvordan brugere naturligt interagerer med deres enhed.
• Skærmstørrelse og orientering: Selvom formFactor hjælper med grundlæggende skelnen, kan du også overveje wixWindow.innerWidth og wixWindow.innerHeight for mere finkornet kontrol over skærmstørrelse, hvis du arbejder med responsive layouts, der går ud over de tre standardkategorier.
• Fejlsøgning: Test altid din kode grundigt på forskellige mobile enheder og browsere. Brug Wix's indbyggede forhåndsvisningsfunktion og mobil-editor til at tjekke layoutet, men husk at den ægte test sker på fysiske enheder eller i browserens udviklerværktøjer (mobil-emulering).
• Wix Studio vs. Wix Editor: Hvis du bruger Wix Studio, har du adgang til mere avancerede responsiv designværktøjer som breakpoints, som kan supplere din kode. For traditionel Wix Editor er Velo den primære vej til dybdegående, enheds-specifik kontrol.

Sammenligning: Standard Editor vs. Wix Code for Mobil Tilpasning

For at give et klarere billede, lad os sammenligne de to tilgange til mobil tilpasning:

Som tabellen viser, supplerer de to metoder hinanden. For de fleste visuelle justeringer er standardeditoren tilstrækkelig. Men for at skabe en virkelig skræddersyet mobiloplevelse, er Wix Code uundværlig.

Ofte Stillede Spørgsmål om Wix Code og Mobil

Kan jeg bruge Wix Code til at ændre designet af min side på mobil?

Ja, du kan ændre designegenskaber (f.eks. farve, størrelse, position) af elementer baseret på enhedstypen ved hjælp af Wix Code. Du kan for eksempel have en knap, der er rød på desktop og blå på mobil.

Påvirker det SEO, hvis jeg skjuler elementer med kode på mobil?

Google og andre søgemaskiner er generelt gode til at forstå responsive designs. Hvis du skjuler indhold, der er vigtigt for SEO, på mobil, kan det potentielt påvirke din placering. Det er bedst at vise lignende indhold på både desktop og mobil, men måske i en forenklet eller omarrangeret form. Hvis indholdet er fuldstændig irrelevant for mobilbrugere, er det dog acceptabelt at skjule det. Prioritér altid brugeroplevelsen.

Hvor skal jeg placere min Wix Code?

Koden placeres typisk i sidens kodefil (Page Code) for specifikke sider, eller i filen masterPage.js for kode, der skal køre på tværs af alle sider. For mobil-specifik kode, der skal påvirke elementer på en bestemt side, er sidens kodefil det mest logiske sted.

Er Wix Code svært at lære?

Wix Code bygger på JavaScript, så grundlæggende kendskab til JavaScript og webudvikling vil være en stor fordel. Wix tilbyder dog omfattende dokumentation og tutorials, der gør det mere tilgængeligt for dem, der er nye inden for kodning. Begynd med simple opgaver og byg gradvist på din viden.

Kan jeg bruge Wix Code til at detektere, om en bruger er på en tablet?

Ja, som nævnt returnerer wixWindow.formFactor også "Tablet", så du kan skrive specifik kode, der kun kører, når dit site ses på en tablet.

Konklusion

Wix Code (Velo by Wix) er et utroligt kraftfuldt værktøj for enhver, der ønsker at tage deres Wix-website til det næste niveau, især når det kommer til at levere en skræddersyet og optimeret mobiloplevelse. Ved at mestre brugen af wix-window-frontend og betingede erklæringer kan du præcist styre, hvilke elementer der vises, og hvordan de interagerer på forskellige enheder. Dette sikrer ikke kun, at dit site ser fantastisk ud, men også at det fungerer fejlfrit og engagerende, uanset om dine besøgende bruger en desktop, tablet eller smartphone. Invester tiden i at lære disse teknikker, og du vil åbne op for et væld af kreative muligheder for dit Wix-site.

Hvis du vil læse andre artikler, der ligner Wix Code: Skab Dynamiske Mobiloplevelser, kan du besøge kategorien Teknologi.