Mediaquare
För detta moment valde jag att arbeta med en webbsida som jag tidigare skapat och det är Markdown och jag tänkte också anpassa min landning page på olika enheter.
Jag har anpassat min landningssida för mobil och surfplatta
Från början var min landningssida mest gjord för datorer, När jag först testade sidan i Bings mobilvänlighetstest och Amiresponsive, visade resultaten att den inte var helt optimerad för mobila enheter. Och när jag testade den på mobil och surfplatta märkte jag att den inte såg bra ut. Texten var svår att läsa, knapparna hamnade fel och sidan behövde förbättras för att fungera på mindre skärmar.
För att lösa detta använde jag media queries i CSS. Jag ändrade storleken på text och knappar, samt justerade layouten så att allt såg bra ut oavsett skärmstorlek. Jag använde också flexbox och grid för att hålla strukturen tydlig och snygg.
Efter ändringarna testade jag sidan igen, och nu fungerar den mycket bättre på alla enheter. Användarupplevelsen har förbättrats, och sidan är nu responsiv. Det var lärorikt att se hur mycket media queries kan påverka en hemsida. Vissa element hamnade fel, texten var svår att läsa och knapparna var för små för att fungera smidigt på mobil och surfplatta.
Ramverk
Jag testade att bygga en webbsida med Bootstrap för att lära mig mer om ramverk. Det var nytt för mig, men jag märkte snabbt hur smidigt det är att använda färdiga komponenter för att göra sidan responsiv. Med grid-system och flexbox skapade jag en layout som fungerar på både dator, mobil och surfplatta. Jag lade till en responsiv navbar, knappar och en flexibel struktur.
Sidan fungerar jättebra på alla enheter, och det var riktigt roligt att jobba med denna uppgift! Att använda Bootstrap gjorde det enkelt att skapa en responsiv och snygg design. Jag gillade hur smidigt det var att arbeta med ramverket och ser fram emot att testa fler funktioner i framtiden.
Lämna ett svar