Orihinal na lumitaw ang artikulong ito sa isyu ng Nobyembre (221) ng .net magazine - ang pinakamahusay na nagbebenta ng mundo para sa mga web designer at developer.
Bruce Lawson: Sino ang nagtrabaho dito sa iyo?
SJ: Filament Group, Ethan Marcotte, Upstatement, Mat Marquis at Miranda Mulligan, digital design director sa Ang Boston Globe, binubuo ang pangunahing koponan ng 'disenyo-pagpapaunlad'. Samantala ang koponan sa loob ng Globe ay hindi kapani-paniwalang bihasa sa pagsasalin ng aming frontend code sa ganap na gumaganang site na ngayon.
BL: Si Ethan Marcotte ay isang poster na bata para sa tumutugong disenyo ng web; magkano ang impluwensyang mayroon siya sa proseso?
SJ: Karamihan sa proseso ng pag-unlad ay hinimok ng pag-iisip ni Ethan patungkol sa pagdidisenyo ng 'tumutugon'. Upang magamit ang pag-iisip na iyon sa isang malawak na site, kinailangan naming palawakin ang orihinal na mga diskarte na higit na inilapat sa layout sa iba pang mga lugar tulad ng pag-uugali, mga pagpapahusay sa markup, pag-load ng kondisyon na pag-load at pagganap.
BL: Ano ang paunang mga hamon sa teknikal?
SJ: Pangunahin, nais namin ang pagganap ng pahina nang maayos sa mga aparato na walang kapangyarihan, na nangangahulugang pag-uunawa ng isang paraan upang ma-load nang mahusay ang mga asset nang sa gayon ay hindi kami magdagdag ng makabuluhang overhead kung saan hindi ito suportado o kinakailangan nang maayos. Ang bawat kritikal na tampok ng site ay idinisenyo upang gumana nang independiyente sa JavaScript, ngunit pinahusay na may mas mayamang pakikipag-ugnayan na hinihimok ng JavaScript sa mga may kakayahang browser. Nakatuon kami sa paghahatid ng pinakamaliit na bilang ng JavaScript sa harap na kakailanganin naming magsagawa ng mahahalagang mga polyfill, makakita ng mga tampok, at may kondisyon na mag-load ng higit pa sa JavaScript depende sa mga kundisyon sa kapaligiran.
BL: Bakit mo pinili na gumamit ngHTML5?
SJ: Gumamit kami ng HTML5 para sa isang bilang ng mga kadahilanan. Karamihan, ito ay bukas sa hinaharap at inaalok na mga tampok na kapaki-pakinabang sa aming hanay ng tampok. Halimbawa, gumawa kami ng malawak na paggamit ng mga katangian ng data- para sa pag-configure ng mga pagpipilian sa pag-uugali o pag-uugnay ng mga pagpapahusay sa nilalaman. Pinahahalagahan din namin ang kakayahang gumamit ng mas bagong mga elemento ng semantiko sa lugar ng div / p / span kung saan sila nagkaroon ng kahulugan.
BL: Paano mo ginawang pababa ng kaaya-aya ang site sa mga mas lumang browser?
SJ: Upang gumana ang mga tumutugong layout sa mga browser na kulang sa suporta sa query ng media, tulad ng IE6-IE8, kailangan namin ng isang mabilis na CSS3 Poly Quill polyfill. Nalaman namin na ang mga umiiral na solusyon ay masyadong mabigat at hindi mabilis na naisalin ang mga layout, kaya kailangan naming magsulat ng aming sarili. Ang resulta nito ay ang Respond.js polyfill, na bukas na nagmula sa Github.
BL: Ano ang diskarte mo sa mga imahe?
SJ: Nais naming maghatid ng mga imaheng mobile-friendly sa harap, upang maging responsable sa bandwidth sa mas mabagal na koneksyon, ngunit kailangan naming maghatid ng mas malalaking mga imahe sa mga aparato na may mas malaking screen. Naglikha kami ng isang diskarte na tinatawag na Mga Larawan na Tumutugon, na nagpapahintulot sa amin na tuklasin ang laki ng screen, at sa malalaking mga screen, palitan ang laki ng imahe ng mobile para sa isang mas malaki nang hindi naglo-load ang pareho.
Ang isa pang hamon ay ang advertising, dahil maraming mga serbisyo ng ad ng third-party ay hindi itinayo na may mga layout ng likido, at ang kanilang mga mekanismo ng pag-embed at bilang ng mga kahilingan na ginagawa nila ay maaaring maging medyo magastos mula sa isang pananaw sa pagganap. Sa huli, gumawa kami ng ilang mga pattern para sa pag-load ng mga ad nang pabago-bago upang hindi nila hadlangan ang nilalaman mula sa paglo-load kaagad. Sa palagay ko ang mga serbisyo ng third-party ay kailangang pag-isipang muli upang umangkop sa hinaharap ng kung paano gagawin ang mga website.
BL: At paano ang tungkol sa mga lumang browser ng IE / no-JavaScript tulad ng Opera Mini?
SJ: Gumugol kami ng napakaraming oras upang matiyak na ang site ay gumagana at kasiya-siya upang magamit nang walang JavaScript, dahil ang mobile web ay ginagawang muli ang isyu na iyon.
Kailangang ma-polyfill ang mga browser ng Internet Explorer para sa suporta sa query ng media. Maliban dito, mayroon kaming paminsan-minsang mga workout ng CSS na tukoy sa Internet Explorer, ngunit wala nang labis.
Natagpuan ko na ang Opera Mini ay may kaugaliang madali upang suportahan kung bumuo ka ng may progresibong pagpapahusay: ito ay isang mahusay na browser na may kasamang maraming mga pag-optimize sa pagganap, at syempre ito ay hindi kapani-paniwalang tanyag kaya't ang pagsuporta dito ay walang pag-iisip.
Ang baseline browser na regular naming sinusubukan ay ang BlackBerry 4.6, na tumatanggap ng pangunahing, karanasan na walang JavaScript tulad ng karamihan sa iba pang mga browser na hindi suportado ng media na query. May nagpadala sa amin ng isang screenshot ng Globe tumatakbo ang site sa isang Newton kamakailan!
