Cara Membuat Laman Web Anda Mesra Mudah Alih

Pada musim panas 2015, lebih banyak carian Google dilakukan melalui telefon bimbit daripada desktop untuk pertama kalinya – dan anda’lebih baik mempercayai mereka’sejak itu sahaja!


Jika awak’membaca semula artikel ini, kemungkinan anda’saya sudah menyedari betapa pentingnya memiliki laman web yang mesra telefon bimbit, dan ingin memastikan bahawa laman web anda menawarkan pengalaman hebat kepada pengguna mudah alih. Kami boleh mengajar anda bagaimana melakukannya!

Untuk menjadikan laman web anda mesra mudah alih, anda’Saya perlu:

  1. Pilih tema atau templat responsif mudah alih
  2. Keluarkan kandungan anda
  3. Buat gambar dan CSS sekerap mungkin
  4. Elakkan Flash
  5. Tukar saiz dan penempatan butang
  6. Letakkan pautan anda
  7. Gunakan fon yang besar dan boleh dibaca
  8. Hilangkan pop timbul
  9. Uji secara berkala

Tetapi pertama, apa sebenarnya maksud mesra mudah alih?

Semasa kita bercakap mengenai a ‘mesra telefon bimbit’ laman web, kami’bercakap tentang memaparkan yang berbeza ‘versi’ laman web anda kepada pengunjung yang melihat laman web anda dari telefon bimbit, untuk memberi mereka pengalaman yang lebih baik.

Terdapat beberapa cara untuk mencapainya:

  • Reka bentuk responsif – laman web anda’reka bentuk disesuaikan untuk menyesuaikan diri dengan ukuran layar, sama ada anda’hanya mengubah ukuran tab desktop anda, atau menyemak imbas dari telefon bimbit atau tablet.
  • Hidangan dinamik – Pelawat ditunjukkan versi laman web yang berbeza, bergantung pada peranti yang mereka gunakan’melihat semula dari.
  • Aplikasi mudah alih – dalam beberapa kes, mempunyai aplikasi yang sepenuhnya terpisah untuk khalayak mudah alih anda sangat masuk akal (walaupun jika demikian, anda juga harus memastikan laman web anda sesuai untuk mereka yang tidak’saya mahu memuat turunnya).

Reka bentuk responsif adalah minimum yang harus anda sasarkan, dan itu’seperti yang dicadangkan oleh Google. Yang mengatakan, kami fikir’lebih baik lagi mengedit laman mudah alih yang dihasilkan secara automatik anda – bagaimanapun, anda ingin menargetkan pengalaman pengguna mudah alih yang hebat, dan bukannya ‘boleh diterima’ satu.

Sekiranya anda berpendapat bahawa aplikasi mudah alih berfungsi untuk laman web anda, kami mengesyorkan anda menghubungi pembangun yang dapat membantu anda.

Berikut adalah beberapa artikel lain yang mungkin anda nikmati:

Cara Merangka Laman Web – Jika awak’mula merancang (atau merancang semula!) laman web anda, lihat artikel ini untuk panduan langkah demi langkah, dan perkara penting yang perlu dipertimbangkan.

Cara Membina Laman Web – Haven’belum memulakan laman web anda? Jangan risau, panduan ini akan memandu anda melalui keseluruhan proses!

5 Pembangun Laman Web Terbaik untuk SEO – Mana-mana pembangun laman web dengan SEO yang kuat dilengkapi dengan kemudahan mudah alih yang disusun tepat ke templatnya. Berikut adalah lima yang terbaik.

1

Pilih tema atau templat responsif mudah alih

Baiklah, jadi ini adalah langkah pertama, dan ia’yang besar: pilih tema atau templat responsif mudah alih!
Oleh kerana mempunyai reka bentuk responsif mudah alih sangat penting, ia sangat penting’sesuatu yang hampir semua pembangun laman web teratas merangkumi setiap templatnya. Sebagai contoh:

Squarespace – mempunyai respons mudah alih yang kedap air, dan akan menjadi pilihan utama kami jika anda’membina semula laman web dari awal dan melihat pengalaman mudah alih sebagai keutamaan.

