Responsivt med hjälp av media queries

Fick en fråga om jag kunde visa hur man gjorde sin blogg responsiv, och måste säga att jag är inte alls något proffs på detta utan dehär är helt nytt för mig, jag vet inte om mitt sätt är rätt eller fel - det verkar iallafall fungera någorlunda. Ska ni försöka er på detta, så bör ni göra detta i en testblogg eftersom de kan bli fullkomligt galet ibland.
 
Varför ska man mobilanpassa sin blogg/hemsida?
Jo, för att vi lever just nu i en tid där det är vanligare att surfa med mobilen eller surfplattan än med dator. Man vill ju att designen både ska vara bra funktionsmässigt och snygg, via mobil och dator. Tanken med media queries är att designen anpassar sig utefter vilken skärmupplösning användaren har!
 
Breakpoints.
Det finns massor av olika breakpoints, men eftersom jag är väldigt ny inom responsiv design så valde jag att bara använda en breakpoint för att lägga all energi på att få den att funka.
Den jag använde till stilmallen ser ut såhär: 
...och den betyder att ifall användaren i fråga har en skärm på max 800px så ska koder inom { och } gälla. Annars ska andra koder gälla; antingen andra breakpoints eller den ordinära stilmallen.
 
Hindra användare från att zooma. Gör designen användarvänlig istället så man slipper zooma in och ut för att kunna läsa texten i t.ex inläggen.
Denna kod ska läggas precis innan </head> i alla kodmallar:
 
Tänk på detta när ni kodar i @media queries:
 
Max-bredd istället för en fast bredd och procent istället för pixlar.
De är precis som de låter. Man vill ha relativa värden och inte fasta värden så att breddarna ska kunna ändras utifrån upplösningen på skärmen. Istället för att skriva:
wrapper {width: 1000px; } så skriver man wrapper {max-width: 1000px;}. Vilket direkt leder oss in på nästa bra-att-tänka-på grej.
 
När man gör en design till något som är max 800px bred så vet man ju inte om användarens skärm är 150px bred eller 800px bred. Därför vill man ha pixlar/avstånd/mått i procent så att t.ex en wrapper på 300px bred blir jätteliten på skärmen som är 800px bred men väldigt liten på skärmen som är 150px bred. Har man istället mått i procent så blir breddarna lika stora i förhållande till de olika skärmarna. Ni fattar!
 
När man handskas med så små utrymmen så gäller det att ta vara på varje liten del av skärmen. Därför gjorde jag min wrapper 100% bred, den ska alltså vara lika bred som hela skärmen den visas på. Jag använde sedan wrappern som en linjal ungefär, tex. content blev 90% bred för att jag inte ville att den skulle ta upp hela skärmen utan att det skulle finnas en viss marginal.
 
Meny-problemet.
Jag valde att ta bort menyn helt i min mobilanpassade design för att de var väldigt svårt att få den att se okej ut med dess udda dropdown. 
Har man däremot en sidomeny går det att lägga den nederst på sidan. 
Ett alternativ kan vara att göra en speciell meny som endast ska visas på den mobilanpassade designen, vilket man inte ska tveka på att göra ifall man har tålamod och kunskap.
 
Förhandsgranska.
Förhandsgranska kan man göra genom att öppna sin blogg/hemsida i en ny flik och förminska webbläsarfönstret/zooma in & ut. Annars kan ni leta rätt på en surfplatta eller en telefon och kolla!
 
Fler breakpoints.
 
Mina koder ifall de kan hjälpa er förstå: 
(kopiera inte dessa rakt av ifall ni tänkte de, koderna kommer röra till ordenligt i era designer eftersom mina koder hör till min design)
Mina koder är inte helt felfria, det är jag medveten om. men jag fick det att fungera, vilket var huvudsaken för min del!



Kommentarer

Hejsan! Vad ska det stå (jag har skrivit HÄR där jag undrar vad det ska stå): @media screen and (max-width: 800px) { /* HÄR */ }
Det är någon kod men jag vet inte vilken? Har försökt att hitta hur man mobilanpassa sin blogg så snälla svara så fort som möjligt! :)

Svar: Det har jag försökt förklara i inlägget, har du läst :)?
llii.blogg.se

