Reactive Web Design: Ang lihim sa pagbuo ng mga web app na nakakaramdam ng kamangha-manghang

Sa nakaraang taon ay napagmasdan ko ang dalawang banayad na pamamaraan na ginagamit ng ilang mga developer na kumukuha ng isang web app mula sa pakiramdam na mabagal at masigla hanggang sa lubos na reaktibo at pinakintab.

Naniniwala ako na ang mga pamamaraan na ito ay sapat na mahalaga na kailangan nila ng isang pangalan: Reactive Web Design.

Sa buod, ang reaktibo na disenyo ng web ay isang hanay ng mga diskarte na maaaring magamit upang makabuo ng mga site na laging nakadarama ng mabilis at tumutugon sa input ng gumagamit anuman ang bilis ng network o latency.

Bilang mga developer ng web at mga may-akda ng balangkas, naniniwala ako na ang paghahanap ng mga paraan upang gawing default ang mga pattern na ito sa lahat ng aming itinatayo ay isang pangunahing prayoridad para sa pagpapabuti ng UX at napag-alaman na pagganap sa web.

Pamamaraan 1: Mga Instant na naglo-load na may mga screen ng skeleton

Kapag ginamit nang maayos, ang diskarteng ito ay halos hindi kailanman napansin, ngunit may malaking epekto sa napansin na pagganap ng isang site.

Kapansin-pansin, ang pamamaraan ay ginagamit ng halos lahat ng mga katutubong app at ginagawa silang pakiramdam na napaka-reaktibo kahit sa mga kahila-hilakbot na network, ngunit halos hindi ito ginagamit sa web!

Ang pagkakataong ito ay namamalagi!

Sa madaling sabi, sinisiguro ng mga screen ng skeleton na sa tuwing mai-tap ng gumagamit ang anumang pindutan o link, ang reaksyon ay agad na gumanti sa pamamagitan ng paglipat ng gumagamit sa bagong pahina at pagkatapos ay mai-load ang nilalaman sa pahinang iyon habang magagamit ang nilalaman.

Ang Facebook gamit ang isang skeleton screen upang mapagbuti ang napansin na pagganap kapag binuksan mo muna ito

Ang mga skeleton screen ay isang pangunahing napapansin na diskarte sa pagganap habang ginagawa nila ang mga aplikasyon sa pakiramdam ng mas mabilis, kapansin-pansing binabawasan ang bilang ng mga sandali kung saan ang gumagamit ay naiwan nagtataka:

Ano ang nangyayari? Naglo-load pa ba ito? Nagtext ba ako ng tama?

Ang Flipkart.com ay isang bihirang halimbawa ng isang website na gumagamit ng pamamaraang ito. Ang pag-browse sa pamamagitan ng mga kategorya o pag-tap sa mga produkto samakatuwid ay naramdaman ng mabilis na kidlat, kahit na ang aktwal na mga resulta ay tumatagal ng ilang segundo upang mai-load:

Isang screencapture ng flipkart.com na inilunsad mula sa home screen sa standalone mode sa Android

Kung ang pamamaraan na ito ay ginagamit nang pinakamahusay, ang nilalaman na magagamit na tulad ng mga thumbnail o mga pamagat ng artikulo ay maaaring magamit muli upang mapabuti ang napansin na pagganap kahit na higit pa, paggawa ng pakiramdam ng maraming mga naglo-load.

Ginagamit ng app.jalantikus.com ang pattern ng Skeleton Screens at muling ginagamit ang mga pamagat at mga thumbnail sa buong paglilipat

Mga site ng pagsubok na may mga skeleton screen

Sinusubukan kung gaano kahusay na ginagamit ng mga site ang pamamaraang ito: gamitin lamang ang paggagaya ng network ng Chrome upang gawin ang network nang mabagal hangga't maaari at pagkatapos ay mag-click sa paligid ng isang site. Kung ginagawa ito nang maayos, ang site ay makakaramdam pa rin ng kasiyahan at tumutugon sa iyong input.

Ang pinakamabagal na bilis na suportado sa paggana ng network ng Chrome

Teknikal na 2: "Matatag na mga naglo-load" sa pamamagitan ng paunang natukoy na mga sukat sa mga elemento

Alam mo ang pakiramdam na kung saan ang isang website ay tumatalon sa paligid habang sinusubukan mong gamitin ito? Sinusubukan mo bang magbasa ng isang artikulo at patuloy na gumagalaw ang teksto? Iyon ang tinatawag natin na "hindi matatag na pag-load", at kailangan nating sunugin ito ng apoy .

