FÖRE:

EFTER:

Jag har lagt använt flexbox för bild och text då det är enklare och ger bättre kontroll över layout. Har även lagt till lite media query för att göra designen mer responsiv och anpassad till olika skärmstorlekar. Denna uppgift var lättare till skillnad från ramverk och jag föredrar också flexbox då jag tyckte att det var lättare att lära sig flexbox än ramverk och det skulle vara onödigt att handskas med ett svårare verktyg om man redan kan ett annat.

Jag har valt att använda ramverket Bootstrap för att skapa en responsiv design på min markdown-sida.

INNAN:

EFTER:

Förändringarna jag har gjort för att få en mer responsiv design är att använda mig av ramverket Bootstrap som jag tillämpat i mina koder. Det var väldigt svårt dock mestadels på grund de många klasserna.

Min landing-page i Google Chrome på en mobil:

Min landing-page i Google Chrome på en surfplatta:

Min landing-page i Microsoft Edge på en mobil:

Min landing page i Microsoft Edge på en surfplatta:

Testresultaten:

Testresultaten visar att min landing-page inte är mobilvänlig. Länkar och knappar är tillräckligt stora och touchvänliga och zoom är tillåten vilket är bra. För att göra den mer mobilvänlig skulle man lägga till <meta viewport> vilket gör att sidan anpassar sig till skärmstorleken.

Uppdatering:

Jag lade till <meta viewport….> och testade sidan med testverktyget igen och nu fick jag bättre resultat.