Den adaptiva designen (responsiv design)

Användare som använder Internet via surfplattor och mobiltelefoner ökar. Som du redan vet betyder det att det inte längre räcker att utforma en bra webbsida som ser bra ut på vår dator: den måste också ses på varje mobil enhet. Problemet? Olika skärmstorlekar och upplösningar. Det är därför det är så svårt att skapa en design som anpassar sig korrekt till alla medier (den berömda mottaglig konstruktion, översatt som adaptiv design).

Här är några tips att tänka på när du gör en design med dessa egenskaper. Var uppmärksam!

Tips för adaptiv design

1. Skapa en enkel mallMed enkel menar jag inte intetsägande. Jag pratar om struktur HTML på din webbplats: ju tydligare det är, desto bättre. Tänk på att en datorskärm kan passa i tre vertikala kolumner; på skärmen på en mobil passar du bara en. Tänk på det och hur du kommer att placera om elementen.
2. Eliminera allt onödigtUndvik jQuery-effekter, Flash-animationer och andra koder som saktar ner laddningen av din sida. Ju mindre innehåll av denna typ du har, desto snabbare laddas webben.
3. Definiera en stil css för varje "storlek"Skapa en tiny.css, small.css och big.css (till exempel) som körs baserat på den enhet den visas på. Till exempel:
   

   @import url (tiny.css) (min-bredd: 300px);

   @import url (small.css) (min-bredd: 600px);

   @import url (big.css) (min-bredd: 900px);

4. De mest använda upplösningarna320px/480px/720px/768px/900px/1024px
5. Gör din mall FLEXIBELNär du kan, arbeta med procentsatser istället för fasta belopp. Här är några referensekvivalenser: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Typografi Det är viktigare än någonsin Ibland kan skärmen på din enhet vara så liten att allt du ser är text. Det är därför vi måste välja mycket noga de bästa teckensnitten på vår webbplats, så att de inte tappar läsbarheten när de minskas i storlek. Dessutom måste vi veta hur man kombinerar mer neutrala teckensnitt med andra med personlighet som ger webben den nödvändiga karaktären. Därför är det första tipset att du spenderar tid på att välja teckensnitt som du ska använda.
7. USA högkvalitativa bilderNär utrymmet minskar kommer bilderna att följa med det. Välj de som inte tappar kvalitet när de reduceras och som fungerar på samma sätt när de skalas. En bild av dålig kvalitet gör att din webbplats ser dålig ut.
8. Att dina bilder alltid ses fullFörhindra att dina foton klipps av genom att lägga till img-koden (bredd: 100%;) i din css. På det här sättet ber du enheten att beräkna om höjden den ska ge bilden så att dess bredd kan ses hundra procent.
9. Allt lågt samma URLGlöm subdomäner som www.mysite.com/mobile, eftersom samma index.html-fil i rotmappen fungerar för alla enheter (om du gör den adaptiva designen korrekt). Du känner redan till fördelen: ju färre underdomäner, desto snabbare blir sidbelastningen.
10. Dra nytta av stöden: Var fantasifull Det är inte samma sak att komma åt en webbplats från en stationär dator än från en iPad eller en mobiltelefon. Med den första kommer du att navigera på ett lugnt och lugnt sätt. Med det senare kommer du att göra det i viloläge och stänga fönstret så fort du blir uttråkad. Utnyttja dessa villkor för att underhålla användaren och få honom att ha kul under de få minuter som han kommer att ägna åt dig. Kanske när han kommer hem bestämmer han sig för att besöka dig på ett mer avslappnat sätt.
11. Bli inspirerad I digitala publikationer undrar du varför detta råd. Väldigt lätt: digitala tidskrifter (bra) vet hur man utnyttjar stödet och deras design är väldigt intelligent. Bli inspirerad av dem och skapa en webbplats som är svår att lämna.

Mer information - Digitala tidningar

Källa - splio, 960.gs, kolumn