Unlimited Powerpoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. Responsive Web Design
Business

13 Tips & Trik Desain Web Cepat Responsif untuk 2018

by
Length:MediumLanguages:
This post is part of a series called How to Make Responsive Business Websites (Tutorial Guide).
How to Make Responsive Business Websites With Templates
20 Best Responsive HTML5 Website Design Business Templates

Indonesian (Bahasa Indonesia) translation by Zadip (you can also view the original English article)

Desain web responsif adalah suatu keharusan saat ini. Mengingat semakin banyak orang menggunakan perangkat seluler mereka untuk melakukan penelitian sebelum membeli produk serta untuk mengejar berita terbaru, bisnis Anda tidak dapat memiliki situs web yang tidak responsif.

Saat Anda menambahkan fakta bahwa  Google lebih menyukai situs web responsif selular dalam algoritme penelusuran mereka, jelas bahwa desain responsif tetap ada di sini. Jika Anda baru saja mendapatkan situs Anda dari dasar, tips untuk desain web responsif yang diuraikan dalam artikel ini akan membantu Anda mendesain situs yang menarik dan responsif. Dan jika Anda mendesain ulang situs yang ada, kiat yang sama akan berguna juga.

Bagaimana Menerapkan Desain Web Responsif

Kiat-kiat berikut untuk desain responsif akan membantu Anda memastikan situs Anda responsif dan ramah seluler juga. Berikut adalah beberapa kiat terbaik kami untuk desain web responsif.

1. Pelajari Bagaimana Pengunjung Anda Menggunakan Seluler

Pahamilah bahwa orang akan menggunakan situs web secara berbeda di komputer desktop daripada di perangkat seluler. Pertimbangkan untuk mensurvei pengunjung situs web Anda atau menggunakan analisis untuk mencari tahu mengapa mereka mengakses situs Anda dengan perangkat seluler dan halaman dan elemen mana yang paling mereka akses. Informasi ini akan membantu Anda memahami halaman dan elemen lain dari situs web Anda yang perlu tersedia di layar yang lebih kecil.

Misalnya, jika mereka melakukan pencarian cepat di situs Anda untuk mengakses informasi kontak Anda, maka pastikan bahwa halaman Kontak Anda muncul di navigasi seluler adalah pilihan cerdas.

2. Rencanakan Desain Anda Dahulu

Sebelum merancang situs Anda, ada baiknya untuk merencanakan tata letak terlebih dahulu. Bahkan, sebagian besar desainer web mulai dengan membuat wireframe dan kemudian desain visual situs web sebelum pindah ke bagian pengkodean. Ini tidak hanya akan membantu Anda menciptakan tampilan dan nuasa yang tepat seperti yang Anda inginkan, ini juga akan mempermudah Anda atau desainer Anda untuk menyesuaikan template dan mengintegrasikannya secara mulus dengan merk Anda.

Pastikan untuk membuat beberapa prototipe situs web Anda dan uji mereka pada berbagai ukuran layar untuk memastikan desain akhir akan responsif. Berikut beberapa alat yang Anda gunakan untuk prototipe responsif:

  • Adobe Edge Reflow. Alat Adobe memungkinkan untuk merancang situs web responsif secara visual dengan mengonversi file Photoshop ke dalam HTML dan CSS dan memungkinkan Anda menyesuaikan desain menggunakan breakpoint seluler.
  • InVision. Terima kasih kepada InVision, Anda dapat membuat prototipe interaktif situs web Anda. Pengguna dengan tautan dapat menguji navigasi, tombol, scrolling, dan banyak lagi dan memberi Anda umpan balik. Ini adalah alat yang berguna untuk melihat bagaimana situs web Anda akan berprilaku dalam konteks yang berbeda.
InVision website prototypes
  • Wirefy . Alat ini sangat berguna jika Anda mendasarkan desain Anda pada konten Anda terlebih dahulu. Ini memungkinkan Anda menggunakan gird responsif dan membuat wireframe situs Anda tanpa harus menghitung lebar dan presentase secara manual.

