الأساسيات

أساس متين

إنّ وضع أساس متين هو الشرط الأساسي لإنشاء تطبيقات رائعة تعمل بلا إنترنت. لتنفيذ هذا الأساس، عليك تصميم وبرمجة قيود الويب باستخدام مبدأَين:

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

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

تصميم الويب التفاعلي

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

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

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

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

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

خرافة المستخدِم على الأجهزة الجوّالة

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

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

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

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

الوضع المصغَّر

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

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

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

الهواتف القابلة للطي والهواتف الهجينة

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

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

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

كل شيء أولاً

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

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

Luke Wroblewski

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

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

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

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

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

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

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

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

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

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

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

يجب اختبار مدى توفّر الميزة مباشرةً بدلاً من افتراض توفّرها استنادًا إلى سلسلة User-Agent.

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

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

التركيز على المحتوى أولاً

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

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

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

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

تجتمع هذه المبادئ معًا لتقدّم لنا شيئًا جديدًا: التصميم الأساسي. في محاضرتها تصميم التنسيقات الأساسية، تتحدث "جين سيمونز" عن استخدام أدوات CSS الحديثة، مثل Grid وFlexbox وتنسيق Flow ووضعيات الكتابة، لتصميم واجهات المستخدم وإنشائها. باستخدام هذه الأدوات، يمكنها إجراء ما يلي:

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

جين سيمونز

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

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

أداء الويب

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

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

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

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

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

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

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

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

أساسيات تطبيقات الويب التقدّمية

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

الموارد