الأساسيات

أساس متين

الأساس المتين هو المطلب الأساسي لإنشاء تطبيقات ويب تقدّمية (PWA) رائعة. لتنفيذ هذا الأساس، تحتاج إلى تصميم وكود لقيود الويب باستخدام اثنين من المبادئ:

  • استخدِم الأجهزة الجوّالة كقيد التركيز. تأكد من أن كل طريقة عرض لتصميمك تركز فقط على المحتوى والتفاعلات الأساسية.
  • التأكيد على المحتوى والوظيفة الأساسية في عملية التصميم.
  • يتم التحسين تدريجيًا عند الحاجة. ابدأ بإنشاء المحتوى الأساسي للمكون ووظيفته باستخدام الأدوات الأكثر وضوحًا والأكثر توفرًا. إتاحة الوصول إليها: بعد ذلك، اختبر الميزات المتقدمة التي ترغب في استخدامها وحسّن المكوّن من خلالها.
  • قدِّم تجربة سريعة وجيدة للمستخدم تركّز على مقاييس الأداء على الويب التي تركّز على المستخدم، واحصل على مقاييس مستخدم حقيقية، وحسِّن أداء جميع المستخدمين بغض النظر عن اتصالهم بالشبكة أو نوع الإدخال أو وحدة المعالجة المركزية (CPU) أو طاقة وحدة معالجة الرسومات.

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

تصميم الويب السريع الاستجابة

منذ أن نشر "إيثان ماركوت" مقالة بعنوان A List Apart في العام 2010 بعنوان تصميم الويب السريع الاستجابة، تم تشجيع المصممين والمطوّرين على إنشاء تجارب مرنة، ما يؤدي إلى إنشاء واجهات مستخدم تعمل على مجموعة من أحجام الشاشات والأجهزة.

ومع ذلك، في مكانٍ ما، أصبح هذا الحجم اختصارًا لأحجام الأجهزة الجوّالة والأجهزة اللوحية وأجهزة الكمبيوتر المكتبي، مع تأثّر عروضك بشكل كبير بأحجام شاشات iOS. باستخدام لغة CSS الحديثة والتركيز المتجدّد على الغرض الأصلي للتصميم سريع الاستجابة، يمكننا وضع المتعة في المواقع الإلكترونية الصغيرة.

يقدم تصميم الويب سريع الاستجابة ثلاثة مكونات فنية:

  • شبكات مرنة
  • وسائط مرنة
  • الاستعلامات عن الوسائط

ويستنتج "إيثان" أنّ هذه المتطلبات التقنية غير كافية، فالمضي قدمًا يتطلب أيضًا طريقة تفكير مختلفة.

خرافة مستخدم الهاتف الجوّال

في الأيام الأولى تم وضع افتراضات للتصميم سريع الاستجابة باسم تسهيل تصميم المواقع. على سبيل المثال، كانت التجارب الصغيرة مخصصة للهواتف التي كان عرضها 320 بكسل، والتجارب المتوسطة مع الأجهزة اللوحية، وكان العرض 1024 بكسل، وأي شيء أكبر من ذلك بالنسبة إلى أجهزة الكمبيوتر المكتبي. كانت للشاشات الصغيرة قدرات لمس، على عكس الشاشات الكبيرة. كان مستخدمو الهاتف متعجلين ويتشتت انتباههم، وبالتالي يحتاجون إلى تجربة "خفيفة".

لا ينطبق أي من ذلك، بل هي أساطير عن الأجهزة الجوّالة تنشأ عن افتراض أنّ احتياجات المستخدم تختلف جذريًا بناءً على حجم الشاشة أو نوع الجهاز فقط. وهذا لا يخضع للتدقيق.

على سبيل المثال، إليك تطبيق ويب تقدّمي (PWA) لشبكة اجتماعية يمكنك تثبيته على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي. على أجهزة الكمبيوتر المكتبية، يمكن للعديد من المستخدمين الاحتفاظ بنافذة ضيقة مع الخلاصة في أحد جانبي الشاشة أثناء العمل، بافتراض أنهم يستخدمون جهازًا جوّالاً بسبب العرض المتاح، سيكون من غير الصحيح.

