![\"\"](\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/06\/wireframe.png\")
<\/figure>\n\n\n\nOch h\u00e4r \u00e4r f\u00e4rgerna som jag t\u00e4nker anv\u00e4nda mig utav:<\/p>\n\n\n\n Som vi ser s\u00e5 \u00e4r sidan en onepager och kan d\u00e5 navigeras b\u00e5de med navbar och bara genom att scrolla.<\/p>\n\n\n\n Sidan kommer att inneh\u00e5lla:<\/p>\n\n\n\n En startdel som Paolo skrivit sj\u00e4lv d\u00e4r han v\u00e4lkommnar sidans bes\u00f6kare<\/p>\n\n\n\n En del om projekt som Paolo genomf\u00f6rt<\/p>\n\n\n\n En del om Tekniker som Paolo anv\u00e4nder sig av<\/p>\n\n\n\n En del med information om Paolo<\/p>\n\n\n\n I botten kommer \u00e4ven Paolos kontaktuppgifter finnas.<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n p\u00e5 dator ser nu sidan ut s\u00e5h\u00e4r:<\/p>\n\n\n\n N\u00e4r jag skulle bygga om sidan s\u00e5 att den var mobilanpassad s\u00e5 var det relativt enkelt eftersom jag anv\u00e4nt mig utav relativa enheter och eftersom jag har samma layout p\u00e5 dator och mobil. Mitt st\u00f6rsta problem var att sj\u00e4lva navbaren var f\u00f6r ihoptryckt och att texten n\u00e4stan var lite f\u00f6r stor.<\/p>\n\n\n\n Men det gick l\u00e4tt att l\u00f6sa med Media queries och nu ser sidan ut s\u00e5h\u00e4r p\u00e5 mobil:<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n Tester:<\/p>\n\n\n\n N\u00e4r jag validerar min HTML-kod f\u00e5r jag inga problem<\/p>\n\n\n\n Samma g\u00e4ller CSS<\/p>\n\n\n\n N\u00e4r jag testade sidan mad pagespeed insights fick jag problem med CLS och First contentful paint. b\u00e5da tv\u00e5 var ganska l\u00e4tta att l\u00f6sa, CLS l\u00f6ste jag genom att l\u00e4gga till height: auto; p\u00e5 mina bilder och First contentful paint var mest problem med fonten jag valt. Men det gick att l\u00f6sa med att l\u00e4gga till font-display: swap; i ”@font-face”.<\/p>\n\n\n\n Efter detta f\u00e5r jag dessa resultat p\u00e5 desktop: <\/p>\n\n\n\n och dessa p\u00e5 mobil:<\/p>\n\n\n\n performance g\u00e5r att f\u00f6rb\u00e4ttra lite grann men jag tycker det fungerar bra nog.<\/p>\n\n\n\n N\u00e4r jag tar in sidan i wave (f\u00f6r att kolla tillg\u00e4nglighet) f\u00e5r jag dessa resultat:<\/p>\n\n\n\n Mina 7 alerts var ingenting s\u00e4rskillt.<\/p>\n\n\n\n <\/p>\n\n\n\n Och till sist kollade jag mobilv\u00e4nlighet p\u00e5 bing:<\/p>\n\n\n\n F\u00f6r det allra mesta gick projektet utan problem men mot slutet ins\u00e5g jag att sidan var bredare \u00e4n sj\u00e4lva f\u00f6nstret. detta var s\u00e4rskillt tydligt p\u00e5 mobilen d\u00e5 hela sidan \u00e5kte \u00e5t v\u00e4nster om man inte scrollade helt rakt. Det var en ganska s\u00e5 enkel l\u00f6sning d\u00e5 jag \u00e4ndrade kunde \u00e4ndra padding s\u00e5 att det inte breddade ut sidan utanf\u00f6r f\u00f6nstret. F\u00f6rutom det var det inte s\u00e5 mycket mer problem.<\/p>\n\n\n\n Sidan blev som jag t\u00e4nkt, den inneh\u00e5ller de olika styckerna paolo skrivit, \u00e4r mobilanpassad och f\u00f6ljer paolos krav. Prestandan p\u00e5 mobilk hade kunnat f\u00f6rb\u00e4ttras f\u00f6r att f\u00e5 sidan att ladda in snabbare men det f\u00e5r jag spara till framtiden.<\/p>\n\n\n\n Projektet var roligt, l\u00e4rde mig dock inte j\u00e4ttemycket nytt utav det d\u00e5 jag valde att g\u00f6ra en ganska enkel variant utav projektet, men samtidigt s\u00e5 fick jag anv\u00e4nda mig utav saker som jag inte anv\u00e4nt i fulla projekt innan s\u00e5 det var kul. Det var ocks\u00e5 kul att testa p\u00e5 att g\u00f6ra en onepager, som jag inte har gjort s\u00e5 mycket innan.<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Syftet med uppgiften \u00e4r att f\u00f6rb\u00e4ttra Paolos hemsida f\u00f6r att redovisa de nya tekniker som paolo l\u00e4rt sig under kursens g\u00e5ng. M\u00e5lgruppen \u00e4r mindre f\u00f6retag och f\u00f6reningar som villa ha paolos hj\u00e4lp att bygga enkla hemsidor H\u00e4r \u00e4r en wireframe \u00f6ver hur jag t\u00e4nker att sidan ska se ut: Och h\u00e4r \u00e4r f\u00e4rgerna som jag […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-177","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=\/wp\/v2\/pages\/177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=177"}],"version-history":[{"count":6,"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=\/wp\/v2\/pages\/177\/revisions"}],"predecessor-version":[{"id":215,"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=\/wp\/v2\/pages\/177\/revisions\/215"}],"wp:attachment":[{"href":"https:\/\/wp.als070414ps.hemsida.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/06\/farger-1024x268.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/06\/image-1024x505.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/06\/image-1.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/06\/image-2.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/06\/image-3.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/06\/image-4.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/06\/image-5.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/06\/image-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wp.als070414ps.hemsida.eu\/wp-content\/uploads\/2025\/06\/image-8.png\")
<\/figure>\n\n\n\nProblem och l\u00f6sningar<\/h2>\n\n\n\n
Resultat<\/h2>\n\n\n\n
Utv\u00e4rdering<\/h2>\n\n\n\n