Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Yii

Membangun Startup Anda: Meningkatkan Web Seluler

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: The Dashboard Foundation
Building Your Startup: Issue Tracking and Feature Planning

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

Final product image
What You'll Be Creating

Tutorial ini adalah bagian dari seri Membangun Startup Anda Dengan PHP pada Envato Tuts+. Dalam seri ini, saya memandu Anda melalui peluncuran startup dari konsep ke realitas menggunakan aplikasi Meeting Planner saya sebagai contoh nyata. Setiap langkah di sepanjang jalan, saya akan merilis kode Perencana Pertemuan sebagai contoh open-source yang dapat Anda pelajari. Saya juga menangani masalah bisnis terkait startup saat muncul.

Aplikasi Seluler vs. Web Responsif

Secara strategis, membangun aplikasi mobile untuk Meeting Planner di iOS dan Android masuk akal, tetapi secara finansial saya belum mengangkat sumber daya untuk ini. Mathew Ingram baru-baru ini menulis di Fortune bahwa karena kebanyakan penawaran untuk pengguna ponsel, "setidaknya secara statistik—tidak ada yang akan mengunduh aplikasi Anda." Jadi, meski tentu saja saya dapat meningkatkan pengalaman Perencana Pertemuan dengan aplikasi, kemungkinan pengadopsiannya tidak langsung masuk akal dengan sumber daya saya saat ini.

Namun, sangat penting untuk menjadikan Meeting Planner pengalaman web yang luar biasa di perangkat seluler.

Dalam episode hari ini, saya akan meninjau dan membahas perubahan yang berorientasi untuk melakukan hal itu—pada dasarnya menjadikan aplikasi web kami lebih sebagai situs web responsif, mudah digunakan di perangkat seluler dan tablet. Lihat hasilnya (di ponsel atau tablet Anda)!

Salah satu tantangan coding untuk episode hari ini adalah bahwa saya bukan seorang desainer atau CSS coder. Beberapa hari aku merasa sepertinya aku bahkan tidak perlu coding sendiri; di Microsoft Saya adalah Manajer Program Grup, yaitu kami memiliki desainer grafis, laboratorium kegunaan yang lengkap, CSS tidak ada, dll.

Memimpin pekerjaan ini, saya merasa terintimidasi mencoba mempelajari kueri media, breakpoint, dan CSS khusus—ini bukan materi yang saya mahasakan, dan ini sangat memakan waktu dan sangat berorientasi pada detail. Namun, dalam waktu 48 jam, semuanya datang dengan cepat dan indah. Jika Anda memindai ke bagian bawah cerita, Anda akan melihat bagaimana beberapa baris CSS pada akhirnya diperlukan untuk semua perubahan. Tiba-tiba ketika saya mulai menelusuri Meeting Planner di ponsel saya, saya semakin bersemangat untuk mengetahui seberapa baik pengalaman web responsif baru ini.

Terus terang, itu membuat saya merasa bahwa aplikasi seluler khusus tidak diperlukan saat ini. Kami dapat membangun pemirsa kami dengan pengalaman web seluler untuk saat ini, terutama melalui fase alpha dan beta mendatang yang penting.

Sementara itu, jika Anda belum mencoba Perencana Pertemuan, lanjutkan dan jadwalkan pertemuan pertama Anda dari ponsel atau tablet. Saya berpartisipasi dalam rangkaian komentar di bawah ini, jadi beri tahu saya tentang pengalaman Anda! Anda juga dapat menghubungi saya di Twitter @reifman. Saya selalu tertarik dengan permintaan fitur baru dan topik tutorial yang disarankan.

Sebagai pengingat, semua kode untuk Perencana Pertemuan ditulis dalam Kerangka Yii2 untuk PHP. Jika Anda ingin mempelajari lebih lanjut tentang Yii2, periksa seri paralel kami, Pemrograman Dengan Yii2.

Status Seluler Saat Ini

Untuk memulai, saya menjelajahi status layanan Perencana Pertemuan saat ini dengan ponsel iOS saya dan mengambil tangkapan layar dari aplikasi awal. Itu tidak buruk, tapi itu tidak bagus. Mari kita tinjau apa yang saya temukan.

Beranda

Halaman beranda terlihat bagus, meskipun secara estetis saya berharap teks utama, "Membuat Penjadwalan Mudah", akan sedikit berbeda, yaitu pada tiga garis panjang yang kira-kira sama. Namun, Bootstrap mengelola menu drop-down dengan baik, dan seluruh halaman berfungsi secara fungsional:

