Meningkatkan situs web retret Flywheel: Kisah pengembang

Seperti yang mungkin Anda ketahui jika Anda telah mengikuti Flywheel sebentar, kami mengadakan retret semua perusahaan di luar kantor dua kali setahun yang kami sebut sebagai Fly Fest. (Dan jika saya boleh: itu adalah ledakan.)

Seiring berkembangnya Flywheel, Fly Fest menjadi acara yang semakin besar, dengan jumlah aktivitas, sesi, dan peluang yang terus meningkat untuk naik level secara profesional dan terhubung dengan sesama Flywheeler kami dari seluruh dunia.

Pada titik tertentu, kami menyadari ada banyak hal yang harus dilacak – di mana saya seharusnya berada? Kapan mulainya? Bagaimana saya sampai di sana? Apa saja pilihan saya untuk sesi breakout?

Jadi, agar orang tidak bingung, atau tersesat, atau muncul di Las Vegas dengan ukuran sepatu yang salah (kalau tahu), diputuskan bahwa Fly Fest membutuhkan situs web khusus. Merupakan hak istimewa saya untuk melayani sebagai pengembang di situs web Fly Fest dan berbagi sedikit tentang proyek itu!

Persyaratan proyek

Itu adalah keputusan yang mudah untuk membangun situs web Fly Fest di WordPress, karena banyak alasan. Jelas, Flywheel berfokus pada WordPress, jadi ini adalah pesaing yang kuat langsung dari kelelawar. Tetapi Fly Fest juga memiliki beberapa pemangku kepentingan internal utama yang perlu dapat mengedit situs dengan cepat (pun intended), karena kemungkinan perubahan menit terakhir pada waktu, detail, atau lokasi.

Selain itu, situs ini memiliki beberapa jenis konten berbeda yang harus dapat diedit dan diurutkan secara independen dan fleksibel. Situs web Fest menampilkan jadwal keseluruhan, beberapa jenis acara yang berbeda, dan bagian FAQ yang semuanya perlu dihubungkan secara kohesif.

Terakhir, situs tersebut harus bekerja dengan baik di perangkat seluler, karena kemungkinan besar peserta akan mengeluarkan ponsel mereka untuk memeriksa waktu, lokasi, dan detail acara lainnya sepanjang hari. (Untuk alasan ini, kami memutuskan tata letak satu halaman, untuk menjaga jumlah klik dan pemuatan halaman seminimal mungkin.)

Mengingat persyaratan ini, memilih situs dan tema WordPress kustom, menggunakan jenis posting kustom dan Bidang Kustom Tingkat Lanjut, adalah "bukanlah hal yang cerdas," (meminjam ungkapan pendiri Rick Knudtson).

Tema dan plugin

Jenis posting khusus yang dibuat untuk situs termasuk item Jadwal (yang mengisi jadwal acara dengan waktu, tempat, dll.); Breakout (untuk setiap sesi breakout); Sosial (untuk semua ekstrakurikuler); dan Hal yang Perlu Diketahui , yang melengkapi bagian FAQ di situs.

Meskipun ada plugin yang tersedia untuk memudahkan pembuatan jenis posting kustom (atau CPT), untuk menjaga semuanya tetap ramping, saya memilih untuk mengkodekan CPT langsung ke dalam tema situs – yang, kebetulan, kami memutuskan untuk membuat kustom dari awal, mengingat bahwa situs sedikit lebih dari halaman splash. Itu berarti tidak banyak file template yang diperlukan, jadi tema anak atau bahkan tema pemula mungkin akan berlebihan. Faktanya, versi final dari tema hanya menggunakan total lima file template dasar: masing-masing satu untuk footer dan header; file fungsi, tentu saja; file template halaman depan, dan tentu saja, file indeks hanya untuk cadangan. (Plus, tidak banyak yang saya nikmati selain lapangan hijau.)

Beralih ke plugin: seperti yang sudah Anda ketahui jika Anda pernah bekerja dengan Bidang Kustom Tingkat Lanjut (dan jika belum, Anda ketinggalan!), plugin membuat pengalaman pengeditan menjadi lebih lancar dan lebih mudah bagi admin situs. Setiap jenis kiriman khusus memiliki kumpulan bidang khusus yang unik dan sederhana untuk diisi, dan petunjuk yang harus diikuti agar pembaruan situs menjadi mudah bagi siapa saja. Plus, halaman opsi admin keseluruhan dibuat dengan ACF (salah satu fitur favorit saya dari plugin versi Pro).

