Loncat ke Konten Utama

6 kiat untuk mengoptimalkan desain seluler blog Anda

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Konsumsi data oleh lalu lintas seluler meningkat sebesar 74% di 2015, dengan lebih dari satu miliar perangkat terjual selama periode yang sama, dan trennya masih berubah. Itu saja sudah cukup untuk menyoroti pentingnya mengoptimalkan desain Anda untuk lalu lintas seluler.

Beberapa tema WordPress dioptimalkan lebih baik untuk menangani resolusi kecil, tetapi itu tidak berarti kompatibilitas mutlak yang akan Anda percayai sepenuhnya. Faktanya, ada sejumlah perbaikan untuk diterapkan yang akan memungkinkan Anda untuk lebih mengoptimalkan situs web Anda untuk perangkat seluler.

Dalam tutorial ini, kita akan menjelajahi berbagai tip khusus untuk perangkat seluler, pengoptimalan gambar, desain tata letak, dan banyak lagi.

Tip 1: Tambahkan Ikon iOS dan Layar Pembuka

ios-ikon-percikan-layar

Meskipun banyak kemajuan yang dibuat oleh Android, perangkat iOS tetap ada sangat populer dan mendapatkan keuntungan dari dukungan komunitas pengembang yang aktif. Intinya adalah, banyak pengunjung Anda kemungkinan besar akan memiliki perangkat Apple, dan jika mereka mungkin ingin lebih menikmati situs web Anda, dengan menyimpan ikon Anda di layar beranda mereka.

Untuk mempersiapkan kemungkinan ini, mari tunjukkan bagaimana Anda dapat menambahkan ikon iOS blog WordPress.

Pertama, Anda harus mencari file tersebut header.php tema Anda (atau tema anak), karena kita harus menambahkan sedikit kode di tag .

Berikut kode Anda perlu menambahkan:

 

Seperti yang Anda lihat, kode tersebut menyebutkan ikon tertentu untuk perangkat iPhone, iPad, dan Retina, yang semuanya harus diawali dengan atribut rel dengan nilai "call-touch-icon".

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Saat Anda melakukannya, Anda juga dapat merancang layar splash iOS baru untuk situs web Anda dengan kode berikut:


Catatan: Layar splash adalah salah satu yang muncul saat Anda meluncurkan aplikasi. Ini seperti layar pemuatan aplikasi.

Tip 2: Gunakan beberapa ukuran gambar terkait dengan "media-queries"

beberapa-gambar-ukuran-media-query

Anda, tentu saja, sudah terbiasa dengan gagasan " Media-query". Pikirkan tentang aturan desain khusus yang dimasukkan ke dalam CSS Anda saat skenario tertentu muncul. Dalam kasus desain seluler, skenario berikut adalah resolusi, orientasi perangkat, dan dimensi browser yang berbeda. Masalah dengan " Media-query Apakah saat ini, banyak desainer dan pengembang yang membangun situs web dengan pendekatan seluler sekunder, padahal seharusnya sebaliknya.

Pendekatan seluler sekunder ini dapat dilihat di Media-query Saat Anda melihat dimensi perangkat populer (yaitu 320px, 480px, 768px) digunakan sebagai pedoman. Meskipun secara teori ini mungkin tampak seperti pendekatan yang baik, karena agar efisien seseorang tidak dapat mengklaim menggunakan dimensi semua perangkat yang bervariasi sesering mereka dibuat.

Jadi lain kali Anda mengerjakan desain, jadikan kompatibilitas seluler sebagai prioritas:

  • desain Anda "Kueri" jadi kerjakan pada resolusi kecil.
  • Hindari menggunakan piksel untuk mendeklarasikan breakpoint Anda. Sebaliknya, cobalah bekerja dengan "Ems" dan persentase sesering mungkin sehingga desain Anda dapat disesuaikan untuk zoom.
  • Ingatlah untuk membayar Anda " Media-query Sehingga mereka beradaptasi dengan perangkat Retina (resolusi minimum: 192dpi).

Kiat # 3: Optimalkan gambar Anda

mengoptimalkan-Anda-gambar

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Bahkan jika Anda memiliki desain yang fantastis dan responsif, calon pengunjung dapat menyelinap pergi jika mereka menyadari bahwa situs web Anda membutuhkan waktu lama untuk dimuat, dan gambar memainkan peran besar dalam aspek ini. Pengguna ingin melihat gambar yang indah, yang bagaimanapun memuat dengan sangat cepat, oleh karena itu perlu mengoptimalkan gambar Anda.

