Cara Belajar Desain Web dari Kesalahan Anda

Diterbitkan: 2019-10-24

Web tidak dibuat dari kerangka monolitik tunggal. Jauh lebih sulit untuk mempelajari semua bagian yang membentuk semua yang kita lihat di internet karena modularitasnya.

Siapapun pasti membuat kesalahan yang memperlambat waktu pengembangan, program Anda, atau memperkenalkan bug ke program Anda. Tidak hanya itu, beberapa jenis kesalahan menempatkan Anda pada posisi yang kurang menguntungkan ketika Anda sedang mencari pekerjaan.

Praktik terbaik ada untuk memastikan sesedikit mungkin masalah muncul saat mendesain situs web Anda atau meluncurkannya ke produksi. Berikut adalah lima kesalahan paling umum yang dilakukan pengembang web junior dan cara menghindarinya.

Terlalu mengandalkan jQuery

jQuery sejauh ini merupakan framework JavaScript paling populer di dunia. Mengadopsinya dalam proyek Anda segera setelah Anda membuatnya mungkin tampak menggoda, tetapi jangan terburu-buru.

Meskipun jQuery memang menyediakan banyak metode mudah untuk mempercepat pengembangan web Anda, penting untuk tidak menggunakannya terlalu banyak. Pengembang web baru hampir selalu membuat kesalahan dengan memahami metode API jQuery daripada cara kerjanya di bawahnya.

Banyak pengusaha menganggap jQuery sebagai kewajiban daripada menyenangkan karena beberapa pengembang gagal memahami cara kerja JavaScript sama sekali.

Tidak ada yang salah dengan menggunakan jQuery. Jika bisa, biasakan menggunakan metode JavaScript sendiri. Hanya mengandalkan jQuery untuk metode kenyamanan yang membutuhkan waktu untuk diterapkan.

Terlalu mengandalkan kerangka kerja CSS

Kerangka kerja CSS seperti Semantic UI dan Bootstrap dapat menghemat banyak waktu. Mereka menghilangkan kebutuhan akan gaya manual dan menggabungkan desain responsif di dalam aplikasi Anda.

Sama seperti jQuery, bagaimanapun, mudah untuk terjebak dalam siklus tidak pernah menulis kode CSS Anda sendiri. Pada akhirnya, situs Anda akan terlihat generik dan setengah jadi. Di ujung ekstrem, itu bahkan mungkin terlihat seperti selusin situs web lain yang memiliki ide yang sama dengan Anda.

Jika Anda bukan ahli dalam menulis kode CSS, Anda akan memiliki kemampuan untuk membaca manual, menemukan mentor, yang akan memberi Anda informasi yang Anda butuhkan, seperti sebagai panduan penelitian akan menulis makalah penelitian untuk saya dan memberikan Anda dengan bantuan yang baik dan kualitatif. Ada kerangka kerja berbeda yang bisa lebih intuitif untuk menulis kode.

Kerangka kerja seperti Bootstrap ada untuk membuat hidup Anda lebih mudah . Untuk menghindari ketergantungan yang berlebihan, pelajari gaya CSS dengan sendirinya, pelajari cara menggunakan praprosesor untuk mempercepat pengembangan, dan pelajari teori warna untuk mengetahui warna apa yang cocok dan mana yang tidak. Setelah Anda memahami konsep dengan benar, Anda mungkin menyadari bahwa Anda bahkan tidak memerlukan kerangka kerja lagi.

Tidak Memiliki Alat Pemulihan

Tidak memiliki alat pemulihan saat Anda paling membutuhkannya dapat mengakibatkan kerusakan situs web Anda dan kemungkinan kematiannya. Setiap kali Anda membuat perubahan pada situs web Anda, Anda mempertaruhkan itu tidak baik. Untuk memastikan Anda memiliki jaring pengaman tempat Anda dapat jatuh, pertimbangkan untuk menggunakan alat pemulihan, seperti WP Reset.

Setel Ulang WP

WP Reset adalah solusi terbaik Anda ketika masalah di situs web Anda muncul. Mungkin masalahnya adalah tidak dapat mengakses admin WP Anda atau bertemu dengan layar putih kematian. Apa pun itu, WP Reset mendukung Anda. Muncul dilengkapi dengan alat pembersih yang membantu Anda dengan cepat dan mudah memulihkan situs web Anda.

Selain itu, Anda dapat menggunakannya untuk menginstal plugin dan tema dengan cepat, atau menonaktifkannya jika salah. Selanjutnya, Snapshots fitur WP Reset secara otomatis mengambil snapshot dari situs web Anda sebelum Anda membuat perubahan apa pun, memungkinkan Anda untuk memulihkan snapshot itu jika ada yang tidak berjalan sesuai rencana.

Opsi paling kuat yang disediakan plugin ini adalah opsi Nuclear Reset, yang memungkinkan Anda untuk sepenuhnya menghapus instalasi Anda, menghapus semua plugin, tema, dan entri basis data. Namun, gunakan hanya ketika Anda benar-benar membutuhkannya.

Lupa mengoptimalkan situs Anda untuk kecepatan

Salah satu efek dari terlalu mengandalkan jQuery adalah kecenderungan untuk jatuh ke dalam kebiasaan anti-pola. Saat browser pertama kali dimuat, kode JavaScript dan CSS harus dijalankan sebelum halaman dimuat, tergantung di mana Anda menempatkan skrip.

Seperti yang dapat Anda bayangkan, memiliki terlalu banyak skrip akan memperlambat situs web Anda. Memiliki kelas CSS yang tidak digunakan akan meningkatkan ukuran bundel situs web Anda dan juga memperlambatnya.

