Id-disinn adattiv (disinn li jirrispondi)

Disinn adattiv

L-utenti li jaċċessaw l-Internet permezz tat-tablets u l-mowbajls qed jiżdiedu. Dan, kif diġà taf, ifisser li mhux biżżejjed li niddisinjaw paġna tal-web tajba li tidher tajba fuq il-kompjuter tagħna: trid tidher ukoll fuq kull apparat mobbli. Il-problema? Daqsijiet u riżoluzzjonijiet ta 'skrin differenti. Huwa għalhekk li huwa tant diffiċli li tagħmel disinn li jadatta b'mod korrett għall-midja kollha (il-famuż disinn li jirrispondi, tradott bħala disinn adattiv).

Hawn huma xi pariri li għandek iżżomm f'moħħok meta tagħmel disinn b'dawn il-karatteristiċi. Oqgħod attent!

Ħjiel għal disinn adattiv

  1. Agħmel mudell sempliċiB’sempliċi ma nifhimx bland. Qed nitkellem dwar struttura HTML tal-websajt tiegħek: iktar ma jkun ċar, aħjar. Żomm f'moħħok li skrin tal-kompjuter jista 'joqgħod tliet kolonni vertikali; fuq l-iskrin ta 'mowbajl, inti toqgħod waħda biss. Aħseb dwarha u kif se terġa 'tqiegħed l-elementi.
  2. Elimina dak kollu bla bżonnEvita effetti jQuery, animazzjonijiet Flash u kwalunkwe kodiċi ieħor li jnaqqas it-tagħbija tal-paġna tiegħek. L-inqas kontenut ta 'dan it-tip ikollok, iktar malajr il-web se titgħabba.
  3. Iddefinixxi stil css għal kull "daqs"Oħloq tiny.css, small.css, u big.css (per eżempju) li jaħdem ibbażat fuq l-apparat li jarah. Pereżempju:

    @ import url (tiny.css) (wisa 'min: 300px);

    @ import url (small.css) (wisa 'min: 600px);

    @ import url (big.css) (wisa 'min: 900px);

  4. L-iktar riżoluzzjonijiet użati320px / 480px / 720px / 768px / 900px / 1024px
  5. Agħmel il-mudell tiegħek FLESSIBBLIKull meta tista ', aħdem b'persentaġġi minflok ammonti fissi. Hawn xi ekwivalenzi ta 'referenza: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
  6. Tipografija iktar importanti minn qatt Kultant l-iskrin tat-tagħmir tiegħek jista 'jkun tant żgħir li kull ma tara huwa test. Huwa għalhekk li rridu nagħżlu bir-reqqa l-aħjar fonts fuq is-sit tagħna, sabiex meta jitnaqqsu fid-daqs ma jitilfux il-leġġibilità. Barra minn hekk, irridu nkunu nafu kif ngħaqqdu fonts aktar newtrali ma 'oħrajn b'personalità li jagħtu lill-web il-karattru meħtieġ. Għalhekk, l-ewwel ponta hija li tqatta 'l-ħin tagħżel il-fonts li ser tuża.
  7. Użu immaġini ta 'kwalità għoljaHekk kif l-ispazju jitnaqqas, l-istampi jakkumpanjawha. Agħżel dawk li ma jitilfux il-kwalità meta jitnaqqsu, u li jaħdmu l-istess meta jkunu skalati. Immaġni ta 'kwalità baxxa tagħmel il-websajt tiegħek tidher ħażina.
  8. Li l-istampi tiegħek dejjem jidhru mimliEvita li r-ritratti tiegħek jinqatgħu billi żżid il-kodiċi img (wisgħa: 100%;) fil-css tiegħek. B'dan il-mod, qed tgħid lill-apparat biex jikkalkula mill-ġdid l-għoli li għandu jingħata lill-immaġini sabiex il-wisa 'tagħha tkun tidher mija fil-mija.
  9. Kollha baxxi l-istess URLTinsa dwar sottodominji bħal www.mysite.com/mobile, billi l-istess fajl index.html fil-folder ta 'l-għeruq jaħdem għall-apparati kollha (jekk tagħmel id-disinn adattiv b'mod korrett). Int diġà taf il-vantaġġ: inqas ma hemm sottodominji, iktar tkun mgħaġġla t-tagħbija tal-paġna.
  10. Ħu vantaġġ mill-irfid: Kun immaġinattiv Mhuwiex l-istess li taċċessa websajt minn kompjuter desktop milli minn iPad jew telefon ċellulari. Bl-ewwel waħda, int tinnaviga b'mod kalm u kalm. Ma 'dan ta' l-aħħar, int se tagħmel dan f'sigħat idle u tagħlaq it-tieqa hekk kif tiddejjaq. Ħu vantaġġ minn dawn il-kundizzjonijiet biex tiddeverti lill-utent u ġegħelhom jieħdu pjaċir f'dawk il-ftit minuti li huma ser jiddedikawlek. Forsi meta jasal id-dar jiddeċiedi li jżurek b'mod aktar rilassat.
  11. Ikseb ispirat Fil-pubblikazzjonijiet diġitali, tistaqsi għaliex dan il-parir. Faċli ħafna: magazins diġitali (tajjeb) jafu kif jieħdu vantaġġ mill-appoġġ u d-disinn tagħhom huwa intelliġenti ħafna. Kun ispirat minnhom u agħmel websajt li diffiċli titlaq.

Iktar informazzjoni - Rivisti diġitali

Sors - Splio, 960.gs, kolonna


Il-kontenut tal-artikolu jaderixxi mal-prinċipji tagħna ta ' etika editorjali. Biex tirrapporta żball ikklikkja hawn.

3 kummenti, ħalli tiegħek

Ħalli l-kumment tiegħek

Your email address mhux se jkun ippubblikat. oqsma meħtieġa huma mmarkati bl *

*

*

  1. Responsabbli għad-dejta: Miguel Ángel Gatón
  2. Għan tad-dejta: Kontroll SPAM, ġestjoni tal-kummenti.
  3. Leġittimazzjoni: Il-kunsens tiegħek
  4. Komunikazzjoni tad-dejta: Id-dejta ma tiġix ikkomunikata lil partijiet terzi ħlief b'obbligu legali.
  5. Ħażna tad-dejta: Bażi tad-dejta ospitata minn Occentus Networks (UE)
  6. Drittijiet: Fi kwalunkwe ħin tista 'tillimita, tirkupra u tħassar l-informazzjoni tiegħek.

  1.   Dídac Rios qal

    Hemm affarijiet li ma naqbilx ħafna.
    Fil-punt 5 ... peress li 200px = 15,38% u dawn li ġejjin ... dan it-tqabbil ta 'referenza ma jistax isir mingħajr ebda miżura ġenitur, id-daqs għal kull pixel mhuwiex miżura relattiva bħall-perċentwali!

    Speċifika l-istampi bil-wisa ': 100% ħażin, ma naħsibx li għandha tkun rakkomandazzjoni. L-istampi jiddefinixxuhom aħjar bil-wisa 'u l-għoli tagħhom, allura s-server jieħu inqas ħin biex jipproċessa l-informazzjoni (m'għandux għalfejn jikkalkula d-daqs tagħha) u ntejbu l-veloċità tat-tagħbija tal-paġna (li hija importanti ħafna f'web adattattiv jew li jirrispondi) disinn).

    Jien diġà ninkludi, anke jekk huwa xogħol ta 'l-imnieħer ... immaġini għall-iskrins tar-retina. Jekk irridu nagħmlu disinn tal-web li jirrispondi, huwa obbligatorju li nużaw immaġini għall-wiri tar-retina, peress li% għoli tal-veduti tal-mowbajl u tal-pilloli jużaw dawn l-iskrins. Allura m'hemm l-ebda skop li tpoġġi l-isforz f'disinn għalihom f'nofs throttle.

    Tajjeb għall-kumplament

    1.    Dídac Rios qal

      Fil-punt 5, huma jpoġġuk f'kuntest u jgħidulek dwar tqassim totali ta '1300px bi 3 kolonni, waħda ta' 200, 300 u 1000.

      Jekk tgħaddiha għal perċentwali, fil-każ tagħhom huma kif tgħid, 15,38% ((200 * 100) / 1300) (deċimali hawn taħt, sistema internazzjonali: P)

      Imma jekk nitkellmu dwar tqassim ta '500px u għandna 3 kolonni, waħda ta' 200, oħra ta '200 u oħra ta' 100px, il-perċentwali m'għadhomx l-istess, f'dan il-każ 200px = 40% ((200 * 100) / 500)

      Dawn ikunu: 200px = 40% u 100px = 10%

      Ejja, kif għidt, mhumiex referenza dak li tindika, huma biss referenza fuq arranġament ta '1300px.

      rigward

      1.    Lua louro qal

        X’falliment, għandek raġun assolut fid-dinja! Grazzi għal darb'oħra;)