يضيف عالم PWA خارج علامة تبويب المتصفّح تحديات جديدة إلى عالم التصميم السريع الاستجابة، مثل الوضع المصغَّر والعمل على الأجهزة القابلة للطي.

الوضع المصغر

عند تثبيت تطبيق الويب التقدّمي (PWA) على جهاز كمبيوتر مكتبي، يمكن أن تصبح النافذة صغيرة جدًا، أي أصغر من نافذة المتصفّح، وأصغر من إطار عرض الجهاز الجوّال. وهذا أمر جديد على الويب: يمكننا دعم الوضع المصغر، وهو نافذة يمكن أن يكون حجمها صغير 200×100 بكسل CSS.

عند إنشاء تطبيق ويب تقدّمي (PWA) في الوقت الحالي، ننصحك بالتفكير في ما يمكن تقديمه في الوضع المصغَّر بفضل تصميم الويب السريع الاستجابة، مثل أزرار التحكّم فقط في مشغّل الموسيقى أو معلومات لوحة البيانات أو الإجراءات السريعة.

على الكمبيوتر المكتبي، يمكن عرض تطبيق الويب التقدّمي (PWA) في نافذة أصغر من أصغر نافذة صمّمتها للمتصفّح. يضيف نقطة توقف جديدة لتصميم الويب سريع الاستجابة: الوضع المصغَّر.

الهواتف القابلة للطيّ والمختلطة

يشيع أيضًا استخدام الأجهزة القابلة للطي والأجهزة المختلطة في هذه الأيام:

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

على الرغم من أنّ التحدي متوفّر لكل موقع إلكتروني، فباستخدام تطبيق الويب التقدّمي، يمكنك التحكّم في نافذة تثبيت التطبيق ومسؤوليتها. لذلك، يجب أن يتفاعل تصميمك ويقدم أفضل تجربة في كل سياق.

كل شيء أولاً

ولكن من أين يجب أن تبدأ؟ هل تريد نشر المحتوى على الأجهزة الجوّالة أولاً أم بلا إنترنت أولاً؟ عند التصميم من أجل مرونة الويب، أيهما؟ حسنًا، الإجابة هي نعم، كل شيء أولاً. تم تفسير مصطلح الأجهزة الجوّالة أولاً بعدة طرق منذ أن صاغه "لوك وروبلوفسكي" لأول مرة في عام 2009: بدءًا من محاكاة أنماط تجربة المستخدم وواجهة المستخدم الخاصة بالنظام الأساسي على الويب إلى إنشاء تطبيقات للأجهزة الجوّالة قبل إنشاء تطبيقات الويب إلى مجرد استخدام استعلامات عن الوسائط ذات العرض الأدنى وتحديدها يوميًا. مع ذلك، الغرض الأصلي من هذه الميزة هو: يجب أن تفرض عليك الأجهزة الجوّالة التركيز. كما قال لوك:

تتطلب الأجهزة المحمولة فرق تطوير البرامج للتركيز فقط على البيانات والإجراءات الأكثر أهمية في التطبيق. ببساطة لا يوجد مساحة في شاشة مقاس 320 × 480 بكسل تحتوي على عناصر غير ضرورية وغير ضرورية. عليك تحديد الأولويات. لذلك عندما يصمم فريق ما الهاتف المحمول أولاً، تكون النتيجة هي تجربة تركز على المهام الرئيسية التي يريد المستخدمون إنجازها دون التحويلات وبقايا الواجهة التي تنتشر في مواقع الويب التي يمكن الوصول إليها من خلال سطح المكتب اليوم. هذه تجربة مستخدم جيدة ومناسبة للأعمال.

لوك وروبلوسكي

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

تم التلميح إلى المبدأ الثاني في تصميم الويب سريع الاستجابة: "تدرج التجارب المختلفة". وبالتالي، يجب ألا يكون هدف عملك هو تقديم تجربة استخدام واحدة متكاملة ومتوافقة مع وحدات البكسل.

