Membandingkan Dua Pendekatan yang Berbeza kepada Reka Bentuk Web Multi-Peranti
Reka bentuk web responsif dan penyesuaian adalah kedua-dua kaedah untuk mewujudkan laman web mesra berbilang peranti yang berfungsi dengan baik pada pelbagai saiz skrin. Walaupun reka bentuk web responsif disyorkan oleh Google dan lebih popular dari kedua-dua pendekatan, kedua-dua kaedah ini untuk reka bentuk web berbilang peranti mempunyai kekuatan dan kelemahan mereka.
Mari kita perhatikan perbezaan antara reka bentuk web yang responsif dan adaptif, khususnya memberi tumpuan kepada bidang-bidang utama ini:
- Kemudahan pembangunan
- Tahap kawalan yang anda ada ke atas reka bentuk
- Lebar sokongan peranti / skrin
- Bagaimana masa depan penyelesaian yang ramah
- Keseluruhan kelajuan muat turun dan prestasi tapak
Beberapa Definisi
Sebelum kita dapat membandingkan perbandingan reka bentuk web yang responsif dan menyesuaikan diri, mari kita luangkan masa untuk melihat definisi peringkat tinggi kedua-dua pendekatan ini.
Laman web responsif mempunyai susun atur bendalir yang berubah dan disesuaikan tanpa mengira saiz skrin yang digunakan. Pertanyaan media membolehkan laman-laman responsif dapat mengubah "on the fly" jika pelayar diubah saiznya.
Reka bentuk penyesuaian menggunakan saiz tetap berdasarkan titik putus yang telah ditetapkan untuk menyampaikan versi susun atur yang paling sesuai untuk saiz skrin yang dikesan apabila halaman pertama kali dimuatkan.
Dengan definisi yang luas di sini, mari kita beralih kepada fokus utama kami.
Kemudahan Pembangunan
Perbezaan yang paling ketara antara reka bentuk web responsif dan penyesuaian adalah dengan cara penyelesaian ini diterapkan ke laman web. Oleh kerana reka bentuk responsif mewujudkan susun atur yang sepenuhnya cair, ia lebih baik digunakan pada projek-projek di mana anda mendesain semula laman web ini dari bawah ke atas . Mencuba mengubah suai kod tapak web yang sedia ada untuk menjadi responsif selalunya merupakan perselisihan yang melelahkan kerana anda tidak mempunyai tahap kawalan yang anda miliki jika anda membangunkan kod itu dari awal dan mengambil reka bentuk responsif untuk peringkat awal proses itu . Ini bermakna bahawa apabila anda membuat perubahan pada tapak untuk responsif, anda terpaksa membuat kompromi untuk tinggal di dalam pangkalan data yang sedia ada.
Jika anda bekerja dengan tapak web tetap lebar yang sedia ada, pendekatan penyesuaian bermakna anda boleh meninggalkan saiz yang tapak itu direka untuk utuh dan menambah titik putus adaptif tambahan apabila diperlukan. Dalam sesetengah kes, jika bajet projek kecil, dan jika ia hanya akan menampung sedikit kerja pembangunan, anda boleh memilih untuk hanya menambah titik putus adaptif baru untuk saiz skrin / mudah alih yang lebih kecil. Ini bermakna bahawa anda akan membenarkan skrin yang lebih besar untuk semua menggunakan susun atur yang sama - mungkin versi 960 breakpoint yang merupakan laman web yang mungkin dirancang awalnya.
Terbalik kepada pendekatan penyesuaian ialah anda dapat memanfaatkan lebih baik kod tapak sedia ada, tetapi salah satu kelemahan adalah bahawa anda membuat templat susun atur yang berlainan untuk setiap breakpoint yang anda pilih untuk menyokong. Ini yang akan memberi impak kepada beban kerja yang diperlukan untuk membangunkan dan mengekalkan penyelesaian ini dalam jangka masa panjang.
Kawalan Reka Bentuk
Salah satu kekuatan laman web yang responsif ialah ketidakstabilan mereka membolehkan mereka menyesuaikan dan menyokong semua saiz skrin berbanding dengan hanya titik putus pre-set ditentukan dalam pendekatan penyesuaian. Walau bagaimanapun, kenyataannya adalah bahawa laman responsif mungkin kelihatan hebat pada saiz skrin tertentu tertentu (biasanya saiz yang sesuai dengan peranti popular yang terdapat di pasaran), tetapi reka bentuk visual sering terputus antara resolusi yang popular ini.
Contohnya, laman web mungkin kelihatan hebat pada susun atur skrin lebar 1400 piksel, saiz pertengahan skrin 960 piksel, dan skrin kecil kelihatan pada 480 piksel, tetapi bagaimana pula dengan negeri-negeri di antara saiz ini? Sebagai pereka, anda mempunyai sedikit kawalan terhadap saiz antara ini dan rupa visual halaman pada saiz tersebut sering kurang daripada ideal.
Dengan laman web penyesuaian, anda mempunyai lebih banyak kawalan reka bentuk ke atas pelbagai susun atur yang digunakan kerana ia adalah saiz tetap berdasarkan titik putus yang ditetapkan. Mereka yang canggung di antara negeri tidak menjadi masalah lagi kerana anda telah direka dengan teliti setiap "rupa" (yang bermaksud setiap paparan breakpoint) yang akan dihantar kepada pengunjung.
Seperti yang menarik kerana tahap reka bentuk kawalan mungkin terdengar, anda harus sedar bahawa ia datang pada harga. Ya, anda mempunyai kawalan penuh terhadap rupa setiap titik putus, tetapi itu bermakna anda mesti melabur masa reka bentuk yang diperlukan untuk mereka bentuk untuk setiap susun atur yang unik. Semakin banyak titik putus yang anda pilih untuk reka bentuk, semakin banyak masa yang anda perlukan untuk dibelanjakan pada proses itu.
Lebar Sokongan
Kedua-dua reka bentuk web responsif dan menyesuaikan diri menikmati sokongan yang mantap, terutamanya dalam penyemak imbas moden.
Laman web yang menyesuaikan memerlukan sama ada komponen sisi pelayan atau Javascript untuk pengesanan saiz skrin. Jelasnya, jika tapak penyesuaian memerlukan Javascript, ini bermakna penyemak imbas perlu membolehkannya supaya laman web berfungsi dengan betul. Ini mungkin tidak menjadi perhatian utama anda kerana kebanyakan orang akan mempunyai Javascript dalam pelayar mereka, tetapi pada bila-bila masa laman web mempunyai kebergantungan kritikal terhadap apa-apa, ia harus diperhatikan.
Laman web yang responsif dan pertanyaan media yang memberi kuasa kepada mereka akan berfungsi dengan baik dalam semua pelayar moden. Satu-satunya masalah yang anda akan ada adalah dengan versi tertua Internet Explorer sejak versi 8 dan ke bawah tidak menyokong pertanyaan media . Untuk mengatasi masalah ini , polyfill Javascript sering digunakan , yang bermaksud terdapat kebergantungan pada Javascript di sini juga, sekurang-kurangnya untuk versi-versi kuno IE. Sekali lagi, ini mungkin tidak menjadi perhatian anda, terutamanya jika analisis tapak anda menunjukkan bahawa anda tidak menerima banyak pelawat menggunakan versi penyemak imbas yang lebih lama.
Keramahan Masa Depan
Sifat bendalir laman web yang responsif memberi mereka kelebihan ke atas laman web yang menyesuaikan diri ketika datang ke keramahan masa depan. Ini adalah kerana laman-laman responsif ini tidak dibina untuk menampung set-point breakpoints yang telah ditetapkan sebelumnya. Mereka menyesuaikan diri agar sesuai dengan semua skrin , termasuk yang mungkin tidak di pasaran sekarang. Ini bermakna laman responsif tidak perlu "ditetapkan" jika resolusi skrin baru tiba-tiba menjadi popular.
Melihat pelbagai yang luar biasa dalam landskap peranti (sehingga Ogos 2015, terdapat lebih 24,000 peranti Android yang berbeza di pasaran), mempunyai laman web yang melakukan yang terbaik untuk menampung pelbagai skrin ini sangat penting untuk keramahan masa depan. Ini kerana landskap tidak semestinya akan menjadi kurang beragam pada masa akan datang, yang bermaksud bahawa mereka bentuk untuk skrin tertentu atau saiz akan menjadi mustahil, jika kita belum mencapai realiti itu.
Di sisi lain dari senario perbandingan ini, jika laman web adalah penyesuaian dan ia tidak menampung resolusi baru yang mungkin menjadi penting di pasaran, maka kemudian anda mungkin terpaksa menambah titik putus ke situs yang telah anda buat. Ini menambah masa reka bentuk dan pembangunan ke projek-projek dan ini bermakna bahawa laman penyesuaian itu mesti dipantau secara konsisten untuk memastikan tidak ada titik pecah baru yang telah diperkenalkan ke pasaran yang mesti ditambah ke laman web ini. Sekali lagi, dengan kepelbagaian peranti menjadi apa yang ada, perlu sentiasa memeriksa saiz baru dan mungkin menampung mereka dengan titik putus baru adalah cabaran yang berterusan yang akan memberi kesan kepada kerja yang anda perlukan untuk menyokong tapak dan kos penyelenggaraan itu syarikat atau organisasi yang menjadi tapaknya.
Prestasi
Reka bentuk web responsif telah lama dituduh (secara tidak adil dalam banyak kes) menjadi penyelesaian yang buruk dari sudut pandang kelajuan / prestasi muat turun. Hal ini disebabkan oleh fakta bahawa pada hari-hari awal pendekatan ini, banyak pereka web hanya menangani pertanyaan media skrin kecil ke CSS sedia ada laman web. Ini memaksa imej dan sumber yang dimaksudkan untuk skrin yang lebih besar untuk dihantar ke semua peranti, walaupun skrin kecil itu tidak menggunakannya dalam susunan akhir mereka. Reka bentuk responsif telah datang jauh sejak hari-hari dan realiti adalah bahawa tapak responsif yang berkualiti hari ini tidak mengalami masalah prestasi.
Kelajuan muat turun perlahan dan laman web yang lebat bukan masalah tapak web yang responsif - ia adalah masalah yang boleh didapati di semua laman web. Imej yang terlalu berat, suapan dari media sosial, skrip yang berlebihan dan banyak lagi dan timbanglah laman web ke bawah, tetapi kedua-dua laman web responsif dan penyesuaian boleh dibina untuk menjadi pantas. Sudah tentu , mereka juga boleh dibina dengan cara yang tidak menjadikan prestasi menjadi keutamaan, tetapi ini bukan sifat penyelesaiannya sendiri, melainkan refleksi pasukan yang terlibat dalam pembangunan laman web itu sendiri.
Beyond Layout
Salah satu aspek yang paling menarik dari reka bentuk web adaptif ialah anda tidak hanya mempunyai kawalan ke atas reka bentuk laman web untuk menetapkan titik putus, tetapi juga sumber yang dihantar untuk versi laman web tersebut. Sebagai contoh, ini bermakna imej retina hanya boleh dihantar ke peranti retina, manakala skrin non-retina mendapatkan imej yang lebih sesuai yang lebih kecil dalam saiz fail. Sumber tapak lain (fail Javascript, gaya CSS, dan lain-lain) boleh disampaikan dengan bijak hanya apabila ia diperlukan dan akan digunakan.
Penggunaan reka bentuk web adaptif ini melampaui persamaan mudah "jika anda mengubah laman web, penyesuaian mungkin merupakan pendekatan yang lebih mudah digunakan." Semua laman web, termasuk reka bentuk semula lengkap, boleh mendapat manfaat daripada pendekatan yang lebih bijak untuk pengalaman yang lebih khusus.
Senario ini menunjukkan sifat perdebatan "responsif berbanding adaptif" ini. Walaupun benar bahawa pendekatan penyesuaian mungkin lebih sesuai daripada responsif untuk retrofitting laman web, ia juga boleh menjadi penyelesaian yang baik untuk reka bentuk semula penuh. Begitu juga, dalam sesetengah keadaan, pendekatan responsif boleh ditambah ke kod dasar laman web yang sedia ada, memberikan tapak ini semua manfaat pendekatan yang sepenuhnya responsif.
Pendekatan yang lebih baik?
Apabila ia datang kepada responsif berbanding reka bentuk web adaptif, tidak ada "pemenang" yang jelas, walaupun responsif pastinya pendekatan yang lebih popular. Sebenarnya, pendekatan "lebih baik" bergantung kepada keperluan sesuatu projek tertentu. Selain itu, ini tidak perlu menjadi "sama ada / atau" keadaan. Terdapat banyak profesional web yang membina laman web yang menggabungkan reka bentuk web terbaik (lebar cecair, sokongan masa depan) dengan kekuatan reka bentuk adaptif (kawalan reka bentuk yang lebih baik, pemuatan pintar sumber laman web).
Biasanya dikenali sebagai RESS (Reka bentuk Web Responsif dengan Komponen Sisi Server), pendekatan ini menunjukkan bahawa tidak ada satu "saiz yang sesuai dengan semua penyelesaian." Kedua-dua reka bentuk web responsif dan adaptif mempunyai kekuatan dan cabaran mereka, jadi anda perlu menentukan yang mana satu akan berfungsi dengan baik untuk projek khusus anda, atau jika penyelesaian hibrida mungkin sesuai dengan yang terbaik.