Meeting Planner Responsive Web - Home Page

Laman Pendaftaran

Sekali lagi, selain tata letak estetika judul dan konsistensi margin kiri, halaman pendaftaran pada dasarnya berfungsi:

Meeting Planner Responsive Web - Signup Page

Merencanakan Pertemuan

Setelah orang tersebut mulai merencanakan pertemuan, halaman indeks saat ini perlu perbaikan. Ada terlalu banyak kolom. Subjek dikencangkan. Mungkin informasi yang saya pilih untuk ditampilkan di sini di tempat pertama tidak penting. Dan, tentu saja, opsi perintah tidak terlihat. Halaman tersebut perlu disesuaikan untuk seluler secara lebih signifikan.

Meeting Planner Responsive Web - Meetings List

Halaman lain berfungsi dengan baik, seperti permintaan pertemuan baru untuk subjek. Namun, pengguna seluler mungkin tidak ingin ditawari bidang textarea untuk mengetik pesan yang lebih panjang yang memperkenalkan rapat:

Meeting Planner Responsive Web - New Meeting Subject Form

Menambahkan peserta juga menjadi sedikit disfungsional dengan ekstensi bootstrap yang kami gunakan:

Meeting Planner Responsive Web - Add a Person Form

Dan pandangan perencanaan untuk tempat dan waktu mulai rusak. Sekali lagi, desain desktop menawarkan terlalu banyak detail dan terlalu banyak opsi untuk seluler:

Meeting Planner Responsive Web - When Times Form with Switches

Area Lain

Halaman Tempat berfungsi secara fungsional tetapi membutuhkan tata letak tombol yang ditingkatkan. Dan mungkin fungsi ini tidak diperlukan untuk pengguna seluler.

Meeting Planner Responsive Web - Add Places Form

Demikian pula, tab desktop dan tata-letak foto rusak pada seluler. Ini juga perlu dipikirkan kembali:

Meeting Planner Responsive Web - Profile Settings

Mengembangkan Solusi

Tentu saja, ada banyak area di situs yang bisa diperbaiki. Beberapa area perlu dipikirkan kembali untuk seluler, sebagian diminimalkan, dan lainnya hanya disesuaikan secara estetis. Mari kita mulai bekerja.

Pendekatan Berbeda

Saya memiliki cukup banyak pengalaman nol dengan pertanyaan media dan breakpoint ketika saya memulai tugas ini. Selama beberapa hari sebelumnya, saya menunda menyelam ke dalam apa yang saya takutkan adalah rawa yang tidak dikenal. Saya mulai dengan kueri media praktis untuk menggoda editor saya:

Bercanda membantu memecahkan es mental di kepalaku. Saya selalu tersedia dan terlihat oleh dewa editorial Envato.

Ada sejumlah area yang mulai saya pertimbangkan:

  • Menyederhanakan fungsionalitas, terutama dengan proses perencanaan rapat
  • Mengidentifikasi informasi penting untuk ditampilkan untuk seluler
  • Menyembunyikan beberapa fungsi pada perangkat seluler, seperti elemen, kolom, dan opsi menu
  • Bekerja dengan media-query dan breakpoint
  • Tetap fokus pada area terpenting untuk rilis alfa

Satu konsep bermanfaat yang terus saya temukan di web adalah "Desain untuk Seluler Pertama." Sayangnya, saya sekolah lama dan tidak melakukan itu. Tapi itu membantu untuk memikirkan kembali setiap halaman dengan tema ini: Ponsel Pertama.

Sebagai contoh, indeks pertemuan dengan empat kolom tabel harus pergi dan membingungkan pada telepon potret.

Saya terus bertanya pada diri sendiri bagaimana saya akan mendesain semua halaman untuk bekerja dari telepon.

Pemanasan Hingga Kueri Media

Menu Drop-Down

Butuh beberapa upaya untuk mengatasi keraguan saya saat menyelam ke dalam CSS yang mendalam. Untuk pemanasan, saya mulai bekerja meminimalkan menu drop-down dan menyederhanakan ruang lingkup fungsi mobile.

Untuk saat ini, saya memutuskan untuk membuat kueri media dasar tunggal untuk perangkat yang lebih kecil dan menggunakannya di seluruh situs. Berikut adalah frontend/site.css:

Membuat perubahan ternyata relatif sederhana. Untuk setiap item menu yang ingin saya sembunyikan di seluler, saya hanya perlu menambahkan properti CSS, misalnya. menuHide.

Berikut adalah properti menuHide ditambahkan ke /frontend/views/layouts/main.php:

Tiba-tiba, menu drop-down memiliki lebih sedikit kerumitan:

Meeting Planner Responsive Web - Responsive Dropdown Menu

Secara bertahap, saya menyadari bahwa menyederhanakan dan mengurangi fungsi di web seluler akan menciptakan pengalaman terbaik. Orang-orang selalu dapat kembali ke desktop mereka untuk mengakses fitur lain, setidaknya untuk saat ini. Ini juga akan menjadi peluang untuk mengumpulkan umpan balik dari orang-orang selama fase alfa dan beta.

Breadcrumbs

Tata letak default Yii termasuk widget breadcrumb yang dimuat melalui komposer dan lebih sulit dikustomisasi. Saya bereksperimen dengan menambahkan CSS untuk menyembunyikan elemen pertama dan pembagi "/" pertama:

Meeting Planner Responsive Web - Desktop Breadcrumbs

Butuh beberapa waktu tetapi membuat saya menyelam lebih dalam ke CSS, misalnya. konten nth-child, dan membangun kepercayaan diri saya:

Saya tidak tahu bahwa CSS dapat memodifikasi konten.

Inilah hasilnya:

Meeting Planner Responsive Web - Responsive Breadcrumbs

Spasi Tombol Ditingkatkan untuk Ujung Jari

Selanjutnya, saya menambahkan CSS untuk memberikan padding tambahan untuk tombol di ponsel untuk menekan ujung jari agar tidak rentan kesalahan. Misalnya, berikut adalah tombol kirim dan batal pada perangkat desktop:

Meeting Planner Responsive Web - Default Button Spacing Desktop

Ini adalah CSS yang saya gunakan dan mulai menambahkan berbagai tombol dan ikon yang dapat diklik di sekitar situs:

Inilah bentuknya seperti di seluler—perhatikan padding baru antara Submit dan Cancel:

Meeting Planner Responsive Web - Enhanced Button Spacing

Pembungkusan Teks Responsif

Meeting Planner Responsive Web - Home Page with Text Wrap

Menjadikan home page heading, "Scheduling Made Easy," membungkus sebenarnya ternyata memakan waktu sedikit lebih lama. Pada akhirnya, saya menambahkan tag <br /> ke teks dan menyembunyikannya secara default ketika tidak di ponsel. Tetapi saya juga harus menambahkan spasi dalam tag span dengan item itemHide.

Inilah CSS untuk .rwd-break. Ini disembunyikan secara default dan hanya muncul di layar responsif, melanggar teks header seperti yang saya inginkan.

Tanpa spasi span, teks akan pecah tanpa centering yang tepat.

Menyederhanakan Halaman Daftar Rapat

Karena saya pikir "seluler pertama" semakin banyak, saya menyadari bahwa pengguna berbasis telepon tidak memerlukan semua fungsi pada halaman saya. Mereka tidak membutuhkan semua tab, mereka tidak membutuhkan tabel data tentang rapat, dan mereka tidak membutuhkan semua opsi tombol ikon. Bahkan, untuk halaman pertemuan, mereka hanya perlu dapat membuka rapat (mereka dapat membatalkan pertemuan dari halaman tampilan pertemuan itu sendiri).

Saya menggabungkan kolom subjek dan peserta menjadi satu kolom vertikal, dan hasilnya terlihat jauh lebih baik.

Meeting Planner Responsive Web - Responsive Meeting List

Di /frontend/views/meeting/index.php, saya menambahkan .tabHide ke dua dari empat tab:

Dan, di /frontend/views/meeting/_grid.php, saya merestrukturisasi kolom untuk menggabungkan subjek dan peserta:

Menyembunyikan ActionColumn memerlukan sedikit riset, tetapi terlihat seperti ini:

Pada akhirnya, perubahan ini menyederhanakan antarmuka desktop dalam proses meningkatkan seluler.

Tantangan Besar: Penjadwalan Pertemuan

Meeting Planner Responsive Web - Existing When Times Planning Form

Sejauh ini tugas yang paling menantang bagi saya adalah menyesuaikan halaman penjadwalan rapat di atas untuk seluler. Itu berantakan di telepon, dan saya merasa takut. Secara terpisah, saya selalu khawatir bagaimana saya akan mengadopsi antarmuka ini untuk beberapa peserta di masa depan—persyaratan responsif mungkin membuat ini lebih sulit.

Penggunaan saya dari ekstensi Bootstrap Beralih Widget Kartik untuk Yii memiliki keterbatasan tersendiri ketika harus memodifikasi tata letak. Menempatkan elemen-elemen ini dalam kolom tabel bekerja dengan baik, tetapi membuat kolom tabel responsif tidak sesederhana dengan kueri media.