بدلاً من التفكير في تجارب الويب على أنها شيء ثابت، يمكنك اعتبارها مجموعة من الاقتراحات التي سيستخدمها جهاز المستخدم لتوفير أفضل تجربة لسياقه الحالي. وللقيام بذلك، ينبغي تبني التحسين التدريجي.

التحسين التدريجي

التحسين التدريجي هو نمط يتيح لنا كتابة رموز برمجية يتم تشغيلها في كل مكان، بدءًا من HTML العادي وCSS وJavaScript، وإضافة طبقات من الإمكانات فوق ذلك باستخدام العناصر الاحتياطية المناسبة عندما لا تتوفر واجهة برمجة تطبيقات.

كيف يمكنك التحسين؟ ميزة "رصد الميزات" هي نمط يتم من خلاله إجراء اختبار للحصول على الدعم والتفاعل بناءً على نتائج الاختبار هذه. هناك العديد من الأدوات والممارسات المدمجة لمنصات الويب لإجراء ذلك.

باستخدام @supports، تحقَّق من توفُّر ميزة CSS في المتصفّح وطبِّق القواعد استنادًا إلى النتيجة. وينطبق هذا على كل من خصائص CSS وقيمها. فإذا كانت إحدى السمات متوافقة ولم تكن القيمة متاحة، لن ينجح ذلك، وكذلك الحال بالنسبة إلى المواقع غير المتوافقة. يمكن لرمز JavaScript الوصول إلى هذا من خلال CSSSupportsRule.

ترتبط معظم الميزات الجديدة للنظام الأساسي للويب بالكائنات الموجودة، لذا تعمل "الميزة" في اكتشاف نمط العناصر بشكل جيد في JavaScript، وكذلك عمليات البحث المماثلة الأخرى، مثل التحقق من الخصائص أو الطرق على العناصر.

لنقل لغة JavaScript حديثة، يمكنك استخدام نمط الوحدة/nounit لتوفير ميزات أكثر فاعلية مع حمولة صغيرة إلى المتصفحات الأكثر حداثة وتوفير تجربة احتياطية للمتصفحات القديمة. يوفر ذلك أيضًا ضمان توفُّر مرجع جديد من ميزات JavaScript، مثل الوعود والفئات ودوال الأسهم وconst وlet للمتصفّحات التي تتوافق مع "وحدات ES".

يمكنك أيضًا الجمع بين أشكال متعددة من اكتشاف الميزات لإنشاء خط الأساس المحسَّن. أطلق فريق "بي بي سي نيوز" على هذا الأسلوب اسم Cutting the Postard، وتمكِّنك من تقديم تجربة أساسية للجميع وبدء تحسين التجربة فقط بعد الوصول إلى شريط محدَّد يتم رصده.

تجنُّب رصد الجهاز

يجب إجراء اختبار مباشر لدعم الميزات بدلاً من وضع افتراضات الدعم استنادًا إلى سلسلة وكيل المستخدم.

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

علاوةً على ذلك، تعمل المتصفحات على تجميد سلاسل وكيل المستخدم الخاصة بها، من خلال سلاسل وكيل المستخدم للكشف عن الميزات التي تمت الإشارة إليها تحديدًا كسبب للإيقاف النهائي، ما يجعلها أكثر موثوقية مما كانت عليه في السابق في ما يتعلق بتحديد هوية المستخدم والجهاز.

المحتوى أولاً

هناك مبدأ آخر لتصميم مواقع الويب، هو: البدء بمحتواك أولاً. على سبيل المثال، يكون مؤشر الأسهم في الوقت الفعلي مع رسم بياني لأسعار الأسهم، في الأساس، جدول أسهم بأسعارها بمرور الوقت، ربما مع رابط لتحديث الموقع الإلكتروني.

ويمكن بعد ذلك تحسين ذلك باستخدام JavaScript وطلبات الاسترجاع لتحديث قيم الجدول في الموقت أو تحسينه باستخدام المقابس لتوفير تحديثات فورية تستند إلى عملية الدفع. ويمكن تحسينه مرة أخرى لرسم النتائج بيانيًا، ربما باستخدام CSS أو SVG أو ربما باستخدام Canvas. ولكن جوهر المحتوى يبدأ بالمحتوى.