3. Berhati-hatilah dengan Navigasi

Navigasi adalah bagian terpenting dari situs web apa pun. Ini berfungsi sebagai peta jalan untuk pengunjung Anda dan memungkinkan mereka untuk dengan mudah mengakses halaman lain di situs Anda. Pada versi destrop situs Anda, navigasi Anda biasanya akan memiliki tautan yang terlihat ke semua halaman penting. Pada perangkat seluler, praktik rutinnya adalah menggunakan ikon hamburger dan menyembunyikan tautan dibelakangnya.

Namun, ini tidak selalu merupakan pendekatan terbaik karena beberapa pengguna mungkin tidak menyadari bahwa mereka perlu mengklik ikon untuk membuka menu dan meninggalkan frustasi karena mereka tidak dapat mengunjungi halaman ini. Pendekatan yang lebih baik adalah membiarkan item menu yang paling penting terlihat bahkan pada layar yang kecil dan menggunakan menu humburger untuk sisa tautan. Anda juga dapat menyertakan tautan ke halaman lain dalam teks di beranda Anda untuk memfasilitasi navigasi.

4. Optimalkan Gambar

Gambar memainkan peran penting dalam desain situs web Anda. Mereka dapat membantu Anda membuat hubungan emosional dengan pengunjung Anda dan memungkinkan mereka memvisualisasikan produk yang ingin mereka beli. Karena itu, sangat penting untuk gambar Anda dioptimalkan untuk web.

Ini berarti gambar harus disimpan dalam format yang sesuai JPG untuk gambar fotografi atau pemandangan dan PBG-8 untuk ikon dan logo yang memerlukan background transparan. Di atas ini, Anda harus mengurangi ukuran gambar menggunakan alat seperti TinyJPG dan mempertimbangkan penggunaan  gambar yang dioptimalkan untuk berbagai breakpoint seluler untuk mengurangi skala dan masalah bandwidth.

TinyPNG

5. Pertimbangkan Pendekatan Pertama Seluler

Cara lain untuk membahas desain responsif adalah versi asli situs web Anda terlebih dahulu. Ini memungkinkan Anda untuk melihat bagaimana gambar, teks, logo, dan elemen lainnya akan terlihat di layar yang lebih kecil. Jika mereka menampilkan tanpa masalah, maka Anda tidak akan memiliki masalah mangadaptasi desain Anda ke layar yang lebih besar.

6. Pelajari Cara Menggunakan Kueri Media

Kueri media pertama kali dibuat sebagai bagian dari proposal awal untuk CSS, tetapi tidak menjadi kenyataan sampai browser menambahkan dukungan resmi untuk mereka di tahun 2012. Peran utama kueri media adalah mereka memungkinkan Anda mengoptimalkan tata letak situs Anda untuk berbagai layar lebar.

Saat menggunakan kueri media, konten akan merespons berbagai kondisi pada perangkat tertentu. Singkatnya, permintaan media akan memeriksa resolusi, lebar dan orientasi perangkat dan menampilkan serangkaian aturan CSS yang tepat. Contoh kueri media tampak seperti ini:


7. Tambahkan Pemicu Keyboard dalam Bentuk

Tak perlu dikatakan bahwa formulir di situs Anda harus menyesuaikam dengan lebar dan ukuran layar. Namun, Anda dapat mengambil langkah lebih jauh dan memastikan bidang input memicu jenis keyboard yang benar. Anda dapat dengan mudah melakukannya dengan menambahkan elemen input ke kolom formulir Anda.

Kolom yang memerlukan input teks seperti nama, email, alamat dan lainnya harus memicu keyboard tekstual sementara setiap bidang input yang membutuhkan angka harus segera memicu keyboard numerik. Ini meningkatkan keseluruhan kesesuaian untuk seluler dan situs web Anda serta pengalaman pengguna. 

