Meningkatkan reka bentuk web responsif dengan RESS

Jawatan ini ditaja oleh NetBiscuits. Terima kasih kerana menyokong penaja yang membuat SitePoint mungkin! Rata -rata, lebih daripada satu daripada tiga pelawat ke laman web anda menggunakan peranti mudah alih. Pada tahun lalu sahaja, penggunaan mudah alih telah meningkat lebih daripada 20%. Jadi bagaimana kita memenuhi pasaran ini?

Takeaways Key

• RESS, atau komponen-komponen pelayan reka bentuk web responsif, meningkatkan reka bentuk web responsif tradisional dengan memasukkan kecerdasan sisi pelayan. Komponen sisi pelayan ini mengesan keupayaan peranti dan menyampaikan versi laman web yang dioptimumkan, yang membawa kepada pengalaman pengguna yang lebih cekap dan diperibadikan.
• RESS boleh meningkatkan prestasi laman web dengan hanya menghantar data yang berkaitan dengan peranti tertentu, mengurangkan masa beban dan meningkatkan prestasi keseluruhan. Ia juga boleh menyesuaikan penghantaran imej dan fail media lain berdasarkan keupayaan peranti, menghalang fail -fail ini dari tidak perlu melambatkan masa beban laman web.
• Semasa melaksanakan RESS memerlukan tahap kepakaran teknikal yang lebih tinggi dan boleh menjadi lebih intensif sumber kerana keperluan untuk pengaturcaraan dan pengesanan peranti pelayan, ia akhirnya boleh membawa kepada penglibatan pengguna yang lebih tinggi dan berpotensi meningkatkan pendapatan. RESS boleh digunakan bersempena dengan teknik reka bentuk web yang lain dan boleh dilaksanakan di kedua -dua laman web sedia ada dan baru.

Laman web mudah alih berasingan

Jika masa, belanjawan dan kewarasan anda tidak penting, anda boleh membina tapak berasingan untuk pengguna mudah alih dan desktop. Kandungan boleh dibungkus semula dan diselaraskan untuk peranti. Malangnya…

1. hari -hari sama ada desktop atau mudah alih telah lama berlalu. Terdapat pelbagai peranti dengan saiz skrin yang berbeza, kepadatan piksel, kelajuan pemprosesan, keupayaan rangkaian dan ciri HTML5. Dan sedikit daripada kita telah menganggap wearables lagi! Jenama perlu membuat banyak laman web untuk memenuhi keperluan setiap kemungkinan?
2. Mengenal pasti peranti pengguna adalah sukar. Rentetan ejen pengguna terkenal rumit untuk menghuraikan dan tidak akan memberitahu anda apa-apa tentang dimensi skrin, kelajuan rangkaian atau ciri-ciri lain.
3. Anda biasanya memerlukan URL berasingan untuk setiap tapak, mis. www.site.com dan m.site.com. Pengguna boleh berakhir di tapak yang salah untuk peranti mereka dan, jika anda tidak berhati -hati, enjin carian akan menghukum anda untuk kandungan pendua.
4. Menguruskan satu laman web adalah sukar. Anda kini perlu membina dan menggunakan beberapa laman web dan memastikan ia dikemas kini secara serentak. Mungkin pemaju anda akan bertahan dengan pengalaman pahit tetapi akan kandungan editor mengatasi pelbagai aset yang mensasarkan pandangan yang berbeza?

Yang mengatakan, laman web berasingan tetap menjadi pilihan yang menarik untuk syarikat -syarikat seperti Amazon dan eBay kerana ia menawarkan pengalaman yang disasarkan.

Reka bentuk web responsif

Sebagai alternatif, pereka dan pemaju boleh menggunakan reka bentuk yang bertindak balas terhadap dimensi viewport penyemak imbas (biasanya, keseluruhan skrin pada peranti yang lebih kecil). Menggunakan pendekatan pertama mudah alih, laman web ini melaksanakan susun atur linear lalai mungkin dengan teks dan menu yang lebih kecil yang diakses dari ikon hamburger. Apabila dimensi meningkat, reka bentuk boleh dipancarkan semula untuk menunjukkan lajur tambahan, fon yang lebih besar, lebih banyak jarak, menu yang selalu kelihatan dan lain-lain. RWD menyelesaikan banyak isu yang dihadapi dengan pandangan yang berasingan. Kami mempunyai satu laman web dengan satu set kandungan yang boleh bertindak balas terhadap pelbagai saiz skrin yang tidak terhingga. Malangnya…

