Kontrastrikt

Suttit och verkligen lekt hejvilt i photoshop. Så kraftfullt program och de finns inga gränser alls utan man får själv sätta ner foten och ge sig när de börjar gå för långt - de gäller att hitta balansen helt enkelt.
Bilden ovanför tycker jag är ett gränsfall och funderade starkt på att tona ner ögat litegrann men jag tyckte HDR effekten passade så himla bra så det fick vara så. De är roande att redigera eftersom resultaten kan bli precis vad som helst! 
 
Nog om det, nu är det sovdags för min del. Första kvällen på länge jag kan slappna av från allt plugg och slit.


Tre inspirationskällor

 
Källa: We♥it
 
Den sidan har verkligen blivit vardag för mig, är där inne varje dag och norpar åt mig massor av inspiration. Ovan ser ni mina tre senaste ♥:de bilder. Så fina
Mitt we♥it konto, fullproppat med det som inspirerar mig


black & white vs color

Kunde inte bestämma mig vilket som var bäst, svartvitt eller färg. Den svartvita förmedlar ju en känsla, medan den med färg förmedlar en annan.
 
Vilken tycker ni ser bäst ut, den svartvita eller den i färg?


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!


En måndag

Vill till fjället, bort från all stress och allt.
Idag har varit en skitdag. Huvudvärk, ont i magen, matteprov, less och trött, you name it.
 
Ägnat en del av kvällen åt att göra ett designrelaterat inlägg - igen. Tänkte att jag ska ge mig på att förklara hur du mobilanpassar din blogg och gör den responsiv. Även fast det är relativt okänt för mig och jag trivs knappast som fisken i vattnet bland dessa media queries och procentuella mått.
 
Halkat efter med designerna och bloggandet även fast jag sliter på heltid. Hur är de ens möjligt? 


Oliveras design

Idag levererade jag en design till Olivera. Det blev en väldigt stilren och enkel design med en header hon gjort själv, men det var kul eftersom hon visste vad hon ville ha, vilket jag värdesätter högt. 
 
Vill du också beställa ? Kolla in här !


Svar på mail

Det var ifrån en som heter emma som skickat från mitt kontaktformulär, men hittade ingen mail-address i mailet så jag tänkte att jag kunde svara här!
 
Kan jag få beställa en toppmeny där arkiv och kategorier bla. ligger. Vill ha min design jag har idag men vill ha som dig att menyn är fast på sidan. Klarar inte ut de själv... Hjälp!
Pris? Är de vad-som-helst-pris?
 
SVAR: Kan såklart hjälpa dig, skriv till mig igen här och glöm inte att lämna e-postadress!
 


Manuellt bildspel

Okej, nu har jag fått lite frågor om hur jag gjorde mitt manuella bildspel i headern jag hade förut, så tänkte visa nu.(Bildspelet styrs genom att man trycker på knappar som gör att man tar sig vidare i bildspelet som du ser på bilden ovan). 
 
Tänker inte gå igenom vad varenda rad kod betyder utan ni får läsa, tänka lite logiskt och prova er fram. Som en liten hjälp på traven har jag lämnat lite kommentarer i koderna om var man ändrar storlek och så. 
 
Bilderna jag lagt in som grund är tagna från we♥it: 1 / 2 / 3 / 4 och jag har använt blogg.se's tema "egen mall" när jag visat detta. Rekommenderar att man gör detta i en testblogg och det kommer underlätta såklart om du har lite förkunskaper inom koder, men det är inte nödvändigt.
 
Stilmallskoden kan läggas in vars som helst så länge det är i stilmallen/css'en, längst ner ifall du inte har så stor koll på koder:

Kodmallskoden ska ersätta <div id="header></div> i kodmallarna, glöm inte att lägga den i alla kodmallar om du inte använder blogg.se's nyare koder!
 
Har du några funderingar, lämna en kommentar så ska jag försöka svara så gott jag kan!


11 feb

Suttit och förberett två inlägg nu som ska upp framöver, designrelaterade. Det tar verkligen tid att sitta och skriva så funderar fortfarande på att göra designtips via video istället.. 
 


Två tröjor

Var i stan igår. Världens shopping- humör va jag på men hittade bara två tröjor som föll mig i smaken, + lite strumpor, underkläder och ansiktsprodukter. 
Har kommit i någon period då de enda som duger är mysiga, stora huvtröjor. Vilken tur att jag hittade en riktigt stor och mjuk huvtröja i grått - som passar till allt! Den högra tröjan på bilden köpte jag för att ersätta en gammal svart t-shirt som blivit himla hålig pga dess tunna material. 
 


Ny design

 
La upp designen inatt och länkade alla kategorier. De är litegrann som ska fixas fortfarande men som jag tänker fixa på plats. Som ni ser har jag ingen header, av den anledningen att jag inte bestämt mig än! 
 
Nu vill jag veta vad ni tycker, är den bättre eller sämre än förra? Fungerar designen även på mobilen?