Selain Bidang Kustom Tingkat Lanjut, satu-satunya plugin yang kami pilih untuk digunakan adalah Urutan Jenis Postingan (untuk memungkinkan editor konten menarik dan melepas hal-hal seperti FAQ untuk menyusun ulang sesuai kebutuhan, daripada mengurutkannya berdasarkan tanggal); dan plugin kompresi gambar favorit pribadi saya, Kompres gambar JPEG & PNG oleh TinyPNG (suatu keharusan ketika pengguna akan mengunggah gambar mereka sendiri dari siapa yang tahu di mana). Itu dia!

Menghidupkan merek

Cukup dengan hal-hal teknis. Tahun ini, tema Fly Fest adalah “Level Up.” Desainer bintang kami merancang tampilan dan nuansa merek baru (permainan kata-kata sekali lagi dimaksudkan) untuk acara tersebut, merujuk tema itu dalam anggukan video game retro '80-an. Merek yang hidup memeriahkan setiap aspek retret, mulai dari barang curian hingga papan nama dan desain lingkungan.

Situs ini secara alami dirancang untuk menangkap nuansa aneh yang sama, hingga font pixelated. Saya berterima kasih kepada desainer fenomenal kami, Bryan dan Rese, atas tampilan dan tata letaknya; Saya melakukan yang terbaik untuk dengan setia membuat ulang maket beresolusi tinggi yang indah. Tetapi pekerjaan mereka sangat bagus sehingga mengilhami saya untuk mendorong lebih jauh sebagai pengembang situs, untuk melihat peluang lain apa yang mungkin ada untuk membawa kehidupan yang lebih jauh ke visi tersebut.

Pertama: kami berkolaborasi dalam cara membuat tampilan awal situs terlihat seperti layar splash dari game arcade, dan saya sangat senang dengan hasilnya (lihat di bawah!). Para desainer memberi saya animasi kembang api 8-bit di atas logo Fly Fest, serta salah satu maskot Fest kami (dijuluki "Fly Kid"). Saya menambahkan beberapa gerakan dan jejak warna-warni yang lebih panjang ke Fly Kid menggunakan keyframe CSS, hanya untuk menambahkan sedikit karakter (pun masih dimaksudkan). Menonton cukup lama dan Fly Kid berbalik dan berlari kembali ke arah lain, yang tampaknya terasa sangat seperti arcade bagi saya.

Sentuhan terakhir adalah membuat teks "Enter to start" berkedip, untuk memberikan seluruh layar splash getaran retro yang manis, seolah-olah Anda baru saja berjalan ke lemari arkade dengan kepalan tangan penuh saat Anda mendarat di situs:

Jelas, untuk situs web apa pun, navigasi itu penting. Itu terutama benar di sini, di mana Flywheelers mungkin melompat ke situs setiap saat untuk memeriksa detail penting dari acara yang sedang berlangsung.

Untuk mencapai tujuan itu dan mendorong inspirasi lebih jauh, saya memutuskan untuk membuat menu navigasi terlihat dan berperilaku seperti layar jeda video game; tekan ikon menu hamburger di bilah navigasi, dan Anda akan mendengar efek suara yang familiar saat layar "jeda" (yaitu, menu navigasi) terbuka di atas situs:

Saya dapat melanjutkan lebih lama tentang banyak sekali perkembangan kecil yang menghidupkan merek tersebut, tetapi saya terutama ingin menyebut karya desainer pada kursor khusus dan aset animasi serta ikon di seluruh situs; bintang-bintang berkelap-kelip, pesawat ruang angkasa melambung, dan ombak…eh, ombak, kurasa!

Saya juga bangga dengan permainan "banjir warna" di dekat bagian bawah halaman, yang – fakta menyenangkan – adalah CodePen tertanam yang saya buat di React beberapa waktu lalu, disesuaikan dengan merek situs. Kami merasa bahwa memiliki game yang sebenarnya di situs membantu membawa seluruh pengalaman ke level berikutnya. (Tahukah Anda? Anggap saja semua permainan kata-kata itu dimaksudkan.)

