Er webutviklere programvareingeniører? (are web developers software engineers)
Ja, webutviklere er programvareingeriører som bare lager applikasjoner og sider på web. På daglig basis gjør ikke en programvareutvikler noen annen jobb enn en webutvikler og lønna er lik, selv om “software engineer” høres mye mer fancy ut, hehe.
Er webutviklere fortsatt etterspurt? (are web developers still in demand)
JA, webutviklere er definitivt fortsatt etterspurt. Det er fortsatt et stort behov for å fornye nettsider hele tiden, og internett går nok ikke under på en god stund til.
Er webutviklere programmerere? (are web developers programmers)
Ja og nei, programmerere og webutviklere har gjerne litt ulikt fokus. Programmerere lager gjerne nye dataapplikasjoner, mens en webutvikler bygger og vedlikeholder en hjemmeside. Likevel er webutviklere en mellomting mellom en programmerer og en webdesigner, som ikke skriver noe kode i det hele tatt. I tillegg blir webutviklere ofte brukt til å også lage dataapplikasjoner. Sånn sett er det noen webutviklere som også kan kalle seg programmerere.
Er webutviklere programvareutviklere? (are web developers software developers)
Ja, dette spørsmålet blir litt besvart i spørsmål 1. Webutviklere er programvareutviklere, fordi de utvikler applikasjoner for web.
Er webutviklere glade? (are web developers happy)
Jaaa, vi er veldig glade! Det er en utrolig fin og givende jobb, som bidrar til stadig kompetanseutvikling og mestringsfølelse. Jeg er veldig fornøyd med jobben min!
Forrige tirsdag var jeg og Caroline så heldige å få representere Aplia på Girl Tech Fest her i Skien!
Girl Tech Fest er et tiltak for å tenne en inspirasjonsgnist hos unge jenter som fortsatt går på barneskolen, slik at de skal ha lyst til å jobbe med teknologi. Det er fortsatt slik at utrolig få jenter søker seg til teknologistudier, selv om det ikke finnes noen forskjell på menn og kvinners evner i disse yrkene. Mange tror det henger igjen fra at vi gjennom oppveksten til barn har pleid å vikle teknologi som en guttegreie, og at gutter kanskje er tøffere til å kaste seg ut i ting som kanskje virker vanskelig når man først er gamle nok til å skulle velge retning i livet. Målet er at man inspirerer jenter i barneskolealder til å synes teknologi og programmering er gøy og noe de kan drive med på fritiden, og i tillegg jobbe med!
Litt av greia var at vi kun var damer som var veiledere, nettopp for å markere at det er mange damer som jobber med teknologi. Barna ble delt i grupper og gikk fra stasjon til stasjon. Noen steder skulle de programmere roboter på ipad, et sted skulle de lage elektroniske glowsticks og på slutten av dagen hadde de en laang stasjon hvor de programmerte små chipper til å gjøre forskjellige ting med et veldig kult utviklerprogram som gjør det enkelt for barn å kode.
Det var så gøy å følge disse jentene rundt, for det virket som hver og én av dem hadde det kjempegøy. Det er en helt egen mestringsfølelse å få en algoritme til å gjøre det du ønsker den skal gjøre. Jentene på min gruppe uttrykte høylytt et ønske om å få såkalte “Bluebots” til jul, så de kunne løse oppgaver med dem hjemme. Flere måpte av forbauselse da jeg sa at jeg jobbet med data hver eneste dag og halvparten sa de også ville jobbe med det samme.
Om noen faktisk kommer til å jobbe med det vet jeg jo ikke, men det var hvertfall gøy å bidra til at noen kanskje har det i bakhodet i årene som kommer ♡
(Beklager forresten noen små og uskarpe bilder, hadde ikke med noe kamera denne dagen)
Nei, det finnes faktisk ingen ting i menns kropp eller hjerne som gjør dem bedre egnet som webutviklere enn damer. Faktisk var noen av de første programmerne damer! Det var en dame som skrev den første algoritmen som noen gang ble laget for den datamaskin (kilde).
“Webutvikling er nerdete”
Nei, å være webutvikler er faktisk like lite nerdete som alle andre yrker. Det er gammeldags å tenke at data er en spesiell nerdegreie. Du trenger spesiell kunnskap om ditt eget fagfelt, akkurat som i alle andre yrker. Og det kan du få når du jobber og på skolebenken.
“Webutvikling er en livsstil”
Nei, du trenger ikke ha sittet på ungdomsrommet og kodet hele livet for å bli god på å lage hjemmesider. Du trenger ikke ha en interesse for det på fritiden. Mange tror webutviklere lever for jobben, og sitter hjemme med skrillex på headsetet og urge i glasset, mens man koder hjemmesider på kveldstid. Slik er det altså ikke! Fritidsaktivitetene på jobben varierer mellom trening, fotball, gaming, familie og andre helt standard sysler.
“Webutvikling er bare koding”
Webutvikling er sååå mye mer enn bare koding! Nettsider må skisseres opp, planlegges og gjennomarbeides. Noen nettsider krever et helt team med designere for å bare skisse opp hvordan de skal se ut, et team for å kode over det du kan se på en side, og dermed et enda større team for å lage alt det bakenforliggende. Det er databaser som skal settes opp og administreres, det er domener som skal settes opp, det er videresendinger, sikkerhetssertifikater og google adwords. Det er et hav av ulike roller du kan ha når en nettside skal settes opp, og du har derfor så utrolig mange muligheter til å finne ut hva som er dine styrker og svakheter. Noen tror en webside bare er det du kan se, og that’s it. Men det er bare en bitte liten del av den fulle jobben.
“Webutviklere drikker kaffe og energidrikke hele dagen”
Åh, vent. Dette punktet er helt sant.
Les fullt intervju med meg hos USN her. Der snakker jeg litt om jobben min og hvordan jeg havnet der jeg er i dag.
Nååå har endelig nedtellingen til julaften begynt, og jeg har gledet meg såå mye til i dag!
Huset er pyntet i lilla farger, adventskalenderen er dratt fram og åpnet og julekoppene er brukt. Nå er vi endelig i gang, og julestemningen kan endelig begynne å komme snikende.
Jeg har prøvd å ikke gjøre noen julegreier og holde julestemningen i sjakk, nettopp fordi den blir så ekstra sterk om man bare avventer med den til det er tid. Jeg har fortsatt ikke tatt fram alt av julepynt, først må jeg nemlig kose meg med den fine tiden som advent er. Nedtellingen syns jeg nemlig er noe av det koseligste med desember, og gjør at jeg klarer å glede meg ekstra mye til det endelig blir ordentlig jul!
Som en ekstra liten kalender har jeg videreutviklet denne nedtellingskalenderen jeg hadde før huskjøp og katteovertakelse. Nå er den tilpasset JUL og advent, og teller ned for hver eneste dag i desember!
Koden
Dersom du ikke har satt opp en enkel, statisk html-side før, kan det være lurt å gå gjennom denne leksjonen. Der går jeg gjennom det å bruke tekst-editor og å skille html og css i forskjellige dokumenter i samme mappe. Kjapp og enkel leksjon!
Du skal altså her ha tre forskjellige dokumenter i samme mappe. Jeg anbefaler å kalle mappa noe lignende “Nedtellingskalender”, for eksempel. De tre filene du skal lage er index.html, style.css og script.js. Den første er fila du skal ha html-koden i. Den andre skal du ha css-koden i. I den siste fila skal du ha JavaScript-kode. Det er et kodespråk for å få enda mer til å skje på nettsiden din, enn hva css og html kan klare alene, og det inngår også i frontend-yrket.
Jeg må også presisere at dette her ikke er en av mine webleksjoner, da ville jeg gått litt mer gjennom JavaScript til å begynne med. Dette er for alle nyskjerrigperer som vil se hva som ligger bak en slik nedtellingskalender, og som kanskje vil lage en selv.
Det som er skrevet inne i <!– –>-klammene her er kommentarer. Det er slik du kommenterer html-kode for at ikke nettleseren skal lese det og tolke det som kode.
CSS
I style.css skriver du:
body {
font-family: 'Fredericka the Great', cursive;
}
main {
background-color: white;
width: 80%;
margin: 50px auto;
padding: 50px;
border: 10px solid crimson;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 20px;
}
@media screen and (max-width: 750px) {
main {
grid-template-columns: auto auto;
}
h1 {
font-size: 30px;
}
}
JavaScript
I script.js skriver du:
// Henter alle div-elementene på siden
var element = document.getElementsByTagName("div");
// Deklarerer variabelen "id"
var id = 0;
// Finner tidsstempel for tid akkurat nå
var now = Math.floor(Date.now())/1000;
// Setter start- og sluttdato. Her kan eksempeldatoene byttes ut
var dateTo = "Dec 24, 2018 24:00:00";
var dateFrom = "Dec 01, 2018 00:00:00";
// Lager tidsstempel av start- og sluttdato + lager tidsstempel for et døgn
var countDownDate = new Date(dateTo).getTime() / 1000;
var startDate = new Date(dateFrom).getTime() / 1000;
var oneDay = 60*60*24;
// Regner ut antall dager det er mellom start- og slutt-datoer
var daysCount = (countDownDate - startDate) / oneDay;
// Lager én div for hver dag i "daysCount"
for (var i = daysCount - 1; i >= 0; i--) {
var div = document.createElement("div");
document.getElementById("main").appendChild(div);
}
// Looper gjennom div-elementene
for(var i = 0; i < element.length; i++){
// Setter tall i hver div. Går opp med én for hver div.
element[i].innerHTML = i + 1;
// Setter ID = tidsstempel av den datoen diven gjelder for
element[i].id = ( countDownDate - (oneDay * ( element.length - i ))) ;
// Henter ID, sjekker om id(tidsstempelet) er mer eller mindre enn nå-tidsstempelet. Er det mindre betyr det at den er ferdig. Da får den satt klassen "ferdig"
id = element[i]['attributes'][0]['nodeValue'];
var div = document.getElementById(id);
if ( id <= now )
{
div.classList.add("done");
}
}
// Koden nedenfor er hentet fra nett. Den lager nedtelleren nederst i kalenderen.
// For at utregningene nedenfor skal fungere, ganger vi tidstempelet for avslutningsdatoen med 1000
countDownDate = countDownDate * 1000;
// Lager funksjonen "updateTimer"
var updateTimer = setInterval(function() {
// Setter nå-tidsstempelet til å oppdatere med nyeste tid hvert sekund
now = new Date().getTime();
// Finner differansen mellom nå og avslutning
var distance = countDownDate - now ;
// Når nedtellingen er ferdig settes det en ny tekst. Denne kan du endre på til noe valgfritt
if (distance < 0) {
clearInterval(updateTimer );
document.getElementById("bunntekst").innerHTML = "Nå har du fått katten <3";
}
}, 1000);
Her er alt som er skrevet etter // kommentarer. Jeg har prøvd å forklare for hvert trinn hva som skjer.
Kom veldig gjerne med konstruktiv kritikk til koden! Jeg slang dette sammen på jobb for å ha en nedtellingskalender da jeg skulle kjøpe første leilighet, og siden har ikke kalenderen fått så mye kjærlighet. Det er alltid nyttig å få vite hva som burde vært gjort annerledes.
Q: Fikk du noe ut av kodene her? Hva slags kalender har du?
På lørdag skrev jeg et innlegg med en oppskrift, og i bunnen av det innlegget lagde jeg en boks til å ha et tips i. Koden var kjempeenkel, og med “HTML av/på”-funksjonen i blogginnlegg på blogg.no er det utrolig lett å legge inn også. Det var en som spurte hvordan jeg hadde laget boksen, og derfor tenkte jeg at jeg skulle dele det med dere, sammen med en rekke andre designelementer du kan bruke i blogginnleggene dine.
Alle elementene her er rosa, men det er veldig lett å bytte farge på dem. Du kan enten bruke fargenavn, eller så kan du bruke hex-kode. Du finner en oversikt over navngitte farger her, og bytt enkelt bare ut “pink” eller “Misty Rose” (det er de jeg har brukt) med fargenavnet som står i venstre kolonne.
Alle boksene kan lett kombineres med tekststiler du allerede har tilgang til, som sentrering av tekst, understreker, bytte skrifttype, bytte størrelse og alt annet. Du fyller rett og slett bare inn tekst på vanlig måte.
Streker kan brukes til å skille innhold i innleggene dine, og rammene kan brukes for å gjøre innlegget mer interessant (om det trengs).
For å legge det til gjør du bare følgende:
1. Trykk på “HTML av/på”
2. Lim inn koden som står i de grå firkantene under elementet du vil legge inn. Juster deretter til fargen du vil ha.
3. Trykk på “HTML av/på” igjen
På bilder må du først legge inn et bilde, så kan du legge stilen som er markert på <img>-tagen, slik som i koden. Altså skal det stå etter bilde-urlen.
Gi veldig gjerne beskjed om noe her er litt vanskelig å forstå, så kan jeg forklare litt bedre! Og kom også gjerne med forslag til lignende ting jeg kan vise og lære bort, for slike innlegg er de morsomste å skrive.
Q: Kommer du til å bruke noe av dette? Hva kunne vært bedre?
Akkurat nå er jeg oppdatt på Webdagene, og jeg skal fortelle alt om disse dagene i et senere innlegg. I mellomtiden må du rett og slett nøye deg med en aldri så liten programmerings-vits, så skal jeg komme sterkere tilbake med full rapport fra Webdagene senere!
Endelig er det fredag og helg, og det er klart for tacokveld, sofakos og Netflix! Etter jeg begynte å jobbe har fredager virkelig tatt seg opp. Det er faktisk noe annet å jobbe åtte til fire, fem dager i uka, og så kommer fredagen og du kan slippe alt du har i hendene og bare slappe av. Når man er student har du alltid hengende over deg at du kan gjøre mer, du kan studere mer, du kan jobbe mer, du burde gjøre mer. Når fredagen kommer i arbeidslivet går alle inn i fredagsmodus, og det er nesten festdag hver helg!
I dag spiste vi lunsjen vår på Burglar (jeg var skeptisk, siden det tross alt var varmmat i kantina), men burgeren der var så god, så det var verdt det! I tillegg var det jo sosialt med jobben, så det ble veldig koselig.
I morgen drar jeg endelig til Oslo for å se Kamelot live, og jeg gleder meg så sykt! Det blir utrolig spennende å se dem, jeg har hørt albumene deres konstant på Spotify det siste halvåret mens jeg har jobbet. Jeg kjenner jeg har ordentlig sommerfugler i magen, og tror definitivt ikke det kommer til å skuffe!
Jeg prøver å publisere en aldri så liten programmeringshumor innimellom, så her kommer denne ukas #fredagshumor:
For å forklare litt: Dette er etterligninger av veldig vanlige fagbøker om kodespråk, datasystemer, webdesign, og alt annet innenfor data. De fleste som har drevet med koding kan kjenne seg ganske godt igjen i titlene på bøkene ❤
4. Trykk på velg fil, og velg ikonet ditt. Trykk på “Create Favicon”. Dersom du bare skal ha favicon, og ikke nedlastingsikoner (ikoner som kommer på mobilen om man legger til nettsiden på startskjermen), så huker du av for “Generate only 16×16 favicon”.
5. Trykk på “Download the generated favicon”.
6. Nå vil det lastes ned en zip-fil med veldig mange ulike bilder. For å unngå å måtte legge til å mange forskjellige bilder, luker du ut bildene som heter “favicon.ico”, “android-icon-96×96.png” og “apple-icon-76×76.png”, da har du bilder for faviconet, og dersom noen skal laste ned nettsiden din til startsiden sin fra enten Android eller iPhone. Om du bare ønsker favicon, så holder det med fila som heter “favicon.ico”.
7. Last opp alle bildene til bloggen din ved å gå inn under “Post” og så “Bilde”.
8. Gå inn under “Bloggdesign” -> “HTML” -> “Moduler” i menyen til venstre.
9. Trykk på “Ny modul”.
10. Kall modulen for “Favicon” og lim inn denne koden:
11. I en ny fane går du inn i bildearkivet til bloggen din.
12. Trykk på favicon-bildet du lastet opp, høyreklikk på det og velg “Kopier bildeadresse”. Lim denne adressen inn i koden der det står “Erstatt-dette-med-link”, i den aller øverste av <link>-tagene.
13. Gjør det samme med de to neste. Bildeadressen til android-bildet skal i nr. 2 og bildeadressen til apple-bildet skal i nr. 3.
14. Lagre modulen.
15. Gå inn på “Bloggdesign” -> “HTML” -> “Forsiden”.
16. Lim denne koden inn direkte under <head>-tagen:
<tag:include module=”Favicon” />
17. Lagre malen og gjør det samme på “Mobilvisning” (se øverst på bildet her, der er en knapp for “Mobilvisning).
18. Dette må gjentas på “Forside”, “Innlegg”, “Video”, “Podcast”, “Kategori” og “Arkiv”. Husk å lagre malen mellom hver gang!
19. Nå kan du oppdatere bloggen din og se på favikonet. Prøv å åpne den på mobil og lagre bloggen på startsiden (i chome er det ved å trykke på de tre prikkene oppe til høyre og deretter på “Legg til på startsiden”:
Håper dette var til hjelp og tips for noen! Masse lykke til. For flere webtips, sjekk ut alt jeg har postet om webutvikling her.
Akkurat NÅ er det 18 dager og 21 timer til jeg og Øystein skal hente katten vår. Wow, litt overkill å telle ned hver eneste time eller?, tenker du kanskje. Men grunnen til at jeg har så god oversikt er fordi jeg lagde en nedtellingskalender som en øvingsoppgave på jobb!
Kalenderen spør først start- og slutt-dato for når den skal begynne og slutte (hvis det er irriterende er det bare å fjerne dette, og heller sette en fast dato uansett). Deretter lager den så mange “bokser” som dager det er mellom start- og slutt-dato. For hver dag som går blir en av boksene farget. I tillegg har den en nedteller nederst, som teller dager, timer, minutter og sekunder. Når tiden er ute kommer teksten “Nå har du fått katten <3”.
Og ja, jeg har brukt skrifttypen Comic Sans. Du har lov til å bytte den ut, haha! Selv om den er en veldig forhatt skrifttype (med rette ifølge disse punktene) syns jeg den er komisk og sjarmerende.
Legg forresten merke til den fete hovereffekten jeg la til. Ah, jeg elsker hovereffekter. Jeg får bruke altfor lite av det på jobb!
Koden
Dersom du ikke har satt opp en enkel, statisk html-side før, kan det være lurt å gå gjennom denne leksjonen. Der går jeg gjennom det å bruke tekst-editor og å skille html og css i forskjellige dokumenter i samme mappe. Kjapp og enkel leksjon!
Du skal altså her ha tre forskjellige dokumenter i samme mappe. Jeg anbefaler å kalle mappa noe lignende “Nedtellingskalender”, for eksempel. De tre filene du skal lage er index.html, style.css og script.js. Den første er fila du skal ha html-koden i. Den andre skal du ha css-koden i. I den siste fila skal du ha JavaScript-kode. Det er et kodespråk for å få enda mer til å skje på nettsiden din, enn hva css og html kan klare alene, og det inngår også i frontend-yrket.
Jeg må også presisere at dette her ikke er en av mine webleksjoner, da ville jeg gått litt mer gjennom JavaScript til å begynne med. Dette er for alle nyskjerrigperer som vil se hva som ligger bak en slik nedtellingskalender, og som kanskje vil lage en selv.
<!– Innholdet i h1-tagen kan byttes ut med noe passende –>
<h1>
Nedtelling til overtakelse av katt
</h1>
<main id=”main”>
</main>
<!– Inne i disse p-tagene kommer nedtelleren –>
<p id=”bunntekst”></p>
<!– Her blir script.js-fila inkludert –>
<script type=”text/javascript” src=”script.js”></script>
</body>
</html>
Det som er skrevet inne i <!– –>-klammene her er kommentarer. Det er slik du kommenterer html-kode for at ikke nettleseren skal lese det og tolke det som kode.
CSS
I style.css skriver du:
body
{
font-family: “Comic Sans MS”, cursive, sans-serif;
}
// Henter alle div-elementene på siden
var element = document.getElementsByTagName(“div”);
// Deklarerer variabelen “id”
var id = 0;
// Finner tidsstempel for tid akkurat nå
var now = Math.floor(Date.now())/1000;
// Spør brukeren om start og sluttdato for kalender-nedtellingen. Her kan eksempeldatoene byttes ut
var dateTo = prompt(“Dato og klokkeslett for overtakelse:”, “Sep 16, 2018 13:00:00”);
var dateFrom = prompt(“Startdato:”, “Aug 22, 2018 15:00:00”);
// Lager tidsstempel av start- og sluttdato + lager tidsstempel for et døgn
var countDownDate = new Date(dateTo).getTime() / 1000;
var startDate = new Date(dateFrom).getTime() / 1000;
var oneDay = 60*60*24;
// Regner ut antall dager det er mellom start- og slutt-datoer
var daysCount = (countDownDate – startDate) / oneDay;
// Lager én div for hver dag i “daysCount”
for (var i = daysCount – 1; i >= 0; i–) {
var div = document.createElement(“div”);
document.getElementById(“main”).appendChild(div);
}
// Looper gjennom div-elementene
for(var i = 0; i < element.length; i++){
// Setter tall i hver div. Går opp med én for hver div.
element[i].innerHTML = i + 1;
// Setter ID = tidsstempel av den datoen diven gjelder for
element[i].id = ( countDownDate – (oneDay * ( element.length – i ))) ;
// Henter ID, sjekker om id(tidsstempelet) er mer eller mindre enn nå-tidsstempelet. Er det mindre betyr det at den er ferdig. Da får den satt klassen “ferdig”
id = element[i][‘attributes’][0][‘nodeValue’];
var div = document.getElementById(id);
if ( id <= now )
{
div.classList.add(“done”);
}
}
// Koden nedenfor er hentet fra nett. Den lager nedtelleren nederst i kalenderen.
// For at utregningene nedenfor skal fungere, ganger vi tidstempelet for avslutningsdatoen med 1000
countDownDate = countDownDate * 1000;
// Lager funksjonen “updateTimer”
var updateTimer = setInterval(function() {
// Setter nå-tidsstempelet til å oppdatere med nyeste tid hvert sekund
now = new Date().getTime();
// Finner differansen mellom nå og avslutning
var distance = countDownDate – now ;
// Når nedtellingen er ferdig settes det en ny tekst. Denne kan du endre på til noe valgfritt
if (distance < 0) {
clearInterval(updateTimer );
document.getElementById(“bunntekst”).innerHTML = “Nå har du fått katten <3”;
}
}, 1000);
Her er alt som er skrevet etter // kommentarer. Jeg har prøvd å forklare for hvert trinn hva som skjer.
Kom veldig gjerne med konstruktiv kritikk til koden! Jeg slang dette sammen på jobb for å ha en nedtellingskalender da jeg skulle kjøpe første leilighet, og siden har ikke kalenderen fått så mye kjærlighet. Det er alltid nyttig å få vite hva som burde vært gjort annerledes.
Det er kanskje fortsatt mange som lurer på hvorfor navnet mitt er “Frk. Front-end”. Hva er front-end liksom? Jo, det er så enkelt som min stilling på jobben. Jeg er frontend-utvikler, noe som betyr at mye av arbeidsdagen min går med på å få det du ser av en hjemmeside til å virke og se bra ut. Det er ikke det samme som en designer, jeg koder gjerne inn det en designer allerede har laget.
Likevel er det enkelte regler jeg følger dersom det ikke er en designer på banen, eller jeg kanskje bare har fått en viss retning av hva kunden ønsker av utseende på hjemmesiden sin. Disse reglene kan lett overføres til et bloggdesign, og jeg ønsker å dele noen av de med dere.
Jeg vil forresten ikke si at mitt design er perfekt. Det er det langt i fra. Jeg syns nå det er fint, men jeg skjønner om folk syns det er kaldt og kjedelig. Disse tipsene er ikke for at folk skal få likt design som meg! Jeg er i en prosess der jeg prøver å fikse på mitt eget design, jeg er bare for lat til å gjøre noe, haha. Kokkens barn, som de sier.
Luft
Noe av det aller viktigste med en side er at den ikke er trang og klaustrofobisk. Det samme gjelder et bloggdesign. Jeg mener luft over alt. Mellom tekst og rammer, mellom bilder, mellom hver paragraf, etter hver tittel og på sidene.
Ta deg god plass når du lager designet, og ikke prøv å skvise alt for mye inn på én side. Generasjonen i dag er vant til å scrolle, så det gjør ikke noe at de må scrolle litt her heller. Det er mye mer slitsomt å lese på en blogg som ikke har luft enn å scrolle litt ekstra.
Og ikke bare trengs det mye luft. Litt av poenget med luften er også at den er fast og konsekvent. Det betyr at mengden luft mellom to paragrafer må matche med mengden luft over en overskrift. Matche betyr ikke at det må være helt lik mengde, men en mengde som passer. Jeg pleier å dele opp slik at hvis jeg har 10px som luft et sted kan jeg bruke 10px, 20px, 40px og 80px som luft andre steder for å få det til å matche. Hvis jeg bruker 15px som luft et sted, kan jeg bruke 15px, 30px og 60px.
Lett leselig skrift
Jeg er ofte innom blogger som har ekstremt liten skrift! Jeg orker ofte bare å lese noe, og så hopper jeg til slutten. Det er tungt for øynene å måtte nilese, og det pleier i tillegg å være i en skrifttype som ikke er veldig lesbar.
På web anbefales det å ikke bruke såkalte “serif”-skrifter til tekst som skal leses, med mindre den er gjort veldig lesbar. Det betyr skrifttyper som Times New Roman og Georgia. Finn en lett leselig skrifttype heller, som Arial, Source Sans og lignende “groteske” skrifttyper. Dette var et større problem før, da skrifttypene ikke var så bra, men dette har bedret seg en del med årene. Likevel ser jeg ofte folk bruke lite lesbare skrifttyper der deler av bokstavene forsvinner hvis de skaleres feil. Derfor var det spesielt typisk før å bruke serif-skrifter i overskrifter, for der kom man gjerne unna med det lettere.
Ikke tenk på utseende når du velger en skrift, tenk på funksjon! Og vær heller ikke så redde for å gå litt opp i skriftstørrelsen.
Og en annen ting: Plis hold deg til maks to skrifttyper per innlegg. Det blir mye ryddigere! Du kan ha forskjellige størrelser ved å bruke overskrifter, og putte inn litt brekkskrifter her og der, men vær så snill å ikke bruk veldig mange forskjellige skrifttyper i samme blogginnlegg!
Ryddig og oversiktlig
Animasjoner, masse farger, pynt, glitter og detaljer er noe man burde begrense og ha en ordentlig plan for. Putter du altfor mange kule ting inn i på for lite område blir det rot, og det tar fokuset vekk fra blogginnlegget. Det er mange blogger og nettsider som skal fylle opp designet med så mye detaljer og effekter at det virker veldig useriøst. Dersom man bestemmer seg for et mindre utvalg effekter og holder seg til disse kan det skape en egen identitet, heller enn å kaste på altfor mye spesielt.
Konsekventhet
Ah, mitt favorittord! Det kan ikke sies nok ganger! Dette punktet er egentlig hele lista oppsummert, for det er et stikkord som kan brukes til alt. Dette var noe av det viktigste jeg lærte etter at jeg kom i jobb, og jeg må fortsatt påminnes om det. Er jeg i tvil om hvordan noe burde gjøres får jeg alltid beskjed om å se på hvordan det er gjort tidligere. Hvordan er de andre designelementene? Hvordan er fargebruken? Hvordan er luften?
Konsekvent er å alltid følge samme intensjon, og å være prinsippfast. Velg en form og hold deg til den. Har du begynt med skarpe kanter burde du ikke plutselig ha noen elementer med avrundede kanter. Har du begynt med en type hovereffekt på knapper burde du ikke plutselig ha noen knapper med en annen hovereffekt.
Ikke ha for bredt design
Her kan jeg også bli bedre, for til og med mitt design er egentlig for bredt til å skrive så lange innlegg som jeg gjør nå. Men jeg ser definitivt design som er enda verre enn mitt igjen. Det optimale er egentlig bare å ha opptil 75 tegn per linje, inkludert mellomrom. Når avstanden fra start til slutt av linjen blir for stor, gjør det at det blir tyngre å lese blogginnlegget. Dette er det mye forskning på, og det er helt underbevisst av oss at vi unngår å lese blogger med for mange ord i hver linje.
Her burde du derfor enten skalere bredden på bloggen ned, eller justere skriftstørrelsen opp. Tro meg: dette planlegger jeg å gjøre selv og. Når jeg får tid, hehe.
Bruk ikoner
For å gjøre bloggen hakket mer interessant uten at det pranger for mye er det lurt å bruke ikoner. Ikke bare får du gjemt unna mange unødvendige ord på bloggen, men det er både gjenkjennbart for øynene og det kan være med på å skape identitet. Jeg jobber selv med å finne et sett med ikoner som kan passe til bloggen min.
Et godt eksempel på god ikonbruk er det nye designet til Sophie Elise. Der er det valgt et sett med ikoner som matcher hverandre. Disse ikonene bidrar til å skape helhet, identitet, gjenkjennbarhet og det rydder vekk vanlige delingslinker inn under designet. Se til høyre på utklippet under:
Finn dine særpreg
Dine særpreg kan være så mangt. Dette går litt under punktene “konsekvent” og “ikoner”, for utfyller du disse har du allerede kommet en vei med å finne dine særpreg. Et særpreg kan være én spesifikk fargekode du holder deg etter, eller det kan være en stil som helhet. Har du en mørk blogg vil du kanskje holde hele stilen mørk, men likevel på en tiltrekkende måte.
Uten særpreg kan bloggen fort bli veldig tørr og kjedelig. Jeg syns for eksempel min egen blogg har veldig lite særpreg, og blir fort ganske kald og tørr. Jeg prøver (som dere kanskje har fått med i dette innlegget) å bruke den ene brekkfargen jeg har litt mer i innlegget. Den rosarøde fargen bruker jeg allerede på linker og knapper flere steder, men jeg har bestemt meg at den trengs litt oftere. På den måten prøver jeg å forme meg og et slags særpreg på bloggen. Akkurat dette er jeg dårlig på selv, men prøv å finne din greie og hold deg til den.
Mobile first
Mobile first betyr at vi lever i en mobilverden, der det viktigste du gjør for å henge med i tiden er å tilpasse bloggen og nettsiden din etter mobil som prioritet én. Vær nøye med å passe på at designet ditt fungerer på mobil, og se hvordan innleggene ser ut etter du har publisert dem på mobilen. Overfør designelementene du har på datamaskin-visning over på mobilen.
Håper dette innlegget var noe lærerikt og at det kan komme til nytte for noen! Ha en super dag videre!