1. Saiz skrin adalah petunjuk mentah keupayaan peranti dan tidak memberitahu kami mengenai kelajuan pemproses, jalur lebar rangkaian atau tahap sokongan HTML5. Pengguna dengan monitor besar masih boleh menggunakan PC berusia dua puluh tahun pada sambungan dial-up.
2. Halaman dan aset yang sama adalah (kebanyakannya) dihantar ke semua peranti. Adalah mungkin untuk mengehadkan pemuatan imej menggunakan imej latar belakang CSS dalam pertanyaan media, elemen dan atribut SRCSET tetapi sokongan tetap tampal dan ia tidak menyelesaikan setiap masalah. Teknik penyesuaian pelanggan boleh melambatkan rendering halaman juga, dan ini perlu ditangani. Sebagai contoh, imej yang besar boleh dihantar ke skrin retina berkepadatan tinggi walaupun pengguna berada pada sambungan yang perlahan.
3. Beberapa pilihan tidak mudah dilaksanakan pada pelanggan sahaja. Sukar untuk menyusun semula kandungan, mis. Pecahkan artikel panjang di beberapa halaman. Semua peranti menerima halaman yang sama walaupun tidak praktikal untuk dibaca pada skrin kecil.
4. halaman web purata melebihi 2MB. Ramai menggunakan reka bentuk web yang responsif tetapi tidak mengikuti bahawa laman web ini responsif pada peranti berkuasa rendah. Mewujudkan laman web yang cepat dan responsif telah menjadi lebih penting sekarang tapak kadar Google berdasarkan prestasi.

Jadi laman web yang berasingan adalah reka bentuk yang sukar dan responsif tidak dapat menyelesaikan semua masalah. Adakah terdapat cara ketiga yang dapat kita pertimbangkan?

RESS: Komponen Sider Reka Bentuk Reka Bentuk Web Reka Bentuk

RESS dicadangkan oleh Luke Wroblewski pada tahun 2011. Konsep ini menggunakan reka bentuk web yang responsif tetapi menambahnya dengan pengesanan ciri untuk melayani kandungan yang diubahsuai apabila diperlukan. Sebagai contoh, anda boleh:

• berkhidmat imej yang lebih kecil pada skrin yang lebih kecil atau apabila jalur lebar terhad.
• hanya melayani elemen video apabila peranti mempunyai sokongan HTML5 pada sambungan pantas.
• Elakkan melayani permainan flash atau iklan di iOS dan semakin peranti Android.
• Tukar ke imej skala kelabu pada pembaca ebook.
• Kurangkan kekerapan permintaan tinjauan Ajax pada sambungan yang lebih perlahan.
• Keluarkan kesan CSS3 yang tidak perlu apabila peranti tidak menyokong animasi.
• jatuh ke imej PNG apabila SVG tidak tersedia.
• memberikan maklumat tambahan apabila pengguna berada di lokasi atau negara tertentu.

Ress tidak pernah menjadi teknik yang digunakan secara meluas kerana pengesanan ciri sukar-terutamanya pada pelayan. Kod pengesanan anda mesti disahkan, dikemas kini dan dikekalkan setiap kali penyemak imbas atau ciri baru dikeluarkan. Nasib baik, terdapat perkhidmatan pihak ketiga seperti netbiscuits yang melakukan kerja keras untuk anda dan sentiasa dikemas kini dengan maklumat peranti terkini. Langkah pertama: Daftar untuk akaun NetBiscuits-terdapat percubaan percuma selama 30 hari untuk menilai perkhidmatan tersebut. Tampalkan kod penjejakan NetBiscuits ke dalam template laman web anda, tunggu beberapa saat, dan lihat carta analisis peranti dan pelawat yang menarik:

API Pengesanan Peranti Side Client

Kod penjejakan juga mentakrifkan objek JavaScript global bernama DCS yang mendedahkan lebih daripada 650 perkakasan, pelayar, sistem operasi dan parameter pengesanan rangkaian. Contoh: Menilai skor jalur lebar - pangkat dari sifar (sangat lambat) hingga 20 (biasanya kelebihan/hspa) hingga 60 (3g) hingga 120 (4g/wifi):

<span>var bandwidthScore = dcs.get('bandwidth.score'); // integer</span>

Kenal pasti sama ada peranti mempunyai skrin sentuh:

<span>var touchScreen = dcs.get('browser.cantouch'); // boolean</span>

Dengan nisbah piksel berkepadatan tinggi:

<span>var pixelRatio = dcs.get('internal.browserpixelratio'); // real</span>

Adakah peranti mempunyai kemudahan panggilan telefon?

<span>var canCall = dcs.get('browser.cantelmakecall'); // boolean</span>

Adakah SVG disokong? Adakah animasi smil tersedia?

<span>var svg = dcs.get('browser.css.cansvg'); // boolean
</span><span>var svgSmil = dcs.get('browser.css.cansvgsmil'); // boolean</span>

Ketahui di mana pengguna berada:

<span>var county = dcs.get('internal.countrycode'); // 2-character string, e.g. "US"</span>

Cadangkan format video HTML5 yang serasi:

<span>var videoFormat = dcs.get('video.suggestvideoformat'); // object</span>

Mengesan penyemak imbas mana yang sedang digunakan:

<span>var browser = dcs.get('browser.model'); // string, e.g. "Firefox 38"</span>

Dan sama ada pelepasan terkini:

<span>var latest = dcs.get('browser.islatestrelease'); // boolean</span>

API Pengesanan Peranti Bahagian Server

Pengesanan peranti paling berguna pada pelayan di mana anda boleh mengubah suai respons sebelum dihantar. Kod disediakan untuk PHP, Java dan .NET. Contoh PHP ... Adakah peranti menyokong video H264 HTML5 dan mempunyai sambungan yang munasabah?

