I en tid der nettsider blir stadig viktigere for både bedrifter og enkeltpersoner, har behovet for å lage nettsider billigere og raskere økt. Det er ikke alle som har budsjetter for å gjennomføre et fullt utviklingsløp for å lage en nettside, og det vil derfor være nødvendig med ulike verktøy for å kunne fortsette å levere tjenester til alle.
Webflow er et av verktøyene man kan bruke for å gjøre dette, og vi skal nå gå mer i dybden på dette verktøyet og hvilke muligheter man har.
De ulike editorene: fordeler og ulemper ved dem
Det skal sies at alle editorene har sine brukstilfeller. Wix er for eksempel best for nybegynnere. Det er lettere å finne folk som kan arbeide med Wordpress enn med for eksempel Webflow. Men vi mener at Webflow er definitivt det verktøyet her som gir mest fleksibilitet og robusthet. La oss ta dere gjennom hvorfor;
Wordpress
Wordpress er gjerne den mest populære editoren, og har rundt 30% av nettsider. Dette betyr ikke nødvendigvis at de er best.
Verktøyet har en bratt læringskurve og oppleves en del vanskeligere enn for eksempel Wix.
De har veldig mange plugins - 57.000 stykker. Du må gjerne installere mange av disse for å få funksjonaliteten du trenger, og kan dermed støte på en del utfordringer. Noen ganger krasjer plugins, de kan slutte å være kompatible når som helst, og de kan være utsatt for skade.
Temaer og plugins må ofte oppdateres, og da må man logge inn og sjekke dashbordet ofte for å sørge for at alt er oppdatert. Og som vi vet - alle utviklere kan gjøre feil, og det kan derfor oppstå at oppdateringer skaper problemer. Hvis man ikke skal bruke et av forhåndslagde temaene, så må man få inn noen som har peiling på wordpress for å lage et tema.
Wordpress er generelt tregere på grunn av alle de ekstra pluginene, i tillegg til at koden deres ikke er optimalisert og har et rotete oppsett. Dette kan føre til krasjer, og dette plus treghet fører til dårligere rangering fra søkemotorer.
Man må også sette opp hosting selv, i motsetning til de andre editorene.
Squarespace
Når det kommer til Squarespace så kan man lage veldig flotte nettsider. De har mange eCommerce features, i tillegg til at verktøyet også er litt enklere å sette seg inn i. Men - det er ganske begrenset i forhold til redigering. Du kan ikke bare flytte et element hvor du vil, og det er ingen drag-and-drop funksjonalitet. Det blir dermed litt mer utfordrende å bytte posisjoner på elementene, og dette kan skape mye rot og ekstraarbeid.
Squarespace passer dårlig til større nettsider siden man ikke kan ha meny hierarki.
Det kreves også alt for mange klikk for å gjennomføre det du vil, og de har heller ingen autosave. Dette gjør det litt ineffektivt.
Squarespace nettsidene er også litt trege som igjen ødelegger for søkemotor rangering.
Wix
Wix er et godt verktøy for nybegynnere, på grunn av dra-og-slipp funksjonaliteten, det er brukervennlig og tjenesten tilbyr mange funksjoner. Men Wix vil oppleves veldig begrensende for profesjonelle designere eller utviklere grunnet lite kontroll.
Når man lager en nettside, burde den være responsiv på alle enheter, noe som man generelt ikke opplever at fungerer optimalt med Wix, og det krever en del mer på Wix å få det responsivt på alle enheter enn det gjør med f.eks Webflow. I tillegg opplever flere at det laster tregt på mobil.
Webflow
Webflow derimot har en bratt læringskurve og er hakket med komplekst, men man vil oppleve mye høyere fleksibilitet og stabilitet. Vi skal gå mer i dybden på Webflow videre i dette innlegget.
Hva er webflow?
Webflow er et visuelt verktøy for å bygge produksjonsklare nettsider uten å egentlig måtte skrive kode, og heller med dra-og-slipp. Dette fordi Webflow bruker industristandard utviklingsprinsipper. Webflows underliggende teknologi er basert på en abstraksjon av HTML, CSS og JavaScript, noe som betyr at du kan designe og bygge nettsider visuelt, mens plattformen genererer den nødvendige koden i bakgrunnen. Når du er ferdig kan du publisere siden eller eksportere koden. Dersom man publiserer gjennom webflow fikser de også hosting for deg, som er levert gjennom AWS.
Webflow tilbyr også en rekke avanserte funksjoner som interaksjoner, animasjoner, dynamisk innhold, e-commerce - men dette kommer vi mer tilbake til senere.
Det er også viktig å kjenne begrensningene man har, slik at man kan velge riktig løsning for et prosjekt. Dersom prosjektet er ganske komplekst eller skal være en del av et allerede eksisterende system slik som for eksempel en administrasjonsportal eller et CRM system eller andre web-systemer så ville vi ikke nødvendigvis anbefalt å bygge dette i webflow.
Webflow sier selv "Build with the power of code, without writing any". Det kan derimot anses som en stor fordel å kunne tilpasse nettsiden med egen kode. Vi skal derfor se på de ulike måtene man kan gjøre det.
Det er dog viktig å bemerke seg at ingen kode blir validert, så det er viktig å vite hva du driver med her.
Avansert funksjonalitet
Videre skal vi se på de mer avanserte funksjonene man har tilgang til i Webflow.
CMS
La oss nå dykke inn i kjernen av Webflow - Content Management Systemet eller CMS. Dette er stedet du håndterer alt av dynamisk innhold.
Du kan skape en kompleks, skreddersydd database med ulike typer innhold - i Webflow kalles disse for 'Collections'. En Collection kan inneholde noe så enkelt som blogginnlegg, eller noe mer komplisert, som en samling av produkter med ulike attributter som pris, størrelse, farge, kategori og vurderinger.
Når du oppretter en Collection, så opprettes også en template-side for den. Om du oppretter en Collection som heter Blogg, vil template-siden representere hvordan dataene skal fremvises dersom man trykker inn på et blogginnlegg.
Når du designer sidene dine, kan du dra og slippe CMS-elementer rett inn i designet. Dette betyr at du kan designe sidene dine rundt det faktiske innholdet.
Fra et utvikler-perspektiv så har man også muligheten til å bruke CMS API for å blant annet hente innhold fra eksterne datakilder, koble til eksisterende CMS eller sette opp egendefinerte webhooks.
E-commerce
Med Webflow eCommerce kan du bygge en komplett online butikk, uten behov for tredjeparts plugins eller tilleggstjenester.
Det første du vil merke med Webflow eCommerce er at det følger samme prinsipp som resten av plattformen: hva du ser, er det du får. Når du designer butikken din, kan du se akkurat hvordan den vil se ut for kundene dine i sanntid.
Og som du ville forvente fra Webflow, har du full kontroll over designet av hver eneste del av din online butikk. Fra produktsider til handlekurv og kassen og kvittering du får på e-post, kan du tilpasse alt for å passe perfekt med merkevaren din. Dette er en stor fordel i forhold til mange andre e-handelsplattformer som ofte begrenser hvor mye du kan tilpasse designet.
Det er lagt opp til salg av både digitale og fysiske varer. Man kan tilpasse leveransen av produktet, om det så skal shippes eller sendes på e-post. Man kan legge linker til nedlastning i eposten eller på ordrebekreftelsen.
Webflow eCommerce støtter også forskjellige betalingsmetoder, inkludert kredittkort, Apple Pay, Google Pay og PayPal gjennom Stripe, og håndterer automatisk skatt og fraktberegninger.
Hold kontroll på bestillinger via et dashbord. Her kan du sette statuser på bestillingene og håndtere refusjoner. Funksjonalitet som kommer snart til Webflow er kundekontoer og bestillingshistorikk.
Man kan om ønskelig også integrere med tredjeparts-løsninger for å oppnå mer funksjonalitet.
Interactions og Animasjoner
Å lage en interaksjon eller animasjon i Webflow er både raskt og enkelt når man kan verktøyet. Du velger først hvilket element du vil animere, deretter velger du hvilken type interaksjon du ønsker, for eksempel scrolling eller musebevegelse. Deretter kan du tilpasse animasjonen ved å justere en rekke parametere, som for eksempel varighet, delay, avstand, rotasjon, skalering, med mer. Du kan også kjede flere animasjoner sammen for å lage mer komplekse animasjoner.
Vi har også en 'Timeline' funksjon, hvor du kan finjustere timingen og sekvensen av hver del av animasjonen din, akkurat som du ville gjort i en videoredigeringsprogramvare. Dette gir deg en høy grad av kontroll over hvordan animasjonene dine fungerer.
Det er lagt inn mange presets til animasjoner man enkelt kan legge rett inn.
Eksempler på animasjoner som man kan lage uten å kode:
Medlemskap (beta)
Det er viktig å bemerke seg at denne funksjonen er fortsatt i beta, og kan derfor ha uventede problemer.
Webflow Medlemskap lar deg bygge en online plattform hvor brukere kan registrere seg, logge inn, og til og med betale for tilgang til premium innhold. Du kan lage og håndtere ulike brukernivåer, fra gratis medlemskap til ulike nivåer av betalte abonnementer.
Medlemskap er relativt lett å sette opp. I det grunnleggende oppsettet, kan du velge hvilke sider eller seksjoner av nettstedet ditt som skal være forbeholdt medlemmer, og hvilke som skal være tilgjengelige for alle. Du kan også angi spesifikke innstillinger for ulike medlemsnivåer, for eksempel hvilken type innhold de har tilgang til, og hvor mye de må betale for abonnementene.
En annen viktig del av dette er integrasjonen med CMS og eCommerce. Dette betyr at du kan bruke de samme kraftige verktøyene for å håndtere medlemskapet ditt som du bruker for å håndtere innholdet og produktene dine. For eksempel kan du bruke Webflow CMS til å lage en blogg som bare er tilgjengelig for betalende medlemmer.
Logic (Beta)
Igjen er det viktig å bemerke seg at denne funksjonen er i beta, og kan derfor ha uventede problemer.
Et av de nyeste tilskuddene til funksjonalitetslisten er Webflow Logic, som lar deg legge til dynamisk funksjonalitet uten å kode. Det er som å ha muligheten til å legge til din egen programmeringslogikk, men på en visuell måte.
Med Webflow Logic kan du sette opp 'hvis dette, så det'-regler (if/else) for å kontrollere hvordan elementene på nettsiden oppfører seg. For eksempel kan du opprette en regel som sier 'hvis brukeren svarer på dette skjemaet, så skal svaret lagres i CMS'. Dette lager en snarvei til mye interaktivitet og brukertilpasning.
Webflow Logic kan være så enkelt eller komplekst som du trenger, alt fra mindre automatiseringer til en kompleks flyt. Logic gir deg muligheten til å lage "no-code" arbeidsflyter, som bruker kjernefunksjonene til Webflow som CMS, skjemaer, brukere og e-poster. Samtidig har du muligheten til å lage tilpassede triggere og handlinger - og koble til tredjepartsapper - med webhooks og HTTP-requests for en mer "low-code" tilnærming.
SEO
Et annet viktig område å dekke i dagens digitale marked er Webflow sine SEO-verktøy. Med disse verktøyene kan du enkelt tilpasse og optimalisere nettstedet ditt for å oppnå bedre rangeringer i søkemotorene.
Editor tilgang
Med editor tilgang kan du enkelt redigere og legge til nytt innhold i CMS systemet, men rett på selve siden. På denne måten unngår du å måtte ta stilling til CMS dashbordet. Dette er en god tilgang å gi til kunder, slik at de enkelt kan administrere innhold uten å egentlig måtte lære seg verktøyet. De får da tilgang til en enklere versjon av webflow, hvor å legge til elementer er akkurat som å fylle ut et skjema. I tillegg kan dette redigeres visuelt på nettsiden etterpå slik at det er lett å se hvordan resultatet blir.
Figma til Webflow
Dette er en plugin man installerer i Figma, som lar deg eksportere designet ditt direkte til Webflow. Du setter deretter opp designet, samt definerer hvordan det skal se ut på de ulike breakpointene. Man kan så kopiere designet rett inn i Webflow ved hjelp av pluginen. Dette legger også inn tekst, farger og bilder.
Eksempler på nettsider
Oppsummering
Vi har nå sett på Webflow, og de ulike funksjonalitetene man har tilgang til via verktøyet. Vi håper dette har gitt deg litt mer innsikt. Vi i Link utvikling har Webflow som vårt foretrukne verktøy til mange av våre nettside-prosjekter. Vi har mye erfaring med verktøyet og er sertifiserte i webflow.
Dersom du trenger hjelp til en nettside i Webflow, eller ønsker å sette opp en ny nettside - ta kontakt med oss i Link Utvikling!
.webp){kind=small}
