Paling banyak satu email per minggu. Berhenti kapan saja dengan satu klik.
Transkrip
Narasi lengkap video ini. Kalimat yang sedang diucapkan disorot saat video diputar; klik kalimat untuk melompat ke sana.
Tampilkan transkrip
Pembuka
Halo, selamat datang kembali. Website Kopi Senja sudah lengkap di laptop. Tapi pelanggan Laras hampir semuanya membuka tautan dari HP. Di episode ini kita memeriksa tampilan HP, lalu meminta Claude merapikan tata letak, tombol, formulir, foto, dan menu supaya nyaman di layar kecil.
Langkah 1: Memeriksa tampilan HP
Istilah yang perlu kita kenal adalah responsif. Artinya satu halaman yang menyesuaikan diri dengan lebar layar. Di laptop tampil lebar, di HP tampil memanjang ke bawah. Kita tidak membuat dua website. Cukup satu halaman dengan aturan tampilan tambahan untuk layar kecil, dan Claude yang menuliskan aturannya. Mengapa tampilan HP paling penting? Pertama, pelanggan Kopi Senja datang dari tautan di Instagram dan WhatsApp, dan keduanya dibuka di HP. Kedua, kesan pertama terbentuk dalam hitungan detik. Halaman yang terpotong atau terlalu kecil biasanya langsung ditutup, dan pelanggan beralih ke kedai lain. Ketiga, alur pesanan kita berakhir di WhatsApp, yang juga dibuka di HP. Jadi seluruh perjalanan pelanggan, dari melihat menu sampai memesan, terjadi di layar kecil. Raka membuka halaman di laptop, lalu menyalakan mode tampilan HP di alat pengembang browser. Cara membukanya bisa berbeda di tiap browser, jadi cek menu bantuannya. Masalah pertama langsung terlihat: judul dan teks terpotong di kanan. Kedua, halaman bisa digeser ke samping. Bagi pengunjung HP, ini terasa seperti website yang rusak. Ketiga, tombol kirim terlalu kecil untuk ditekan dengan jari. Pelanggan bisa salah tekan, atau malah menyerah memesan. Keempat, huruf di formulir terlalu kecil. Di sebagian HP, kotak isian kecil juga membuat layar tiba-tiba membesar saat disentuh. Raka mencatat keempat masalah ini sebagai bahan perintah.
Langkah 2: Meminta tata letak responsif
Raka mengubah catatannya menjadi perintah. Ia menyebut lebar layar sasaran, lalu setiap masalah beserta hasil yang diharapkan: kartu satu kolom, tidak bisa digeser, tombol mudah ditekan, dan huruf formulir cukup besar. Lalu ia menambahkan batasan yang sangat penting: tampilan laptop jangan diubah sama sekali. Tanpa kalimat ini, Claude bisa saja ikut mengubah tampilan yang sudah disetujui Laras. Claude menjelaskan caranya: menambahkan aturan khusus layar kecil yang hanya berlaku bila lebar layar di bawah enam ratus piksel. Jadi tampilan laptop tetap sama. Claude memakai Edit pada file style. Keterangannya penting: menambah dua puluh dua baris dan tidak menghapus apa pun. Inilah garis besarnya. Baris pertama, media, adalah pembuka aturan khusus layar kecil. Di dalamnya, kartu menu dibuat satu kolom, halaman dikunci agar tidak bergeser ke samping, tombol dibuat tinggi dan selebar layar, dan huruf formulir enam belas piksel. Semua baris hijau, tidak ada baris merah. Artinya tidak ada aturan lama yang dihapus, sesuai janji tampilan laptop tidak berubah. Raka memilih Yes.
Langkah 3: Melihat hasilnya
Raka memuat ulang halaman dalam mode HP. Judul, teks, dan kartu menu kini muat di layar, tersusun satu kolom dari atas ke bawah. Halaman tidak lagi bisa digeser ke samping. Yang bergerak hanya gulir ke bawah, seperti website yang biasa dibuka di HP. Tombol kirim pesanan kini selebar layar dan cukup tinggi untuk ibu jari. Huruf di formulir terbaca jelas, dan layar tidak lagi membesar sendiri saat kotak isian disentuh. Terakhir, Raka mematikan mode HP. Tampilan laptop sama persis seperti sebelumnya. Kelima catatan kini bertanda centang. Mari bandingkan. Kartu menu yang tadinya terpotong kini tersusun satu kolom dan muat penuh. Halaman yang tadinya bisa digeser ke samping kini terkunci, hanya bisa digulir ke bawah. Tombol kirim yang tadinya kecil kini selebar layar dengan tinggi empat puluh delapan piksel, ukuran yang nyaman untuk jari. Raka juga mencoba tiga lebar layar berbeda, karena HP pelanggan berbeda-beda ukurannya. Ketiganya rapi. Raka tidak berhenti di empat masalah yang ia lihat. Ia meminta Claude memeriksa semua bagian halaman: masih adakah yang berisiko berantakan di layar tiga ratus enam puluh piksel? Laporkan dulu, jangan ubah. Claude membaca file index dan file style dari awal sampai akhir. Ternyata ada satu risiko yang belum terlihat: kotak testimoni diberi lebar tetap tujuh ratus piksel. Di HP, kotak itu akan melebihi layar. Mata kita melewatkannya karena testimoni ada di bagian bawah. Usul perbaikannya satu baris. Lebar tetap diganti menjadi selebar layar, tetapi tidak lebih dari tujuh ratus piksel. Jadi di laptop tetap sama, di HP menyesuaikan. Raka memilih Yes, lalu memeriksa bagian testimoni di mode HP. Kini rapi. Meminta Claude memeriksa seluruh halaman adalah cara murah menemukan masalah yang terlewat.
Langkah 4: Foto yang ringan
Selain tata letak, ada masalah yang tidak terlihat: berat foto. Raka meminta Claude memeriksa ukuran setiap foto di folder gambar. Claude melihat ukuran file. Foto pembuka ternyata hampir lima megabyte, dan satu foto lain hampir empat megabyte. Logo cukup ringan. Claude menjelaskan bahwa foto seberat itu membuat halaman lambat terbuka di HP, apalagi bila kuota pelanggan terbatas. Sarannya, buat salinan dengan lebar seribu dua ratus piksel, dan foto asli tetap utuh. Raka setuju, dengan batasan tegas: jangan timpa foto asli. Ini menjalankan perintah, jadi kotak izin muncul. Raka membaca isinya: memperkecil dua foto di folder gambar, bukan di folder bahan. Ia memilih Yes. Hasilnya, foto pembuka turun dari empat koma delapan megabyte menjadi sekitar tiga ratus kilobyte, belasan kali lebih ringan. Di mata, perbedaannya hampir tidak terlihat.
Langkah 5: Menu garis tiga dan daftar periksa HP
Satu masalah terakhir: di HP, menu atas berisi lima tautan memakan dua baris layar. Raka meminta tombol garis tiga khusus layar kecil, seperti yang sering kita lihat di aplikasi. Claude mengubah tiga file: tempat tombol di file index, tampilannya di file style, dan gerakan buka tutupnya di file script. Raka menyetujuinya satu per satu. Ringkasannya: di HP muncul tombol garis tiga, ditekan sekali membuka daftar menu, ditekan lagi menutup. Di laptop, menu tetap tampil seperti biasa. Raka mencobanya di mode HP, dan semuanya bekerja. Semua perbaikan lolos pemeriksaan, jadi Raka menyimpan versi baru dengan catatan: tampilan rapi di HP, foto diperkecil, dan menu garis tiga. Kotak izin muncul, dan Raka memilih Yes. Riwayat proyek kini punya empat versi, dari landing page pertama sampai tampilan HP. Simpan daftar periksa ini untuk setiap halaman baru. Pertama, tidak ada yang terpotong, dan halaman tidak bisa digeser ke samping. Kedua, tombol mudah ditekan dan huruf mudah dibaca tanpa memperbesar layar. Ketiga, formulir nyaman diisi dengan ibu jari, dari nama sampai tombol kirim. Keempat, foto ringan sehingga halaman cepat terbuka, bahkan dengan sinyal yang kurang baik. Kelima, dicek di beberapa lebar layar, lalu di HP sungguhan. Uji di HP sungguhan baru bisa dilakukan setelah website tayang online, dan itulah tujuan episode berikutnya. Tampilan di video ini simulasi, tetapi daftar periksa ini berlaku untuk website apa pun.
Selesai!
Website Kopi Senja kini responsif: kartu satu kolom, tidak bisa digeser ke samping, tombol dan formulir nyaman untuk jari, foto ringan, dan menu garis tiga di HP. Di episode berikutnya, episode terakhir sesi ini, kita menerbitkan website Kopi Senja secara gratis supaya bisa dibuka siapa saja dari HP mereka. Sampai jumpa!
Latihan mandiri
Kerjakan sendiri setelah menonton supaya materinya benar-benar melekat.
Buka halaman Anda dalam mode HP di alat pengembang browser dan catat masalahnya
Minta Claude merapikan tampilan layar kecil tanpa mengubah tampilan laptop
Minta Claude memeriksa ukuran foto dan memperkecil yang terlalu berat
Tanya materi kelas
Ketik pertanyaan atau kata kunci; kami carikan bagian episode ini yang menjelaskannya dan lompatkan videonya ke sana.
Catatan saya
Catatan disimpan bersama menit video saat ini dan hanya terlihat oleh Anda.
Tanya jawab
Bingung di salah satu langkah? Tanyakan di sini; pengajar dan peserta lain bisa menjawab.
Belum ada pertanyaan.
Pengajar
Tim Cerdas Inovasi Digital
Pengembang software, engineer BIM & 3D, dan praktisi AI
53 kelas video1.279 episode
Sehari-hari kami mengerjakan software, model BIM, game, dan otomasi AI untuk klien, lalu menjadikan pengalaman praktik itu kelas langkah demi langkah: setiap langkah diperlihatkan di layar dan dilengkapi panduan PDF.
