Saat ini, website tidak hanya diakses melalui komputer atau laptop. Smartphone menjadi salah satu perangkat yang banyak digunakan untuk membuka berbagai halaman web, mulai dari mencari informasi, membaca artikel, berbelanja, hingga mengakses layanan online.

Karena itu, membuat tampilan website yang nyaman di smartphone menjadi hal yang penting bagi developer maupun pemilik website.

Website yang terlihat bagus di layar komputer belum tentu nyaman ketika dibuka melalui smartphone. Teks bisa terlalu kecil, tombol sulit ditekan, gambar terlalu besar, atau pengguna harus menggeser layar ke samping untuk membaca konten.

Kondisi seperti ini tentu dapat membuat pengunjung merasa kurang nyaman dan memilih meninggalkan website.

Lalu, bagaimana cara membuat website agar tetap nyaman digunakan di layar smartphone? Berikut beberapa tips yang bisa diterapkan.

Apa Itu Tampilan Website Responsive?

Sebelum membahas tipsnya, penting untuk memahami konsep responsive web design.

Responsive web design adalah pendekatan dalam pengembangan website agar tampilan dan tata letaknya dapat menyesuaikan dengan berbagai ukuran layar.

Contohnya:

• Desktop memiliki layar yang lebih lebar.
• Tablet memiliki ukuran layar menengah.
• Smartphone memiliki layar yang lebih kecil.

Dengan desain responsive, elemen website dapat menyesuaikan ukuran layar tanpa membuat pengguna kesulitan membaca atau berinteraksi.

Contoh sederhananya:

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

Penggunaan ukuran relatif seperti % membantu elemen menyesuaikan ruang yang tersedia.

1. Gunakan Desain Responsive

Hal pertama yang perlu diperhatikan adalah memastikan website memiliki desain responsive.

Salah satu cara yang umum digunakan adalah CSS Media Query.

Contoh:

.container {
    width: 80%;
}

@media (max-width: 768px) {
    .container {
        width: 95%;
    }
}

Kode tersebut memberikan aturan berbeda ketika ukuran layar lebih kecil.

Dengan responsive design, layout website dapat dibuat lebih fleksibel pada smartphone.

2. Gunakan Meta Viewport

Jangan lupa menambahkan meta viewport pada bagian <head> HTML.

Contohnya:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Baris tersebut membantu browser menyesuaikan tampilan halaman dengan lebar perangkat.

Tanpa pengaturan viewport yang tepat, halaman website dapat terlihat terlalu kecil atau tidak tampil sebagaimana mestinya pada smartphone.

3. Gunakan Ukuran Font yang Mudah Dibaca

Teks menjadi salah satu bagian terpenting dalam website.

Jika ukuran font terlalu kecil, pengunjung akan kesulitan membaca artikel tanpa melakukan zoom.

Gunakan ukuran teks yang nyaman dan pastikan terdapat jarak yang cukup antara setiap baris.

Contoh:

body {
    font-size: 16px;
    line-height: 1.6;
}

Selain ukuran font, perhatikan juga:

• Jarak antarbaris.
• Panjang paragraf.
• Kontras teks dengan background.
• Ukuran heading.

Tujuannya sederhana: pengunjung bisa membaca konten tanpa merasa harus bekerja keras.

4. Buat Tombol yang Mudah Ditekan

Pada smartphone, pengguna berinteraksi menggunakan jari, bukan mouse.

Karena itu, tombol dan link harus memiliki area klik yang cukup nyaman.

Contoh:

button {
    padding: 12px 20px;
    font-size: 16px;
}

Hindari membuat tombol terlalu kecil atau meletakkan beberapa tombol terlalu berdekatan.

Contohnya tombol:

• Beli Sekarang
• Daftar
• Login
• Download
• Hubungi Kami

harus mudah dibedakan dan ditekan.

5. Buat Navigasi yang Sederhana

Menu website yang terlalu banyak dapat terlihat berantakan pada smartphone.

Jika website memiliki banyak halaman, gunakan navigasi yang sederhana dan mudah dipahami.

Contohnya:

Beranda
Artikel
Tutorial
Tentang
Kontak

Untuk website dengan banyak menu, Anda dapat menggunakan menu hamburger.

Tujuannya bukan membuat navigasi terlihat rumit, tetapi membantu pengunjung menemukan halaman yang mereka cari dengan cepat.

6. Pastikan Gambar Tidak Melebihi Layar

Gambar berukuran besar dapat menyebabkan masalah pada tampilan smartphone.

Salah satu aturan CSS yang umum digunakan:

img {
    max-width: 100%;
    height: auto;
}

Dengan aturan tersebut, gambar dapat menyesuaikan lebar container sehingga lebih kecil kemungkinan keluar dari area layar.

Selain tampilan, ukuran file gambar juga perlu diperhatikan karena gambar berukuran besar dapat memperlambat loading website.

7. Hindari Horizontal Scrolling

Pengunjung seharusnya tidak perlu menggeser layar ke kiri dan kanan hanya untuk membaca sebuah halaman.

Jika halaman memiliki horizontal scrolling yang tidak diperlukan, periksa kembali:

• Lebar container.
• Ukuran gambar.
• Ukuran tabel.
• Elemen dengan width tetap.
• Kode CSS.
• Elemen yang menggunakan posisi tertentu.

Contoh yang berpotensi menimbulkan masalah:

.container {
    width: 1200px;
}

Lebar tetap seperti itu dapat bermasalah ketika layar smartphone hanya memiliki lebar beberapa ratus piksel.

Gunakan ukuran yang lebih fleksibel jika memang memungkinkan.

8. Gunakan Layout yang Fleksibel

Saat membuat website responsive, hindari terlalu bergantung pada ukuran tetap.

Gunakan satuan seperti:

• %
• rem
• em
• vw
• vh

Contohnya:

.container {
    width: 90%;
    max-width: 1100px;
}

Dengan cara ini, layout dapat lebih mudah beradaptasi dengan ukuran layar yang berbeda.

9. Gunakan Flexbox atau CSS Grid

Flexbox dan CSS Grid sangat membantu dalam membuat layout responsive.

Contoh menggunakan Flexbox:

