Layout Web Responsif untuk Intro Layar Ponsel, Tip dan Contoh
Desainer memilikinya lebih keras sekarang daripada sebelumnya. Kami tidak hanya harus merancang untuk perangkat stasioner, tetapi juga perangkat seluler seperti tablet dan ponsel cerdas, dan karena kami berbicara tentang banyak ukuran dan resolusi layar yang berbeda di sini, itu adalah tugas besar untuk dipikul. Mengingat hal ini, desain web responsif bisa jadi solusi terbaik. Ia menawarkan lebih dari sekadar templat seluler sederhana; alih-alih, seluruh tata letak situs Anda dirancang agar cukup fleksibel agar sesuai dengan resolusi layar yang memungkinkan.
Dengan skema desain yang cair, ada banyak manfaat dan kelemahannya. Pertimbangkan contoh saya di bawah ini untuk mengetahui seberapa responsif desain web dapat menjadikan transisi ke perangkat seluler menjadi lebih mulus.
Bagaimana Desain Responsif Bekerja
Ketika saya menggunakan kata itu “responsif” dalam hal desain web saya maksudkan bahwa seluruh tata letak merespon berdasarkan resolusi layar pengguna. Bayangkan skenario ini: Anda membaca situs web pada satu tablet, lalu beralih ke perangkat lain karena satu dan lain alasan. Jendela browser sekarang berukuran ulang. Tata letak desain web yang responsif akan menampilkan skema dan tata letak yang dengan anggun rusak dan dipulihkan sendiri. Dari perspektif kegunaan, ini adalah teknik yang brilian.
Desain responsif adalah tentang menciptakan pengalaman yang homogen terlepas dari ukuran layar browser atau perangkat. Saya telah menemukan contoh sempurna dari 'A List Apart' untuk mengilustrasikan poin saya, yang juga termasuk gambar dinamis. Lebar diatur dalam CSS menggunakan persentase untuk sebagian besar semua elemen wadah internal. Situs web yang lebih besar juga merespons dengan baik untuk menghapus konten dinamis seperti JavaScript saat tidak didukung.
Mengapa Desain untuk Seluler?
Telah menjadi bukti bahwa semakin banyak pengguna yang menggunakan ponsel, dan tidak hanya untuk menjelajah web saat bepergian. Tablet PC sudah mulai berubah dalam konteks ketika pengguna online di kelas. Merancang untuk seluler tentu saja merupakan persyaratan dalam standar web modern. Satu-satunya masalah adalah memilih metode pengembangan Anda, dan menargetkan audiens Anda dengan tepat.
Saat Anda mulai mengkodekan untuk resolusi layar tertentu, Anda berakhir dengan terlalu banyak lembar gaya untuk ditangani. Kueri media dalam CSS3 dapat digunakan untuk membangun tata letak khusus iPhone untuk tampilan potret dan lanskap. Karena Anda dapat menentukan sebelumnya kerapatan piksel, mudah untuk mengubah template HTML apa pun untuk seluler.
(Sumber Gambar: bradfrostweb)
Tetapi ketika Anda membuat kode tata letak untuk desain responsif, aspek seluler diurus secara default. Pengguna desktop dan seluler akan ditawari pengalaman serupa dan Anda tidak perlu khawatir tentang properti CSS eksternal. Satu-satunya penelitian yang perlu Anda lakukan adalah merencanakan tampilan layar sekecil mungkin. Data lalu lintas Google Analytics dapat sangat membantu untuk ini.
Anda tidak akan membuat situs web Anda berfungsi 100% di setiap perangkat yang menjalankan setiap browser. Tetapi Anda dapat menargetkan mayoritas berdasarkan lebar rata-rata layar. Model iPhone yang lebih lama menggunakan resolusi tampilan 320x480 yang tidak begitu sulit dipercaya. Saya akan menembak untuk lebar minimum 240px, atau bahkan lebih kecil jika Anda bisa memasangnya.
Menghapus Zoom Default
Jika Anda telah menghabiskan waktu menjelajahi Web pada telepon pintar, Anda akan melihat bagaimana situs web diperkecil untuk sepenuhnya ditampilkan di dalam layar. Ini untuk kenyamanan pengguna karena sebagian besar situs web tidak memiliki rekanan seluler, sehingga tata letak penuh adalah taruhan yang paling aman.
Tetapi ketika Anda mulai membangun desain ponsel yang responsif, zoom otomatis dapat benar-benar mengacaukan elemen tata letak Anda. Secara khusus, gambar dan konten navigasi mungkin tampak kecil atau terlalu besar di tata letak Anda. Ada tag meta khusus yang dapat Anda tambahkan ke header dokumen yang mengatur ulang ini di sebagian besar perangkat Android dan iPhone.
Ini dikenal sebagai tag meta viewport yang mengatur beberapa variabel khusus dalam konten. Apple memiliki halaman dokumentasi tentang beberapa meta tag lain yang harus Anda perhatikan, meskipun ini ditujukan khusus untuk situs web di iOS. Itu skala awal Nilai ini penting karena ini akan membuat situs web Anda default untuk zoom 100% penuh.
Nilai terakhir untuk dapat diskalakan pengguna akan menghapus fungsi zoom ini sama sekali sehingga pengguna tidak dapat mengubah ukuran tata letak. Ini akan mengunci desain menjadi satu ukuran berdasarkan lebar perangkat penuh. Perhatikan bahwa meskipun Anda menonaktifkan fungsionalitas zoom, desain responsif yang baik akan tetap beradaptasi saat beralih dari potret ke lanskap di perangkat apa pun! Tetapi masuk akal untuk mengunci desain responsif dan menghapus opsi penskalaan generik.
Penskalaan Gambar Dinamis
Gambar adalah aspek penting lain dari hampir setiap situs web. Pengguna seluler mungkin tidak ingin melakukan streaming video, tetapi foto adalah cerita yang sangat berbeda. Ini juga merupakan penyebab terbesar dalam hal tata letak yang keluar dari model kotak.
img max-width: 100%;
Aturan standar untuk CSS adalah menerapkan properti max-width ke semua gambar. Karena mereka akan selalu ditetapkan pada 100% Anda tidak akan pernah melihat distorsi. Ketika pengguna kembali ukuran jendela browser mereka lebih kecil dari gambar Anda bisa mengatasinya secara otomatis akan menyesuaikan kembali dengan lebar 100% diperkecil. Masalahnya adalah bahwa Internet Explorer tidak dapat memahami properti ini, jadi Anda harus mengumpulkan stylesheet khusus IE lebar: 100%;.
Gambar fleksibel juga dimungkinkan jika Anda menggunakan plugin JavaScript atau jQuery. Ada beberapa pengembang yang sangat pintar di luar sana yang telah meluangkan waktu untuk membangun konten gambar yang sangat responsif. Utas ini hanyalah satu dari banyak di Stack Overflow yang menampilkan pendekatan aneh namun nyaman untuk menyelesaikan bug IE6 / 7.
Saya pribadi akan merekomendasikan tetap menggunakan ukuran gambar CSS alami. Jika situs web Anda berjalan di peramban seluler dengan JavaScript diaktifkan, kemungkinan besar itu juga dapat mendukung CSS. Jika Anda benar-benar ingin menggali lebih dalam, lihat artikel 24 cara ini Gambar untuk Desain Adaptive ...
Desain yang menyentuh
Pengembang web mungkin lupa bahwa pengguna seluler tidak lagi menggunakan ponsel keypad seperti BlackBerry. Mayoritas smartphone saat ini menggunakan antarmuka layar sentuh, yang membuat skenario berbeda dari pengaturan mouse-dan-keyboard.
Karena itu, Anda harus mempertimbangkan solusi alternatif dalam elemen seluler. Menu dropdown dapat bekerja lebih baik ketika ditampilkan sebagai satu menu di sisi kanan. Sebagian besar pengguna dapat mengetuk tautan di sisi kanan lebih mudah daripada di sebelah kiri, tetapi kolom mana pun berfungsi untuk mengurangi ruang. Menggunakan indentasi margin, mudah untuk mengidentifikasi hierarki tautan tanpa memerlukan kode jQuery.
Ini juga praktik yang baik untuk meningkatkan ukuran tautan navigasi ini. Pengguna ponsel tidak memiliki kemewahan layar besar yang disediakan di desktop atau bahkan komputer laptop. Anda harus menjaga teks tetap besar, terbuka, dapat diketuk, dan dapat dibaca dengan cara apa pun. Anda bahkan mungkin ingin mengubah ukuran jika pengguna beralih antara tampilan potret dan lanskap - pengulangan yang cukup umum saat menelusuri web seluler.
Layout CSS Khusus
Secara umum yang terbaik adalah menyesuaikan tata letak Anda dan memungkinkan degradasi konten Anda secara alami. Jika Anda memiliki sidebar dan area konten, Anda harus mengaturnya dalam persentase atau ems, apa pun yang akan kembali ukuran dengan jendela browser. Jika Anda menerapkan lebar minimum ini pada akhirnya akan memutuskan bagian dari tata letak; jadi sekarang konten sidebar Anda ditampilkan di atas konten halaman.
(Sumber Gambar: Pepperson)
Ketika Anda mempertimbangkan bagaimana ini mempengaruhi desain keseluruhan, jauh lebih mudah untuk mengembangkan stylesheet eksternal. Namun Anda cenderung mengalami resolusi layar yang terlalu kecil untuk ditata oleh tata letak Anda. Ini adalah skenario sempurna untuk menambahkan properti CSS khusus untuk menghapus bagian halaman, atau memformat ulang konten sama sekali.
Mengaktifkan / Menonaktifkan Konten Ekstra
Contoh blok konten besar termasuk formulir web, menu dinamis, slider gambar, dan ide serupa lainnya. Alih-alih menghapus elemen-elemen ini karena tata letak menjadi lebih kecil mengapa tidak menyembunyikannya saja di a “diminimalkan” konten div? Anda dapat menggunakan CSS atau JavaScript untuk melakukan pengeditan, tetapi pada akhirnya Anda mungkin memerlukan beberapa kode JS untuk membuat tombol sakelar.
Alternatif ini sangat cocok untuk menjaga halaman rumah Anda dinamis dan penuh dengan media web yang kaya. Alih-alih menghapus sepenuhnya navigasi drop-down Anda atau mengatur ulang struktur halaman Anda dapat menyembunyikannya dalam div konten. Jika pengguna ingin menampilkan tautan Anda, mereka mengetuk tombol sakelar untuk membuka / menutup menu.
Format ini sederhana, intuitif, dan mudah digunakan pada perangkat layar sentuh. Di dalam div Anda dapat menempatkan masing-masing menu dropdown berdampingan dalam format kolom. Karena ukuran jendela lebih kecil, mereka secara alami akan jatuh di bawah satu sama lain dan meningkatkan tinggi halaman. Namun opsi untuk menutup seluruh menu mudah dicapai dan hanya dengan satu ketukan. Toggle div ini juga cocok untuk slider gambar bekerja sama dengan pengubahan ukuran foto dinamis.
Menggunakan Kueri Media
Jika layar seluler akan memecah tata letak 2 atau 3-kolom Anda, Anda akan berakhir dengan masing-masing area konten ditumpuk satu sama lain. Seluruh situs akan tampak berdarah dan mungkin akan sangat membingungkan tanpa area blok yang dibedakan. Ide yang lebih baik adalah menambahkan batas bawah pada setiap kolom, hanya untuk perangkat seluler, menggunakan stylesheet seperti eksternal mobile.css.
Dengan gaya baru ini, konten Anda dipecah menjadi beberapa bagian yang dapat dibagi. Atribut media di atas dirancang khusus untuk menargetkan perangkat iPhone lama dalam tampilan lanskap. Tetapi itu juga akan berlaku untuk perangkat dengan layar lebih kecil dari 480 piksel. Gunakan ini untuk keuntungan Anda sehingga Anda dapat menentukan pada titik apa tata letak “putus”.
Ada beberapa opsi lagi yang dapat Anda gunakan untuk mendeteksi orientasi perangkat. Panduan fantastis tentang media CSS ini dapat memberi Anda beberapa ide. Selain itu, proyek ponsel baru 320 dan lebih tinggi menawarkan pelat untuk CSS seluler @media gaya. Ini dapat dimasukkan langsung ke file mobile.css yang sama dan menerapkan aturan untuk banyak perangkat yang berbeda.
/ * Smartphone (potret dan lansekap) ----------- * / @media hanya layar dan (min-device-width: 320px) dan (max-device-width: 480px) / * Styles * / / * Smartphone (lanskap) ----------- * / @media hanya layar dan (min-width: 321px) / * Styles * / / * Smartphone (potret) ---- ------- * / @media hanya layar dan (max-width: 320px) / * Styles * / / * iPads (potret dan lanskap) ----------- * / @ layar hanya media dan (lebar perangkat minimum: 768px) dan (lebar perangkat maksimal: 1024px) / * Gaya * /
(Sumber: Kueri Media CSS3 Hardboiled)
Alat yang Bermanfaat
- Skeleton - Boilerplate Cantik untuk Desain Seluler yang Responsif
- Mulai dari adaptif hingga sepenuhnya responsif
Etalase: Desain Responsif Yang Cantik
Saya harap tips dan teknik desain ini akan mendorong Anda untuk bergerak ke arah membangun tata letak responsif yang menarik tidak hanya untuk layar seluler, tetapi untuk perangkat umum apa pun dengan penelusuran web. Untuk menjaga agar jus kreatif tetap mengalir, saya telah memamerkan karya kecil desain web seluler yang responsif. Pastikan untuk memeriksa beberapa fitur yang lebih unik dan membagikan pemikiran Anda tentang desain atau topik di area diskusi.
menggantung bulan
Di Macdonald
Trik CSS
Selamat Cog
Teixido
CSS Wizardry
Arsitek Informasi
ART = BEKERJA
Desain Web Hardboiled
Sony USA
Ramah Masa Depan
Kita Tidak Bisa Berhenti Berpikir
Pekerjaan Asli
Desain Colbow
320 dan lebih tinggi
Fork CMS
Happy Bit
Pulp Listrik
Foster Props
Plexis
Kue Preeti
Lebih Banyak Bahaya
Pusat Informasi Kedokteran Gigi
ribot - desain antarmuka
Halo Fisher
KTT Pemasar Sosial
William Csete
Robot Berbulu
Meltmedia
Tetap disini!
Dalam posting besok kami akan menampilkan beberapa tema WordPress responsif gratis Anda dapat mengunduh untuk digunakan. Pastikan untuk mendengarkannya.
