Ang agpang disenyo (tumutugon disenyo)

Ang mga gumagamit na nag-a-access sa Internet sa pamamagitan ng mga tablet at mobile phone ay dumarami. Ito, tulad ng alam mo na, ay nangangahulugang hindi na ito sapat upang magdisenyo ng isang mahusay na web page na mukhang mahusay sa aming computer: kailangan din itong makita sa bawat mobile device. Ang problema? Iba't ibang laki at resolusyon ng screen. Iyon ang dahilan kung bakit napakahirap gumawa ng isang disenyo na umaangkop nang tama sa lahat ng media (ang sikat nakikiramay disenyo, isinalin bilang adaptive na disenyo).

Narito ang ilang mga tip na dapat tandaan kapag gumagawa ng isang disenyo na may mga katangiang ito. Bigyang-pansin!

Mga tip para sa agpang disenyo

1. Gumawa ng isang simpleng templateSa pamamagitan ng simpleng hindi ko ibig sabihin na malaswa. Pinag-uusapan ko ang estructura HTML ng iyong website: mas malinaw ito, mas mabuti. Tandaan na ang isang computer screen ay maaaring magkasya sa tatlong mga patayong haligi; sa screen ng isang mobile, magkakasya ka lang sa isa. Isipin ito at kung paano mo muling ipoposisyon ang mga elemento.
2. Tanggalin ang lahat nang hindi kinakailanganIwasan ang mga jQuery effect, Flash na animasyon at anumang iba pang code na nagpapabagal sa paglo-load ng iyong pahina. Ang mas kaunting nilalaman ng ganitong uri mayroon ka, mas mabilis na mai-load ang web.
3. Tukuyin ang isang estilo css para sa bawat "laki"Lumikha ng isang maliit na maliit.css, maliit.css, at big.css (halimbawa) na tumatakbo batay sa aparato na tiningnan nito. Halimbawa:
   

   @import url (tiny.css) (min-width: 300px);

   @import url (maliit.css) (min-lapad: 600px);

   @import url (big.css) (min-width: 900px);

4. Ang pinaka ginagamit na mga resolusyon320px/480px/720px/768px/900px/1024px
5. Gawing FLEXIBLE ang iyong templateKailanman maaari, magtrabaho kasama ang mga porsyento sa halip na maayos na halaga. Narito ang ilang mga katumbas na sanggunian: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Tipograpiya mas mahalaga kaysa kailanman Minsan ang screen ng iyong aparato ay maaaring maging napakaliit na ang nakikita mo lang ay teksto. Iyon ang dahilan kung bakit kailangan naming maingat na piliin ang pinakamahusay na mga font sa aming site, nang sa gayon ay mabawasan ang laki nito ay hindi mawawala sa kanila ang kakayahang mabasa. Bilang karagdagan, kailangan nating malaman kung paano pagsamahin ang higit pang mga walang kinikilingan na mga font sa iba na may pagkatao na nagbibigay sa web ng kinakailangang karakter. Samakatuwid, ang unang tip ay gumugol ka ng oras sa pagpili ng mga font na gagamitin mo.
7. Amerika mataas na kalidad na mga imaheHabang ang puwang ay nabawasan, sasamahan ito ng mga imahe. Piliin ang mga hindi mawawalan ng kalidad kapag nabawasan, at gumana ang pareho kapag na-scale. Ang isang mababang kalidad ng imahe ay gagawing masama sa hitsura ng iyong website.
8. Na ang iyong mga imahe ay palaging nakikita punoPigilan ang iyong mga larawan na mai-cut off sa pamamagitan ng pagdaragdag ng img (lapad: 100%;) na code sa iyong css. Sa ganitong paraan, sinasabi mo sa aparato na muling kalkulahin ang taas na ibibigay sa imahe upang ang lapad nito ay makita isang daang porsyento.
9. Mababa lahat ang parehong URLKalimutan ang tungkol sa mga subdomain tulad ng www.mysite.com/mobile, dahil ang parehong index.html file sa root folder ay gagana para sa lahat ng mga aparato (kung gagawin mo nang tama ang adaptive design). Alam mo na ang kalamangan: mas kaunti ang mga subdomain, mas mabilis ang paglo-load ng pahina.
10. Samantalahin ang mga suporta: Maging mapanlikha Hindi pareho ang pag-access ng isang website mula sa isang desktop computer kaysa sa isang iPad o isang mobile phone. Gamit ang una, mag-navigate ka sa isang kalmado at kalmadong paraan. Sa huli, gagawin mo ito sa mga oras na walang ginagawa at isara ang window sa lalong madaling magsawa ka. Samantalahin ang mga kundisyong ito upang aliwin ang gumagamit at gawing masaya sila sa ilang mga minuto na ilalaan nila sa iyo. Siguro kapag umuwi siya magpapasya kang bisitahin ka sa isang mas lundo na paraan.
11. Maging inspirasyon Sa mga digital na publication, magtataka ka kung bakit ang payo na ito. Napakadaling: digital magazine (mabuting) alam kung paano samantalahin ang suporta at ang kanilang disenyo ay napaka-talino. Maging inspirasyon ng mga ito at gumawa ng isang website na mahirap iwanan.

Karagdagang informasiyon - Mga digital magazine

Pinagmulan - splio, 960.gs, haligi