Statcounter, en Dublin-basert selskap, registrert mobilnettleser bruk aksje på 20% i november. Personlige datamaskiner sto for resten. Det betyr ut av totalt nettsider så i november, ble 20% på mobile enheter. Den mobile nettleser bruken aksje har vokst med 53% i løpet av siste 12 måneder.

Denne statistikken viser hvor fort brukerne bytter til mobile enheter når det gjelder bruken av internett. Derfor enten du har en egen mobil nettside eller du har et ansvarlig nettsted som tilbyr gode brukeropplevelser i form av lesbarhet og navigasjon på alle enheter - datamaskin, nettbrett eller mobiltelefon.

Valget er enkelt - en responsiv nettside som justerer seg til enhver skjermoppløsning og størrelse.

En responsiv nettside ikke bare hjelper deg med å spare driftskostnader av et nettsted, men driver også trafikken til nettstedet ditt. Hvis du ikke har en responsive nettside vil du gå glipp av at 20% mobile nettleser bruk aksje.

Her er 10 tips til en effektiv responsive web design

1. Enkelt oppsett

Bruk enkle HTML-kode og prøve å holde oppsettet så enkelt som mulig. Unngå unødvendig intrikate divs. Unngå å bruke moderne triks som CSS3 spesialeffekter, inline stiler og kritiske JS. Bruk HTML5 doctype og enkle teknikker som navigasjon og menyer.

2. Bruk av Media spørringer

Media spørsmål er enkle å bruke og perfekt for å definere bredde
forhold. Den lar deg laste en alternativ stilark eller legge til bestemte stiler som per kundens nåværende bredde
.

Sjekk ut noen av eksemplene på medieforespørsler

Fra 200-640 px:

media skjermen og (min-width: 200px) og (max-width: 640 piksler)

portrett, mindre enn 380 px

media skjermen og (min-width: 380px) og (orientering: portrett)

3. Brytningspunkter

Det er 6 store brytningspunkt for responsive web design - <480 <768,> 768 <320, 768-1024, og> 1024.

Du kan bruke

Bruk> 768px regel for store faner og stasjonære

For lav oppløsning, bruk

Legg til> 768px OG

Bruk en bred design for desktop legge en> 1024px stilark

4 . Husk 'Max' og 'Min'

Bruk maks- * og min-* for å forhindre at oppsettet fra vokser og krymper drastisk mens du ser på oppsettet på usedvanlig stor eller liten enhet.

For optimal kompatibilitet, du kan integrere en væske layout media med presise min /størrelser og media spør bryte poeng.

Eksempler:

Minst 350 høy

Mi n-height: 350 piksler;

Fluid, ikke over 1024 og ikke er under 768

Min-bredde: 768px;

Max bredde: 1024px;

5. Fleksibel er bedre

Det er viktig å ha fleksibel layout som kan oppnås gjennom væske layout. Det sikrer at design er klar er for enhver skjermstørrelse, oppløsning eller orientering. Fluid layout i kombinasjon med riktige medieforespørsler er klar for en enhet å ha noen skjermoppløsning.

6. få innhold i en kolonne

For å sette opp i lav oppløsning stilark, få alt innholdet i en kolonne. Du kan oppnå det ved bare å overstyre bredden på hver kolonne blokken i mobil stilark.

Hvis nødvendig kan du bruke spesifikke regler for å fikse design deler som kan bli ødelagt som margin.

Dette er noen av det grunnleggende som gjelder for etableringen av en responsiv webdesign. En lydhør nettsted er behovet for time for alle bedrifter. Det finnes en rekke responsive webdesign selskaper i India som tilbyr effektive webdesign og utviklingstjenester.