Kravspecifikation:<\/p>\n\n\n\n
- \n
- ska: Sidan ska fungera bra p\u00e5 en mobil.<\/li>\n\n\n\n
- b\u00f6r: Sidan b\u00f6r \u00e4ven se bra ut p\u00e5 en dator.<\/li>\n\n\n\n
- kan: Kan l\u00e4gga till ett JavaScript om jag har tid och lust. <\/li>\n<\/ul>\n\n\n\n<\/div>\n\n\n\n
Min planering f\u00f6r att genomf\u00f6ra ett projekt : Tryck h\u00e4r <\/a><\/p>\n\n\n\n
Jag ville \u00e4nd\u00e5 anv\u00e4nda samma layout p\u00e5 den nya varianten av Paolos webb som jag hade p\u00e5 den gamla, men att jag bytte lite f\u00e4rgtema och gjorde sidan anv\u00e4ndbar p\u00e5 mobilen. Texten var den samma som p\u00e5 den gamla varianten, och jag hade kvar sidorna “hem, tekniker, projekt, om” s\u00e5 som det var sedan innan. Ett smidigt s\u00e4tt att g\u00f6ra sidan mobil v\u00e4nlig var att anv\u00e4nda ramverket materialize som redan har egengjord css som jag kunde anv\u00e4nda. Jag la \u00e4ven in en egen css fil d\u00e4r jag kunde finjustera s\u00e5 att sidan blev som jag hade t\u00e4nkt. <\/p>\n\n\n\n
![\"\"](\"https:\/\/wp.als080411ek.hemsida.eu\/wp-content\/uploads\/2026\/05\/image.png\")
<\/figure>\n\n\n\nS\u00e5 h\u00e4r var det jag ville att den skulle se ut p\u00e5 en dator, allts\u00e5 att texten och bilderna \u00e4r bredvid parallella till varandra. F\u00e4rgen blev annorlunda eftersom jag valde att anv\u00e4nda en f\u00e4rg som redan fanns p\u00e5 materialize. Jag anv\u00e4nde https:\/\/app.diagrams.net\/<\/a> f\u00f6r att skissa hur jag ungef\u00e4r ville att det skulle se ut. <\/p>\n\n\n\n
![\"\"](\"https:\/\/wp.als080411ek.hemsida.eu\/wp-content\/uploads\/2026\/05\/image-2.png\")
<\/figure>\n\n\n\nP\u00e5 mobilen t\u00e4nkte jag att bilden skulle hamna under texten ist\u00e4llet f\u00f6r bredvid s\u00e5 att det inte skulle vara lika tr\u00e5ngt. <\/p>\n\n\n\n
<\/div>\n\n\n\nMobil v\u00e4nligheten p\u00e5 Min f\u00f6rsta Paolos webb var inte s\u00e4rskilt bra, sk\u00e4rmen var v\u00e4ldigt in zoomat och man beh\u00f6vde skrolla p\u00e5 sk\u00e4rmen horisontellt f\u00f6r att l\u00e4sa allt som stod. Men n\u00e4r jag testade den p\u00e5 Bing<\/a> s\u00e5 h\u00e4vdade den att den visst var mobil v\u00e4nlig, den var bara inte s\u00e4rskilt snygg. Jag hade bara anv\u00e4nt m\u00e5ttet pixlar n\u00e4r jag skulle best\u00e4mma storleken p\u00e5 text, bilder och avst\u00e5nd, vilket var en stor anledning till att den inte var s\u00e4rskilt mobil v\u00e4nlig.<\/p>\n\n\n\n
![\"\"](\"https:\/\/wp.als080411ek.hemsida.eu\/wp-content\/uploads\/2026\/05\/image-3-1024x502.png\")
<\/figure>\n\n\n\nP\u00e5 den senaste versionen s\u00e5 m\u00e4rkte jag n\u00e4r jag skulle g\u00f6ra den mobil v\u00e4nlig att navbaren inte fick plats p\u00e5 ett s\u00e5 bra s\u00e4tt p\u00e5 mobilen. Jag valde ist\u00e4llet att anv\u00e4nda ett JavaScript fr\u00e5n materialize<\/a> som gjorde att det blev en sidnav ist\u00e4llet f\u00f6r en vanlig navbar n\u00e4r man anv\u00e4nde mobilen. Jag anv\u00e4nde \u00e4ven media Queries f\u00f6r att best\u00e4mma hur till exempel bilderna skulle placera sig n\u00e4r man anv\u00e4nde en mobil. Detta gjorde att texten p\u00e5 sidorna inte beh\u00f6vde bli hoptryckta f\u00f6r att det ocks\u00e5 skulle f\u00e5 plats en bild. Det gjorde att sidan blev mycket enkel att hantera och mer mobil v\u00e4nlig. N\u00e4r jag testade den p\u00e5 bings sida s\u00e5 ser man att den blev mobil v\u00e4nlig. Men s\u00e5 som den ser ut p\u00e5 bilden ser den inte ut i verkligheten, det blev n\u00e5got konstigt med den. <\/p>\n\n\n\n
![\"\"](\"https:\/\/wp.als080411ek.hemsida.eu\/wp-content\/uploads\/2026\/05\/image-4-1024x498.png\")
<\/figure>\n\n\n\n<\/div>\n\n\n\n![\"\"](\"https:\/\/wp.als080411ek.hemsida.eu\/wp-content\/uploads\/2026\/05\/image-5-1024x583.png\")
<\/figure>\n\n\n\nPrestandan<\/a> p\u00e5 originalet var inte s\u00e4rskilt bra. Det som blev mest klagat p\u00e5 var att bilderna var on\u00f6digt stora j\u00e4mt emot hur stora det egentligen beh\u00f6vde vara. Efter att jag hade minskat bilderna<\/a> blev resultatet omedelbart b\u00e4ttre. Det var inte n\u00e5gonting annat som beh\u00f6vdes \u00e4ndras p\u00e5 som jag visste hur man skulle g\u00f6ra. SEO blev \u00e4ven f\u00f6rb\u00e4ttrat efter att jag lade till meta beskrivningar p\u00e5 vardera sida.<\/p>\n\n\n\n
![\"\"](\"https:\/\/wp.als080411ek.hemsida.eu\/wp-content\/uploads\/2026\/05\/image-6-1024x593.png\")
<\/figure>\n\n\n\n
![\"\"](\"https:\/\/wp.als080411ek.hemsida.eu\/wp-content\/uploads\/2026\/05\/image-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wp.als080411ek.hemsida.eu\/wp-content\/uploads\/2026\/05\/image-9.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wp.als080411ek.hemsida.eu\/wp-content\/uploads\/2026\/05\/image-10.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wp.als080411ek.hemsida.eu\/wp-content\/uploads\/2026\/05\/image-11.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wp.als080411ek.hemsida.eu\/wp-content\/uploads\/2026\/05\/image-12.png\")
<\/figure>\n\n\n\n