Den adaptive designen (responsiv design)

Brukere som får tilgang til Internett via nettbrett og mobiltelefoner øker. Dette, som du allerede vet, betyr at det ikke er nok å bare designe en god webside som ser bra ut på datamaskinen vår: den må også sees på hver mobile enhet. Problemet? Ulike skjermstørrelser og oppløsninger. Derfor er det så vanskelig å lage et design som tilpasser seg riktig til alle medier (den berømte adaptiv design, oversatt som adaptiv design).

Her er noen tips du må huske på når du lager et design med disse egenskapene. Følg med!

Tips for adaptiv design

1. Lag en enkel malMed enkel mener jeg ikke blid. Jeg snakker om struktur HTML på nettstedet ditt: jo klarere det er, jo bedre. Husk at en dataskjerm kan passe til tre vertikale kolonner; på skjermen til en mobil, vil du bare passe en. Tenk på det og hvordan du vil omplassere elementene.
2. Fjern alt unødvendigUnngå jQuery-effekter, Flash-animasjoner og annen kode som bremser lastingen av siden din. Jo mindre innhold av denne typen du har, desto raskere lastes nettet inn.
3. Definer en stil css for hver "størrelse"Opprett en tiny.css, small.css og big.css (for eksempel) som kjører basert på enheten 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);

4. De mest brukte oppløsningene320px/480px/720px/768px/900px/1024px
5. Gjør malen FLEKSIBELNår du kan, jobber du med prosent i stedet for faste beløp. Her er noen referanseekvivalenser: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Typografi Det er viktigere enn noen gang Noen ganger kan skjermen på enheten din være så liten at alt du ser er tekst. Derfor må vi velge nøye de beste skriftene på nettstedet vårt, slik at når de blir redusert i størrelse, mister de ikke lesbarheten. I tillegg må vi vite hvordan vi kan kombinere mer nøytrale skrifter med andre med personlighet som gir nettet den nødvendige karakteren. Derfor er det første tipset at du bruker tid på å velge skriftene du skal bruke.
7. Usa bilder av høy kvalitetNår plassen er redusert, vil bildene følge den. Velg de som ikke mister kvalitet når de reduseres, og som fungerer likt når de skaleres. Et bilde av dårlig kvalitet vil gjøre at nettstedet ditt ser dårlig ut.
8. At bildene dine alltid blir sett fullForhindre at bildene dine blir kuttet ved å legge til img (bredde: 100%;) koden i css. På denne måten ber du enheten om å beregne høyden som skal gis til bildet slik at bredden kan sees hundre prosent.
9. Alt lavt samme URLGlem underdomener som www.mysite.com/mobile, siden den samme index.html-filen i rotmappen vil fungere for alle enheter (hvis du gjør det adaptive designet riktig). Du vet allerede fordelen: jo færre underdomener, jo raskere blir sidelastingen.
10. Dra nytte av støttene: Vær fantasifull Det er ikke det samme å få tilgang til et nettsted fra en stasjonær datamaskin enn fra en iPad eller en mobiltelefon. Med den første vil du navigere på en rolig og avslappet måte. Med sistnevnte vil du gjøre det på tomgangstider og lukke vinduet så snart du kjeder deg. Benytt deg av disse forholdene for å underholde brukeren og få dem til å ha det gøy i løpet av de få minuttene de skal vie deg. Kanskje når han kommer hjem, bestemmer han seg for å besøke deg igjen på en mer avslappet måte.
11. Bli inspirert I digitale publikasjoner vil du lure på hvorfor dette rådet. Meget lett: digitale magasiner (bra) vet hvordan man kan dra nytte av støtten og deres design er veldig intelligent. Bli inspirert av dem og lag et nettsted som er vanskelig å forlate.

Mer informasjon - Digitale magasiner

Kilde - splio, 960.gs, kolonne