Mbandingaken Two Different Approaches to Multi-Device Web Design
Desain web responsif lan adaptif minangka cara kanggo nggawe situs web ramah multi-piranti sing bisa uga dianggo ing macem-macem ukuran layar. Nalika desain web responsif dianjurake dening Google lan luwih misuwur saka loro pendekatan kasebut, loro metode iki kanggo desain web multi-piranti nduweni kekuatan lan kelemahane.
Ayo katon ing beda antarane desain web responsif lan adaptif, khususake fokus ing bidang-bidang utama iki:
- Gampang pembangunan
- Tingkat kontrol sampeyan duwe liwat desain
- Lebar dhukungan piranti / layar
- Carane cara nyenengake solusi sing becik
- Sakabèhé download kacepetan lan kinerja situs
Sawetara Panjelasan
Sakdurunge kita nyedhaki bandhing karo desain web responsif lan adaptif, ayo njupuk wayahe kanggo nemtokake definisi tingkat dhuwur saka rong pendekatan kasebut.
Situs web responsif duwe tata letak sing adhedhasar owah-owahan lan adaptasi tanpa nggunakake ukuran layar. Pitakon media ngidini situs sing responsif malah ngganti "on the fly" yen browser diganti ukurane.
Rancangan adaptif nggunakake ukuran tetep adhedhasar breakpoints sing wis ditemtokake kanggo ngirim versi tata letak paling cocok kanggo ukuran layar sing dideteksi nalika halaman pertama kali dimuat.
Kanthi definisi sing luwih jembar ing panggonan, ayo pindhah menyang fokus utama kita.
Fasilitas Pembangunan
Bentenane paling penting antarane desain web responsif lan adaptif yaiku cara solusi kasebut diterapake menyang situs web. Amarga rancangan responsif nggawe tata letak sing paling cet, paling apik digunakake ing proyek-proyek ing ngendi sampeyan ngrancang situs iki saka dhasar . Nyoba kanggo nyetel ulang kodhe situs web sing wis ana dadi responsif kerep dadi perselisihan amarga sampeyan mung ora duwe level kontrol sing bakal sampeyan nemokake yen sampeyan ngembangake kode kasebut saka awal lan njupuk desain responsif kanggo akun tahap paling wiwitan proses kasebut . Iki tegese yen sampeyan ngowahi bentuk situs dadi responsif, sampeyan bisa nggawe kompromi kanggo tetep ana ing basa sing ana.
Yen sampeyan nggarap situs web lebar-lebar sing wis ana, pendekatan adaptif tegese sampeyan bisa ninggalake ukuran sing situs iki dirancang kanggo utuh lan nambahake breakpoints adaptif tambahan minangka dibutuhake. Ing sawetara kasus, yen anggaran proyek cilik, lan yen mung bakal nampung sawetara karya pangembangan cilik, sampeyan bisa milih mung nambahake breakpoint adaptif anyar kanggo ukuran layar / seluler-sentris sing luwih cilik. Iki tegese sampeyan bakal ngidini layar luwih gedhe kanggo kabeh nganggo tata letak sing padha - mbok menawa versi breakpoint 960 sing kaya-kaya wis dirancang kanggo situs kasebut.
Béda karo pendekatan adaptif yaiku sampeyan bisa luwih apik ngupaya kode situs sing wis ana, nanging salah siji saka downsides yaiku sampeyan nggawe tata letak tata letak sing beda kanggo saben breakpoint sing sampeyan pilih kanggo ndhukung. Iki bakal nduwe pengaruh ing kerja sing dibutuhake kanggo ngembangake lan njaga solusi kasebut ing jangka panjang.
Kontrol Desain
Salah sawijining kekuwatan situs web sing responsif yaiku menawa fluidity bisa ndadekake lan nyengkuyung kabeh ukuran layar tinimbang mung breakpoint sing wis ditemtokake kanthi pendekatan adaptif. Kasunyatan, manawa situs sing responsif bisa katon ing ukuran layar utama tartamtu (biasane ukuran sing cocog karo piranti populer sing kasedhiya ing pasar), nanging desain visual asring ngeculake antarane resolusi populer kasebut.
Umpamane, situs bisa nampilake tata letak layar lebar 1400 piksel, ukuran layar ageng 960 piksel, lan layar cilik katon 480 piksel, nanging babagan ukuran antarane ukuran kasebut? Minangka desainer, sampeyan duwe ora duwe kontrol ing ukuran antarane-lan ukuran visual saka kaca kasebut ukuran asring kurang saka becik.
Kanthi situs web adaptif, sampeyan duwe kontrol rancangan luwih akeh babagan macem-macem tata letak sing digunakake amarga padha ukuran tetep adhedhasar breakpoints diadegaké. Negara-negara sing ora kuwat ing negara kasebut ora masalah maneh amarga sampeyan wis ngrancang kanthi apik saben "ndelok" (tegese saben layar breakpoint) sing bakal dikirim menyang pengunjung.
Minangka atraktif minangka tingkat kontrol desain bisa muni, sampeyan kudu weruh sing teka ing rega. Ya, sampeyan kudu ngontrol kabeh tampilan saben breakpoint, nanging tegese sampeyan kudu nandur modhal wektu sing dibutuhake kanggo ngrancang saben tata letak sing unik. Breakpoints luwih milih kanggo desain, luwih akeh wektu sampeyan kudu nglampahi ing proses kasebut.
Dhasar Dhukungan
Desain web responsif lan adaptif nyenengake dukungan sing cukup kuat, utamane ing browser modern.
Situs web adaptif mbutuhake komponen sisih server utawa Javascript kanggo deteksi ukuran layar. Temenan, yen situs adaptif mbutuhake Javascript, tegese browser kudu ngaktifake supaya situs kasebut bisa dianggo kanthi bener. Sing mbokmenawa ora dadi masalah sing utama kanggo sampeyan amarga akeh wong bakal duwe Javascript ing browser, nanging ing sawijine wektu situs nduweni ketergantungan kritis apa wae, kudu dicathet.
Situs web responsif lan pitakon media sing ngurmati wong-wong mau bisa dadi apik ing kabeh browser modern. Masalah mung sampeyan bakal nganggo versi paling canggih saka Internet Explorer wiwit versi 8 lan ngisor iki ora ndhukung pitakon media . Kanggo nggarap , polyfill Javascript asring digunakake , tegese ana ketergantungan ing Javascript kene, paling ora kanggo versi-versi jaman dhisik IE. Maneh, iki ora bakal dadi masalah kanggo sampeyan, luwih-luwih yen analytics situs nuduhake yen sampeyan ora nampa akeh pengunjung nggunakake versi browser lawas.
Kanca Rapat
Sifat cairan situs web responsif menehi wong keuntungan liwat situs adaptif nalika nerangake kepinterane mangsa. Iki amarga situs-situs responsif ora dibangun kanggo nganakke set breakpoint sing wis ditemtokake. Padha adaptasi kanggo pas kabeh layar , kalebu sing ora bener ing pasar saiki. Iki tegese situs responsif ora perlu "diatasi" yen resolusi layar anyar dumadakan dadi populer.
Nggoleki macem-macem sing luar biasa ing lanskap piranti (ing Agustus 2015, ana luwih saka 24,000 piranti Android sing beda-beda ing pasar), gadhah situs sing paling apik kanggo nampung iki sudhut layar minangka kritis penting kanggo mangsa-keramahan. Iki amarga lansekap ora bisa dipikolehi ing mangsa ngarep, sing tegese ngrancang kanggo layar utawa ukuran tartamtu bakal dadi mokal, yen kita durung ngrambah kasunyatan.
Ing sisih liyane skenario perbandingan iki, yen situs iku adaptif lan ora nampung resolusi anyar sing dadi penting ing pasar, banjur sampeyan bisa dipeksa nambah titik kasebut marang situs sing wis digawe. Iki nambah wektu desain lan pangembangan kanggo proyek lan tegese supaya situs-situs adaptif kasebut kudu dipantau terus-terusan kanggo mesthekake yen ora ana titik breakpoint anyar sing diidinake menyang pasar sing kudu ditambahake ing situs kasebut. Maneh, karo macem-macem piranti dadi apa iku, kudu tansah mriksa ukuran anyar lan bisa nyepakake karo breakpoints anyar minangka tantangan sing terus-terusan sing bakal duwe impact ing karya sampeyan kudu ndhukung situs lan biaya pangopènan sing perusahaan utawa organisasi kanggo situs kasebut.
Kinerja
Desain web responsif wis suwe dituduh (ora adil supaya akeh kasus) dadi solusi sing mokal saka sudut pandang kecepatan / kinerja download. Iki luwih akeh amergo nyatane yen ing awal-awal jaman pendekatan iki, akeh perancang web mung nggolek pitakon media layar cilik menyang CSS sing ana situs. Iki dipeksa gambar lan sumber daya sing dimaksudake kanggo layar sing luwih gedhe kanggo dikirim menyang kabeh perangkat, sanajan layar sing luwih cilik ora digunakake ing tata letak akhir. Rancangan responsif wis suwe banget wiwit dina iku lan kasunyatane yaiku situs responsif sing berkualitas saiki ora nandhang masalah kinerja.
Kecepatan download alon lan situs web sing abuh ora masalah situs web sing responsif - masalah sing bisa ditemokake ing kabeh situs web. Gambar sing banget abot, feed saka media sosial, skrip gedhe lan luwih akeh lan nimbang situs mudhun, nanging situs web responsif lan adaptif bisa dibangun dadi cepet loading. Mesthine , uga bisa digawé kanthi cara sing ora nggawe prioritas, nanging iki ora sipat solusi dhewe, nanging refleksi tim sing terlibat ing pembangunan situs kasebut dhewe.
Nganti Layout
Salah sawijining aspek paling nyenengake babagan desain web adaptif yaiku ora mung sampeyan ngontrol desain situs kanggo nyetel breakpoints, nanging uga sumber daya sing dikirimake kanggo versi situs kasebut. Kayata, iki tegese gambar retina mung bisa dikirim menyang piranti retina, dene layar non-retina bisa njupuk gambar sing luwih tepat sing ukurane cilik ing ukuran berkas. Sumber situs liyane (file Javascript, gaya CSS, lan liya-liyane) bisa kanthi pinter disepelekake nalika lagi dibutuhake lan bakal digunakake.
Panggunaan desain web adaptif iki ora ana maneh persamaan sing prasaja "yen sampeyan ngembangake situs web, adaptif bisa dadi pendekatan sing luwih gampang digunakake." Kabeh situs, kalebu redesigns lengkap, bisa entuk manfaat saka pendekatan sing luwih pinter menyang pengalaman sing luwih khusus.
Skenario iki nunjukake sifat sing dianggep debat "responsive versus adaptif". Nalika iku bener yen pendekatan adaptif bisa luwih cocok tinimbang responsif kanggo situs web, uga bisa dadi solusi apik kanggo redesigns lengkap. Kajaba iku, ing sawetara kasus, pendekatan responsif bisa ditambahake marang situs sing ana kode-basis, menehi situs kasebut kabeh keuntungan saka pendekatan kanthi responsif.
Pendekatan sing luwih apik?
Nalika nerangake desain web adaptif saka adaptif, ora ana "juara" sing jelas, senadyan responsif mesthi dadi pendekatan sing luwih populer. Sejatine, pendekatan "luwih apik" gumantung marang kabutuhan proyek tartamtu. Salajengipun, punika mboten perlu minangka "salah satunggal / utawi" kahanan. Ana akeh profesional web sing mbangun situs sing gabungke sing paling apik desain web responsif (jembar cairan, support mangsa) kanthi kekuwatan desain adaptif (kontrol desain sing luwih apik, sumber pinter sing pinter).
Umumé dikenal minangka RESS (Desain Web Responsif karo Komponèn Sisi Server), pendekatan iki nuduhaké yèn ora ana "siji ukuran sing cocok karo kabeh solusi". Desain web lan adaptif sing adhedhasar duwèké nduwèni kekuwatan lan tantangan, dadi sampeyan kudu nemtokaké bakal paling apik kanggo proyek tartamtu sampeyan, utawa yen solusi hibrida uga cocok karo sampeyan.