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

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

  1. إعادة توجيه الأجهزة الجوّالة إلى إصدار مخصّص للأجهزة الجوّالة من موقعك الإلكتروني: هناك العديد من لإجراء ذلك باستخدام عمليات إعادة التوجيه من جهة الخادم. إحدى الطرق الشائعة هي "التعرف" الـ سلسلة وكيل المستخدم التي يوفّرها متصفّح الويب لتحديد ما إذا كنت تريد عرض إصدار للأجهزة الجوّالة من موقعك الإلكتروني أم لا، ابحث عن رمز "الأجهزة الجوّالة" في وكيل المستخدم.
  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 للحصول على اقتراحات تحسين تفصيلية خاصة بتطبيقك.

مصادر إضافية