Syftet med detta projektet är att jag ska göra så att Paolos webb fungerar bra på mobilen så att Paolos kunder kan få ta del av hans webb även om de inte använder en dator.

Det som är viktigast är att användarvänligheten eftersom att alla ska kunna förstå och kunna använda Paolos webb utan att behöva någon hjälp. Alltså att färgerna i bakgrunden och färgen på texten är så pass olika att det inte ska vara något problem med att läsa texten. Texten och länkar ska även vara tillräckligt stora så att man enkelt ska kunna se vad det står och så att man inte ska ha några problem med att trycka på länkar och knappar. Det är också viktigt att sidan fungerar som den ska så att man kommer dit man vill och att alla länkar fungerar.

Kravspecifikation:

• ska: Sidan ska fungera bra på en mobil.
• bör: Sidan bör även se bra ut på en dator.
• kan: Kan lägga till ett JavaScript om jag har tid och lust.

Min planering för att genomföra ett projekt : Tryck här

Jag ville ändå använda samma layout på den nya varianten av Paolos webb som jag hade på den gamla, men att jag bytte lite färgtema och gjorde sidan användbar på mobilen. Texten var den samma som på den gamla varianten, och jag hade kvar sidorna “hem, tekniker, projekt, om” så som det var sedan innan. Ett smidigt sätt att göra sidan mobil vänlig var att använda ramverket materialize som redan har egengjord css som jag kunde använda. Jag la även in en egen css fil där jag kunde finjustera så att sidan blev som jag hade tänkt.

Så här var det jag ville att den skulle se ut på en dator, alltså att texten och bilderna är bredvid parallella till varandra. Färgen blev annorlunda eftersom jag valde att använda en färg som redan fanns på materialize. Jag använde https://app.diagrams.net/ för att skissa hur jag ungefär ville att det skulle se ut.

På mobilen tänkte jag att bilden skulle hamna under texten istället för bredvid så att det inte skulle vara lika trångt.

Mobil vänligheten på Min första Paolos webb var inte särskilt bra, skärmen var väldigt in zoomat och man behövde skrolla på skärmen horisontellt för att läsa allt som stod. Men när jag testade den på Bing så hävdade den att den visst var mobil vänlig, den var bara inte särskilt snygg. Jag hade bara använt måttet pixlar när jag skulle bestämma storleken på text, bilder och avstånd, vilket var en stor anledning till att den inte var särskilt mobil vänlig.

På den senaste versionen så märkte jag när jag skulle göra den mobil vänlig att navbaren inte fick plats på ett så bra sätt på mobilen. Jag valde istället att använda ett JavaScript från materialize som gjorde att det blev en sidnav istället för en vanlig navbar när man använde mobilen. Jag använde även media Queries för att bestämma hur till exempel bilderna skulle placera sig när man använde en mobil. Detta gjorde att texten på sidorna inte behövde bli hoptryckta för att det också skulle få plats en bild. Det gjorde att sidan blev mycket enkel att hantera och mer mobil vänlig. När jag testade den på bings sida så ser man att den blev mobil vänlig. Men så som den ser ut på bilden ser den inte ut i verkligheten, det blev något konstigt med den.

Prestandan på originalet var inte särskilt bra. Det som blev mest klagat på var att bilderna var onödigt stora jämt emot hur stora det egentligen behövde vara. Efter att jag hade minskat bilderna blev resultatet omedelbart bättre. Det var inte någonting annat som behövdes ändras på som jag visste hur man skulle göra. SEO blev även förbättrat efter att jag lade till meta beskrivningar på vardera sida.

Jag validerade alla sidor och de kom alla tillbaka godkända, så jag behövde inte göra några ändringar.

Jag validerade även min css och det var inga problem med den häller.

Jag har dock stött på ett litet småproblem som jag inte har lyckats lösa och jag fattar inte riktigt varför det inte funkar. Problemen är att när man är på mobilen och är inne på “projekt” sida går det inte att använda sidnaven, men den funkar när man är på de andra sidorna. Jag har gjort exakt lika dant på alla sidor och då borde det ju funka på alla. Men av någon konstig anledning funkar det inte på just den sidan. Jag har nu fått hjälp av Johan och det visade sig att jag råkade skriva in länken till Java Scriptet två gånger i rad vilket gjorde att den inte fungerade. Nu när jag har rätt länk funkar det.

Jag har hunnit med allt som jag ville göra, och jag tyckte att det gick ganska bra hela tiden. Det var vissa saker som var lite svårare och vissa som var lite enklare. Jag är nog mest nöjd med hur weddsidan blev på mobilen eftersom jag var lite osäker i början hur det egentligen skulle gå. Men det blev väldigt bra i slutet.

Från första början tänkte jag att jag bara skulle ändra lite på den originala Paolos webb så att den skulle bli mobil vänlig. Men sen insåg jag att det var krångligt, så jag gjorde om den med materialize istället. Eftersom jag gjorde en planering var det en bra förberedelse inför när jag sen ska göra mitt gymnasiearbete så att jag inte behöver lista ut sen hur jag ska göra för att planera ett projekt.