Wix – semua templat responsif mudah alih, tetapi pastikan anda melihat paparan mudah alih semasa anda pergi. Kerana laman web Wix sangat disesuaikan, kadang-kadang perubahan besar tidak’menterjemahkan dengan lancar, dan anda’Saya perlu melakukan tweaking.

Jika awak’membina semula laman web menggunakan sistem CMS, seperti WordPress, pastikan tema yang anda pilih untuk membina laman web anda adalah responsif mudah alih – atau jika anda’sudah membina laman web, beralih ke laman web tersebut!

Cari sahaja ‘tema responsif’ di WordPress’ mempunyai perpustakaan tema, atau di laman web pihak ketiga seperti Themeforest. Pastikan anda membaca ulasan, dan jika boleh, perhatikan laman web mana pun yang menggunakan tema ini dari telefon bimbit anda untuk mengukur sendiri pengalaman.

Tolong! Bagaimana jika saya’m pada tema yang tidak responsif, dan saya boleh’t menukarnya?

Sekiranya laman web anda dibina menggunakan tema atau templat lama yang tidak responsif, dan anda’tidak dapat menukarnya, cuba tambahkan baris kod ini ke dalam setiap halaman’tag s:

Ini bermaksud halaman anda harus diformat semula secara automatik agar sesuai dengan lebar peranti, beralih dari gaya lanskap ke potret.

2

Keluarkan kandungan anda

Anda’telah memilih tema atau templat responsif yang indah, jadi sekarang anda’semula, betul? Keliru!

Beralih ke templat atau tema yang betul adalah langkah besar, tetapi itu’hanya satu daripada beberapa yang harus anda gunakan untuk menyempurnakan pengalaman mudah alih itu.

Sekarang, ia’tiba masanya untuk melihat paparan mudah alih automatik laman web anda dan melucutkannya kembali:

Jelaskan tawaran anda

Selesaikan matlamat utama halaman anda’kembali, dan jangan’jangan ragu untuk menjadikannya lebih menonjol pada versi mudah alih anda.

Lihat contoh ini dari Trainline:

Contoh mesra bergerak mudah alih

Halaman utama dirancang untuk mendorong pengguna mencari tiket kereta api, dan borang ini menjadi pusat versi versi mudah alih. Pada versi desktop, ini kelihatan terlalu memaksa, tetapi pada versi mudah alih, ia berfungsi.

Elakkan sebilangan besar teks

Salinan di laman web anda mestilah pendek dan manis pada masa-masa terbaik (kecuali catatan blog, seperti ini!), Tetapi di telefon bimbit ini menjadi lebih penting. Baca petua kami untuk menulis untuk web, dan bawa gunting maya anda ke sebilangan teks yang panjang.

Memendekkan bentuk

Mengisi borang yang panjang adalah tugas pada masa-masa terbaik, tetapi menggunakan telefon bimbit? Bergerak? Lupakan ia! Bentuk panjang akan kehilangan pembaca anda lebih cepat daripada yang anda nyatakan ‘ini adalah bidang yang diperlukan’. Pastikan setiap bentuk anda’paparan semula di telefon bimbit hanya meminta maklumat yang’sangat mustahak.

Petua teratas! Pembetulan automatik Pesky adalah cara yang pasti untuk mengubah pengisian borang menjadi pembaziran masa yang besar. Selamatkan tekanan pembaca anda dengan mematikannya. Sekiranya anda mempunyai akses ke kod borang, pastikan medan pembetulan automatik ditetapkan ke pembetulan automatik = mati. 3

Buat gambar dan CSS sekerap mungkin

Menjadikan laman web anda semudah mungkin selalu merupakan idea yang baik – tetapi apa sebenarnya maksudnya? Baiklah, setiap elemen di laman web anda membawa maya ‘berat badan’ – adakah itu’s video atau gambar yang mempunyai ukuran file, atau kod yang perlu dimuat setiap kali laman web diklik.

Google sangat jelas mengenai fakta bahawa kelajuan laman web adalah faktor penentu kedudukan, yang bermaksud lambat (a.k.a). ‘berat’) laman web akan kalah dalam persaingan di halaman hasil mesin pencari (SERP).

