اختبار الصور وأطوال النص لضمان استجابة موقعك بشكل مناسب
عندما نقوم بتصميم مواقع الويب ونخطط لكيفية عرض محتوى تلك المواقع ، فإننا غالباً ما نقوم بذلك مع وضع مثالي في الاعتبار. يتم تخيل العناوين ومناطق النص على أنها تحتوي على أطوال معينة ، في حين أن الصور المصاحبة لذلك النص مصممة للعرض في أبعاد تسمح لها بالعمل كما هو مقصود في التصميم العام. حتى لو كانت هذه العناصر مرنة نوعًا ما كجزء من تصميم موقع الويب المتجاوب (الذي يجب أن يكون) ، سيكون هناك حد لمدى مرونة هذه العناصر.
إذا قمت بنشر موقع ويب على نظام إدارة المحتوى (CMS) وتسمح للعملاء بإدارة ذلك الموقع وإضافة محتوى جديد بمرور الوقت ، فإن الحدود التي صممتموها ستوضع على المحك. ثق في أن عملاءك سيجدون طرقًا لتغيير موقع الويب الذي لم تحلم به أبدًا. إذا لم تكن قد حددت المواقف بشكل جيد خارج المواضع المثالية التي عملت بها في عملية التصميم الخاصة بك ، فقد يكون تخطيط الموقع في خطر كبير. ولهذا السبب من المهم بشكل خاص أن تشدد على اختبار كل محتوى موقع الويب وعلى جوانب تخطيط الموقع قبل إطلاق هذا الموقع. فيما يلي بعض النصائح لكيفية القيام بذلك.
اختبار صورة الاحجام
لا شك أن الطريقة الأكثر شيوعًا التي يكسرها الأشخاص في تخطيط موقع الويب الخاص بهم هي إضافة صور بحجم غير ملائم (وهذه أيضًا هي الطريقة التي تؤثر سلبًا على الأداء الكلي للموقع وتسبب سرعة بطيئة في التنزيل). يتضمن ذلك صورًا كبيرة جدًا ، بالإضافة إلى الصور الصغيرة جدًا التي لا يمكن استخدامها على النحو المقصود في موقعك على الويب.
حتى إذا كنت تستخدم CSS لإجبار حجم هذه الصور في تخطيطك ، فستؤدي الصور التي تكون خارج النطاق إلى حد كبير مع المواصفات الأصلية للموقع إلى حدوث مشكلات. إذا كانت أبعاد الصورة غير صحيحة ، فقد يفرض CSS الخاص بك عرض هذه الصورة باستخدام العرض والارتفاع المناسبين ، ولكن قد يتم تشويه الصورة نفسها ونسبة العرض إلى الارتفاع الخاصة بها. سيكون لذلك بالتأكيد تأثير سلبي على مظهر موقعك كصورة صغيرة جدًا وسيتم "تفجيرها" وستفقد الجودة. تبدو الصورة الكبيرة جدًا والتي تصبح أصغر حجمًا مع CSS تبدو جيدة وتحتفظ بجودتها ، ولكن قد يكون حجم الملف غير معقول كبيرًا لكيفية استخدامه.
عند اختبار موقعك على الويب ، تأكد من إضافة الصور التي تقع خارج نطاقك المقصود. أضف في CSS وتقنيات الصورة المتجاوبة التي تعالج هذه التحديات عن طريق تغيير حجم الصورة وفقًا أو ، في حالة نسبة العرض إلى الارتفاع غير الصحيحة ، يجب أيضًا التفكير في استخدام شيء مثل خاصية قصاصة CSS لاقتصاص الصورة حسب الحاجة.
اختبار وسائل الإعلام الأخرى
بالإضافة إلى الصور ، اختبر أيضًا وسائط أخرى مثل مقاطع الفيديو على موقعك وشاهد كيف ستظهر هذه العناصر في تخطيطك باستخدام قيم مختلفة لمقاسات الطول والعرض. مرة أخرى ، عليك مراعاة الطبيعة المتجاوبة لموقعك وكيف ستعمل على أحجام مختلفة للشاشة والجهاز .
اختبار عناوين النصوص
بعد الصور ، تكون منطقة موقع الويب التالية التي تسبب معظم المشكلات في مواقع الويب المباشرة التي يديرها المحترفون بخلاف الويب هي عناوين نصية. هذه هي الأسطر القصيرة (المفترضة) للنص والتي غالبًا ما تبدأ محتوى صفحة أو قسم في تلك الصفحة. النص فوق هذه الفقرة الذي يقرأ "عناوين نصية اختبار" هو مثال على ذلك.
إذا كنت قد صممت موقعًا لاستيعاب عنوان مثل هذا العنوان:
"اختبار عناوين النص"
ولكن يستخدم عميلك نظام إدارة المحتوى لإضافة مقالة تحتوي على عنوان مثل هذا:
"اختبار عناوين النصوص على مجموعة متنوعة من صفحات الويب جميعها بمتطلبات مقاسات مختلفة واحتياجات المستخدم"
قد لا يتمكن المخطط الخاص بك من استيعاب كل هذا النص الإضافي بشكل نظيف. تمامًا كما يجب أن تشدد على اختبار الصور والوسائط عن طريق إضافة مداخل تقع خارج الأحجام التي صممتها في البداية ، لذا يجب عليك القيام بذلك باستخدام عناوين نصية للتأكد من أنها مرنة بدرجة كافية لعرض خطوط طويلة جدًا مثل واحد اعلاه.
اختبار أطوال النص
عند الاستمرار في موضوع النص ، ستحتاج أيضًا إلى اختبار أطوال نصية مختلفة للمحتوى الرئيسي في الصفحات . يتضمن هذا نصًا طويلاً جدًا ، بالإضافة إلى نص قصير جدًا - والذي يمكن أن يكون في الواقع المشكلة التي تهيمن على العديد من تخطيطات الصفحات.
نظرًا لأن حجم صفحات الويب ، بطبيعتها ، يتزايد حجمها لاستيعاب ارتفاع النص الذي تحتوي عليه ، فإن الصفحات التي تحتوي على نصوص كثيرة عادة ما يتم قياس ارتفاعها حسب الحاجة. ما لم تقم بتقييد ارتفاع الصفحة (الذي لا يجب عليك القيام به إذا كنت تريد أن تكون صفحتك مرنة) ، فإن النص الإضافي لا يمثل مشكلة. النص القليل جدا هو قضية أخرى - وهو واحد ينسى العديد من المصممين اختباره في عملية التصميم الخاصة بهم.
قد يؤدي النص القليل جدًا إلى جعل الصفحة تبدو غير مكتملة أو حتى متقطعة ، لذا تأكد من تقليل محتوى صفحتك لرؤية ما يحدث في تلك الحالات وإجراء التعديلات اللازمة على CSS الخاصة بالموقع للتعامل مع هذه المواقف.
اختبار تكبير الصفحة
قد يستخدم الأشخاص الذين يعانون من مشاكل في الرؤية ميزة زوم الصفحة في متصفح الويب لزيادة حجم صفحة الويب الخاصة بك. إذا قام أحدهم بتصغير عدد كبير ، فقد ينهار المخطط الخاص بك. هذا هو أحد الأسباب التي تجعلك ترغب في استخدام EMs كوحدة قياس لأحجام خطوط موقع الويب الخاص بك وكذلك استعلامات الوسائط الخاصة بك. لأن EMs هي وحدة قياس نسبي (استنادًا إلى حجم النص الافتراضي لهذا المتصفح) ، فهي أكثر ملاءمة لتنسيقات مواقع الويب المرنة والمرن.
اختبر موقعك على الويب لتكبير الصفحة ولا تتوقف عند مستوى واحد أو مستويين من التكبير / التصغير. قم بتكبير موقعك لأعلى وأسفل مجموعة متنوعة من المستويات لضمان رد فعل صفحاتك على النحو المنشود.
لا تنس عن سرعة التنزيل والأداء
أثناء اختبارك للتأثيرات التخطيطية لقرارات العميل ، لا تنس أيضًا الانتباه إلى تأثير تلك القرارات على أداء الموقع. قد تؤدي الصور والمحتوى الذي سيضيفه هؤلاء العملاء إلى إعاقة سرعة التنزيل للموقع وتدمير قابلية الاستخدام بشكل عام للموقع. خطة لتأثير هذه الإضافات والقيام بدورك في عملية التنمية لتقليل هذه الآثار.
إذا كان موقعك على الويب يتم إنشاؤه بميزانية أداء ، فشارك هذه المعلومات مع عملائك ووضح لهم كيفية اختبار صفحة ويب لمقاييس الأداء. اشرح لهم أهمية الحفاظ على هذه العتبات المحددة لحجم الصفحة وسرعة التنزيل وعرض كيفية تأثير الإضافات التي يقومون بها على الموقع ككل. خذ الوقت الكافي لتدريبهم على كيفية الحفاظ على عمل الموقع بشكل جيد. حول موضوع التدريب ...
تدريب العملاء ضروري
من المهم التأكيد على اختبار صور موقعك ، ونصه ، وعناصر الصفحة الأخرى ، ولإنشاء أنماط ستحسب الحالات المتطرفة ، ولكن هذا لن يكون أبداً بديلاً لتدريب العميل. يجب أن يكون العمل الخاص بك ضد الرصاص في الموقع بالإضافة إلى الوقت الذي تقضيه في تدريب عملائك على كيفية رعاية مواقعهم وإدارتها بفعالية. في النهاية ، سيكون العميل المدرّب بشكل جيد والذي يتفهم مسؤولياته وتأثير القرارات التي يتخذها على موقع لا يقدر بثمن بالنسبة لجهودك للحفاظ على عمل هذا الموقع وتبحث في أفضل حالاته.