-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathanalyse.html
461 lines (452 loc) · 30.6 KB
/
analyse.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Firstshoes selger billige sko til hele familien i alle årstider. Gratis levering og 60 dagers åpent kjøp.">
<title>Analyse - Firstshoes</title>
</head>
<body>
<header>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<section id="header-sub">
<span>Gratis levering<img src="gfx/check.svg" alt="Checkmark" class="icon-xs"></span>
<span>Gratis retur<img src="gfx/check.svg" alt="Checkmark" class="icon-xs"></span>
<span>60 dagers åpent kjøp<img src="gfx/check.svg" alt="Checkmark" class="icon-xs"></span>
<nav aria-label="secondary">
<ul>
<li>
<a href="#" class="text-black"><span>favoritter</span><img src="gfx/heart.svg" alt="Vis lagret i favoritter" class="icon-s"></a>
</li>
<li>
<a href="#" class="text-black"><span class="text-black">Min profil</span><img src="gfx/profile.svg" alt="Gå til min profil" class="icon-s"></a>
</li>
<li>
<a href="handlekurv.html" class="text-black"><span>Handlekurv</span><img src="gfx/shopping_bag.svg" alt="Vis produkter i handlekurv" class="icon-s"></a>
</li>
</ul>
</nav>
</section>
<section id="header-main">
<span class="logo" role="navigation"><a href="index.html">Firstshoes</a></span>
<span class="icon-m">
<a href="#"><img src="gfx/search.svg" alt="Søk etter produkter" class="icon-m"></a>
</span>
<span class="icon-m">
<a href="#" aria-label="menu"><img src="gfx/hamburger.svg" alt="Åpne meny" class="icon-m"></a>
</span>
<nav aria-label="primary">
<ul>
<li><a href="analyse.html">Analyse</a></li>
<li><a href="#">Herre</a></li>
<li><a href="#">Dame</a></li>
<li><a href="#">Merker</a></li>
<li><a href="#">Tilbud</a></li>
<li><a href="#">Vinter</a></li>
</ul>
</nav>
<form role="search">
<input type="text" id="search-input" placeholder="Søk etter produkter">
<button type="submit"><img src="gfx/search.svg" alt="" class="icon-white">Søk</button>
</form>
</section>
</header>
<main id="main" class="bg-97 analyse-main">
<h1 id="analyse-h1">Nettside analyse</h1>
<section class="analyse-section analyse-2-col-grid">
<h2>Nøkkelord undersøkelse</h2>
<p>Firstshoes fokuserer på å selge billige hverdagssko på nett så er ikke avhengig av geografisk lokasjon så lenge posten leverer.</p>
<article class="analyse-col">
<h3>Billige barn/herre/dame sko</h3>
<p>Firstshoes selger billige sko til herre, dame og barn så relevante nøkkelord blir å sette sammen "billig" etterfulgt av hvem man shopper sko for. Ikke voldsomt mye treff på Google trends, men med dagens økonomiske situasjon er billige lønnsomt for hele familien.</p>
<img src="img/analyse_for/billigesko.jpg" alt="">
</article>
<article class="analyse-col">
<h3>Emne: skomerker</h3>
<p>Skomerker som Puma, skechers, Ecco, Nike og Hooka får mye treff. Grafen under viser søk på Nike sko.</p>
<img src="img/analyse_for/nikesko.jpg" alt="">
</article>
<article class="analyse-col">
<h3>Emne: årstider</h3>
<p>I menyen og hero slider brukes ord som vinter og høst for å gjøre seg synlig i alle årstider. Ved å sette sammen en årstid med ulike typer fottøy, for eksempel høstsko, eller vinterstøvler dekker man store behov. Har også litt treff på Google trends. Grafen under viser søk på vintersko de siste 30 dager.</p>
<img src="img/analyse_for/vintersko.jpg" alt="">
</article>
<article class="analyse-col">
<h3>sko (merke) salg/tilbud/billig</h3>
<p>Et sko merke etterulgt salg, tilbud eller billig får mye treff i Google Trends. For eksempel "Hooka tilbud" eller "Nike billig" som vist i grafen under de siste 30 dager.</p>
<img src="img/analyse_for/niketilbud.jpg" alt="">
</article>
</section>
<section class="analyse-section analyse-2-col-grid">
<h2>Forarbeid</h2>
<p>Fra oblig 3 har jeg gjort grunnleggende arbeid for en optimaliser nettside, bestå UU krav og gjøre Gåågle fornøyd.</p>
<article class="analyse-col">
<h3>Optimaliserte bilder</h3>
<p>Bruker til sammen 21 bilder hvor de utgjør en størrelse på 2.48MB totalt. De fleste bildene ligger på rundt 100 til 200kb størrelse.</p>
<img src="img/analyse_for/bilder_storrelse.jpg" alt="Markert alle bilder som viser en størrelse på 2.48MB">
</article>
<article class="analyse-col">
<h3>Enkel fargepalett med høy kontrast</h3>
<p>Starter alltid å designe en nettside med graddering fra svart til hvit for å for at farger ikke skal ta vekk fokus fra layout. Det forsikrer også høy fargekontrast og lesbarhet. I dette tilfellet behold jeg graderingen.</p>
<img src="img/analyse_for/color_contrast.jpg" alt="Fargepalett på nettsiden, kun svart/hvit graddering med god kontrast">
</article>
<article class="analyse-col">
<h3>Fontvalg</h3>
<p>Fonter tar mye plass og ressurser, så holder meg til maks 1-2 og unngår for mange tykkelser. Har valgt Inter, som er en populær sans-serif font som leveres gratis med Google fonts cdn. Font tykkelsene går fra light (300) til bold (700).</p>
<img src="img/analyse_for/font_inter.jpg" alt="Fonten Inter fra Google Fonts">
</article>
<article class="analyse-col">
<h3>Tastatur navigasjon</h3>
<p>Skal være mulig å gå gjennom hele siden kun ved å bruke tabulator og alle linkbare elementer skal få en focus outline. Klikkbare elementer med :hover har samme animasjon med :focus. Har også lagt til en "skip-link" som jeg glemte å endre farge fra rød til sort.</p>
<img src="img/analyse_for/skip_link1.jpg" alt="">
<img src="img/analyse_for/fokus_hover.jpg" alt="">
</article>
</section>
<section class="analyse-section analyse-3-col-grid">
<h2>SEO og UU analyse med Google Lighthouse</h2>
<p>SEO og UU analysen er gjennomført med Google Lighthouse i Google Chrome og tar for seg forsiden, produkt og handlekurv.</p>
<article class="analyse-col">
<h3>Forside</h3>
<p>Forsiden er testet på mobil og desktop, resultatene viser at siden mangler meta description.</p>
<img src="img/analyse_for/SEO_forside_for.jpg" alt="">
<p>Resultatene fra UU testen på forsiden viser ingen feil eller mangler.</p>
<img src="img/analyse_for/UU_Forside_for.jpg" alt="">
</article>
<article class="analyse-col">
<h3>Produkt side</h3>
<p>produktsiden er testet på mobil og desktop, resultatene viser at siden mangler meta description.</p>
<img src="img/analyse_for/SEO_produkt_for.jpg" alt="">
<p>Resultatene fra UU testen på produktsiden viser at "skip-link" ikke er fokuserbar.</p>
<img src="img/analyse_for/UU_produk_for.jpg" alt="">
</article>
<article class="analyse-col">
<h3>Handlekurv</h3>
<p>Handlekurv er testet på mobil og desktop, resultatene viser at siden mangler meta description.</p>
<img src="img/analyse_for/SEO_handlekurv_for.jpg" alt="">
<p>Resultatene fra UU testen på handlekurv viser at "skip-link" ikke er fokuserbar.</p>
<img src="img/analyse_for/UU_handlekurv_for.jpg" alt="">
</article>
</section>
<section class="analyse-section analyse-3-col-grid">
<h2>Performance & best practises Google Lighthouse</h2>
<p>Performance analyse er gjennomført med Google Lighthouse og tar for seg forsiden, produkt og handlekurv.</p>
<article class="analyse-col">
<h3>Forside</h3>
<p>Resultatene av performance på telefon gir en poengsum på 63 og 80 av 100 på Desktop.</p>
<img src="img/analyse_for/performance_forside_mobil_for.jpg" alt="">
<p>Lighthouse mener forbedringstiltak innebærer å komprimere bilder, konvertere til Webp og bruke en server som støtter HTTP2.</p>
<img src="img/analyse_for/performance_forside_mobil_for_2.jpg" alt="">
</article>
<article class="analyse-col">
<h3>Produkt side</h3>
<p>Resultatene av performance for produktsiden gir en poengsum på 80 av 100</p>
<img src="img/analyse_for/performance_produkt_for.jpg" alt="">
<p>Som med forsiden er mindre bildestørrelser og konverting til webp anbefalte forbedringstiltak.</p>
<img src="img/analyse_for/performance_produkt_for_2.jpg" alt="">
</article>
<article class="analyse-col">
<h3>Handlekurv</h3>
<p>Resultatene av performance for handlekurv gir en poengsum på 100 av 100 og gir ingen spesifikke tilbakemeldinger til forbedringstiltak</p>
<img src="img/analyse_for/Performance_handlekurv_for.jpg" alt="">
</article>
</section>
<section class="analyse-section analyse-3-col-grid">
<h2>UU analyse med Webaim</h2>
<p>Analyse for nettsidens universelle utforming er gjennomført med Webaim for forside, produkt og handlekurv. Det er tatt skjermbilder for oppsummering av resultatene.</p>
<article class="analyse-col">
<h3>Forside</h3>
<img src="img/analyse_for/Webaim_forside.jpg" alt="">
<p><strong>Feilmeldinger: </strong>2 av Feilmeldingene skyldes form input i header (søkemotor) og footer (nyhetsbrev) mangler label. Den siste feilmeldingen er et bilde som mangler en alt atributt, selv om Webaim ikke klarer å lokalisere hvor det er. </p>
<p><strong>Kontrast: </strong>"Skip-link" knapp har for dårlig kontrast.</p>
<p><strong>Advarsler: </strong>7 av advarslene skylder linker som går til samme side, hvert alle produktkort linker til samme produkt. 3 advarsler skyldes navigasjonsdotter i header slideren som benytter javascript ikke er fungerer med tabulator, og mangler form for kontekst for skjermlesere.</p>
</article>
<article class="analyse-col">
<h3>Produkt side</h3>
<img src="img/analyse_for/Webaim_produkt.jpg" alt="">
<p><strong>Feilmeldinger: </strong>De samme feilmeldingene som på forsiden, form inputs mangler labels og manglene alt atributt på et bilde som ikke kan lokaliseres.</p>
<p><strong>Advarsler: </strong>Samme som forsiden, produktkort linkes til samme produktside.</p>
<p><strong>Kontrast: </strong>"Skip-link" knapp har for dårlig kontrast.</p>
</article>
<article class="analyse-col">
<h3>Handlekurv</h3>
<img src="img/analyse_for/Webaim_handlekurv.jpg" alt="">
<p><strong>Feilmeldinger: </strong>5 Feilmeldinger skylder form inputs som mangler labels, gjelder i header, footer og antall av hvert produkt i handlekurv. Siste feilmelding skylder et bilde som mangler alt atributt som ikke kan lokaliseres.</p>
<p><strong>Advarsler: </strong>"Skip link" linker til en id "main" som ikke eksisteres på handlekurv siden.</p>
<p><strong>Kontrast: </strong>"Skip-link" knapp har for dårlig kontrast.</p>
</article>
</section>
<section class="analyse-section">
<h2>SEO og UU analyse med ChatGPT</h2>
<p>Har bedt ChatGPT (GPT4) å lese gå gjennom koden til forside, produkt og handlekurv og gi anbefalte forbedringstiltak til SEO og universell utforming. Har promptet til GPT på engelsk og spurt: <i lang="en">"Act as a professional web developer and review this code for a webstore for shoes from an universal design and SEO perspective. Give me specific solutions on how it can be improved"</i>, etterfulgt av koden til hver side. ChatGPT sine tilbakemeldinger inneholder både tiltak som kan forbedres og allerede eksiteres på de ulike sidene.</p>
<article class="gpt-row">
<h3>Forside</h3>
<h4>Forside SEO</h4>
<p>Bedre beskrevet title tag, inkludere meta description, microdata, sitemap og social sharing cards er noen spesifikke tiltak ChatGPT anbefaler for SEO. For hastghet anbefaler GPT å bruke srscet for ulike bildestørrelser på ulike enheter.</p>
<img src="img/analyse_for/Gpt_forside_SEO.jpg" alt="">
<img src="img/analyse_for/GPT_Forside_SEO_2.jpg" alt="">
<h4>Forside UU</h4>
<p>Forbedret bruk av aria-labels, button tag for interaktive elementer istedenfor span tag og labels for form inputs er forslag til UU forbedringstiltak fra chatGPT. For logo mener chatGPT ikke role="navigation" er nødvendig ettersom span class="logo" er beskrivende nok. </p>
<img src="img/analyse_for/GPT_Forside_UU.jpg" alt="">
</article>
<article class="gpt-row">
<h3>Produkt</h3>
<h4>Produkt SEO</h4>
<p>Flere gode tiltak for SEO på produktsiden. De mest åpenbare er bedre beskrevet title tag og en godt beskrevet meta tag med description atributt. ChatGPT påpeker at H1 taggen ikke må skippes, en løsning vil være å bruke order slik at innholdet kommer først i html, men visuelt vises produktbildene først. Videre er det bedre navngiving av bilder, inkludere microdata, linke opp sider internt (hvis jeg hadde flere) og linke til sosiale medier.</p>
<img src="img/analyse_for/GPT_Produkt_SEO.jpg" alt="">
<img src="img/analyse_for/GPT_Produkt_SEO2.jpg" alt="">
<h4>Produkt UU</h4>
<p>ChatGPT oppdaget at "skip-link" knappen ikke hopper til hovedinnhold, bedre alt beskrivelser på bilder, title beskrielser ikoner, manglende label for inputs, bedre fargekontrast og vise feilmeldinger til kjøpere er UU anbefalinger. </p>
<img src="img/analyse_for/GPT_Produkt_UU.jpg" alt="">
</article>
<article class="gpt-row">
<h3>Handlekurv</h3>
<h4>handlekurv SEO</h4>
<p>Som med forsiden og produkt, bedre beskrevet title og inkludere meta description. Bedre struktur for h tagger, mer tydlighet i knapper/linker, sitemap og linke opp sosiale medier er anbefalte SEO tiltak fra ChatGPT. </p>
<img src="img/analyse_for/GPT_Handlekurv_SEO.jpg" alt="">
<h4>Handlekurv UU</h4>
<p>Forbedrende UU tiltak er bedre beskrivende alt tekster på bilder, bedre tastaturnavigasjon, button tag for elementer med handlinger, label for inputs og fungerende "skip-link" knapp.</p>
<img src="img/analyse_for/GPT_Handlekurv_UU.jpg" alt="">
</article>
</section>
<section class="analyse-section sammenligning-container">
<h2>Sammenligning av resultater</h2>
<table id="sammenligning">
<thead>
<tr>
<th></th>
<th>ChatGPT</th>
<th>Lighthouse</th>
<th>Webaim</th>
</tr>
</thead>
<tbody>
<tr>
<td>Meta tagger</td>
<td><p>Generisk og repeterende title tagger, mangler meta description, mangler sitemap. Sosiale medier tagger</p></td>
<td><p>Manglende meta description.</p></td>
<td><p>Reagerer ikke på manglende meta tagger.</p></td>
</tr>
<tr>
<td>tastaturnavigasjon</td>
<td><p>Enkelte knapper i slider, og øke/minke antall produkter i handlekurv må kunne bruke tastaturnavigasjon. Focus outline må være mer synlig.</p></td>
<td><p>"Skip-link" er ikke fokuserbare på enkelte sider.</p></td>
<td><p>"Skip-link" linker ikke til noen Id på produkt og handlekurv og har lav kontrast.</p></td>
</tr>
<tr>
<td>Semantikk</td>
<td><p>Mangler label tag for form inputs i header og footer på alle sider. Bedre heading struktur på produkt og handlekurv. Bruk av button tag istedenfor span på enkelte knapper.</p></td>
<td><p>N/A</p></td>
<td><p>Mangler label tag for form inputs i header og footer på alle sider.</p></td>
</tr>
<tr>
<td>Optimalisere bilder</td>
<td><p>Bruke srcset for å laste inn ulike bilder for skjermer, bruke lazy-loading.</p></td>
<td><p>Mindre bildestørrelser, bruke WebP format, benytte eksplisitte verdier for bredde og høyde.</p></td>
<td><p>N/A</p></td>
</tr>
<tr>
<td>Bildetekst og navn</td>
<td><p>Mer konkret navngivning av bilder og alternativ tekst.</p></td>
<td><p>N/A</p></td>
<td><p>N/A</p></td>
</tr>
<tr>
<td>Strukturert data</td>
<td><p>Microdata eller JSON-LD for lesbarhet. Spesifikke forslag som på breadcrumbs og produktinfo.</p></td>
<td><p>Anbefaler strukturert data, men ikke som feilmelding eller advarsel.</p></td>
<td><p>N/A</p></td>
</tr>
<tr>
<td>Responsivt design</td>
<td><p>N/A</p></td>
<td><p>N/A</p></td>
<td><p>N/A</p></td>
</tr>
<tr>
<td>Fargekontrast</td>
<td><p>Får ikke css koden, informerer om å validere fargekontrasten.</p></td>
<td><p>N/A</p></td>
<td><p>Kun dårlig fargekontrast i "skip-link" knapp.</p></td>
</tr>
<tr>
<td>Aria-labels</td>
<td><p>Mer aria-labels på interaktive elementer uten forklarende semantiske tagger. Unngå overforbruk av aria-labels der forklaring av et element er representert.</p></td>
<td><p>Informerer om å bruke aria-labels på interaktive elementer uten forklarende tagger</p></td>
<td><p>Informerer om at Aria-labels er representert på ulike sider.</p></td>
</tr>
</tbody>
</table>
</section>
<section class="analyse-section analyse-3-col-grid">
<h2>SEO, UU, performance og best pratcitse analyse med Google Lighthouse (oppdatering)</h2>
<p>Hver kolonne tar for seg de oppdaterte resultatene fra forsiden, produkt og handlekurv.</p>
<article class="analyse-col">
<h3>Forside</h3>
<p>100% poengsum på SEO, UU og best practises, men 96% poengsum på performance på grunn av http 1 server og ingen cache løsning.</p>
<img src="img/analyse_etter/forside_SEO_etter.jpg" alt="">
<img src="img/analyse_etter/forside_UU_etter.jpg" alt="">
<img src="img/analyse_etter/forside_bestp_etter.jpg" alt="">
<img src="img/analyse_etter/forside_performance_mob_etter.jpg" alt="">
</article>
<article class="analyse-col">
<h3>Produkt side</h3>
<p>100% poengsum på SEO, UU og best practises, men 98% poengsum på performance på grunn av http 1 server og ingen cache løsning.</p>
<img src="img/analyse_etter/produkt_SEO_etter.jpg" alt="">
<img src="img/analyse_etter/produkt_UU_etter.jpg" alt="">
<img src="img/analyse_etter/produkt_bestp_etter.jpg" alt="">
<img src="img/analyse_etter/produkt_performance_etter.jpg" alt="">
</article>
<article class="analyse-col">
<h3>Handlekurv</h3>
<p>100% poengsum på SEO, UU og best practises, men 98% poengsum på performance på grunn av http 1 server og ingen cache løsning.</p>
<img src="img/analyse_etter/handlekurv_SEO_etter.jpg" alt="">
<img src="img/analyse_etter/handlekurv_UU_etter.jpg" alt="">
<img src="img/analyse_etter/handlekurv_bestp_etter.jpg" alt="">
<img src="img/analyse_etter/handlekurv_performance_etter.jpg" alt="">
</article>
</section>
<section class="analyse-section analyse-3-col-grid">
<h2>UU analyse med Webaim (Oppdatering)</h2>
<article class="analyse-col">
<p>Forsiden, produkt og handlekurv er gjennomgått ny UU analyse med Webaim. Det er en feilmelding som går gjennom på alle sidene som viser til bilde uten alt atributt og tekst, noe som er til stede (se forklaring under).</p>
<h3>Manglende alt atributt</h3>
<p>Feilmelding om manglende alt atributt går igjen på alle sidene, selv om alt er til stede.</p>
<img src="img/analyse_etter/webaim_missing_alt_text.jpg" alt="">
</article>
<article class="analyse-col">
<h3>Forside</h3>
<img src="img/analyse_etter/webaim_forside_etter.jpg" alt="">
<p><strong>Feilmeldinger: </strong>Ingen feilmelding utover manglende alt atributt. </p>
<p><strong>Kontrast: </strong>N/A</p>
<p><strong>Advarsler: </strong>Skyldes duplikatlinker til samme side og bilder med veldig like alt tekster</p>
</article>
<article class="analyse-col">
<h3>Produkt side</h3>
<img src="img/analyse_etter/webaim_produkt_etter.jpg" alt="">
<p><strong>Feilmeldinger: </strong>Ingen feilmelding utover manglende alt atributt. </p>
<p><strong>Kontrast: </strong>N/A</p>
<p><strong>Advarsler: </strong>Skyldes duplikatlinker til samme side og bilder med veldig like alt tekster</p>
</article>
<article class="analyse-col">
<h3>Handlekurv</h3>
<img src="img/analyse_etter/webaim_produkt_etter.jpg" alt="">
<p><strong>Feilmeldinger: </strong>Ingen feilmelding utover manglende alt atributt. </p>
<p><strong>Kontrast: </strong>N/A</p>
<p><strong>Advarsler: </strong>Skyldes duplikatlinker til samme side og bilder med veldig like alt tekster</p>
</article>
</section>
<section class="analyse-section analyse-2-col-grid">
<h2>Forberdringstiltak</h2>
<p>Det er gjort noen forbedringstiltak for å at siden tar mindre plass, bedre kontrast i skip-link, meta tagger, label tagg i skjema og endre rekkefølge på innhold.</p>
<article class="analyse-col box-solid">
<h3>Skip-link</h3>
<p>Skip link har bedre kontrast og linker til riktig anker tag på produkt og handlekurv</p>
<img src="img/analyse_etter/skip-link_etter.jpg" alt="">
</article>
<article class="analyse-col box-solid">
<h3>Meta tagger</h3>
<p>Lagt til meta description på alle sider og mer beskrivende titles</p>
<img src="img/analyse_etter/meta_tags_etter.jpg" alt="">
</article>
<article class="analyse-col box-solid">
<h3>Optimaliserte/responsive bilder</h3>
<p>De fleste bilder er konvertert til WebP format gjennom Photoshop, de som tok mer plass forble i jpg. Bilder har nå 3 ulike størrelser for mobil, nettbrett og desktop og er responsive gjennom source srcset tag og atributt. Bruker media inline i html til å definere hvilken skjermstørrelse for når hvert bilde skal lastes inn. Blder på mobil har blitt optimalisert fra 2.48MB til 704KB</p>
<img src="img/analyse_etter/responsive_bilder_etter.jpg" alt="">
</article>
<article class="analyse-col box-solid">
<h3>Semantikk</h3>
<p>Form inputs har fått label tagger som er satt til hidden.</p>
<img src="img/analyse_etter/label_etter.jpg" alt="">
</article>
<article class="analyse-col box-solid">
<h3>Innhold struktur</h3>
<p>På produktsiden kommer innholdet (tittel, beskrivelse, pris, størrelse, etc) først og bilder etter, men bruker order slik at de bytter plass visuelt.</p>
<img src="img/analyse_etter/innhold_struktur.jpg" alt="">
</article>
</section>
<section class="analyse-section analyse-2-col-grid">
<h2>Tilgjenglighet</h2>
<article class="analyse-col">
<h3>Skjermleserkompatibilitet</h3>
<p>Utfordringen på min nettside er at skjermleseren repeterer det som står i ulike linker og kort. For eksempel har jeg en link tekst med et tilhørende ikon som har en relativ lik alt tekst. Dermed repeterer den det samme flere ganger og kan virke forvirrende.</p>
</article>
<article class="analyse-col">
<h3>tastaturnavigasjon</h3>
<p>Nettsiden kan fint navigeres med tastatur og tab knappen. Alle linker får en default outline når de er i focus, mens knapper har både hover og focus psudoklasser. Nettsiden har en "skip-link" fra før.</p>
</article>
<article class="analyse-col">
<h3>Aria-atributter</h3>
<p>Har lagt til flere Aria-atributter på nettsiden for å for eksempel spesifisere interaktive elementer som ikke er a eller button tagger. Har også lagt aria-labels for spesifisere hvilken meny som er hoved og hvem som er sekundær.</p>
</article>
</section>
<section class="analyse-section analyse-2-col-grid">
<h2>Microdata og rich results</h2>
<p>Microdata har blitt lagt til på produktsiden og blitt validert av Google rich results checker. Microdata er lagt til for grunnleggende produktinformasjon som tittel, beskrivelse, merke, fremhevet bilde, pris/valuta og størrelser, i tillegg til breadcrumbs.</p>
<img src="img/analyse_etter/microdata_overview.jpg" alt="" class="analyse-full-img">
<img src="img/analyse_etter/microdata_breadcrumbs.jpg" alt="" class="analyse-full-img">
<img src="img/analyse_etter/microdata_product_1.jpg" alt="" class="analyse-full-img">
<img src="img/analyse_etter/microdata_product_2.jpg" alt="" class="analyse-full-img">
<img src="img/analyse_etter/microdata_markup_title.jpg" alt="" class="analyse-full-img">
</section>
<section class="analyse-section analyse-2-col-grid">
<h2>Metadata og SOME</h2>
<p>Metadata for Facebook og Twitter er lagt til på forsiden, produkt og handlekurv.</p>
<img src="img/analyse_etter/SoMe-metatags_forside.jpg" alt="" class="analyse-full-img">
<img src="img/analyse_etter/SoMe-metatags_produkt.jpg" alt="" class="analyse-full-img">
<img src="img/analyse_etter/SoMe-metatags_handlekurv.jpg" alt="" class="analyse-full-img">
</section>
</main>
<footer>
<section id="footer-main">
<article>
<span class="logo"><a href="index.html">Firstshoes</a></span>
<p>Borem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tempus urna at turpis condimentum lobortis.</p>
<form>
<h3>Meld deg på nyhetsbrev</h3>
<input type="text" placeholder="E-post">
<input type="submit" value="Bli medlem nå!">
</form>
</article>
<article>
<h3>Kategorier</h3>
<nav>
<ul>
<li><a href="analyse.html">Analyse</a></li>
<li><a href="#">Barn</a></li>
<li><a href="#">Herre</a></li>
<li><a href="#">Dame</a></li>
<li><a href="#">Tilbud</a></li>
<li><a href="#">Vinter</a></li>
</ul>
</nav>
</article>
<article>
<h3>Kundeservice</h3>
<nav>
<ul>
<li><a href="#">Betaling</a></li>
<li><a href="#">Levering</a></li>
<li><a href="#">Retur</a></li>
<li><a href="#">Reklamasjon</a></li>
</ul>
</nav>
</article>
<article>
<h3>Kontakt</h3>
<address>
<p>Firstshoes AS</p>
<p>Fjellveien 13</p>
<p>1234 Moss Angeles</p>
</address>
</article>
</section>
<section id="footer-sub">
<p>© 2023, Firstshoes</p>
</section>
</footer>
</body>
</html>