8. Pastikan Tombol Dapat Dengan Mudah Di-Klik pada Layar Lebih Kecil.

Jangan lupa untuk memberi perhatian ekstra pada tombol di situs web Anda. Karena layar real estat sangat berharga, mudah jatuh ke jebakan dan membuat tombol Anda lebih kecil sehingga muat di layar. Namun, ini juga membuat mereka lebih sulit untuk diklik.

Pastikan tombol Anda mudah dikenali:

  • Gunakan warna untuk membuatnya menonjol dari sisa halaman.
  • Gunakan persegi panjang atau lingkaran untuk mewakili tombol.

Sejauh ukurannya, pertimbangkan untuk menggunakan padding pada tombol Anda untuk meningkatkan area yang dapat diklik. Anda juga dapat mengikuti rekomendasi desain Material untuk akses tombol dan memastikan tinggi 36 dB. (1dp = 1px).

9. Optimize Typography

Ketika datang ke teks, Anda ingin memastikan bahwa teks dapat terbaca pada layar yang lebih kecil. Ukuran yang baik untuk body copy Anda adalah 16px atau 1em dan kemudian sesuaikan ukuran pos Anda. Pada saat yang sama, Anda akan ingin menyesuaikan tinggi baris teks Anda menjadi 1, 5em untuk memastikan garis paragraf Anda memiliki cukup ruang untuk bernafas.

Tip lain untuk desain situs web seluler adalah menggunakan font yang dapat dibaca. Hindari font dekoratif atau skrip untuk body copy atau item menu Anda karena sulit dibaca, terutama layar yang lebih kecil.

10. Gunakan Microinteractions

Salah satu tren terbesar yang perlahan-lahan masuk ke dalam desain web adalah penggunaan mikro-interaksi. Pada tahun-tahun sebelumnya, animasi dan fungsi interaktif mungkin dianggap "bagus untuk dimiliki/ bagi sebagian besar situs web bisnis. Namun, karena perancang telah menjadi sangat fokus pada pengalaman pengguna, penggunaan animasi benar-benar melonjak menjadi sorotan, khususbya dalam bentuk.

Mereka menyediakan pengguna dengan umpan balik cepat, yang sangat berguna pada perangkat seluler, alih-alih memuat ulang laman - yang dapat mempengaruhi penggunaan bandwidth Anda. Pertimbangkan contoh ini dari perusahaan pembersih akhir Australia. Saya menghubungi mereka tentang penggunaan microinteractions. Inilah yang mereka katakan:

Formulir pembayaran kami dirancang untuk membantu warga Sidney dengan mudah mendapatkan akhir dari kutipan pembersihan sewa. Kami benar-benar ingin menekankan fakta bahwa ini benar-benar instan dan tidak ada yang melakukan ini lebih dari melalui penggunaan microinteraction. Ketika Anda meminta penawaran, tanda terima akan menjiwai dari balik formulir, mengungkapkan harga total obligasi Anda bersih. Kami merasa bahwa momen "ta-da" kecil ini benar-benar telah meningkatkan tingkat penyelesaian kami selama proses pembayaran.
ThisIsNeat quote

Contoh hebat lain dari interaksi mikro berasal dari situs web Le Cafe Noir Studio. Toko online mereka menampakan animasi hati yang melintasi layar Anda ketika Anda menambahkan item ke keranjang Anda, menanamkan rasa apresiasi pelanggan langsung.

Le Cafe Noir Sudio website

11. Adopt Frameworks

Anda dapat menghemat banyak waktu untuk mendesain situs web responsive jika Anda menambahkan kerangka responsif ke alur kerja Anda. Kerangka kerja HTML seperti Bootstrap yang digunakan dalam kerangka HTML adalah titik awal yang bagus jika Anda ingin mendisain situs web yang mudah dan statis.

Bootstrap

