5 صفات من موقع الويب المستجيب حقًا

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

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

1. الأداء الأمثل

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

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

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

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

2. التسلسل الهرمي للمحتوى الذكي

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

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

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

3. التجارب التي تأخذ في الاعتبار نقاط القوة والضعف في الجهاز

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

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

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

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

4. المحتوى مع السياق

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

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

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

5. سهولة الوصول

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

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