Masa ketika kita melakukan pinch, zoom, dan scroll horizontal pada perangkat mobile sudah berlalu. Pengguna saat ini mengharapkan pengalaman yang mulus di perangkat mobile. Artikel ini menunjukkan cara Framer memberikan pengalaman sempurna tanpa modifikasi kode.

Evolusi Desain Responsif

Desain web responsif mengacu pada situs web yang secara otomatis menyesuaikan dengan perangkat atau browser apa pun. Apakah pengguna menggunakan smartphone atau komputer desktop, mereka dapat memperoleh pengalaman yang konsisten.

Pada awal desain responsif, desainer web memulai dengan versi desktop, lalu menyesuaikan desain untuk mobile dan tablet. Meskipun penggunaan breakpoint untuk desktop, mobile, dan tablet tetap menjadi inti dari desain responsif, jenis perangkat saat ini sangat beragam sehingga membuat desain untuk setiap resolusi tidak realistis.

Pada tahun 2018, resolusi yang paling banyak digunakan (360x640) digunakan oleh 23% pengguna, tetapi kini pangsa pasar satu resolusi tidak melebihi 8%.

Sumber: Statcounter

Penyesuaian ukuran otomatis menggunakan stack adalah salah satu alternatif. Dengan mengonversi desain menjadi stack, layoutnya secara otomatis menyesuaikan dengan perubahan, sehingga tidak perlu menyesuaikan breakpoint secara manual. Alat seperti grid layout fleksibel, positioning relatif, gambar dan tipografi responsif dapat digunakan dalam lingkungan ini.

Membuat Situs Web Responsif dengan Framer

Temukan berbagai fitur FramerFramer yang memungkinkan implementasi desain responsif lebih intuitif.

1. Mulai dengan Wireframe

Pembuatan wireframe di Framer berbeda dengan alat desain tradisional. Alih-alih membuat mock-up frame yang harus diremake untuk berbagai ukuran layar, komponen di FramerFramer dibuat responsif sejak awal. Pustaka komponen platform memiliki elemen yang telah dibangun sebelumnya yang otomatis menyesuaikan dengan berbagai ukuran layar.

• Navigasi dapat secara otomatis diubah untuk tampilan mobile

• Bagian hero dapat disesuaikan secara otomatis dengan ukuran layar

• Blok konten dapat disusun ulang sesuai dengan ruang kosong

Saat membangun wireframe, pertimbangkan hal-hal berikut.

• Cobalah untuk membuat fungsi navigasi yang sederhana dan intuitif

• Fokus pada hierarki konten dan pikirkan apa yang harus dilihat pertama oleh pengguna

• Pikirkan bagaimana elemen akan ditumpuk dan disusun kembali pada layar kecil

• Cobalah menggunakan komponen yang sudah dibangun di FramerFramer untuk mempercepat proses

Mulailah dengan blok konten dasar dan tambahkan kompleksitas secara bertahap selama pembuatan.

Dengan cara ini, Anda bisa fokus pada struktur dan hierarki desain tanpa terjebak oleh detail teknis. Navigasi berbeda secara signifikan antara lingkungan mobile dan desktop, jadi disarankan untuk menggunakan Framer untuk dengan mudah membuat berbagai versi yang sesuai dengan berbagai ukuran layar.

2. Menetapkan Breakpoints

Breakpoints adalah inti dari desain responsif. Namun, siapa pun yang pernah menangani media query CSS tahu bahwa breakpoints bisa rumit. Sesuatu yang terlihat bagus di 768px bisa berantakan di 767px atau 769px.

Framer dapat mengubah proses teknis ini menjadi pengalaman visual yang intuitif. Misalnya, menggunakan editor breakpoints FramerFramer, Anda bisa menarik handle untuk menetapkan breakpoint dan melihat perubahan desain secara real-time. FramerFramer juga memiliki mode pratinjau responsif yang memungkinkan Anda memeriksa bagaimana desain terlihat pada berbagai ukuran layar dengan segera.

Salah satu fitur terkuat Framer adalah menerapkan breakpoints secara otomatis saat mereka diubah. Begini cara kerjanya. Saat Anda mengubah layout dasar, perubahan itu secara otomatis diterapkan ke ukuran layar lainnya, mengurangi pekerjaan berulang secara signifikan.

3. Memprioritaskan Mobile

Dengan 61% lalu lintas web berasal dari perangkat mobile, mendesain untuk desktop terlebih dahulu tidak lagi masuk akal. Sebaliknya, mulailah dengan desain mobile dan sesuaikan untuk desktop kemudian. Mendesain untuk layar kecil dari awal membantu membuat keputusan strategis tentang konten yang akan disertakan.

Dengan Framer, Anda dapat dengan mudah menetapkan mobile sebagai layout dasar, lalu meningkatkan desain secara bertahap untuk layar yang lebih besar. Pertimbangkan hal-hal berikut.

• Memperluas layout satu kolom menjadi beberapa kolom

• Menampilkan konten tambahan pada layar lebih besar

• Menambahkan interaksi yang lebih canggih untuk pengguna desktop

• Mengonversi navigasi mobile menjadi ramah desktop

• Menyesuaikan ukuran tipografi sesuai layar untuk meningkatkan keterbacaan

• Mengoptimalkan layout gambar dan cropping untuk ukuran layar berbeda

Navigasi adalah salah satu bagian paling menantang dalam desain responsif mobile, tetapi Framer membuatnya mudah dikelola. Pola mobile seperti hamburger menu atau navigasi bawah dapat dengan mudah diimplementasikan sebagai menu lengkap pada desktop, sambil tetap mempertahankan konsistensi merek dan pengalaman pengguna.