Tentu saja seperti yang saya tunjukkan dengan halaman daftar Rapat di atas, menyembunyikan kolom itu mudah, tetapi memodifikasi penempatannya tidak terlalu banyak.

Saya mulai dengan menjauh dari desain meja horizontal untuk menunjukkan waktu dan pilihan tempat dan menuju gaya potret vertikal. Dan, ternyata, tabel dan kolom memiliki kapasitas sendiri untuk membungkus dengan HTML5 dan CSS tanpa pertanyaan media.

Anda dapat melihat halaman rencana pertemuan yang disempurnakan dan kosong di sini:

Meeting Planner Responsive Web - Responsive New Plan a Meeting Form

Setiap tampilan sebagian membutuhkan kolom css tambahan untuk tata letak Bootstrap yang ditentukan sebelumnya agar berfungsi dengan baik, misalnya. kiri col-xs4 dan col-xs-8 kanan. Inilah contohnya:

Membuat tempat dan jadwal penjadwalan menjadi responsif adalah yang paling sulit. Saya bereksperimen dan akhirnya berhasil menggunakan kolom tabel yang secara alami membungkus saat jendela konten (atau perangkat) menyusut.

Saya juga menghilangkan status peserta di kolomnya sendiri dengan tombol yang dinonaktifkan—Anda tidak dapat mengubahnya, jadi mengapa menampilkannya sebagai tombol? Sebagai gantinya, saya membuat ringkasan tekstual tentang status peserta Anda untuk tempat dan waktu. Berikut kode untuk getWhenStatus():

Inilah tampilannya di desktop—perhatikan tata letak lanskap dari deretan teks dan pengalih:

Meeting Planner Responsive Web - Desktop Layout of Times and Places Form

Dan inilah versi seluler, lebih banyak potret dan ditumpuk tanpa pertanyaan media:

Meeting Planner Responsive Web - Final Responsive Meeting Planning Form

Sebagai contoh, inilah CSS untuk cara saya mengkodekan kolom tabel pada panel When (times):

Dan inilah kode untuk formulir parsial ini dari /frontend/views/meeting-time/_list.php:

Hal terbaik tentang perubahan tampilan rapat ini adalah mereka akan menyederhanakan tantangan desain UX untuk pertemuan di masa depan dengan banyak peserta. Terlepas dari jumlah orang yang menghadiri rapat, tampilan pada dasarnya tetap sama seperti di atas. Pada dasarnya, ini memecahkan penghalang terbesar bagi saya meluas ke beberapa pertemuan peserta—desain UX.

Apa berikutnya?

Saya harap Anda menikmati mengikuti ketika saya bekerja pada hal-hal kecil desain web responsif. Karena kode dan perubahan visual pada situs bersatu, saya merasa sangat puas dan terkesan dengan betapa sedikit CSS diperlukan. Jika digabungkan, Anda dapat melihatnya di sini:

Usaha desain saya di masa depan akan dimulai, "Apa yang terlihat seperti ini di ponsel?"

Seperti disebutkan, saat ini saya sedang bekerja keras untuk mempersiapkan Perencana Pertemuan untuk rilis alfa. Saya terutama berfokus pada peningkatan kunci dan fitur yang akan membuat rilis alpha berjalan lancar.

Saya melacak semuanya di Asana sekarang, yang akan saya tulis di tutorial lain; ini sangat membantu. Ada juga beberapa fitur baru yang menarik yang masih dalam perjalanan.

Saya juga mulai lebih fokus pada upaya pengumpulan investasi yang akan datang dengan Perencana Pertemuan. Saya baru mulai bereksperimen dengan WeFunder berdasarkan implementasi aturan crowdfunding baru SEC. Silakan pertimbangkan mengikuti profil kami. Saya juga akan menulis lebih banyak tentang ini di tutorial selanjutnya.

Sekali lagi, ketika Anda menunggu lebih banyak episode, jadwalkan pertemuan pertama Anda (dari ponsel Anda!). Juga, saya akan menghargai jika Anda berbagi pengalaman Anda di bawah ini di komentar, dan saya selalu tertarik dengan saran Anda. Anda juga dapat menghubungi saya di Twitter @reifman secara langsung. Anda juga dapat mempostingnya di situs dukungan Meeting Planner.

Tonton tutorial yang akan datang dalam seri Membangun Startup Anda Dengan PHP.

Link Terkait

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.