.container {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

Pada layar besar, elemen dapat ditampilkan berdampingan.

Ketika layar mengecil, elemen dapat disusun secara vertikal.

Cara ini membuat layout lebih nyaman digunakan di smartphone.

10. Jangan Terlalu Banyak Menggunakan Pop-Up

Pop-up dapat digunakan untuk berbagai kebutuhan, tetapi penggunaannya harus diperhatikan.

Pop-up yang memenuhi seluruh layar smartphone dapat mengganggu pengunjung, terutama jika sulit ditutup.

Jika memang membutuhkan pop-up, pastikan:

• Tombol tutup mudah ditemukan.
• Ukuran tidak terlalu besar.
• Konten tetap mudah dipahami.
• Tidak menghalangi informasi utama secara berlebihan.

Pengalaman pengguna sebaiknya tetap menjadi prioritas.

11. Perhatikan Kecepatan Loading

Website yang responsive belum tentu nyaman jika loading-nya sangat lambat.

Pengunjung smartphone bisa saja menggunakan koneksi yang berbeda-beda. Karena itu, website sebaiknya dibuat ringan.

Beberapa cara yang dapat dilakukan:

• Kompres gambar.
• Gunakan format gambar yang sesuai.
• Kurangi script yang tidak diperlukan.
• Minimalkan file CSS dan JavaScript jika relevan.
• Gunakan caching.
• Hindari elemen yang terlalu berat.

Semakin cepat halaman dapat ditampilkan, semakin nyaman pengalaman pengunjung.

12. Buat Paragraf yang Tidak Terlalu Panjang

Membaca artikel panjang melalui smartphone dapat melelahkan jika seluruh konten dibuat dalam paragraf yang sangat panjang.

Bandingkan:

Paragraf panjang:
Satu blok teks berisi banyak kalimat yang memenuhi layar.

Paragraf pendek:
Beberapa kalimat dipisahkan menjadi blok yang lebih kecil.

Untuk artikel website, paragraf pendek biasanya lebih mudah dipindai melalui layar smartphone.

Gunakan juga:

• Heading.
• Subheading.
• Bullet point.
• Bold untuk informasi penting.
• Tabel jika memang diperlukan.

13. Gunakan Kontras Warna yang Baik

Teks harus mudah dibedakan dari background.

Contoh yang baik:

Background terang
Teks gelap

Hindari kombinasi warna yang membuat teks sulit dibaca.

Selain memperhatikan estetika, kontras yang baik juga membantu meningkatkan keterbacaan bagi lebih banyak pengguna.

14. Jangan Memaksakan Desktop ke Smartphone

Kesalahan umum dalam membuat website responsive adalah hanya mengecilkan ukuran tampilan desktop.

Padahal, pengalaman menggunakan desktop dan smartphone berbeda.

Pada desktop, pengguna memiliki:

• Layar lebih lebar.
• Mouse.
• Keyboard.
• Ruang lebih banyak.

Sedangkan smartphone memiliki:

• Layar lebih kecil.
• Interaksi menggunakan sentuhan.
• Ruang terbatas.

Karena itu, desain smartphone perlu mempertimbangkan cara pengguna berinteraksi dengan perangkat tersebut.

15. Uji Website di Smartphone

Setelah website selesai dibuat, jangan hanya mengujinya melalui komputer.

Cobalah membuka website menggunakan smartphone secara langsung.

Periksa:

• Apakah teks mudah dibaca?
• Apakah menu mudah digunakan?
• Apakah tombol mudah ditekan?
• Apakah gambar tampil dengan benar?
• Apakah ada scrolling horizontal?
• Apakah halaman terasa lambat?
• Apakah form mudah diisi?

Anda juga dapat menggunakan fitur responsive device mode pada browser untuk mencoba berbagai ukuran layar.

Contoh Sederhana Website Responsive

Berikut contoh HTML sederhana:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Website Responsive</title>

    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .container {
            width: 90%;
            max-width: 1000px;
            margin: auto;
        }

        .content {
            display: flex;
            gap: 20px;
        }

        .box {
            flex: 1;
            padding: 20px;
            background: #f2f2f2;
        }

        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>

    <div class="container">

        <h1>Website Responsive</h1>

        <div class="content">

            <div class="box">
                <h2>HTML</h2>
                <p>
                    HTML digunakan untuk membuat struktur halaman website.
                </p>
            </div>

            <div class="box">
                <h2>CSS</h2>
                <p>
                    CSS digunakan untuk mengatur tampilan website.
                </p>
            </div>

        </div>

    </div>

</body>
</html>

Pada layar yang lebih besar, kedua box dapat ditampilkan berdampingan.

Ketika layar mengecil, keduanya akan disusun ke bawah sehingga lebih nyaman digunakan pada smartphone.

Checklist Website yang Nyaman di Smartphone

Sebelum website dipublikasikan, gunakan checklist sederhana berikut:

• ✅ Menggunakan responsive design.
• ✅ Memiliki meta viewport.
• ✅ Teks mudah dibaca.
• ✅ Tombol mudah ditekan.
• ✅ Navigasi sederhana.
• ✅ Gambar menyesuaikan layar.
• ✅ Tidak ada horizontal scrolling yang tidak diperlukan.
• ✅ Form mudah digunakan.
• ✅ Loading halaman cukup cepat.
• ✅ Pop-up tidak mengganggu.
• ✅ Sudah diuji pada smartphone.

Jika sebagian besar poin tersebut sudah terpenuhi, website Anda akan memiliki dasar pengalaman mobile yang lebih baik.

Kesimpulan

Membuat tampilan website yang nyaman di smartphone bukan hanya tentang membuat ukuran halaman menjadi lebih kecil. Developer perlu memikirkan bagaimana pengguna membaca konten, menekan tombol, membuka menu, mengisi form, dan berpindah halaman menggunakan layar sentuh.

Mulailah dengan responsive design, meta viewport, ukuran teks yang nyaman, navigasi sederhana, gambar yang fleksibel, serta layout menggunakan Flexbox atau CSS Grid.

Jangan lupa melakukan pengujian langsung melalui smartphone. Dengan begitu, Anda dapat menemukan masalah yang mungkin tidak terlihat ketika website hanya diuji melalui desktop.

Website yang baik bukan hanya terlihat menarik, tetapi juga nyaman digunakan di perangkat apa pun.