Ketika datang ke telefon bimbit, ini semua lebih penting. Jika awak’pernah cuba memuatkan laman web di suatu tempat yang jauh, hanya untuk melihat setiap elemen jatuh ke tempatnya dengan perlahan, anda’Saya faham mengapa.

Jadi, apa yang anda boleh lakukan mengenainya?

Memampatkan gambar anda

Bila kamu’memuat naik semula sebarang gambar ke laman web anda – versi mudah alih atau desktop – ia’penting untuk memampatkan gambar anda menggunakan alat dalam talian percuma, seperti kraken.io. Ini sangat mengurangkan ukuran fail gambar anda, tanpa menjejaskan kualiti gambar.

Hoskan video anda dengan pihak ketiga

Dengan memuat naik video anda ke pihak ketiga kemudian memasukkannya ke laman web anda, itu bermaksud maya ‘berat badan’ video ini sebahagian besarnya disimpan ke laman web yang dipilih, dan bukan ke laman web anda.

Wistia adalah platform yang popular untuk ini, tetapi YouTube juga berfungsi – anda’Saya hanya mahu memastikan anda’mematikan semula putaran automatik, sehingga video yang tidak berkaitan’t bermain selepas anda. Untuk melakukan ini, cukup:

  • Pergi ke halaman atau siaran WordPress anda
  • Cari kod tertanam dan klik pada ‘teks’ tab
  • Cari bahagian yang mengatakan src =”youtubeurlhere”
  • Tambah ?main automatik = 0&rel = 0 selepas youtubeurlhere
  • Kini kodnya hendaklah dibaca src =”youtubeurlhere? autoplay = 0&rel = 0 ″
  • Pukul ‘Kemas kini’ dan kamu’kembali baik

Petua teratas! Sekiranya anda tidak’Saya rasa kandungan anda akan turun dengan baik di YouTube (beberapa video tidak’t masuk akal tanpa konteks halaman penuh), pastikan anda menetapkan keterlihatan ‘tidak tersenarai’. Dengan cara itu, tidak ada yang akan tersandung di mana sahaja melainkan laman web anda. 4

Elakkan Flash

Flash sering digunakan untuk membuat animasi, tetapi biasanya tidak’disokong oleh peranti mudah alih, jadi sebaiknya dihindari sama sekali.

5

Tukar saiz dan penempatan butang

Hampir setiap laman web menggunakan butang untuk menghubungkan ke bahagian lain, atau ke borang. Tetapi a ‘baik’ butang dengan cepat boleh menjadi a ‘buruk’ butang di telefon bimbit jika ada’s di tempat yang salah, atau ukuran yang salah.

Fikirkan bagaimana anda memegang dan menggunakan telefon anda. Kemungkinan anda’menggunakan ibu jari anda untuk hampir semua perkara, yang bermaksud apa sahaja yang anda boleh’capaian dengan ibu jari anda menjadi sakit total.

Di sini’di mana anda harus meletakkan CTA di laman web mudah alih:

Membuat laman web mesra mudah alih: tempat menambah CTA

Jadi sekarang anda’anda telah mendapatkan butang anda di tempat yang betul, itu’masa untuk menjadikannya ukuran yang tepat. Itu secara amnya bermaksud anda’Saya perlu membesarkannya sedikit – itu’jauh lebih sukar untuk mengklik dengan tepat dengan ibu jari daripada dengan tetikus.

6

Letakkan pautan anda

Bercakap tentang betapa sukarnya mengklik dengan tepat dengan ibu jari berbanding dengan tetikus, yang membawa kita dengan baik ke titik seterusnya: lihat pautan anda!

Lebih khusus lagi, anda’Saya ingin memastikan bahawa ada pautan di laman web mudah alih anda:

  • Aren’terlalu rapat bersama, untuk mengelakkan orang mengklik yang salah secara tidak sengaja.
  • Pautan ke halaman yang juga dioptimumkan untuk mudah alih untuk perjalanan pengguna yang lancar.

7

Gunakan fon yang besar dan boleh dibaca

