أفضل الممارسات لتطبيقات الويب

يمثل تطوير صفحات الويب والتطبيقات للأجهزة الجوّالة تحديات مختلفة مقارنةً بتطوير صفحة ويب لمتصفحات الويب على أجهزة الكمبيوتر المكتبي. يمكن أن تساعدك الممارسات التالية في تقديم تطبيق الويب الأكثر فعالية لنظام Android وأجهزة الجوال الأخرى.

  1. إعادة توجيه الأجهزة الجوّالة إلى إصدار مخصّص للأجهزة الجوّالة من موقعك الإلكتروني: هناك عدة طرق لتنفيذ ذلك باستخدام عمليات إعادة التوجيه من جهة الخادم إحدى الطرق الشائعة هي "اكتشاف" سلسلة وكيل المستخدم التي يقدمها متصفح الويب. ولتحديد ما إذا كنت تريد عرض نسخة متوافقة مع الأجهزة الجوّالة من موقعك الإلكتروني أم لا، ابحث عن سلسلة "mobile" في "وكيل المستخدم".
  2. استخدام HTML5 للأجهزة الجوّالة HTML5 هي اللغة الترميزية الأكثر شيوعًا المستخدمة لمواقع الويب للجوّال. يشجع هذا المعيار على تطوير الأجهزة الجوّالة أولاً للمساعدة في ضمان عمل المواقع الإلكترونية على مجموعة متنوعة من الأجهزة. على عكس لغات الويب السابقة، يستخدم HTML5 تعريفًا بسيطًا لـ <DOCTYPE> وcharset: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. استخدِم البيانات الوصفية لإطار العرض لتغيير حجم صفحة الويب بشكل سليم. في مستند <head>، قدِّم بيانات وصفية تحدّد طريقة عرض إطار العرض للمتصفّح لصفحة الويب الخاصة بك. على سبيل المثال، يمكن للبيانات الوصفية لإطار العرض تحديد ارتفاع وعرض إطار عرض المتصفّح ومقياس الصفحة المبدئي وكثافة الشاشة المستهدَفة.

    يوضِّح المثال التالي كيفية ضبط البيانات الوصفية لإطار العرض:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    لمزيد من المعلومات حول كيفية استخدام البيانات الوصفية لإطار العرض للأجهزة التي تعمل بنظام التشغيل Android، يُرجى الاطّلاع على المقالة إتاحة الشاشات المختلفة في تطبيقات الويب.

  4. استخدِم تخطيطًا خطيًا عموديًا. تجنب حاجة المستخدم إلى التمرير يمينًا ويسارًا أثناء التنقل في صفحتك. يسهُل على المستخدم الانتقال للأعلى وللأسفل وجعل صفحتك أكثر بساطةً.
  5. اضبط ارتفاع التنسيق وعرضه على match_parent. يؤدي ضبط ارتفاع وعرض العنصر WebView على match_parent إلى التأكّد من تحديد حجم مشاهدات تطبيقك بشكل صحيح. لا ننصح بضبط الارتفاع على wrap_content لأنّه يؤدي إلى تغيير الحجم بشكل غير صحيح. وبالمثل، لا يمكن ضبط عرض التنسيق على wrap_content ويؤدي إلى استخدام WebView لعرض العنصر الرئيسي بدلاً من ذلك. لهذا السبب، من المهم أيضًا التأكّد من عدم ضبط ارتفاع وعرض أي من كائنات التنسيق الرئيسية لكائن WebView على wrap_content.
  6. تجنُّب طلبات الملفات المتعدّدة ونظرًا لأن سرعة اتصال الأجهزة الجوّالة عادةً أقل من سرعة أجهزة الكمبيوتر المكتبية، ننصحك بتحميل الصفحة بأسرع وقت ممكن. يمكنك تسريع عملية تجنُّب تحميل ملفات إضافية، مثل أوراق الأنماط وملفات النصوص البرمجية في <head>. بالإضافة إلى ذلك، ننصحك بإجراء تحليل الجوّال باستخدام إحصاءات PageSpeed من Google للحصول على اقتراحات تحسين تفصيلية خاصة بتطبيقك.

مراجع إضافية