Web

Webflow - Ny nettside på 123!

I en tid der nettsider blir stadig viktigere har behovet for å lage nettsider billigere og raskere økt. Vi har laget en oversikt over mulighetene og vår favoritt.

Webflow Link Utvikling nettside

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.

  1. Embed elementer. Her kan du legge inn iFrame elementer eller annen HTML, CSS eller Javascript kode. Dette er nyttig hvis man skal f.eks integrere et tredjeparts element, som for eksempel en SoMe feed. Du kan også legge embeds direkte inn i CMS objekter.

  2. Custom kode i head og body tags. Dette er noe vi bruker ganske mye, og her kommer ID’er og klasser på elementer veldig til nytte. Når man oppretter elementer i Webflow, kan man sette en klasse og en ID på elementet. Det designet man da legger på det elementet, vil da også definere designet på den klassen, og man kan derfor gjenbruke designet ved å gi andre elementer samme klasse.

    Du har også muligheten til å sette flere klasser på et element. Hvis man for eksempel setter opp et design på en tekst. Du vil bruke denne tekst-stilen flere steder, men noen av stedene skal den være sentrert. Man kan dermed lage en kryssklasse mellom designet til elementet og en til klasse som f.eks heter “center”. Man legger da til den klassen de stedene man vil sentrere teksten, og slipper derfor å ha to nesten like klasser. Dette er også en av de tingene som er viktig å tenke på i forhold til SEO, vi ønsker å lage minst mulig kode og det er derfor best practice å gjøre ting på denne måten.

    Både klasser og ID’er kan begge refereres til fra koden din, som er det som gir deg god kontroll. 

  3. Dersom du trenger kode som skal gjelde hele nettsiden, kan man legge dette i prosjekt-innstillingene. Her legger man for eksempel kode som er relatert til Google Analytics og cookies.

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. 

  1. Schema Markup. Webflow lar deg legge til og redigere dette, som gjør at innhold lettere kan bli forstått og representert i søkemotorer. 
  2. Meta-titler og beskrivelse. Du kan sette opp automatisk definering av disse ved å bruke felter i CMS collections. Du kan også sette disse direkte på statiske elementer på siden. 
  3. Indeksering og Sitemap kontrollere. Du kan enkelt redigere og oppdatere sidens titler og beskrivelser.
  4. Håndtering av 301 Redirects. 
  5. Enkel redigering av alt tags for bilder
  6. Hosting via AWS. Det er positivt i forhold til  rangering i søkemotorer at nettsiden laster raskt.
  7. Scalability: Webflow sine servere er skalerbare og klare til å håndtere all trafikken du kaster på dem. 
  8. Innebygget SSL - trenger ikke å håndtere dette selv. 
  9. Ren, semantisk kode gjør det enkelt for søkemotorer og indeksering-bots å parse nettsiden. Dette er på grunn av abstraksjonen av HTML og CSS som nevnt tidligere. 

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!  

Andre artikler

Godta våre cookies

Ved å klikke "Godta alle", godkjenner du at vi lagrer cookies på enheten din. Dette brukes for å forbedre side navigasjon, analysere bruk av nettsiden og hjelpe markedsføringen vår. Se vår personvernserklæring for mer informasjon.

Godta alle
Avslå
Cookies