slate.com nilalaman tumalon sa paligid ng napaka agresibo bilang naglo-load ang pahina. Ang mas mabagal na network na naroroon mo, mas mahaba itong tumalon.

Ang mga hindi matatag na naglo-load ay gumawa ng mga website na mahirap makipag-ugnay sa, at ginagawang pakiramdam ... maayos ... Hindi matatag!

Ang pagba-browse ng isang hindi matatag na site ay palaging nagpapaalala sa akin kung paano ko iniisip na pakiramdam na lumalakad sa paligid ng isang lindol

Ang hindi matatag na mga naglo-load ay sanhi ng mga imahe at ad na naka-embed sa isang pahina ngunit hindi kasama ang anumang impormasyon sa sizing. Sa pamamagitan ng default ang browser ay alam lamang ang laki ng mga ito sa sandaling na-load na nila, kaya sa sandaling ang isang imahe ay naglo-load sa, THUNK !, ang buong pahina ay dumulas pababa.

Upang maiwasan ito, lahat ng mga tags sa isang pahina ay dapat na aktibong isama ang mga sukat ng imahe na nilalaman nito.

Sa maraming mga kaso ang mga imahe na ginamit sa ilang mga pahina ay palaging magkaparehong laki at sa gayon ang kanilang sukat ay maaaring maisama lamang sa template ng HTML, ngunit sa ilang mga kaso ang laki ng mga imahe ay pabago-bago at sa gayon ang kanilang sukat ay dapat kalkulahin kapag ang imahe ay nai-upload pagkatapos ay na-templated sa HTML kapag nilikha ito.


Ang parehong ay totoo para sa mga ad, madalas na isang salarin pagdating sa hindi matatag na mga naglo-load. Kung saan maaari, lumikha ng isang div na naglalaman ng isang ad, at sa iyong templating itakda ito upang masukat sa iyong pinakamahusay na hulaan kung gaano kalaki ang ad na ito.

Tandaan na ang hindi matatag na mga naglo-load ay ang pinakamasama sa mabagal na mga network dahil nakumpleto ka na lamang sa pagbabasa ng nilalaman kapag biglang tumalon ito, at hindi mo maaaring siguraduhing ligtas ka.

Pagsasama-sama ng lahat

Nagtatayo ako ng isang maliit na site ng demo sa reactive.surge.sh upang maipakita ang pagkakaiba sa pagitan ng maginoo at reaktibong disenyo ng web.

Pag-load ng maginoo na artikulo

Tandaan kung ano ang nadarama at kung gaano kahina-hinalang ang paglukso ng nilalaman. Nang kawili-wili ay nakakakita ako ng mga order na ito ng lakas na nakakainis sa mga mobile device kapag nag-tap sa screen at hindi nakikita ang reaksyon nito.

Naglo-load ng isang artikulo na may reaktibong disenyo ng web

Sa reaktibong disenyo ang pakiramdam ng pag-load ay naramdaman agad at ang site ay nananatiling reaktibo kapag tinapik ang back icon at maraming pamagat ng artikulo nang maraming beses

Pagputol

Ang mas mabagal na network ay, ang mas masahol pa sa karanasan ng gumagamit ay nagiging kapag block ng mga paglilipat ng pahina sa network at tumalon ang mga pahina para sa mga pinalawig na panahon.

Gamit ang Reactive Web Design maaari naming maging masayang-masaya at matugunan ang aming karanasan ("Nakikiramay na Disenyo" bilang isang pangalan na nakuha, hindi!) Kahit sa mabagal at masakit na mga network.

Gustung-gusto kong marinig ang tungkol sa data mula sa komunidad sa epekto ng napansin na pagganap sa mga KPI tulad ng pakikipag-ugnay at kita!

Bilang karagdagan, hinihikayat ko ang balangkas at mga may-akda ng aklatan na isaalang-alang kung paano gumawa ng mga screen ng balangkas at matatag na naglo-load ng default, na kilala rin bilang hukay ng tagumpay.

Kung mayroon kang mga saloobin tungkol dito, mangyaring mag-tweet sa akin @owencm, at kung nasiyahan ka sa ito mangyaring bigyan ito ng isang ♥!

P.S. siguraduhing suriin ang demo site reactive.surge.sh sa isang mobile device para sa buong kaluwalhatian!