التصميم الجوهري

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

تجتمع هذه المبادئ لمنحنا شيئًا جديدًا: التصميم الأساسي. في حديثها بعنوان Designing Intrinsic Layouts (تصميم التنسيقات الأساسية)، تتحدّث جين سيمونز عن استخدام أدوات CSS الحديثة، مثل الشبكة، و Flexbox، وتخطيط التدفق، وأوضاع الكتابة، لتصميم واجهات المستخدم. باستخدام هذه الأدوات:

يمكنكم حقًا جعل التخطيط جوهريًا للمحتوى الذي نملكه والتصميم الذي نريد القيام به.

جين سيمونز

تسمح لغة CSS الجديدة هذه للمصممين باستعادة بعض التحكم في التخطيط ولكن القيام بذلك بطريقة تتوافق مع أحدث مبادئ تصميم الويب. بدلاً من إنشاء نماذج ثابتة بناءً على أحجام الشاشة الثابتة، يمكنك تحديد القواعد المستندة إلى المحتوى التي يحدث من خلالها التخطيط من خلال الاستفادة من الخصائص الأساسية لهذا المحتوى، مثل مدى صغر أو حجم النص، وحجم النص، والمساحة المتوفرة، في وقت واحد. وهي تتيح لك إدراك تصميمك أثناء تفاعله مع المحتوى دون الحاجة إلى التحكم في موضع كل بكسل.

تضع التخطيطات الأساسية المحادثة حول التحكم على الويب في دائرة كاملة، مما يمنحها تعريفًا. لا يقتصر التحكّم في الويب على إملاء الأجهزة أو أحجام الشاشات أو الألوان أو الخطوط أو التصاميم أو الإمكانيات التي تخصّ كل زائر إلى موقعك الإلكتروني. يتمثّل التحكم في الويب في كتابة القواعد التي سيستخدمها المتصفّح لتجميع تجربتك، وتصميمها بشكل فريد لكل مستخدم في تطبيق الويب التقدّمي الخاص بك.

أداء الويب

إنّ الأساس الأخير وليس الأقل أهمية لتطبيق الويب التقدّمي لدينا هو "أداء الويب". إنّ توفير تجربة رائعة للمستخدمين أمر إلزامي، سيؤدي ذلك إلى تحقيق المزيد من الإحالات الناجحة بكل طريقة ممكنة.

يتضمن أداء الويب عدة خطوات:

  • فهم المقاييس المتاحة الرئيسية التي تركّز على المستخدم
  • حدِّد أهدافًا لكل مقياس.
  • قياس تطبيق الويب التقدّمي (PWA)
  • تحسين المقاييس من خلال تطبيق الأساليب وأفضل الممارسات بشكل ثابت في الرمز البرمجي أو الخادم
  • يُرجى القياس مرة أخرى.
  • قم بتحسين تجربة كل مستخدم على الفور، استنادًا إلى سياق المستخدم.

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

مؤشرات أداء الويب

خلال العقد الماضي، كنا نتعامل مع مقاييس مختلفة لقياس النجاح في أداء الويب. اليوم، يتم تجميع مجموعة من المقاييس المقترَحة ضمن مشروع مؤشرات أداء الويب. تركّز "مؤشرات أداء الويب" على المقاييس في ثلاثة مجالات رئيسية تؤثر في أداء الويب وإدراكه:

  • جارٍ التحميل
  • تفاعلي
  • الثبات البصري

مجموعة من المقاييس من "مؤشرات أداء الويب الأساسية" تعرض نتائج أداء الموقع الإلكتروني.

ومن خلال "مؤشرات أداء الويب الأساسية"، يمكنك إلقاء نظرة سريعة على مدى جودة تطبيق الويب التقدّمي (PWA) الخاص بك في أداء الويب وتجربة المستخدم.

مؤسسات PWA

من المهم أن يكون لتطبيق الويب التقدّمي (PWA) أساس متين في التصميم السريع الاستجابة والأجهزة الجوّالة وكل شيء أولاً والتصميم الأساسي وأداء الويب كأساس لتقديم تجربة رائعة لجميع المستخدمين.

المراجِع