<span><span><?php </span></span><span><span>if ($dcs->video->canhh264 && $dcs->internal->bandwidthscore > 150) {
</span></span><span>	<span>echo '<video src="video.mp4" controls></video>';
</span></span><span><span>}
</span></span><span><span>?></span></span></span>

Adakah peranti menyokong Ajax dan mempunyai prestasi JavaScript lebih baik daripada iPhone 5 (peranti rujukan dengan skor 100)?

<span><span><?php </span></span><span><span>if ($dcs->browser->canajax && $dcs->hardware->performance->js > 100) {
</span></span><span>	<span>echo '<script src="moderndevice.js"></script>';
</span></span><span><span>}
</span></span><span><span>?></span></span></span>

Kami mungkin tidak pernah mempunyai penyelesaian yang mudah dibangunkan dan berfungsi dengan sempurna pada semua peranti tetapi RES menawarkan kompromi yang baik yang menyelesaikan banyak masalah prestasi yang dihadapi dengan reka bentuk web yang responsif. Perkhidmatan pengesanan peranti yang baik adalah semua yang anda perlukan.

soalan yang sering ditanya mengenai meningkatkan reka bentuk web responsif dengan ress

Apakah perbezaan utama antara reka bentuk web ress dan responsif tradisional? . Sebaliknya, RESS (Reka Bentuk Web Responsif dengan Komponen Side Server) menggabungkan responsif sampingan klien dengan kecerdasan sisi pelayan. Ini bermakna pelayan mengesan keupayaan peranti dan menghantar versi laman web yang dioptimumkan, menghasilkan pengalaman pengguna yang lebih cekap dan disesuaikan.

Bagaimanakah RESS meningkatkan prestasi laman web?

RESS meningkatkan prestasi laman web dengan mengurangkan jumlah data yang tidak perlu yang dihantar ke peranti. Dengan RWD tradisional, semua data, termasuk data untuk elemen yang tidak dapat dilihat pada peranti, dihantar. Walau bagaimanapun, dengan RESS, pelayan hanya menghantar data yang berkaitan dengan peranti tertentu, mengurangkan masa beban dan meningkatkan prestasi keseluruhan. direka untuk bersesuaian dengan semua jenis peranti. Komponen sampingan pelayan dapat mengesan keupayaan peranti yang meminta halaman web dan menyampaikan versi yang dioptimumkan dari laman web ini. Ini memastikan pengalaman pengguna yang lancar di semua peranti, dari desktop ke telefon pintar.

Bagaimana RESS mempengaruhi SEO? Masa beban yang lebih cepat dan pengalaman pengguna yang lebih baik boleh membawa kepada kadar lantunan yang lebih rendah dan penglibatan pengguna yang lebih tinggi, yang merupakan faktor yang dipertimbangkan oleh enjin carian ketika laman web ranking. Di samping itu, RESS membolehkan merangkak dan pengindeksan kandungan yang lebih cekap oleh bot enjin carian.

Apakah cabaran dalam melaksanakan RESS? . Ia melibatkan pengaturcaraan dan pengesanan peranti pelayan, yang boleh menjadi kompleks. Di samping itu, mengekalkan laman web RESS boleh menjadi lebih intensif sumber kerana ia memerlukan kemas kini tetap ke pangkalan data pengesanan peranti untuk menampung peranti dan penyemak imbas baru.

RESS boleh dilaksanakan di kedua -dua laman web sedia ada dan baru. Walau bagaimanapun, mengintegrasikan RES ke laman web yang sedia ada mungkin memerlukan perubahan yang ketara kepada seni bina dan kod tapak, yang boleh memakan masa dan kompleks. RESS boleh mengoptimumkan penghantaran imej dan fail media lain berdasarkan keupayaan peranti. Pelayan boleh mengubah saiz imej, menukarnya ke format yang lebih cekap, atau bahkan menghilangkannya sepenuhnya untuk peranti dengan keupayaan terhad. Ini memastikan bahawa fail media tidak perlu melambatkan masa beban laman web. laman web dan sumber yang tersedia. Walaupun pelaksanaan awal mungkin lebih mahal kerana keperluan untuk pengaturcaraan dan pengesanan peranti pelayan, prestasi yang lebih baik dan pengalaman pengguna boleh membawa kepada penglibatan pengguna yang lebih tinggi dan pendapatan berpotensi yang lebih tinggi dalam jangka masa panjang.

boleh digunakan bersempena dengan teknik reka bentuk web yang lain? Teknik -teknik ini boleh melengkapkan RESS dengan menyediakan penyelesaian reka bentuk web yang lebih mantap dan fleksibel. Dengan menggabungkan fleksibiliti RWD dengan kecekapan komponen sisi pelayan, RESS menyediakan pengalaman pengguna yang lebih disesuaikan dan cekap. Memandangkan lebih banyak peranti dengan keupayaan yang berbeza -beza terus muncul, keperluan untuk teknik seperti RESS yang boleh menyesuaikan diri dengan peranti ini hanya akan meningkat.

Atas ialah kandungan terperinci Meningkatkan reka bentuk web responsif dengan RESS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!