aa men har en mobilanpassad blogg nu! men tack i alla fall!
Fin blogg förresten! :)

Hej!
Tack för inlägget men jag fattar inte riktigt vart exakt jag ska lägga in den här koden ( @media screen and (max-width: 800px) { /* stilmallskoder */ } ) i stillmallen. För om jag fattar rätt är det den som gör att headern syns när man kollar bloggen på mobilen.
Förlåt om jag är lite trög haha men behöver verkligen hjälp! Tacksam för svar! :)

Svar: Det spelar ingen roll vars du lägger den, men ett tips är väll längst upp i stilmallen, då hittar man den lättast. När du lagt in den såsom den är så ändras inte designen någonting alls, utan du måste lägga in stilmallskoder där jag skrivit det. Ex: @media screen and (max-width: 800px) { header { width: 200px; background: white;} } de är lite klurigt innan man förstår hur dessa fungerar. :)
llii.blogg.se

Hej! Jag har problem med att jag inte kan se min header i mobilen. jag har inte gjort den mobilanpassad då jag tycker den är finare som den är.
Tror du att du kan hjälpa mig?
ha en fin dag/ Camilla

Svar: Jag kan se headern, dock inte hela och det beror antagligen på att mallen är en färdig, mobilanpassad mall. :)
llii.blogg.se

Tack før svaret :) Så dum jag ær, den var mobilanpassad nu. men då jag klickat bort det så ær headern borta :(

Svar: Vad klickade du bort och vars gjorde du det :)?
llii.blogg.se

På blogg.se på inställningar har de en ruta man kan aktivera før att göra den mobilanpassad. Då blir den som då du såg den första gången med bilden som var før stor.Men nu ska sidan se ut som på datorn men utan header då den inte kommer fram. har provat med dina koder hær ovan men får det inte att fungera.

Svar: Ja men då är det ju bara att du aktiverar/inaktiverar mobilanpassningen man gör i inställningar så syns ju headern igen. :) Nej, mina koder fungerar inte på blogg.se's färdiga teman där designen redan är mobilanpassad och redan har dessa koder. :)
llii.blogg.se

Hej!
Jag har blogg.se
Fick hjölp att göra om min desin. Hon tog en som blogg.se har. Men min blogg syns ej från min mobil.
Skulle du kunna hjölpa mig?
Tack på förhand
Nathalia

Svar: Jag kan se din blogg hur bra som helst på min mobil, vilken telefon har du, ifall det har någon betydelse :)?
llii.blogg.se

Hej igen!
Det var ju kul att du kunde se hela min blogg,från mobilen. För när jag eller min make går in från den. Ser vi inte hela bloggen
Har en samsung s3 mobil har jag.

Svar: Okej, så ni kan se bloggen men inte hela ? Kanske beror det på att designen är mobilanpassad, om det är de ni menar med att ni inte ser hela. :)
llii.blogg.se

Hej!
Jag har bestämt mig för att skapa en ny blogg (har bloggat på olika bloggar tidigare) och håller därför på med en ny bloggdesign. Jag hittade till din blogg och har tagit lite hjälp av ditt inlägg angående responsiv design och vill börja med att tacka för hjälpen med det. Dock har jag fastnat på en grej nu och undrar om du har någon aning om vad det kan bero på? Jag förstår om du inte har tid med sådana här frågor, men skulle vara jättetacksam för svar! Det är nämligen så att när jag nu öppnar min blogg i mobilen, så ser designen olika ut på det översta inlägget och de under. Hela inlägget är förskjutet till vänster och texten med datum och kategori är större storlek än de andra. Nu blev det ett långt inlägg, men har du någon aning om vad det skulle kunna vara som gör att det blir såhär??

Hoppas du har en bra dag! :)

Svar: Hejsan! Alltså responsivt är krångligt, vad som fungerar hos en design behöver inte fungera hos en annan, det är i alla fall mina erfarenheter. Så jag har ingen aning! Du skulle kunna spara ner alla koder så du har kvar dom, och sedan börja om med den responsiva delen. Sedan lägger du in en del i taget och kollar när och då även vad som orsakar problemet, det är så jag brukar jobba när jag inte förstår varför saker och ting blir som de blir! :)
Hoppas det löser sig, ha det bra!
llii.blogg.se


Kom ihåg






Trackback