Mari kita langsung saja ke dalamnya: Percaya atau tidak, blog Treehouse tempat Anda membaca artikel ini sebenarnya adalah desain yang responsif! Untuk melihatnya beraksi, buka artikel ini di browser desktop dan perlahan-lahan buat browser lebih tipis dan lebih lebar. Anda harus melihat tata letak secara ajaib menyesuaikan diri agar lebih nyaman sesuai dengan lebar baru browser, bahkan jika Anda membuat halaman setipis resolusi ponsel. Berikut adalah beberapa tangkapan layar seperti apa desain Think Vitamin di berbagai resolusi layar. Tahap pertama dari desain responsif Think Vitamin. Tahap kedua dari desain responsif Think Vitamin. Tahap ketiga dan keempat dari desain responsif Think Vitamin. Sulit untuk berbicara tentang desain responsif tanpa menyebut pembuatnya, Ethan Marcotte. Jika Anda belum membaca artikel seminal tentang desain web responsif, saya sangat menyarankan Anda memeriksanya (serius, ini wajib dibaca). Dalam artikel itu, Ethan membahas semua ide kunci yang membentuk desain web responsif; dan itulah sebenarnya desain yang responsif, secara teknis.
Ini bukan teknologi tunggal, melainkan serangkaian teknik dan ide yang membentuk keseluruhan. Ini adalah salah satu sumber utama kebingungan, dan sebentar lagi kami akan memecah semuanya dan melihat setiap bagian. Jadi, apa sebenarnya desain responsif? Sebenarnya, pertanyaan yang lebih baik untuk ditanyakan adalah, masalah apa yang dipecahkan oleh desain web responsif? Nah, seperti yang mungkin Anda perhatikan, komputer bukan satu-satunya perangkat keras dengan browser web lagi. Saya mungkin mendapat masalah dengan Designer Webs 50 mengatakan ini, tetapi iPhone adalah salah satu perangkat seluler pertama yang menampilkan peramban web yang hebat, dan itu benar-benar menjadi sorotan untuk meningkatkan pengalaman web seluler. Banyak perangkat lain mengikutinya dan, tampaknya dalam semalam, wajah web seluler telah berubah. Lansekap browser yang berubah berarti bahwa harapan pengguna juga berubah; orang-orang diharapkan dapat menelusuri web di ponsel mereka semudah mereka menjelajahi web di komputer desktop.
Jadi, sebagai tanggapan terhadap hal ini (jika Anda memaafkan permainan kata-kata) komunitas desain web mulai membuat versi seluler situs web mereka. Kalau dipikir-pikir, ini bukan jalan yang benar, tetapi pada saat itu sepertinya ide yang masuk akal. Setiap situs web akan memiliki versi 'desktop' normal dari situs mereka, dan sebagai bonus, versi 'seluler'. Teknologi tidak pernah berhenti bergerak maju, jadi tidak lama setelah pasar perangkat keras ponsel mengalami revolusi, faktor bentuk lain semakin populer. Selain telepon dan komputer pribadi, perangkat seperti tablet layar sentuh dan komputer notebook kecil (netbook, jika Anda lebih suka istilah itu) mulai muncul di mana-mana. Ini bukan hanya layar kecil. Layar besar Designer Webs 54 dan beresolusi tinggi mulai menjadi jauh lebih umum daripada sebelumnya, dan itu akan sia-sia bagi para perancang web untuk tidak memanfaatkan ini. Singkatnya, spektrum ukuran dan resolusi layar semakin melebar setiap hari, dan membuat versi situs web yang berbeda yang menargetkan setiap perangkat individual bukanlah cara yang praktis untuk maju. Ini adalah masalah yang dihadapi oleh desain web yang responsif.
Sebelumnya, saya menyebutkan bahwa desain web responsif bukanlah satu teknologi, melainkan kumpulan teknik dan ide. Sekarang kami memiliki gagasan yang lebih baik tentang ruang masalah yang sedang kami tangani, mari kita lihat setiap bagian dari solusinya. Gagasan kunci pertama di balik desain responsif adalah penggunaan apa yang dikenal sebagai kisi cairan. Dalam memori baru-baru ini, Jasa Pembuatan Website Bali membuat 'tata letak cair' yang mengembang dengan halaman belum sepopuler membuat tata letak lebar tetap; desain halaman yang memiliki jumlah piksel tetap, dan kemudian berpusat pada halaman. Namun, ketika seseorang menganggap sejumlah besar resolusi layar hadir di pasar saat ini, manfaat tata letak cair terlalu besar untuk diabaikan. Grid fluida melewati beberapa langkah di luar tata letak cairan tradisional. Alih-alih mendesain tata letak berdasarkan piksel kaku atau nilai persentase sewenang-wenang, kotak fluida lebih dirancang dengan cermat Sekali lagi, ini hanya direkomendasikan, dan harus berfungsi sebagai titik awal. Dalam dunia yang ideal, Anda akan menyesuaikan tata letak Anda untuk mencocokkan dengan sempurna setiap lebar perangkat, tetapi sering kali Anda harus memilih dan memilih di mana Anda menghabiskan usaha Anda.
Tidak ada komentar:
Posting Komentar