Walaupun mungkin tampak seperti teka-teki, ada banyak alat yang dapat membantu Anda mencapai hasil ini. Di bagian paling atas dari daftar yang kami miliki EWWW Image Optimizer et WP Smush , yang setelah dipasang, secara otomatis akan menerapkan teknik kompresi lossless berkualitas untuk setiap gambar yang diunggah ke situs WordPress Anda dan situs WordPress Anda bahkan dapat melalui perpustakaan media Anda untuk mengoptimalkan gambar yang diunggah sebelumnya.

Jika Anda memilih untuk tidak menambahkan plugin lain ke situs web Anda, selalu ada alat yang berdiri sendiri seperti TinyJPG et TinyPNG, yang pada dasarnya melakukan pekerjaan yang sama seperti Pengoptimal Gambar EWWW dengan secara selektif mengurangi jumlah warna dalam gambar Anda, serta menghapus meta (menghapus data yang tidak perlu). Ini menghasilkan ukuran file yang jauh lebih kecil dengan banyak perubahan yang hampir tidak terdeteksi, yang merupakan kompromi yang ideal.

Kiat # 4: Pikirkan tentang menggunakan SVG

animasi-svg-logo-dengan-css-thumbnail

Scalable Vector Graphics (SVG) adalah alat bagus yang perlu Anda pertimbangkan. Terlepas dari apa yang tersirat dari namanya, mereka menggunakan beberapa bentuk bahasa markup XML daripada format gambar, dan mereka sangat berguna untuk grafik sederhana seperti logo, ikon, infografis, dan aplikasi lainnya.

« Mengapa SVG begitu berguna?“, Anda bisa bertanya-tanya. Nah, sebagai permulaan mereka dapat diperluas yang berarti Anda tidak perlu khawatir tentang beradaptasi dengan jendela yang berbeda. Selain itu, mereka juga dapat dengan mudah dianimasikan menggunakan CSS.

Anda harus terbiasa dengan alat seperti Adobe Illustrator, Inkscape, dan Sketch, yang menyertakan dukungan untuk format ini, jadi cobalah!

5 Tip: pilih font yang baik

pick-kanan melakukan

Desain seluler bukan hanya tentang gambar. Memilih font yang akan digunakan dapat berdampak besar (jika tidak lebih) pada desain Anda seperti halnya grafik, karena sebagian besar situs menggunakan teks sebagai metode utama mereka untuk menyampaikan informasi.

Dari sudut pandang desainer, ini berarti memilih font yang tepat, yang melibatkan:

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

  • Jangan gunakan font yang terlalu tipis atau rumit. Font Anda harus mudah terlihat di perangkat seluler, jika Anda tidak ingin pengguna menyesuaikan zoom agar dapat membaca Anda dengan lebih baik.
  • Hindari font dengan ruang antar huruf terlalu sedikit untuk keterbacaan yang lebih baik.
  • Jika Anda menggunakan Media-permintaan Untuk teks Anda, gunakan ems untuk ukuran, bukan piksel.
  • Pertimbangkan untuk menggunakan font sans serif, karena cenderung berfungsi lebih baik pada kebanyakan resolusi.

Tip 6: Perlakukan teks sebagai bagian dari antarmuka pengguna

text-bagian-interface

Karena kami menggunakan tipografi, Anda harus tahu bahwa font bukan satu-satunya hal yang perlu dipertimbangkan, dan itu sendiri bukan tentang keterbacaan. Karena kami akan bekerja dengan berbagai macam jendela, Anda ingin desain Anda mempertimbangkan teks sebagai bagian integral dari pengalaman pengguna untuk memaksimalkan keterbacaan, ini berarti:

  • Penggunaan " Media-query "Untuk mempertahankan batas karakter per baris yang dapat dikelola (ingatlah untuk menggunakan ems alih-alih piksel!). Jumlah yang diterima secara umum diatur di suatu tempat antara karakter 45-75.
  • Ingatlah untuk menggunakan vw, vh, dan vhmin (ini semua terkait dengan persentase viewport) Nilai CSS3 untuk menjaga ukuran font relatif terhadap ukuran penampil atau pada jendela tertentu.

Ringkasan

Kami telah melihat di seluruh artikel ini bahwa lalu lintas seluler menjadi semakin berkurang, yang seharusnya menjadi prioritas bagi setiap pengembang dalam desain situs web. Jadi, Anda memiliki beberapa kiat yang dapat Anda terapkan di blog agar sesuai dengan situs web Anda saat ini " ponsel-ramah".

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas