Aðlögunarhönnunin (móttækileg hönnun)

Aðlögunarhönnun

Notendum sem komast á Netið í gegnum spjaldtölvur og farsíma fjölgar. Þetta, eins og þú veist nú þegar, þýðir að það er ekki lengur nóg að hanna góða vefsíðu sem lítur vel út í tölvunni okkar: hún þarf einnig að sjást á hverju farsíma. Vandamálið? Mismunandi skjástærðir og upplausnir. Þess vegna er svo erfitt að gera hönnun sem aðlagar sig rétt að öllum fjölmiðlum (frægur móttækilegur hönnun, þýtt sem aðlögunarhönnun).

Hér eru nokkur ráð sem þarf að hafa í huga þegar gerð er hönnun með þessum eiginleikum. Taktu eftir!

Ráð til aðlögunarhönnunar

  1. Búðu til einfalt sniðmátMeð einföldum hætti er ég ekki að meina bland. Ég er að tala um uppbygging HTML vefsíðu þinnar: því skýrari sem hún er, því betra. Hafðu í huga að tölvuskjár getur passað þrjá lóðrétta dálka; á skjánum á farsíma passar þú aðeins einn. Hugsaðu um það og hvernig þú munt endurstilla þættina.
  2. Útrýmdu öllu óþarfaForðastu jQuery áhrif, Flash fjör og annan kóða sem hægir á hleðslu á síðunni þinni. Því minna efni af þessari gerð sem þú hefur, því hraðar mun vefurinn hlaðast.
  3. Skilgreindu stíl css fyrir hverja "stærð"Búðu til tiny.css, small.css og big.css (til dæmis) sem keyrir út frá tækinu sem það er skoðað á. Til dæmis:

    @import url (tiny.css) (mín breidd: 300px);

    @import url (small.css) (mín breidd: 600px);

    @import url (big.css) (mín. breidd: 900px);

  4. Mest notuðu ályktanirnar320px / 480px / 720px / 768px / 900px / 1024px
  5. Gerðu sniðmát þitt sveigjanlegtHvenær sem þú getur skaltu vinna með prósentur í stað fastra upphæða. Hér eru nokkrar viðmiðunarjafngildi: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
  6. Leturgerð Það er mikilvægara en nokkru sinni Stundum getur skjár tækisins verið svo lítill að það eina sem þú sérð á honum er texti. Þess vegna verðum við að velja mjög vandlega bestu leturgerðirnar á síðunni okkar, svo að þegar þær minnka að stærð missa þær ekki læsileika. Að auki verðum við að vita hvernig á að sameina hlutlausari leturgerðir við aðra og persónuleika sem veita vefnum nauðsynlegan karakter. Þess vegna er fyrsta ráðið að þú eyðir tíma í að velja leturgerðirnar sem þú ætlar að nota.
  7. Usa hágæða myndirÞegar rýmið minnkar munu myndirnar fylgja því. Veldu þá sem missa ekki gæði þegar þeir eru skertir og vinna eins þegar þeir eru stigaðir. Lítil gæðamynd mun láta vefsíðuna líta illa út.
  8. Að myndirnar þínar sjáist alltaf fullurKomdu í veg fyrir að myndir þínar verði klipptar með því að bæta img (breidd: 100%;) kóðanum í css. Með þessum hætti ertu að segja tækinu að endurreikna hæðina sem á að gefa myndinni svo að breidd þess sjáist hundrað prósent.
  9. Allt lágt sömu slóðinaGleymdu undirlénum eins og www.mysite.com/mobile, þar sem sama index.html skráin í rótarmöppunni mun virka fyrir öll tæki (ef þú gerir aðlögunarhönnunina rétt). Þú veist nú þegar kostinn: því færri undirlén, því hraðar verður síðuálagið.
  10. Nýttu þér stuðningana: Vertu hugmyndaríkur Það er ekki það sama að komast á vefsíðu frá borðtölvu en frá iPad eða farsíma. Með þeim fyrsta muntu sigla á rólegan og rólegan hátt. Með því síðarnefnda gerirðu það á aðgerðalausum tíma og lokar glugganum um leið og þér leiðist. Nýttu þér þessar aðstæður til að skemmta notandanum og láta hann skemmta sér á þessum fáu mínútum sem hann ætlar að tileinka þér. Kannski þegar hann kemur heim ákveður hann að heimsækja þig á afslappaðri hátt.
  11. Fáðu innblástur Í stafrænum ritum muntu velta fyrir þér hvers vegna þetta ráð. Mjög auðvelt: stafræn tímarit (gott) vita hvernig á að nýta sér stuðninginn og hönnun þeirra er mjög greind. Vertu innblásin af þeim og búðu til vefsíðu sem erfitt er að skilja eftir.

