انتهت قمة مطوّري Chrome قبل بضعة أسابيع، وإليكم التقرير الأول من سلسلة تقارير عن الحدث. تم التركيز بشكل كبير على تطوير التطبيقات المتوافقة مع الأجهزة الجوّالة والأجهزة المتعددة، لذلك سنبدأ بهذه النقطة.
أفضل أنماط تجربة المستخدم لتطبيقات الويب على الأجهزة الجوّالة، بقلم "بول كينلان"
بعد تحليل مدى توافق أهم 1, 000 موقع إلكتروني مع الأجهزة الجوّالة، اكتشفنا بعض الجوانب التي تتضمن مشاكل: لا يزال %53 من المواقع الإلكترونية يوفّر تجربة متوافقة مع أجهزة الكمبيوتر المكتبي فقط، و%82 من المواقع الإلكترونية تواجه مشاكل في التفاعل على الأجهزة الجوّالة، و%64 من المواقع الإلكترونية تتضمّن نصًا يواجه المستخدمون مشاكل في قراءته.
نصائح سريعة لتحسين تجربة الويب على الأجهزة الجوّالة بشكل كبير
- تحديد إطار عرض دائمًا
- احتواء المحتوى داخل إطار العرض
- يجب أن يكون حجم الخط في مستوى يسهل قراءته.
- الحد من استخدام خطوط الويب
- تحديد حجم أهداف النقر والمسافة بينها بشكلٍ مناسب
- استخدام الأنواع الدلالية لعناصر الإدخال
أطلقت أداة PageSpeed Insights للتو تحليلًا لتجربة المستخدم من أجل تحديد مدى توافق موقعك الإلكتروني مع الأجهزة الجوّالة. وسيساعدك هذا التحليل على العثور على المشاكل الشائعة في تجربة المستخدم على الأجهزة الجوّالة لمواقعك الإلكترونية. ننصحكم بتجربتها.
العروض التقديمية: أفضل أنماط تجربة المستخدم لتطبيقات الويب المتوافقة مع الأجهزة الجوّالة
إتاحة الاستخدام على أجهزة متعددة من إعدادات Alice Boxhall
سيصل المستخدمون إلى مواقعك الإلكترونية وخدماتك من خلال العديد من الأجهزة التي تتضمّن مجموعة كبيرة من متطلبات تسهيل الاستخدام المختلفة. من خلال استخدام العناصر الدلالية الصحيحة وأدوار ARIA الصحيحة، يمكنك مساعدة المتصفّح والتكنولوجيا المساعِدة في فهم صفحتك بشكل أفضل.
العروض التقديمية: تسهيل الاستخدام على أجهزة متعددة
الطرق الرئيسية لفهم مشاكل تسهيل الاستخدام وحلّها
- التأكّد من تقديم تجربة جيدة للمستخدمين الذين يستخدمون لوحة المفاتيح فقط
- التعبير عن دلالات واجهتك من خلال اختيار العناصر الصحيح وARIA
- استخدِم ChromeVox على الكمبيوتر المكتبي وTalkBack على Android للاختبار.
- تجربة إضافة أدوات مطوّري برامج Chrome لتسهيل الاستخدام
- يزداد عدد مستخدمي الإنترنت من شرائح متنوعة، ما يُبرز الحاجة إلى تسهيل إمكانية الوصول إلى مواقعك الإلكترونية.
إنشاء تطبيقات متوافقة مع الأجهزة الجوّالة باستخدام WebView في Chrome من تأليف "مات غوانت"
نعلم جميعًا المشاكل التي واجهها المطوّرون في السابق عند إنشاء WebView: ميزات HTML5 محدودة، وعدم توفّر أدوات تصحيح الأخطاء، وعدم توفّر أدوات الإنشاء. مع طرح WebView المستند إلى Chromium في Android 4.4 (KitKat)، أصبح لدى المطوّرين الآن مجموعة كبيرة من الأدوات الجديدة التي يمكنهم استخدامها لإنشاء تطبيقات أصلية رائعة باستخدام WebView.
يتيح WebView تصحيح الأخطاء عن بُعد بالكامل باستخدام الأدوات نفسها التي تستخدمها في Chrome. يمكنك أيضًا استخدام سير عمل تطوير الويب الموثوق به مع Grunt ودمجه في أدوات الحِزم الأصلية من خلال Gradle. في ما يلي خدعة ذكية لاستخدام "أدوات مطوّري البرامج في Chrome" لاختبار الرمز البرمجي الأصلي من JavaScript.
العروض التقديمية: إنشاء تطبيقات متوافقة مع الأجهزة الجوّالة باستخدام WebView في Chrome
أهم النقاط التي يجب أخذها في الاعتبار عند تطوير WebView
- ما يهمّ ليس الميزات الجديدة، بل الأدوات التي يمكنك استخدامها الآن لتسريع سير العمل.
- لا تحاول محاكاة واجهة المستخدم الأصلية. ولكن احرص على إزالة بعض العناصر التي تشير إلى أنّه محتوى ويب.
- استخدِم عمليات التنفيذ الأصلية للميزات عند الاقتضاء. أي استخدام DownloadManager بدلاً من XHR للملفات الكبيرة.
تحسين سير العمل في عالم الأجهزة المتعددة من تأليف "مات غونت"
إذا كان علينا تطوير التطبيقات المتوافقة مع أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة والأجهزة اللوحية والأجهزة القابلة للارتداء وأشكال الأجهزة الأخرى، كيف يمكنك تحسين سير العمل لتسهيل حياتك؟ تتوفّر طريقة فعّالة لاستخدام عدّة أجهزة لإجراء عمليات تكرار سريعة باستخدام LiveReload وGrunt وYeoman وMini Mobile Device Lab الذي تم الكشف عنه مؤخرًا. أخيرًا، إذا لم يكن لديك الجهاز الذي تريد اختباره، يقدّم بعض مقدّمي الخدمات هذا الجهاز من خلال السحابة الإلكترونية.
العروض التقديمية: تحسين سير العمل في عالم الأجهزة المتعددة
النقاط الرئيسية
- وسيزداد عدد الأجهزة التي سنحتاج إلى توفيرها.
- تنظيم سير العمل باستخدام Grunt وYeoman
- تبسيط الاختبار على جميع المتصفحات والأجهزة باستخدام Mini Mobile Device Lab
- حدِّد المحاكي بذكاء باستخدام ميزة المحاكاة في أدوات مطوّري برامج Chrome والمحاكيات المتوفّرة، والمحاكيات المستندة إلى السحابة الإلكترونية مثل Saucelabs وBrowserstack وappexperience والمحاكي التابع لجهة خارجية Genymotion.
- يشمل الاختبار على الأجهزة الجوّالة أكثر من مجرد اختبار الاتصال بشبكة Wi-Fi، فيمكنك استخدام خادم وكيل لمحاكاة سرعات شبكة أبطأ.
الاتصال بالشبكة: اختياري من تأليف "جاك أرشيبالد"
لقد تعلّمنا الكثير من هذه المحادثة: لا يرتدي "جاك" أحذية عند تقديم العروض، وسيصدر قريبًا كتاب جديد من تأليف Business Kinlan، ويتعامل مورّدو المتصفّحات بجدية مع وضع "غير متصل بالإنترنت"، وستتوفّر لك قريبًا الأدوات التي تساعدك في إنشاء تجارب رائعة تعمل بشكل جيد عندما تكون غير متصل بالإنترنت.
ستمنحنا ServiceWorker المرونة التي نحتاجها لإنشاء تجارب رائعة تعمل بلا إنترنت بسهولة وبدون مواجهة المشاكل التي تتسبب فيها ميزة AppCache. يمكنك أيضًا تجربة واجهة برمجة التطبيقات باستخدام Polyfill.
العروض التقديمية: الاتصال بالشبكة: اختياري
استخدام ServiceWorker لتقديم المساعدة
- في الجيل التالي من التحسين التدريجي، نتعامل مع الشبكة كتحسين محتمل.
- تمنحك ميزة ServiceWorker إمكانية التحكّم الكامل في طلبات الشبكة وإمكانية تصحيح الأخطاء فيها باستخدام النصوص البرمجية.
- إذا كنت توفّر تجربة بلا إنترنت، لا تنتظر انقطاع الاتصال بالشبكة قبل عرضها، لأنّ ذلك قد يستغرق وقتًا طويلاً.