Gamla sidan: Paolos webb v1
Nya sidan: Paolos webb v2
Syfte: Förbättra Paolos sida så att den är mobilanpassad, laddar snabbt, är tillgänglig och följer reglerna.
Målgrupp: Små företag och föreningar som behöver hjälp med enklare webbsidor.
Sidor som ingår: Samma som innan: Hem, Tekniker, Projekt, Om
_______________________________________________________________________________________
Mål
- Mobilanpassning med hjälp av: Relativa enheter / Media Queries / Flexbox / Grid
- Komprimering av kod & bilder
- Prestandatest
- Tillgänglighet
- Flera förbättringar ifall det behövs
_______________________________________________________________________________________
Wireframe
Skiss av den originella sidan (Dator):
Skiss av den nya sidan (Dator):
Kommentar: Jag bestämde mig för att ändra lite designen på Hem, Teknik, och Projekt sidorna eftersom det ser lite bättre ut och som biprodukt blir bilderna lite större.
Skiss av den nya sidan (Mobil):
_______________________________________________________________________________________
Tidsplanering
v15 – Första lektionen (Bestämde vad jag vill göra)
v16 – Påsklov (Inget arbete)
v17 – p2 (planering, wireframe, vilka tekniker jag ska använda)
v18 – p2 (Arbete)
v19 – p2 (Arbete)
v20 – p2 (Arbete & kontroll)
v21 – p3 (Uppstart & arbete)
v22 – p3 (Arbete)
v23 – p3 (Arbete)
v24 – Redovisning
_______________________________________________________________________________________
Arbetsprocess
– Ändrade bilden av min landing page i projekt sidan till den senaste versionen
– Ersatte några enheter till relativa enheter
– Media query för mobila enheter (Max Width 768px):
- Tog bort den 20% marigin som fanns i dator sidan för att utnyttja hela bredden på mobilen
- Formaterade allt text i stycken
- Ändrade storlek på bilder
- Ändrade storlek på tabellen
– Började med Flexbox men använde det inte till slut
– Förbättrade tabellen i ”Om” sidan eftersom jag var missnöjd med den originella
– Satte in flera fonter ifall Permanent Marker fungerar inte
– Använde Grid för att se till att footern på korta sidor som ”Om” och ”Hem” sidorna ligger på botten ändå
– Omordning av stycken & bilder på både dator- och mobil sidan eftersom det såg bättre ut och bilderna blev större
– Rätt titel på varje pagination (Förut stod det ”Paolos Webb” på alla fyra sidor)
– Använde Robots (Index & Follow) och satte in en tom Meta Description till varje sida så att Paolo kan göra webbsidan mer tillgänglig om han vill
– Formatterade koden med Web Formatter
– Komprimerade Bilder med tinypng och Kod med dirtymarkup
– Validerade koden med Markup Validation Service (HTML) och CSS Validation Service (CSS)
”Hem” sidan
”Tekniker” sidan
”Projekt” sidan
”Om” sidan
CSS filen
– Testade sidan på Firefox
_______________________________________________________________________________________
Prestandatest
Paolos webb version 1:
Bing: Testverktyg för mobilvänlighet
Chrome Utvecklarverktyg
Paolos webb version 2:
Bing: Testverktyg för mobilvänlighet
Kommentar: Sidans storlek och laddningshastighet minskades med hjälp av komprimeringen av kod och bilder, men prestanda betyget sänktes ett grad på grund av ”Compress components with gzip” förslaget.
Chrome Utvecklarverktyg
Kommentar: Även om mitt mål var att anpassa sidan till mobila enheter, den blev bättre på stora skärmen också eftersom footern är länge ner på grund av Grid, och på surfplattan och andra mindre surfplattor eftersom de är inom bredden som påverkas av Media query:n.
_______________________________________________________________________________________
Slutsats
Jag tycker att denna projekt var ett bra tillfälle för att visa det som jag har lärt mig under kursens gång, främst när det kommer till responsivitet och tillgänglighet. Jag är ganska nöjd med det jag gjorde men jag hade hellre velat bli klar med Projekt 2 en vecka eller två tidigare så att jag skulle ha mer tid med Projekt 3, där jag kommer att göra mitt bästa. Jag sparade scripten till nästa projekt men jag anser ändå att jag dokumenterade projektet tillräckligt bra.