Meiri upplýsingar - Stafræn tímarit

Heimild - Splio, 960.gs, dálki


Innihald greinarinnar fylgir meginreglum okkar um siðareglur ritstjórnar. Til að tilkynna um villu smelltu hér.

3 athugasemdir, láttu þitt eftir

Skildu eftir athugasemd þína

Netfangið þitt verður ekki birt. Nauðsynlegir reitir eru merktir með *

*

*

  1. Ábyrgðarmaður gagna: Miguel Ángel Gatón
  2. Tilgangur gagnanna: Control SPAM, umsögn stjórnun.
  3. Lögmæti: Samþykki þitt
  4. Samskipti gagna: Gögnunum verður ekki miðlað til þriðja aðila nema með lagalegri skyldu.
  5. Gagnageymsla: Gagnagrunnur sem Occentus Networks (ESB) hýsir
  6. Réttindi: Hvenær sem er getur þú takmarkað, endurheimt og eytt upplýsingum þínum.

  1.   Dídac Rios sagði

    Það eru hlutir sem ég er eiginlega ekki sammála.
    Í lið 5 ... þar sem 200px = 15,38% og eftirfarandi ... ekki er hægt að gera þennan viðmiðunarsamanburð án þess að foreldramælt sé, stærðin á pixla er ekki hlutfallslegur mælikvarði eins og prósenturnar!

    Tilgreindu myndirnar með breidd: 100% rangar, mér finnst að það ætti ekki að vera tilmæli. Myndirnar skilgreina þær betur með breidd og hæð, þannig að netþjónninn tekur minni tíma í að vinna úr upplýsingum (hann þarf ekki að reikna stærð þeirra) og við bætum hleðsluhraða síðunnar (sem er mjög mikilvægt í aðlögunarhæfum eða móttækilegum vef hönnun).

    Ég myndi þegar taka með, þó það sé nefverk ... myndirnar fyrir sjónhimnu. Ef við viljum sinna móttækilegri vefhönnun er skylt að nota myndir til sjónhimnuskjás, þar sem hátt hlutfall af farsíma- og spjaldtölvuskoðun notar þessa skjái. Svo að það þýðir ekkert að leggja sig fram við hönnun fyrir þá á hálfu inngjöf.

    Gott fyrir rest

    1.    Dídac Rios sagði

      Í lið 5 setja þau þig í samhengi og segja þér frá heildarskipulagi 1300 pixla með 3 dálkum, einum 200, 300 og 1000.

      Ef þú sendir það í prósentur, í þeirra tilfelli eru það eins og þú segir, 15,38% ((200 * 100) / 1300) (aukastafur að neðan, alþjóðakerfi: P)

      En ef við tölum um 500 pixla skipulag og við höfum 3 dálka, einn af 200, annan af 200 og annan af 100 pixlum, þá eru prósenturnar ekki lengur þær sömu, í þessu tilfelli 200 pixlar = 40% ((200 * 100) / 500)

      Þeir væru: 200 pixlar = 40% og 100 pixlar = 10%

      Komdu, eins og ég sagði, þau eru ekki tilvísun það sem þú gefur til kynna, þau eru aðeins tilvísun í 1300px skipulag.

      kveðjur

      1.    Lua louro sagði

        Þvílíkur galli, þú hefur alveg rétt fyrir þér í heiminum! Takk aftur ;)