Anda juga dapat memanfaatkan tema WordPress yang responsif awal jika Anda ingin memulai situs web yang lebih komplek dan memasukkan blog ke dalam strategi pemasaran Anda. Kerangka kerja seperti ini juga merupakan pilihan yang bagus jika Anda bukan coder berpengalaman tetapi ingin melakukan semuanya sendiri.

Responsive WordPress themes

12. Tetap pada Desain Minimalis

Desain Minimalis telah semakin populer selama beberapa tahun terakhir dan dengan alasan yang bagus. Ini menghilangkan semua kekacauan, memudahkan pengunjung untuk fokus pada konten Anda sehingga meningkatkan rasio konversi, dan membantu pembuatan situs web Anda lebih cepat karena menggunakan lebih sedikit elemen. Ini juga berjalan dengan baik dengan desain web responsif karena dapat membantu Anda menyoroti area situs web penting dan menarik perhatian pada ajakan bertindak Anda.

13. Pastikan Tombol Share Anda Tidak Memblokir Konten Anda

Menyertakan tombol berbagi di situs web Anda dapat membantu konten Anda mendapatkan lebih banyak visiblitas dan menghadilkan lebih banyak lalu lintas. Namun, tombol berbagi sering kali dapat memblokir konten Anda, sehingga sulit dibaca di layar yang lebih kecil. Pastikan tombol berbagi berskala baik di layar yang lebih kecil dengan mengujinya di perangkat seluler atau pertimbangkan untuk menonaktifkannya di layar yang lebih kecil dari 768px.

Cara Memeriksa Jika Situs Web Anda Responsif

Setelah Anda menerapkan kiat untuk desain web responsif di atas, itu berguna untuk memeriksa apakah situs Anda sekarang responsif. Ada banyak alat daring yang memungkinkan Anda menguji ketanggapan situs Anda. Berikut adalah tiga alat teratas yang kami sarankan Anda gunakan.

1. Tes Ramah Seluler oleh Google

Google memiliki versi uji coba mobile sendiri dan ini agak mudah. Anda memasukan URL situs web Anda dan klik Analiyze dan tunggu hasilnya. Jika situs Anda ramah seluler, Anda akan melihat pesan konfirmasi hijau. Jika tidak, tes akan menunjukkan alasan situs web Anda tidak lolos dan mengarahkan Anda ke sumber daya untuk memperbaiki masalah.

2. Screenfly

Screenfly oleh QuirkTools akan menunjukkan kepada Anda bagaimana situs web Anda akan terlihat pada ukuran layar yang berbeda. Alat ini tidak akan membantu Anda dengan menambahkan petunjuk dan saran yang bermanfaat, namun Anda dapat melihat bagaimana situs web Anda muncul di ponsel cerdas, dekstop, dan bahkan layar TV besar.

Screenfly

3. MobileTest.me

Akhirnya, MobileTest.me memungkinkan Anda memilih perangkat seluler tertentu, memasukkan URL Anda, dan berinteraksi dengan situs Anda seolah-olah Anda berada di perangkat yang ditentukan. Alat ini sangat berguna karena Anda melihat cara kerja situs web Anda di perangkat seluler, bentuk dan tombol pengujian, dan memahami apakah pengunjung Anda memahami pengalaman pengguna yang baik. Anda dapat menggunakannya sendiri atau bersama-sama dengan dua alat di atas memastikan situs web Anda benar-benar responsif.

MobileTestme

Dapatkan Dengan Trik Desain Web Responsif dan Tips

Membuat desain web responsif tidak lagi opsional. Ini suatu keharusan. Desain web responsif memudahkan siapa saja untuk melihat situs Anda tanpa masalah apapun dan dapat mempengaruhi reputasi merek Anda serta rasio konversi Anda. Dengan kiat dan trik desain web responsif diatas, Anda akan dapat membuat situs web bisnis Anda terlihat hebat, tidak peduli perangkat apa yang digunakan pengunjung Anda dan memastikan mereka memiliki pengalaman pengguna yang juga luar biasa.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.