Website adalah kebutuhan mutlak bagi bisnis online. Namun, website yang dimaksud tak sekedar sebuah laman yang bekerja pada PC/laptop. Pada Januari 2020, terdapat 338.2 juta pengguna koneksi mobile di Indonesia, atau sebanyak 124% dari total populasi. Inilah pentingnya membuat desain website yang responsif dan dapat mengakomodasi semua perangkat.

Apa itu Responsive Website Design?

Obi Onyeador/Unsplash

 

Website yang didesain secara responsif berarti website memiliki kemampuan adaptif untuk menyesuaikan diri sesuai perangkat pengguna. Efeknya, responsive website design akan memiliki tampilan dan fitur yang berfungsi dengan baik, terlepas dari perangkat yang dipakai pengguna dalam mengakses website.

 

Masalahnya, banyak website bisnis yang didesain hanya untuk desktop atau komputer dan laptop. Saat Anda melihat tampilan website bisnis pada umumnya di perangkat mobile atau smartphone, Anda harus melakukan zoom, “mencubit” layar, atau melakukan scrolling tanpa henti hanya untuk melihat seluruh fitur dalam webpage. Interaksi yang terjadi via touchscreen pun umumnya terjadi secara berantakan dan tidak nyaman sama sekali.

 

Inilah mengapa seiring dengan meningkatnya jumlah pengguna mobile device, banyak usaha mempertimbangkan mobile-optimized web designs. Namun, lagi-lagi ada hambatan yang menanti karena jenis mobile device pun sangat banyak. Bukan tak mungkin bahwa suatu website yang bekerja dengan lancar pada iPhone, ternyata mengalami kegagalan pada brand ponsel lainnya.

 

Responsive web design akan membuat website usaha atau bisnis lebih mudah dan murah untuk dikelola. Pengguna pun akan merasakan pengalaman yang lebih menyenangkan. Manfaat lain adalah meningkatkan search visibility. Pasalnya, pengguna tak harus mengetikkan “m” sebelum URL utama untuk mengakses versi mobile-friendly dari website Anda.

 

Beberapa perusahaan mungkin memilih server hosting SSD atau teknologi yang  memungkinkan kita meningkatkan performa website secara unggul dan berkelanjutan. Anda dapat mempelajari lebih lanjut tentang hal tersebut dalam artikel perbedaan hosting SSD dan non-SSD.

Elemen Responsive Web Design

Nordwood Themes/Unsplash

 

Ethan Marcotte menjelaskan elemen teknis yang menjadi komponen utama dalam pembuatan responsive website design, yakni Viewport Meta Tag dan CSS3 Mediaqueries, fluid grids, flexible images, responsive images, breakpoints, dan polyfills.

 

Viewports adalah ukuran layar dari sebuah perangkat. Lebih detailnya, viewport mengacu pada area halaman web yang dilihat pengguna pada satu waktu, terlepas dari perangkat, browser, ukuran layar, resolusi layar, ukuran jendela, atau orientasinya.

 

Fluid layout atau grid merupakan tata letak yang dapat menyesuaikan pengukuran ukuran secara proporsional ke dalam rangka halaman web. Nantinya, tampilan konten otomatis akan membentang dan menyusut seiring perubahan ukuran viewport. 

 

Responsive images adalah gambar yang sifatnya responsif alias mampu menyusut atau bertambah ukuran, menyesuaikan dengan ukuran viewport. Gambar responsif tidak memiliki tinggi (height) maupun atribut atau nilai dalam dokumen HTML. Sebaliknya, gambar responsif menggunakan aturan CSS untuk mengubah ukuran gambar relatif terhadap wireframe dan viewport.

 

Media queries memungkinkan pengembang atau developer untuk mendeteksi perkiraan ukuran piksel dari area pandang saat ini. Pengembang kemudian dapat secara selektif menerapkan aturan CSS yang bekerja paling baik untuk ukuran viewport tersebut. Standar CSS3 memperluas kemampuan kueri media.

 

Langkah Membuat Desain Website yang Responsif

Beberapa langkah untuk membuat desain website yang responsif menurut Entrepreneur.com dan buku Responsive Web Design with HTML5 and CSS adalah sebagai berikut:

Menentukan Kapan Harus Melakukan Perubahan

