Mobilanpassa din blogg.se
När jag för första gången skulle testa att mobilanpassa min sida så tyckte jag det var aningen svårt. Jag var inte van med hur man skulle tänka men när jag väl kom in i det så var det inte längre några problem alls. I det här inlägget tänkte jag visa hur du gör din nuvarande blogg responsiv med Media Queries samt dela med mig av några av mina bästa tips.
Anledningen till att ha en responsiv blogg eller hemsida är att tekniken har förändrats och att vi idag inte endast surfar med datorer. Du vill ju att dina inlägg ska vara läsabara i alla de olika format det finns som dator, surfplatta och mobil.
Steg ett - Koden
Såhär ser den ut och den lägger du i din stilmall, det är alltså en CSS kod som sköter allt. Mellan klamrarna där det står "kod" lägger du in det som ska ändras. Vill du att bakgrunden ska vara rosa när man besöka din hemsida via en mobil så kopierar du bodykoden du har längre upp i din stilmall och ändrar bakgrundsfärgen.
body {
background-color: pink;
}
I steg tre går jag igenom några av de sakerna du behöver ändra för att få din webbdesign anpassade för en mobil.
body {
background-color: pink;
}
I steg tre går jag igenom några av de sakerna du behöver ändra för att få din webbdesign anpassade för en mobil.
Steg två - Breakpoints.
Om man vill ha en anpassning för mobil och en för surplattor, hur gör man då? Det är då breakpoints kommer in i bilden och i kodsnutten längre upp ser du att det står 767px. Det är för skärmar upp till 767px och som jag har förstått så är ofta en surfplatts 768px bred eller bredare. Vill du göra en anpassning för en ipad eller annan surfplatta skriver du etc "@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)" istället. Du kan ha flera breakpoints och du lägger till dom genom att kopiera koden här ovan och ändra storleken på max-width. Vill du veta vilken storlek som du behöver för just den skärm du söker så är det bara att googla. Det du skriver inom koden med "max-width: 767px" kommer endast att ändras för skärmar mindre än 767px, det kommer inte att påverka det som syns i en dator.Steg tre - Tänk i procent, inte pixlar
Min bloggdesign som syns i en dator är gjort i måttet pixlar. Mina inlägg är 900px breda för att mina bilder som är 900px ska synas. Min meny är 250px bred och där emellan finns ett mellanrum som avgörs av hur bred min wrapper är. Är min wrapper 1170px bred kommer mellanrummet vara 30px (1180-900-250=30) (egentligen är mellanrummet mindre för det finns space på sidorna men ni fattar tänket). Skulle du visa exakt samma koder i en mobil skulle du behöva zooma in för att ens kunna läsa inläggen, allt skulle bli smått och ha konstiga proportioner. Det är då man ska använda sig av procent, för du kan inte veta om personen som besöker din sida ha en skärm som är 400px bred eller 1234px bred.
Det var att tänka i procent som var aningen klurigt i början men det är egentligen betydligt lättare än pixlar. Jag brukar börja efter det större sakerna, som wrapper, content (inläggen) och side (menyn). Wrappern som tidigare var 900px i en dator vill jag nu ska täcka hela skärmen i en mobil. Då lägger jag till koden inom klamrarna i @media koden.
wrapper {
wrapper {
max-width: 100%;
}
Content som ligger i wrappern vill jag ska vara väldigt stor den med men jag vill ändå ha lite space på sidorna så man kan se bakgrunden. Då lägger jag till width: 96% för content. Det är väldigt vanligt att flytta ner sin sidor meny under inläggen när man anpassar sin mobil för mindre skärmar. Vill du ha din meny lika bred som dina inlägg lägger du till samma bredd. Nu borde det se ut något såhär:
Vill du anpassa din sida för en surfplatta kan du använda samma kod som ovan men du byter ut 767px mot önskat antal.
Tips
- Kopiera koderna från längre upp i stilmallen och sedan ändra det som behöver ändras och radera det som inte behövs i din mobilversion.
- Har du angett dina font-storleker i px kan det se aningen tokigt ut i mobilen. Att använda enheten em är många gånger smartare.
- Händer det att dina bilder blir för stora? Sök reda på vad dina bilder har för tagg, troligen img. Lägg in koden img { max-width: 100%; } mellan klamrarna i för att bilderna max ska vara lika breda som dina inlägg, även om du laddat upp dom i 900px för att passa i en dator.
- Förhandsgrandska din webbsida som en mobil och surfplatta i datorn. Använder du Chorme klickar du på dom tre prickarna längst upp till höger -> fler verktyg -> verktyg för utvecklare. Till vänster om elements (längst upp ovan koden) finns en icon på en mobil, klicka på den och sedan kan du välja vilken device du vill se. Använder du Safari klicka du utvecklare -> använd responsiv design.
Inlägget kanske blev aningen rörigt men det finns så otroligt många möjligheter med media queries. Jag hoppas att du fått en inblick i hur det funkar. Har du frågor är det bara att lämna en kommentar!
Beatrice Jakobsson - Fotograf
Sjukt bra tips och det är verkligen så skönt att ha en blogg som är mobilanpassad! :)
Jeanette
Vilket bra inlägg :)
Louise
Bra att du delar med dig utav dina tips ! 😃
Denise
Vilket bra och detaljerat inlägg om hur man går tillväga! :)
Celine
Men åh så bra tips! Måste ta och göra detta någon dag då jag har tid och ork!
Linnea
jättebra inlägg :)
Carro
Lätt som en bra guide! :)
Anna
Bra inlägg!
Pauline Hurtig
bra tips!
Ebba
Bra tips!!
Sussi
Som jag skrivit förut, jag är djupt imponerad av att du klarar av det där. Jag är totalt otekniskt vad gäller sådant. Jag är glad att jag lyckas lägga in bilder i bloggen haha
Linnea Kinis
gud jag är så dålig på sånt där. önskar jag vore bättre! ha velat ändra så jag kan ha 900px eller 1000px breda bilder. nu kan jag bara ha 800px tror jag :) duktig du är som kan sånt!
Julia Persson
Så bra tips!
Carro
Hoppas du får en härlig lördag! :)
JoJo
så bra inlägg! tack för tipset! :)
Erica
Superbra tips och lätt att förstå! :D
Miss Baby Peaches
Jag brukar vara hyffsat bra på att fatta sånt men det här kändes himla svårt.. Skulle verkligen behöva fatta det här då jag tycker att blogg.se har så himla tråkig mobilanpassning :P
About
Email 
Instagram
Camera
Youtube
Weheartit
Pinterest