ضَع في اعتبارك المحتوى والتصميم والتخطيط عند إنشاء تطبيقات لمجموعة من المستخدمين والأجهزة.
كيفية القراءة على الويب
يلخّص دليل الكتابة الخاص بالحكومة الأمريكية ما يريده المستخدمون من الكتابة على الويب:
تُظهر الأبحاث أنّ المستخدمين لا يقرأون صفحات الويب، بل يتصفّحونها. في المتوسط، يقرأ المستخدمون %20 إلى %28 فقط من محتوى صفحة الويب. تكون القراءة من الشاشات أبطأ بكثير من القراءة من الورق. سييأس المستخدمون ويغادرون موقعك الإلكتروني إذا لم يكن من السهل الوصول إلى المعلومات وفهمها.
كيفية الكتابة للمواقع الإلكترونية المتوافقة مع الأجهزة الجوّالة
ركِّز على الموضوع المطروح واشرح القصة في البداية. لكي يكون المحتوى قابلاً للقراءة على مجموعة من الأجهزة ومساحات العرض، احرص على توضيح النقاط الرئيسية في البداية، أي في الفقرات الأربع الأولى، وفي حدود 70 كلمة.
اسأل نفسك عمّا يريده المستخدمون من موقعك الإلكتروني. هل يحاولون معرفة شيء ما؟ إذا كان المستخدمون يزورون موقعك الإلكتروني للحصول على معلومات، احرص على أن يكون كل النص موجّهًا لمساعدتهم في تحقيق هدفهم. اكتب بصيغة المبني للمعلوم وقدِّم إجراءات وحلولاً.
انشر المحتوى الذي يريده الزوّار فقط.
تُظهر أبحاث الحكومة البريطانية أيضًا ما يلي:
بعبارة أخرى: استخدِم لغة بسيطة وكلمات قصيرة وبُنى جمل بسيطة، حتى إذا كان الجمهور من ذوي المعرفة التقنية. ما لم يكن هناك سبب وجيه لعدم ذلك، حافظ على نبرة صوتك وكأنّك تجري محادثة. تنص إحدى قواعد الصحافة القديمة على الكتابة كما لو كنت تتحدث إلى طفل ذكي يبلغ من العمر 11 عامًا.
المليار مستخدم القادم
إنّ أسلوب الكتابة المختصر مهم بشكل خاص للقراء على الأجهزة الجوّالة، وهو ضروري عند إنشاء محتوى للهواتف المنخفضة التكلفة التي تتضمّن منافذ عرض صغيرة تتطلّب المزيد من التمرير وقد تتضمّن شاشات بجودة أقل وشاشات أقل استجابة.
معظم المليار مستخدم القادم الذين سيتصلون بالإنترنت سيستخدمون أجهزة رخيصة. ولن يرغبوا في إنفاق ميزانية البيانات على تصفّح محتوى طويل، وقد لا يقرأون بلغتهم الأم. اختصِر النص: استخدِم جملًا قصيرة، وأقل قدر ممكن من علامات الترقيم، وفقرات من خمسة أسطر أو أقل، وعناوين من سطر واحد. ننصحك باستخدام نصوص سريعة الاستجابة (على سبيل المثال، استخدام عناوين أقصر لمساحات العرض الأصغر)، ولكن احذر من السلبيات.
سيؤدي استخدام الحد الأدنى من النص أيضًا إلى تسهيل ترجمة المحتوى وتكييفه مع الثقافات المختلفة، كما سيزيد من احتمال اقتباس المحتوى على وسائل التواصل الاجتماعي.
الخلاصة:
- اعتماد البساطة
- تقليل الفوضى
- الدخول في صلب الموضوع
إزالة المحتوى غير الضروري
من حيث حجم البايت، فإنّ صفحات الويب كبيرة وتزداد حجمًا.
تتيح تقنيات التصميم المتجاوب عرض محتوى مختلف لأحجام إطارات العرض الأصغر، ولكن من المنطقي دائمًا البدء بتبسيط النصوص والصور والمحتوى الآخر.
غالبًا ما يكون مستخدمو الويب مهتمين باتّخاذ إجراء، أي "يميلون إلى الأمام" بحثًا عن إجابات لأسئلتهم الحالية، بدلاً من الاسترخاء وقراءة كتاب جيد.
جاكوب نيلسن
اسأل نفسك: ما الذي يحاول المستخدمون تحقيقه عند زيارة موقعي الإلكتروني؟
هل يساعد كل مكوّن من مكوّنات الصفحة المستخدمين في تحقيق هدفهم؟
إزالة عناصر الصفحة المكرّرة
تتضمّن ملفات HTML ما يقارب 70 ألف طلب وأكثر من تسعة طلبات لصفحة الويب العادية، وفقًا لأرشيف HTTP.
تستخدم العديد من المواقع الإلكترونية الرائجة آلاف عناصر HTML لكل صفحة، وآلاف أسطر الرموز البرمجية، حتى على الأجهزة الجوّالة. قد لا يؤدي حجم ملف HTML الكبير إلى بطء تحميل الصفحات، ولكن يمكن أن يشير حجم حمولة HTML الكبيرة إلى تضخّم المحتوى، لأنّ ملفات html .الأكبر حجمًا تعني المزيد من العناصر أو المزيد من المحتوى النصي أو كليهما.
سيؤدي تقليل تعقيد HTML أيضًا إلى تقليل حجم الصفحة، والمساعدة في إتاحة التوطين والتكييف، وتسهيل تخطيط التصميم المتجاوب وتصحيح أخطائه. للحصول على معلومات حول كتابة رمز HTML أكثر فعالية، يمكنك الاطّلاع على رمز HTML عالي الأداء.
مقابل كل خطوة تطلب من المستخدم تنفيذها قبل أن يستفيد من تطبيقك، ستخسر% 20 من المستخدمين
غابور سيلّي، Twitter
وينطبق الأمر نفسه على المحتوى: ساعِد المستخدمين في الوصول إلى ما يريدونه بأسرع ما يمكن.
لا تكتفِ بإخفاء المحتوى عن مستخدمي الأجهزة الجوّالة. ننصحك بالسعي إلى تحقيق تطابق المحتوى، لأنّ محاولة تخمين الميزات التي لن يفتقدها مستخدمو الأجهزة الجوّالة ستؤدي حتمًا إلى إخفاق البعض. إذا كانت لديك الموارد اللازمة، يمكنك إنشاء إصدارات بديلة من المحتوى نفسه لأحجام مختلفة من إطار العرض، حتى لو كان ذلك فقط لعناصر الصفحة ذات الأولوية العالية.
فكِّر في إدارة المحتوى وسير العمل: هل تؤدي الأنظمة القديمة إلى محتوى قديم؟
تبسيط النص
مع تزايد استخدام الأجهزة الجوّالة على الويب، عليك تغيير طريقة الكتابة. اعتمِد البساطة، وتخلَّص من الفوضى، وادخل في صلب الموضوع.
إزالة الصور المكرّرة
يمكن أن تكون الصور جميلة ومسلية وغنية بالمعلومات، ولكنها تشغل أيضًا مساحة على الصفحة وتزيد من حجمها وتزيد من عدد طلبات الملفات. تزداد مدة الاستجابة سوءًا كلما ساءت إمكانية الاتصال، ما يعني أنّ كثرة طلبات ملفات الصور تشكّل مشكلة متزايدة مع تزايد استخدام الويب على الأجهزة الجوّالة.
تستهلك الصور أيضًا الطاقة. بعد الشاشة، يُعدّ الراديو ثاني أكبر عامل يؤدي إلى استنزاف البطارية. المزيد من طلبات الصور، والمزيد من استخدام الراديو، والمزيد من البطاريات الفارغة. حتى عرض الصور يتطلّب طاقة، وتتناسب هذه الطاقة مع الحجم والعدد. اطّلِع على تقرير جامعة ستانفورد Who Killed My Battery?
إذا أمكن، تخلَّص من الصور.
إليك بعض الاقتراحات:
- ننصحك بتصميمات تتجنّب استخدام الصور تمامًا أو تستخدمها بشكل محدود. يمكن أن يكون النص فقط جميلاً! اسأل نفسك: "ما الذي يسعى الزوّار إلى تحقيقه من زيارة موقعي؟ هل تساعد الصور في هذه العملية؟"
- في الماضي، كان من الشائع حفظ العناوين والنصوص الأخرى كرسومات. لا يستجيب هذا الأسلوب بشكل جيد للتغييرات في حجم إطار العرض، كما أنّه يزيد من حجم الصفحة ووقت الاستجابة. يعني استخدام النص كرسومات أيضًا أنّه لا يمكن لمحركات البحث العثور على النص، ولا يمكن لقارئات الشاشة وغيرها من التكنولوجيات المساعدة الوصول إليه. استخدِم نصًا "حقيقيًا" حيثما أمكن ذلك، إذ يمكن أن تتيح خطوط الويب وCSS أسلوب خط جميل.
- استخدِم CSS بدلاً من الصور للتدرجات والظلال والزوايا المستديرة ونقوش الخلفية، وهي ميزات تتوافق مع جميع المتصفحات الحديثة. يُرجى العِلم أنّ CSS قد يكون أفضل من الصور، ولكن قد يكون هناك عقوبة على المعالجة والعرض، لا سيما على الأجهزة الجوّالة.
- من النادر أن تعمل صور الخلفية بشكل جيد على الأجهزة الجوّالة. يمكنك استخدام طلبات البحث عن الوسائط لتجنُّب صور الخلفية على إطارات العرض الصغيرة.
- تجنَّب استخدام صور شاشة البداية.
- استخدام CSS للصور المتحركة في واجهة المستخدم:
- تعرَّف على الرموز الرسومية، واستخدِم رموز Unicode ورموزًا بدلاً من الصور، مع خطوط الويب إذا لزم الأمر.
- ننصحك باستخدام خطوط الرموز، فهي رسومات متجهة يمكن تغيير حجمها بلا حدود، ويمكن تنزيل مجموعة كاملة من الصور في خط واحد. (يُرجى الانتباه إلى هذه المخاوف).
- يمكن استخدام العنصر
<canvas>لإنشاء صور في JavaScript من خطوط ومنحنيات ونصوص وصور أخرى. - لن يؤدي تضمين صور SVG أو معرّفات موارد منتظمة (URI) للبيانات إلى تقليل حجم الصفحة، ولكن يمكن أن يؤدي إلى تقليل وقت الاستجابة من خلال تقليل عدد طلبات الموارد. يتوافق تنسيق SVG المضمّن بشكل كبير مع متصفحات الأجهزة الجوّالة وأجهزة الكمبيوتر، ويمكن أن تؤدي أدوات التحسين إلى تقليل حجم ملفات SVG بشكل كبير. وبالمثل، يمكن استخدام معرّفات الموارد المنتظمة (URI) للبيانات. يمكن تضمين كليهما في CSS.
- ننصحك باستخدام
<video>بدلاً من ملفات GIF المتحركة. يتوافق عنصر الفيديو مع جميع المتصفّحات على الأجهزة الجوّالة (باستثناء Opera Mini).
لمزيد من المعلومات، يُرجى الاطّلاع على تحسين الصور وإزالة الصور واستبدالها.
تصميم المحتوى ليعمل بشكل جيد على أحجام إطارات العرض المختلفة
"أنشئ منتجًا، ولا تعِد تصميمه للشاشات الصغيرة. يتم إنشاء منتجات رائعة للأجهزة الجوّالة، ولا يتم نقلها من أجهزة أخرى".
Mobile Design and Development, Brian Fling
لا يكتفي المصمّمون المميّزون "بالتحسين للأجهزة الجوّالة"، بل يفكّرون بطريقة متجاوبة لإنشاء مواقع إلكترونية تعمل على مجموعة من الأجهزة. إنّ بنية النص ومحتوى الصفحة الآخر أمران مهمّان لتحقيق النجاح على جميع الأجهزة.
يستخدم العديد من المليار مستخدم القادم أجهزة منخفضة التكلفة ذات مساحات عرض صغيرة. قد تكون القراءة على شاشة بحجم 3.5 أو 4 بوصة وبدقة منخفضة أمرًا صعبًا.
إليك صورة لهما معًا:
على الشاشة الأكبر، يكون النص صغيرًا ولكن يمكن قراءته.
على الشاشة الأصغر، يعرض المتصفّح التنسيق بشكل صحيح، ولكن النص غير مقروء، حتى عند التكبير. تكون الشاشة غير واضحة وتظهر عليها "صبغة لونية"، أي أنّ اللون الأبيض لا يبدو أبيضًا، ما يجعل المحتوى أقل وضوحًا.
تصميم محتوى مخصّص للأجهزة الجوّالة
عند إنشاء تصميمات لمجموعة من إطارات العرض، يجب مراعاة المحتوى بالإضافة إلى التصميم والتصميمات الغرافيكية، واستخدام نصوص وصور حقيقية، وليس محتوًى نائبًا.
"المحتوى يسبق التصميم. التصميم بدون محتوى ليس تصميمًا، بل هو زخرفة".
جيفري زيلدمان
- ضَع المحتوى الأكثر أهمية في أعلى الصفحة، لأنّ المستخدمين يميلون إلى قراءة صفحات الويب بنمط على شكل حرف F.
- يزور المستخدمون موقعك الإلكتروني لتحقيق هدف معيّن. اسأل نفسك عمّا يحتاجونه لتحقيق هذا الهدف وتخلَّص من كل ما عدا ذلك. يجب التخلّص من الزخارف المرئية والنصية والمحتوى القديم والروابط المفرطة وغيرها من العناصر غير الضرورية.
- يجب توخّي الحذر عند استخدام رموز المشاركة على وسائل التواصل الاجتماعي، لأنّها قد تؤدي إلى تشويش التصاميم، كما أنّ الرمز الخاص بها قد يؤدي إلى إبطاء تحميل الصفحة.
- صمِّم تخطيطات سريعة الاستجابة للمحتوى، وليس أحجام أجهزة ثابتة.
المحتوى الاختباري
- يمكنك التحقّق من إمكانية القراءة على إطارات عرض أصغر باستخدام "أدوات مطوّري البرامج في Chrome" وغيرها من أدوات المحاكاة.
- اختبِر المحتوى في ظروف تتسم بنطاق ترددي منخفض ووقت استجابة مرتفع، وجرِّب المحتوى في مجموعة متنوعة من سيناريوهات الاتصال.
- جرِّب قراءة المحتوى والتفاعل معه على هاتف منخفض التكلفة.
- اطلب من الأصدقاء والزملاء تجربة تطبيقك أو موقعك الإلكتروني.
- إنشاء مختبر بسيط لاختبار الأجهزة يتضمّن مستودع GitHub الخاص بمشروع Mini Mobile Device Lab من Google تعليمات حول كيفية إنشاء جهازك الخاص. OpenSTF هو تطبيق ويب بسيط لاختبار المواقع الإلكترونية على أجهزة Android متعددة.
في ما يلي مثال على استخدام OpenSTF:
يتزايد استخدام الأجهزة الجوّالة لاستهلاك المحتوى والحصول على المعلومات، وليس فقط كأجهزة للتواصل والألعاب والوسائط.
لذلك، من المهم بشكل متزايد التخطيط للمحتوى ليعمل بشكل جيد على مجموعة من إطارات العرض، وتحديد أولويات المحتوى عند التفكير في تصميم التخطيط والواجهة وتصميم التفاعل على الأجهزة المختلفة.
فهم تكلفة البيانات
تزداد أحجام صفحات الويب.
وفقًا لأرشيف HTTP، يبلغ متوسط حجم الصفحة لأهم مليون موقع إلكتروني الآن أكثر من 2 ميغابايت.
يتجنّب المستخدمون المواقع الإلكترونية أو التطبيقات التي يُعتقد أنّها بطيئة أو مكلفة، لذا من الضروري فهم تكلفة تحميل مكوّنات الصفحة والتطبيق.
يمكن أن يكون خفض حجم الصفحة مفيدًا أيضًا. تبيّن لكريس زاكارياس من YouTube أنّه عند تقليل حجم صفحة المشاهدة من 1.2 ميغابايت إلى 250 كيلوبايت:
بعبارة أخرى، يمكن أن يؤدي تقليل حجم الصفحة إلى فتح أسواق جديدة تمامًا.
احتساب حجم الصفحة
تتوفّر عدة أدوات لاحتساب حجم الصفحة. تعرض لوحة "الشبكة" في "أدوات مطوّري البرامج في Chrome" إجمالي حجم البايت لجميع الموارد، ويمكن استخدامها للتأكّد من أوزان أنواع مواد العرض الفردية. يمكنك أيضًا التحقّق من العناصر التي تم استردادها من ذاكرة التخزين المؤقت للمتصفّح.
توفّر متصفّحات Firefox وغيرها أدوات مشابهة.
توفّر أداة WebPagetest إمكانية اختبار عمليات تحميل الصفحة الأولى والصفحات اللاحقة. يمكنك برمجة الاختبارات باستخدام نصوص برمجية (على سبيل المثال، لتسجيل الدخول إلى موقع إلكتروني) أو باستخدام واجهات RESTful API. يوضّح المثال التالي (تحميل developers.google.com/web) أنّ التخزين المؤقت تم بنجاح وأنّ عمليات تحميل الصفحات اللاحقة لم تتطلّب أي موارد إضافية.
يقدّم WebPagetest أيضًا تفصيلاً للحجم والطلبات حسب نوع MIME.
احتساب تكلفة الصفحة
بالنسبة إلى العديد من المستخدمين، لا تقتصر تكلفة البيانات على وحدات البايت والأداء، بل تشمل أيضًا المال.
يتيح لك الموقع الإلكتروني What Does My Site Cost? تقدير التكلفة المالية الفعلية لتحميل موقعك الإلكتروني. يوضّح المدرّج التكراري أدناه تكلفة تحميل amazon.com (باستخدام خطة بيانات مسبقة الدفع).
يُرجى العِلم أنّ هذا لا يأخذ في الاعتبار القدرة على تحمّل التكاليف مقارنةً بالدخل. تعرض البيانات الواردة من blog.jana.com تكلفة البيانات.
| تكلفة باقة بيانات بسعة 500 ميغابايت (بالدولار الأمريكي) |
الحد الأدنى للأجور في الساعة (بالدولار الأمريكي) |
عدد ساعات العمل المطلوبة لدفع تكلفة خطة بيانات بسعة 500 ميغابايت |
|
| الهند | $3.38 | 0,20 دولار أمريكي (أو ما يعادل هذا المبلغ بالعملة المحلية) | 17 ساعة |
| إندونيسيا | $2.39 | 0.43 دولار أمريكي (أو ما يعادله بالعملة المحلية) | ٦ ساعات |
| البرازيل | $13.77 | $1.04 | 13 ساعة |
لا تقتصر مشكلة حجم الصفحة على الأسواق الناشئة. في العديد من البلدان، يستخدم الأشخاص خططًا للجوّال تتضمّن بيانات محدودة، وسيتجنّبون موقعك الإلكتروني أو تطبيقك إذا رأوا أنّهما يستهلكان الكثير من البيانات ومكلفان. حتى خطط بيانات الجوّال وشبكة Wi-Fi "غير المحدودة" تتضمّن عادةً حدًا أقصى للبيانات يتم بعده حظرها أو تقييدها. لهذه الأسباب، من الأفضل أن تكون شفافًا قدر الإمكان بشأن مقدار البيانات التي تستهلكها صفحتك. تقدّم مشاركة المدوّنة التالية أفضل الممارسات المحدّدة: تعزيز الثقة من خلال شفافية التكاليف
الخلاصة: يؤثر حجم الصفحة في الأداء ويكلّف أموالاً. توضّح مقالة تحسين كفاءة المحتوى كيفية خفض هذه التكلفة.