Membuat desain yang responsif adalah cara yang sangat berbeda dalam mengelola elemen sebuah website. Umumnya, sangat sulit untuk menambahkan elemen desain responsif pada sebuah web konvensional. Sebelum membuat responsive website design, pikirkan apakah Anda siap untuk membuat situs baru atau bekerja keras membangun kembali website yang sudah ada. 

Memantau pola traffic mobile

Data dapat menjadi acuan yang baik dalam perencanaan web yang responsif. Seperti apa statistik kunjungan pengunjung? Lihat bagaimana segmen online Anda telah berkembang sejauh ini dan proyeksikan perkembangannya selama 2-5 tahun ke depan. Kurva pertumbuhan yang tampak curam menandakan bahwa keberadaan responsive web design sangat dibutuhkan. 

 

Domenico Loia/Unsplash

Menentukan browser yang tepat

Elemen ini sering dipertanyakan dalam perencanaan web yang responsif. Mulailah membangun situs web yang fungsional dan dapat diakses untuk browser paling dasar. Sebelum mempertimbangkan proyek web apapun, sangat masuk akal untuk memutuskan platform apa yang dapat mendukung anomali visual atau fungsional. 

Misalnya, jika sebanyak 25% pengunjung situs web Anda menggunakan Internet Explorer 11, Anda perlu mempertimbangkan fitur apa yang didukung browser tersebut dan menyesuaikannya dengan solusi yang sesuai. Perhatian yang sama diperlukan jika sejumlah besar pengguna Anda mengunjungi dengan OS ponsel lama seperti Android 4.

Untuk menentukan browser apa yang sebaiknya dipakai, pertimbangkan juga proyeksi return of investment. Bila biaya pengembangan dengan browser X lebih besar dibanding pendapatan yang akan dihasilkan oleh pengguna browser X, jangan ciptakan solusi untuk browser X.

Uji situs web kompetitor dalam berbagai perangkat

Anda bisa menyiapkan daftar URL usaha lain yang berada dalam satu sektor. Cek web mereka secara berkala lewat berbagai perangkat seperti komputer, ponsel pintar, maupun tablet. Mana yang paling mudah dan nyaman digunakan dan dinavigasikan? Gunakan ini sebagai guide bagi designer Anda. Anda bisa menyewa Jasa Pembuatan Website dengan portfolio website responsif. Jangan lupa memastikan sendiri bagaimana cara kerja website buatan mereka, bagaimana tampilan web yang telah mereka buat dan bagaimana setiap elemen bekerja pada macam-macam perangkat.

Caspar Camille Rubin/Unsplash

Membuat sendiri responsive web design

Untuk membuat desain web yang responsif, terdapat template pola yang bisa Anda peroleh secara cuma-cuma di internet. Dalam membuat website yang responsif, hindari penggunaan pixel widths pada elemen. Sebaliknya, gunakan ems dan satuan persen, termasuk untuk font. Mengatur sektor width dengan persen akan membuat fluiditas web bertambah.

Mengenai editor teks, tak ada aturan khusus tentang tools yang Anda pakai. Anda bisa memakai text editor sederhana yang bisa dipakai untuk menulis HTML, CSS, dan JavaScript secara efisien. Jika Anda condong pada preferensi semacam Sublime Text, Vim, Emacs, Nova, Visual Studio Code, atau bahkan notepad juga tak akan menjadi masalah. 

Hal yang sama berlaku untuk tools dalam pengembangan web design. Anda hanya perlu menyadari bahwa ada beberapa tools yang akan memangkas waktu dan aktivitas manual dalam membangun sebuah website.

Contohnya CSS preprocessor seperti Sass yang akan membantu Anda dalam mengorganisir kode, variabel, manipulasi warna, dan aritmatika. CSS preprocessors seperti PostCSS juga dapat melakukan otomatisasi pada pekerjaan yang menjenuhkan seperti CSS vendor prefixing. 

Linting dan validation tools dapat membantu Anda mengecek standar HTML, JavaScript, dan CSS kode selama Anda mengerjakan bagian lain. Hal ini tentu akan meningkatkan efektivitas proyek karena Anda tak perlu repot-repot mencari sumber error yang kadang hanya disebabkan isu sepele seperti typo