Tantangan teknis

Saya selalu mencari cara kreatif untuk memecahkan masalah dalam kode, dan situs ini memberikan beberapa peluang menarik.

Salah satu bagian favorit saya dari desain adalah komponen tombol akordeon ini. Mereka akan mulai sebagai kotak (untuk memberi pengguna gambaran umum konten yang mudah), tetapi dapat disentuh/diklik untuk mengungkapkan lebih banyak info:

Tantangan yang dihadirkan elemen akordeon ini adalah pada bayangan bawah/kanan yang tebal. CSS tidak memiliki cara untuk menghasilkan batas seperti itu (apalagi dengan cara yang akan berfungsi apakah akordeon diciutkan atau diperluas), jadi saya harus sedikit kreatif.

Solusinya adalah dengan menyadari bahwa CSS memungkinkan Anda untuk mengatur beberapa nilai box-shadow . "Perbatasan" yang Anda lihat sebenarnya adalah dua bayangan; satu offset ke kanan, satu sedikit ke kanan dan ke bawah. Deklarasi itu terlihat seperti ini:

box-shadow: 14px 0 0 var(--black), 2px 12px 0 var(--black)

(Omong-omong, jika Anda tidak terbiasa dengan sintaks var(–black) : itu adalah variabel CSS; mereka luar biasa, dan Anda dapat membaca lebih lanjut tentangnya di sini!)

Berbicara tentang akordeon, meskipun:

Elemen akordeon ini digunakan di sebagian besar bagian situs, yang berarti bahwa setiap bagian bisa sangat pendek, sangat tinggi, atau di mana pun di antaranya, hanya berdasarkan berapa banyak elemen yang diputuskan pengguna untuk diperiksa saat mereka menjelajahi halaman.

Di sebagian besar situs web, ini tidak akan menjadi masalah, karena latar belakang biasanya hanya berupa warna statis. Tapi di sini, di mana ada begitu banyak hal menarik yang terjadi di latar belakang, saya ingin memastikan bahwa tidak peduli ketinggian bagiannya, elemen dekoratif pseudo-acak runtuh atau melebar dengannya, dan Anda tidak pernah melihat terlalu banyak atau terlalu banyak. kecil.

Solusi untuk tantangan ini adalah dengan benar-benar memposisikan setiap elemen latar belakang di dalam bagian induknya, lalu mengatur properti atas dan kirinya secara dinamis dengan fungsi CSS calc, menggunakan kombinasi viewport dan unit persentase, kira-kira seperti ini:

svg.star:nth-of-type(4){
 left: 90%;
 top: calc(16vh + 20%);
}

Kombinasi terhitung unit viewport dan unit persentase membantu memberikan kesan acak pada tata letak, sekaligus memperhitungkan ukuran layar pengguna.

Telur Paskah

Pengamat yang cerdik mungkin telah memperhatikan jumlah koin di menu jeda, dan itu bukan hanya dekoratif. Saya memiliki banyak referensi membangun yang menyenangkan untuk waralaba video game klasik ke dalam situs, dan sangat menyenangkan melihat rekan kerja saya memposting kejutan mereka di Slack saat mereka membuka telur Paskah kecil ini.

Saya tidak akan merusak terlalu banyak di sini, tetapi saya akan mengatakan bahwa ada beberapa cara Anda dapat menambahkan total koin Anda, dan bahwa Anda harus memiliki suara ketika Anda pergi mencari rahasia. Perhatikan baik-baik, dan Anda akan menemukan banyak referensi untuk game Nintendo, Capcom, dan Konami…oh, dan ada juga sedikit penghargaan 8-bit untuk trek favorit Flywheel yang tersembunyi di situs, yang saya buat menggunakan onlinesequencer.net.

Selamat berburu dan terima kasih telah membaca!

Terus membaca: Alur kerja pengembangan yang sempurna

Mengembangkan situs WordPress tidak harus sulit. Faktanya, dengan alat yang tepat dan beberapa perangkat lunak sederhana, alur kerja pengembangan Anda bisa sangat menyenangkan! Dari mengembangkan secara lokal hingga menayangkan situs, kami telah mengumpulkan kiat dan trik terbaik kami untuk menyederhanakan proses dan memelihara situs selama bertahun-tahun yang akan datang.

Unduh di bawah ini!