مصطلح “الجوال أولاً” مصطلح شائع أطلقه خبراء موقع الويب ، ولكن ماذا يعني ذلك حقًا؟ بشكل أساسي ، يكون ذلك عند تصميم موقع ويب (أو برنامج) مع تجربة الهاتف المحمول كاعتبار رئيسي لك ، بدلاً من كمبيوتر سطح المكتب. زاد عدد الأشخاص الذين يتصفحون الويب على أجهزتهم الجوالة بشكل ملحوظ في السنوات الأخيرة ومن المتوقع أن يزداد عددهم. هذا هو السبب في أن موقع الويب الجميل على الأجهزة المحمولة مهم للغاية لجذب الزوار المحتملين وتقليل معدل الارتداد على الأجهزة المحمولة.
يفترض بعض الناس أن موقع الويب الخاص بهم يبدو رائعًا على سطح المكتب ، لذلك سيبدو كإصدار صغير رائع للأجهزة المحمولة ، ولكن هذا ليس هو الحال بالضرورة. وإذا كان الكثير من زيارات موقع الويب الخاص بك تأتي من مشاهدات صفحة الجوال (يمكنك التحقق من ذلك في إحصائياتك) ، فيجب عليك بالتأكيد تحسين موقع الويب الخاص بك لأجهزة الجوال.
لذلك قمنا بتجميع بعض المشكلات الشائعة لتصميم مواقع الويب للجوّال وكيفية تجنبها! انظر أيضًا البرنامج التعليمي خطوة بخطوة حول كيفية إنشاء موقع ويب محسن للأجهزة المحمولة.
ربما قمت بإنشاء موقع الويب الخاص بك قبل بضع سنوات ، والآن يبدو أخيرًا بالطريقة التي تريدها (على سطح المكتب). إذا لم تقم بتغيير القالب الخاص بك منذ وقت طويل ، فمن المحتمل أنك لا تزال تستخدم أحد القوالب القديمة لدينا. تحتوي القوالب القديمة على رمز بدلاً من اسم مدينة (على سبيل المثال ، F4242) ، وهي “متوافقة مع الجوّال” ولكنها لا تبدو جيدة مثل القوالب الحديثة “سريعة الاستجابة” (المسماة بعد مدينة).
فكيف تكون الاستجابة أفضل؟ سوف “يستجيب” موقع الويب الخاص بك تلقائيًا لحجم الجهاز الذي يستخدمه الزائر. ستبدو الدقة والصور والقائمة مثالية إذا كنت تستخدم جهازًا لوحيًا أو سطح مكتبًا أو هاتفًا ذكيًا. أيضًا ، من الأفضل لك SEO ، حيث يمكن لـ Google العثور عليك بسهولة أكبر.
ربما لم تتح لك الفرصة لمراجعة موقع الويب الخاص بك على جهاز محمول / جهاز لوحي حتى الآن؟ أو لا يمكنك عناء تحديث القالب الخاص بك وإعادة صياغة موقع الويب بأكمله؟ نحن نفهم تماما من أين أتيت. ولكن ألق نظرة على جميع الأشخاص من حولك الذين يتصفحون هواتفهم المحمولة في وسائل النقل العام. جميعهم زوار محتملين يمكنك الحصول عليهم فقط لساعة العمل الإضافية كل يوم لمدة أسبوع.
مثال على قالب لا يستجيب. يترك نموذج الاتصال الصفحة.
يبدو النعل الجديد سريع الاستجابة مثاليًا.
المحلول: لعرض القالب الحالي الخاص بك ، افتح القائمة واختر تصميم> رئيسي> قوالب. سيظهر النموذج الحالي الخاص بك في الزاوية اليسرى العليا. تأكد من أن قالب Jimdo هو اسم مدينة (مثل ستوكهولم). إذا لم يكن كذلك ، فإنه لا يستجيب ونوصي بشدة تغيير تصميم القالب الخاص بك لشيء أكثر حداثة. تستطيع استخدم هذه الأداة للتحقق من كيفية ظهور موقع الويب الخاص بك على كل جهاز!
ابحث في موقع الويب الخاص بك على جهاز محمول ثم احسب كم يستغرق تحميل “1-2-3 …”. إذا استغرق الأمر 3 ثوانٍ أو أكثر ، فيجب عليك تصفح صفحتك ومعرفة ما يبطئها. يميل المشتبه بهم الرئيسيون إلى مقاطع فيديو أو رسوم متحركة أو مكونات إضافية. فكر فيما إذا كانت هذه تضيف قيمة بالفعل إلى موقعك على الويب وما إذا كان الأمر يستحق زيادة وقت تحميل الصفحة (ناهيك عن استهلاك بيانات الجوال!). توفر Google طريقة مجانية وبسيطة لتشخيص العديد من مشكلات الجوال على موقعها على الويب. ما عليك سوى كتابة عنوان URL لموقع الويب الخاص بك وسيتم تقديم بعض التحسينات المقترحة لموقع الويب للجوال الخاص بك.
لاحظ أن أدوات المشاركة الاجتماعية أو الأزرار التي تعتمد على JavaScripts خارجية ستقلل وقت التحميل. لذا ، قم بتحديد أولويات 2-4 قنوات وسائل التواصل الاجتماعي أو استخدم أزرار المشاركة المدمجة في Jimdo لوقت تحميل أسرع.
من الممارسات الجيدة تحسين الصور على موقع الويب الخاص بك. وهذا يعني تغيير حجم الصورة إذا لزم الأمر وتقليل حجم الملف. هناك العديد من الأدوات التي يمكن أن تساعدك في ضغط الصورة ، دون فقدان أي جودة. حتى التخفيض البسيط في حجم الملف على صفحة ذات صورة كبيرة أو صورة خلفية يمكن أن يكون له تأثير ملحوظ. تذكر أن Google تستخدم أوقات تحميل الصفحة كعامل تحسين محركات البحث ، لذلك يمكن أن تؤثر سلبًا على تصنيفك إذا كانت صفحتك تستغرق وقتًا للتحميل.
المحلول: تحقق من الوقت الذي يستغرقه تحميل موقع الويب الخاص بك على الأجهزة المحمولة ثم قم بتدقيق موقع الويب الخاص بك لإزالة أو تحسين أي عنصر قد يبطئ موقعك.
يحدث الكثير ولا تعرف عينك ما إذا كانت ستركز على الشعار أم الرأس أم عبارة تحث المستخدم على اتخاذ إجراء. يستغرق تصفح موقع ويب على جهاز محمول وقتًا طويلاً ، لذا اجعل تجربة المستخدم أسهل بكثير من خلال تقسيم المحتوى منطقيًا إلى أقسام. ثم قم بإنشاء عناوين فردية لكل قسم باستخدام علامات H1 و H2 و H3. سيؤدي تقديم تجربة مستخدم بديهية إلى جذب المستخدمين لفترة أطول وزيادة فرص الشراء على موقع الويب الخاص بك.
يجب أن تكون المعلومات المهمة لزوارك في أعلى موقع الويب الخاص بك. ثم انتقل إلى التفاصيل أدناه. فكر فيما يتوقع الزائر رؤيته والإجابة على الأسئلة الخمسة: من؟ من؟ لماذا ا؟ متي؟ أين؟ ثم اسأل نفسك ما إذا كان يمكنك رؤية نقاط البيع الرئيسية أو الرسالة على موقع الويب الخاص بهم.
مثال على موقع ويب بهيكل واضح وتسلسل هرمي مرئي.
المحلول: ضع خطة للموقع. سيساعدك هذا في إنشاء مخطط تفصيلي لموقعك على الويب وإنشاء فئات حتى تتمكن من قطع أي إضافات غير ضرورية.
الخطأ 4: من الصعب قراءة موقع الويب الخاص بك
قد يحتوي على أفضل محتوى في العالم ، ولكن لن يقرأه أحد إذا كنت تتأرجح واضطر إلى الضغط على النص أو الضغط عليه من خلاله. هذه المشكلة أكثر وضوحًا على الهواتف الذكية من الأجهزة اللوحية بسبب حجم الشاشة.
قد يكون هذا الخط الرائع من الرقيق يبدو رائعًا على سطح المكتب ، ولكن من الصعب الآن قراءته على جهاز محمول. جرب خط sans serif مثل Open Sans أو Roboto سهل القراءة ، ثم تحقق من أن حجم الخط كبير بما يكفي. القاعدة العامة هي إبقاء نص جسمك بحد أدنى 16 نقطة ، ولكن ضع في اعتبارك أن هذا الرقم يعتمد على الخط الذي تستخدمه.
يمكن أن تقلل بعض صور الخلفية من سهولة القراءة أثناء التنقل ، مما يجعل قراءة النص أكثر صعوبة. لذا حاول الحفاظ على لون خلفية بسيط ولون نص يكمل كل منهما الآخر.
تأكد من أن التباين بين خلفيتك ونصك قوي بما فيه الكفاية بحيث يسهل قراءة النص
المحلول: تحقق دائما من موقع الويب الخاص بك في اسلوب العرض. تتيح لك هذه الميزة عرض موقع الويب الخاص بك على سطح المكتب ومعاينة كيف سيبدو لمستخدمي الهواتف المحمولة / الأجهزة اللوحية. من الجدير أن تطلب من أصدقائك وعائلتك إلقاء نظرة على موقع الويب الخاص بك على جهازك. إذا واجهت مشكلة في قراءة النص ، فربما حان الوقت لتبسيط البحث في موقع الويب الخاص بك. لا يجب أن تكون الخلفية البيضاء البسيطة مع عدد قليل من الكتل الملونة لجعلها بارزة مملة!
يعد ترك مساحة فارغة أكثر أهمية على شاشة أصغر حتى يمكن لأصابعك لمس زر مثل عبارة تحث المستخدم على اتخاذ إجراء. يحتاج الأشخاص الذين يستخدمون الأجهزة المحمولة إلى نصوص وأزرار أكبر مما يتوقعون أن يتمكنوا من استخدام موقع ويب بشكل مريح.
يجب ألا يقل حجم العبارات التي تحث المستخدم على اتخاذ إجراء من 30 إلى 40 بكسل على الأقل حتى تبرز. يميل المتسوقون عبر الجوّال إلى أن يكونوا متسوقين متهورين ، لذلك إذا لم يكن من السهل التنقل في الموقع وصعوبة استغلاله ، فقد يكون ذلك سببًا للتخلي عن المعاملة. لذا تأكد من التحقق من سهولة التعرف على CTA وتنشيطه.
يمكن أن تجعل الكثير من العناصر والصور والألوان موقع الويب الخاص بك يبدو فوضويًا ويخيف زوارك. في هذه الحالة ، حان الوقت لإضافة مسافة فارغة بين الفقرات والنصوص والعناصر الأخرى. تجعل المساحة البيضاء موقعك أسهل بكثير للتنقل وقراءة ما هو مهم.
إذا كنت تقوم بالتمرير عبر موقع ويب في الحافلة (مثلي) ، فمن المحتمل أنك تقرأ قليلاً. مما يعني أنك تريد العثور على المعلومات التي تحتاجها موضحة بوضوح. لا يستغرق الجري وقتًا طويلاً لقراءة كميات كبيرة من النص على جهاز محمول ، على سبيل المثال. تأكد من أن نصك قصير وقابل للمسح ودقة في المواعيد مع وجود مساحة كبيرة بين الفقرات.
المحلول: تأكد من وجود مساحة بيضاء كافية حول العناصر والنص بحيث لا يشعر الزائر بالإرهاق من المعلومات. يمكنك أيضًا محاولة استخدام زر بدلاً من رابط في النص للمحتوى المهم لتسهيل اللمس.
هل تعلم هذا الشعور بالانزعاج عندما تدرك أنه عليك ملء نموذج عبر الإنترنت للحصول على خدمة wifi مجانية في المطار؟ فكر في ذلك عندما تفكر في إضافة أي نوافذ منبثقة تتطلب الكتابة على لوحة اللمس. يمكن أن يكون التنقل على جهاز محمول أمرًا صعبًا للغاية دون صعوبة الكتابة على لوحة اللمس. حاول أن تجعل كل شيء بسيطًا قدر الإمكان مع أقل قدر ممكن من الإجراءات المطلوبة.
إذا كنت بحاجة إلى إضافة استبيان رضا ، على سبيل المثال ، اجعل من السهل التصويت باستخدام وجه مبتسم وإضافة مربع نص لأي تعليقات إضافية. إذا كان اشتراكًا في نشرة إخبارية ، فحاول تضمين التفاصيل المهمة فقط أو القوائم المنسدلة لتسهيل الأمر قدر الإمكان.
المحلول: نلقي نظرة على مجموعة واسعة من الأشكال التي تقدمها JotForm أو إضافة نافذة منبثقة مع محادثة نقية فمثلا. كما ترى في المثال أدناه ، يمكنك العثور على مكون إضافي غير ظاهر مثل بالون الحوار في أسفل الصفحة. لن يقاطع ذلك انطباع المستخدم الخاص بك ويزداد احتمال لمس الزائرين له. فقط تذكر أن هذا أيضًا مكون إضافي ، لذلك يمكن أن يبطئ وقت التحميل.
يُظهر موقع blackyeti.com أهمية المساحة البيضاء والدعوة الواضحة للعمل. انظر إلى الفقاعة التفسيرية أسفل الصفحة. هذا هو البرنامج المساعد للدردشة الحية.
مكوّن إضافي مباشر للدردشة الحية لا ينبثق إلا بمجرد لمسه.
إن مفتاح تصميم الويب للجوّال هو البساطة. القليل هو بالتأكيد أكثر على شاشة أصغر. يجدر النظر في التحديات التي يمكن أن تجلبها لوحة اللمس لتجربة المستخدم. لذا فإن الخدعة هي التفكير في تخطيط صفحتك لأصابعك ، مما يجعل الميزات سهلة اللمس أو الانزلاق. تأكد من أن زوارك يمكنهم العثور على أهم المعلومات على الفور ، ثم اتبع النصيحة أعلاه وستكون على ما يرام! إذا لم تكن متأكدًا حقًا ، فيمكنك دائمًا تجربة بعض اختبارات سهولة الاستخدام مع العملاء أو الأصدقاء.
إذا لم تكن قد جربت تطبيقنا المجاني حتى الآن ، فهذا هو الوقت المناسب لتجربته. إنها الطريقة المثالية للبقاء على قمة موقعك على الويب من جهاز محمول أو جهاز لوحي عندما تكون بعيدًا عن مكتبك.