4. Membuat Grid Layout yang Fleksibel

Fitur Grid di Framer memberikan sistem grid responsif yang intuitif. Dengan memanfaatkan fitur auto-layout, FramerFramer secara otomatis menangani berbagai masalah responsif yang umum terjadi, seperti menjaga rentang, menjaga jarak antar elemen, dan menyelaraskan layout saat ukuran berubah.

Menggunakan sistem grid di Framer, Anda dapat melakukan hal berikut.

• Menentukan jumlah kolom untuk setiap breakpoint

• Mengatur bagaimana elemen diperluas di kolom

• Mengelola aliran dan pengaturan ukuran elemen

• Menyesuaikan jarak secara otomatis

Salah satu fitur terkuat dari sistem grid Framer adalah kemampuan untuk menangani konten dinamis seperti koleksi CMS, konten buatan pengguna, dan gambar dinamis. Ketika item baru diunggah, sistem grid FramerFramer menjaga layout tetap sama seperti saat pertama kali didesain.

5. Memanfaatkan Stack dan Posisi Relatif

Sementara grid menangani struktur halaman keseluruhan, stack di Framer mengelola bagaimana elemen dalam struktur itu berhubungan satu sama lain. Stack adalah kontainer cerdas yang secara otomatis menangani rentang dan penyelarasan antar elemen. Anda dapat mengatur elemen secara horizontal (baris) atau vertikal (kolom), dan saat ukuran layar berubah, stack mempertahankan rentang yang sesuai.

Kuncinya adalah posisi relatif. Alih-alih memaku elemen ke koordinat tertentu, stack memungkinkan elemen menyesuaikan posisinya menurut kontainer dan elemen yang berdekatan.

Penggunaan umum stack meliputi:

• Menu navigasi yang bertransisi mulus antara desktop dan mobile

• Layout kartu yang menjaga rentang konsisten terlepas dari kontennya

• Antarmuka formulir yang menyelaraskan input dan label dengan sempurna

• Seksi konten yang diterapkan dengan rapi di semua ukuran layar

Kekuatan sebenarnya dari stack terungkap ketika mereka ditumpuk satu sama lain. Menggabungkan stack horizontal dan vertikal untuk membuat layout canggih, masing-masing stack memiliki properti auto-layoutnya sendiri seperti "mengisi kontainer" dan "membungkus konten". Pelajari lebih lanjut tentang perbedaan antara stack dan grid di Framer's Academy.

6. Mengoptimalkan Gambar dan Tipografi

Pendekatan gambar responsif di Framer lebih dari sekadar menyesuaikan ukuran. Ini mengoptimalkan kinerja dengan penundaan pemuatan, secara otomatis menghasilkan set sumber gambar responsif, dan menggunakan alat pemangkasan otomatis untuk memastikan bagian utama tetap fokus saat ukuran gambar diubah.
Alat Framer membantu memastikan gambar terlihat memukau dalam ukuran apa pun dengan fungsi-fungsi berikut.

• Menyediakan ukuran gambar yang sesuai untuk berbagai perangkat

• Menggunakan SVG bila memungkinkan untuk memberikan skala tajam

• Menyediakan posisi dan ukuran yang dapat disesuaikan

• Menyediakan ukuran gambar sesuai perangkat

• Mendukung skala tajam dengan pemanfaatan SVG

• Menyediakan pemuatan yang ditunda dan pemotongan dinamis

Sistem tipografi Framer memungkinkan Anda mengelola ukuran font, spasi, dan rentang pada berbagai breakpoint. Selain itu, FramerFramer mengoptimalkan pemuatan font untuk mencegah perubahan layout dan menjaga keterbacaan teks saat font kustom sedang dimuat.

Untuk mencegah masalah desain responsif, Anda dapat mengatur ukuran font fluida yang meluas mulus. Juga, aktifkan ukuran minimum dan maksimum untuk mencegah teks menjadi terlalu kecil atau terlalu besar. Gunakan fungsi text fitting Framer untuk merancang header dan paragraf yang menarik yang disesuaikan dengan browser atau sekction.

Pengujian Responsif Sebelum Peluncuran

Framer menawarkan dua cara kuat untuk menguji responsivitas situs sebelum peluncuran.

1. Mode pratinjau: Menggunakan mode pratinjau bawaan, Anda dapat melihat desain pada berbagai perangkat tanpa meninggalkan editor. Tersedia langsung untuk memeriksa lingkungan perangkat yang berbeda di dalam editor

2. Pengujian perangkat nyata: Melalui tautan berbagi Framer, Anda dapat melakukan pengujian langsung pada smartphone, tablet, monitor, dan lingkungan lain. Bereksperimen dengan desain pada berbagai smartphone, tablet, dan monitor memungkinkan Anda memeriksa apakah semuanya berfungsi seperti yang diharapkan dan mengidentifikasi bug sebelum meluncurkan situs web baru.

Membangun Situs Web yang Indah di Semua Ukuran Layar

Desain web responsif telah menjadi elemen penting, dan Framer menawarkan alat untuk memudahkan implementasinya. Buat situs web yang fleksibel dan skalabel bukan hanya layout statis.

Lihat template Framer dan mulailah membuat desain responsif. Kunjungi galeri untuk melihat situs web responsif yang dibuat orang lain, dan daftar untuk akun gratis Framer untuk mulai membangun situs web responsif hari ini.

Artikel ini adalah konten yang diterjemahkan dan diadaptasi dari ‘How to design responsive websites without code’ dari blog resmi Framer.