Brugere, der får adgang til Internettet via tablets og mobiltelefoner, øges. Dette betyder, som du allerede ved, at det ikke kun er nok at designe en god webside, der ser godt ud på vores computer: den skal også ses på hver mobilenhed. Problemet? Forskellige skærmstørrelser og opløsninger. Derfor er det så svært at lave et design, der tilpasser sig korrekt til alle medier (den berømte lydhør design, oversat som adaptivt design).
Her er nogle tip, du skal huske på, når du laver et design med disse egenskaber. Vær opmærksom!
Tips til adaptivt design
- Lav en simpel skabelonVed simpel mener jeg ikke kedelig. Jeg taler om struktur HTML på dit websted: jo klarere det er, jo bedre. Husk, at en computerskærm kan passe til tre lodrette søjler; på skærmen på en mobil passer du kun til en. Tænk over det, og hvordan du vil placere elementerne igen.
- Fjern alt unødvendigtUndgå jQuery-effekter, Flash-animationer og enhver anden kode, der nedsætter indlæsningen af din side. Jo mindre indhold af denne type du har, jo hurtigere indlæses internettet.
- Definer en stil css for hver "størrelse"Opret en tiny.css, small.css og big.css (for eksempel), der kører baseret på den enhed, den vises på. For eksempel:
@import url (tiny.css) (min bredde: 300px);
@import url (small.css) (min bredde: 600px);
@import url (big.css) (min-bredde: 900px);
- De mest anvendte opløsninger320px/480px/720px/768px/900px/1024px
- Gør din skabelon FLEKSIBELNår du kan, skal du arbejde med procenter i stedet for faste beløb. Her er nogle referenceækvivalenser: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- Typografi vigtigere end nogensinde Nogle gange kan din enhedsskærm være så lille, at alt hvad du ser er tekst. Derfor skal vi meget nøje vælge de bedste skrifttyper på vores websted, så de ikke mister læsbarhed, når de reduceres i størrelse. Derudover er vi nødt til at vide, hvordan man kombinerer mere neutrale skrifttyper med andre med personlighed, der giver nettet den nødvendige karakter. Derfor er det første tip, at du bruger tid på at vælge de skrifttyper, du vil bruge.
- Brug billeder i høj kvalitetDa pladsen er reduceret, ledsager billederne den. Vælg dem, der ikke mister kvalitet, når de reduceres, og som fungerer det samme, når de skaleres. Et lavkvalitetsbillede får dit websted til at se dårligt ud.
- At dine billeder altid ses fuldForhindre, at dine fotos bliver afskåret ved at tilføje img (bredde: 100%;) koden i din css. På denne måde fortæller du enheden at genberegne den højde, den skal give billedet, så dens bredde kan ses hundrede procent.
- Alt lavt den samme URLGlem underdomæner som www.mysite.com/mobile, da den samme index.html-fil i rodmappen fungerer på alle enheder (hvis du gør det adaptive design korrekt). Du kender allerede fordelen: jo færre underdomæner, jo hurtigere bliver sidebelastningen.
- Udnyt understøtningerne: Vær fantasifuld Det er ikke det samme at få adgang til et websted fra en stationær computer end fra en iPad eller en mobiltelefon. Med den første vil du navigere på en rolig og afslappet måde. Med sidstnævnte gør du det i inaktiv timer og lukker vinduet, så snart du keder dig. Udnyt disse betingelser for at underholde brugeren og få dem til at have det sjovt i de få minutter, som de vil afsætte til dig. Måske når han kommer hjem, vil han beslutte at besøge dig på en mere afslappet måde.
- Bliv inspireret I digitale publikationer vil du undre dig over, hvorfor dette råd. Meget let: digitale magasiner (god) ved, hvordan man drager fordel af støtten, og deres design er meget intelligent. Bliv inspireret af dem, og lav et websted, der er svært at forlade.
Mere information - Digitale magasiner
Kilde - splio, 960.gs, søjle
Der er ting, som jeg ikke er meget enig i.
I punkt 5 ... da 200px = 15,38% og de følgende ... denne referencesammenligning kan ikke foretages uden noget overordnet mål, størrelsen pr. Pixel er ikke et relativt mål som procenterne!
Specificer billederne med bredde: 100% forkert, jeg synes ikke det skal være en anbefaling. Det er bedre at definere billederne med deres bredde og højde, så serveren tager mindre tid på at behandle informationen (den behøver ikke at beregne dens størrelse), og vi forbedrer sideens indlæsningshastighed (meget vigtigt i adaptivt eller responsivt web design).
Jeg vil allerede medtage, selvom det er et næsejob ... billederne til nethinden. Hvis vi ønsker at lave responsivt webdesign, er det obligatorisk at bruge billeder til nethindevisning, da en høj% af mobil- og tabletvisningerne bruger disse skærme. Så der er ingen mening i at lægge en indsats i et design for dem med halv gas.
Godt for resten
I punkt 5 sætter de dig i kontekst og fortæller dig om et samlet layout på 1300 pixel med 3 kolonner, en på 200, 300 og 1000.
Hvis du videregiver det til procenter, er de i deres tilfælde som du siger 15,38% ((200 * 100) / 1300) (decimal nedenfor, internationalt system: P)
Men hvis vi taler om et 500px layout, og vi har 3 kolonner, en på 200, en anden på 200 og en anden på 100px, er procenterne ikke længere de samme, i dette tilfælde 200px = 40% ((200 * 100) / 500)
De ville være: 200 pixel = 40% og 100 pixel = 10%
Kom nu, som jeg sagde, de er ikke en reference, hvad du angiver, de er kun en reference på et 1300 pixel layout.
hensyn
Hvilken fiasko, du har helt ret i verden! Tak igen ;)