Banyak yang masuk ke optimasi kecepatan. Untuk menyebutkan beberapa faktor: font, gambar, file JavaScript dan CSS tambahan, dan kompresi file semuanya memainkan perannya. Setelah Anda menguasai ini, lihat ke dalam paket bundler seperti Webpack dan Rollup yang dapat menghapus kelas CSS dan metode JavaScript yang tidak digunakan dari file Anda.

Validasi masukan tidak lengkap

Beberapa bagian terpenting dari situs web apa pun yang pernah Anda buat adalah formulir. Karena itu satu-satunya cara seseorang dapat mengirimkan informasi ke server Anda, selalu perlu untuk melakukan beberapa pemeriksaan kewarasan pada mereka.

Beberapa vektor serangan paling umum di internet masih serangan XSS dan injeksi SQL. Kesalahan yang cenderung dilakukan oleh pengembang junior adalah hanya memiliki validasi input di frontend.

Semua validasi input dilakukan melalui JavaScript, yang sepele untuk dinonaktifkan. Karena itu, Kenneth Sytian dari Sytian Web Developer Filipina merekomendasikan untuk selalu melakukan validasi input di backend dan frontend. Selain itu, semua karakter non-alfanumerik harus diloloskan untuk membuat serangan injeksi menjadi tidak mungkin.

Mengabaikan pentingnya SEO

Anda tidak cukup hanya membuat situs web yang indah dan mengirimkannya. Sama pentingnya bahwa orang melihat dan menghargai konten yang Anda tawarkan. Cara terbaik untuk melakukannya adalah dengan meningkatkan pengetahuan dan implementasi SEO Anda.

SEO adalah proses yang panjang dan rumit yang membutuhkan penelitian terus-menerus untuk tetap berada dalam lingkaran aturan permainan yang selalu berubah. Dengan jangkauannya yang melengkung, tidak boleh dianggap remeh untuk dilakukan di akhir proses pembangunan.

Beberapa praktik, seperti selalu memiliki tag 'alt' deskriptif pada gambar Anda, perlu diproses secara aktif. Bayangkan memindai semua file Anda untuk mencari alt dan meta tag ketika Anda sudah selesai dengan proyek tersebut.

Tidak memiliki favicon

Sangat mudah untuk mengabaikan favicon sebagai hal yang tidak perlu karena pengaturannya yang sepele, tetapi keberadaannya cukup penting. Di web modern, biasanya pengguna membuka banyak tab sehingga mereka dapat mengunjunginya lagi nanti. Favicons bertindak sebagai semacam bookmark sehingga situs Anda terlihat dalam sekali pandang. Kurangnya satu mungkin berarti pengguna kehilangan minat di sepanjang jalan.

Daripada membuatnya sendiri di Photoshop, desainer UX pemenang penghargaan, Michelle Dipp, merekomendasikan untuk menggunakan alat desain grafis gratis yang dapat Anda temukan secara online. Anda bahkan dapat menemukan satu yang menawarkan templat favicon sehingga Anda dapat membuatnya sendiri tanpa repot.

Mengabaikan desain responsif

Desain responsif menempati peringkat di antara salah satu hal terpenting yang harus dimiliki situs web. Sebagian besar lalu lintas di internet berasal dari perangkat seluler. Tidak memiliki situs yang menampilkan konten berbeda tergantung pada ukuran layar menempatkan Anda pada kerugian yang signifikan. Apalagi jika pesaing Anda menawarkan hal yang sama.

Salah satu cara Anda dapat meningkatkan pengalaman pengguna adalah dengan menerapkan elemen lengket ke situs web Anda. Elemen lengket adalah elemen yang tetap berada di halaman saat pengguna menjelajah. Ketika elemen diperbaiki, lebih mudah untuk mengaksesnya dan Anda tahu mereka selalu ada di satu tempat, yang penting saat berada di ponsel.

Meskipun demikian, WP Sticky adalah plugin sempurna yang dapat Anda gunakan untuk membuat elemen lengket Anda. WP Sticky memungkinkan Anda membuat elemen lengket sebanyak yang Anda inginkan, tanpa menulis satu baris kode pun; Anda hanya perlu memilih elemen Anda langsung dari layar.

Dengan WP Sticky, Anda dapat membuat menu, header, footer, dan banyak lagi, menjadi lengket. Selanjutnya, Anda dapat menyesuaikan posisi elemen, opacity, dan menambahkan atau menghapusnya dari posting tertentu.

WP Lengket Selain itu, ini adalah salah satu faktor yang diperhitungkan Google saat memeringkat halaman. Jika laman Anda tidak responsif di seluler, Anda mungkin akan mendapatkan beberapa email dari konsol webmaster yang memperingatkan Anda untuk memperbarui situs Anda.

Kesimpulan

Desain web yang tepat membutuhkan waktu. Waktu untuk meneliti, waktu untuk bekerja, dan bahkan lebih banyak waktu untuk membiasakan diri dengan praktik yang direkomendasikan. Membuat kesalahan selama waktu pengembangan bukanlah akhir dari dunia. Sebaliknya, ambil setiap kemunduran yang Anda temui sebagai pengalaman belajar. Tingkatkan pengetahuan dan aplikasi Anda tentang desain web yang tepat dengan menggunakannya.

TENTANG PENULIS

Becky Holton adalah jurnalis dan blogger di Bestdissertation.com, layanan penulisan esai terbaik. Dia tertarik pada teknologi pendidikan, ahli menulis dan selalu siap untuk mendukung berbicara informatif di AustralianWritings. Ikuti dia di Twitter.