Ia’anda mengesyorkan agar anda menggunakan ukuran fon sekurang-kurangnya 14 piksel pada desktop, tetapi pastikan anda menguji penampilannya pada versi mudah alih anda – kemungkinan anda akan melihatnya agak kecil, dan anda’Saya mahu menaikkannya sedikit.

Periksa juga kebolehbacaan fon anda. Ia’satu perkara untuk mencuba fon yang lebih eksperimental di desktop, tetapi langkah ini tidak mungkin dapat dibayarkan di telefon bimbit. Yang berkata, anda’Saya mahu menyimpan fon seperti ‘pada jenama’ mungkin di semua platform.

Semasa mengerjakan paparan mudah alih laman web anda, anda’mempunyai kawasan yang jauh lebih kecil untuk dimainkan. Di desktop, anda dapat mengosongkan teks dengan jeda baris dan gambar. Di telefon bimbit, cubalah melekatkan atau menggunakan huruf teks yang berlainan dan bukan untuk menghalangnya bergabung antara satu sama lain.

8

Hilangkan pop timbul

Apabila digunakan dengan berhati-hati, pop timbul boleh berfungsi dengan baik pada versi desktop laman web. Anda mungkin menyedari mereka’sesuatu yang kami gunakan di beberapa halaman di sini di WBE.

Tetapi ketika menggunakan telefon bimbit, pop timbul sebaiknya dielakkan. Anda bukan sahaja mempunyai skrin yang lebih kecil untuk ditangani, tetapi anda juga boleh’t menyesuaikan pop timbul untuk mencetuskan pada saat-saat penting, seperti ketika pengguna keluar dari skrin anda.

9

Uji secara berkala

Kaedah terbaik untuk mengetahui betapa mudahnya laman mudah alih anda adalah dengan mengujinya! Anda’Saya mahu melakukan ini dalam tiga cara yang berbeza:

Jalankan URL melalui Google’alat mesra mudah alih

Google mempunyai alat ujian mesra mudah alih percuma, yang boleh digunakan oleh siapa saja untuk menguji seberapa mudah mesra URL apa pun yang diberikan – sama ada’laman utama (seperti di bawah), atau halaman dalam laman web anda.

Ujian mesra mudah alih Google

Cubalah pelbagai saiz peranti dari desktop anda

Kaedah yang bagus untuk memeriksa seberapa responsif laman web anda adalah dengan bermain-main dengan bentuk tab laman web anda yang telah anda buka. Semasa anda mengurangkan lebar tab anda, anda akan melihat laman web anda bermula ‘kontrak’ dan berubah menjadi versi yang lebih mudah alih.

Untuk menguji rupa apa sahaja di telefon bimbit dengan cepat, anda juga dapat mengklik kanan di laman web anda, pilih ‘Periksa’, dan kemudian klik pada ikon dua skrin yang muncul di bar alat di bahagian atas:

Lihat versi mudah alih dari desktop

Cara Membuat Laman Web Anda Mesra Mudah Alih: Ringkasan

Terima kasih kerana terus mengikuti kami semasa kami menerangkan cara menjadikan laman web anda mesra telefon bimbit. Di sini’Langkah itu sekali lagi:

Cara menjadikan laman web anda mesra mudah alih:

  1. Pilih tema atau templat responsif mudah alih
  2. Keluarkan kandungan anda
  3. Buat gambar dan CSS sekerap mungkin
  4. Elakkan Flash
  5. Tukar saiz dan penempatan butang
  6. Letakkan pautan anda
  7. Gunakan fon yang besar dan boleh dibaca
  8. Hilangkan pop timbul
  9. Uji secara berkala

Berita baik untuk kebanyakan laman web adalah bahawa sebahagian besar kerja keras akan dilakukan untuk anda mengikut tema atau templat anda. Yang mengatakan, kami fikir’patut membuat penambahbaikan yang digariskan di atas untuk memastikan pengguna telefon bimbit anda mendapat pengalaman yang cemerlang, bukan yang boleh diterima. Lagipun, statistik mengatakan bahawa mereka’Kemungkinan besar adalah sebahagian besar pengguna anda!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me