الممارسة المقطرة لبناء موقع إلكتروني متوافق مع الجوّال

إنشاء موقع ويب متوافق مع الجوّال


في عام 2015 ، عرضت Google خوارزمية “Mobilegeddon” التي نوعًا ما من مواقع الويب التي تمت معاقبتها والتي لم تكن متوافقة مع الجوّال. وفقًا لهذه الخوارزمية ، سينخفض ​​ترتيب مواقع الويب التي لم تكن متوافقة مع الجوّال.

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

نمو حركة البيانات المتنقلة العالمية

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

ما هو موقع الويب المتوافق مع الجوّال?

ما هو موقع الويب المتوافق مع الجوّال

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

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

إليك بعض النصائح لمساعدتك على تحسين موقعك للجوال.

تجنب إنشاء موقع ويب منفصل مناسب للجوال:

تجنب إنشاء موقع ويب منفصل مناسب للجوال

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

ستعاقبك Google إذا اكتشفت أن لديك محتوى متطابقًا لموقعين إلكترونيين متساويين – أحدهما إصدار سطح المكتب و / أو إصدار الكمبيوتر المحمول والآخر إصدار للجوال لأنه لا يوجد سوى Google واحد. وبالتالي لا تفكر حتى في إنشاء موقع ويب منفصل للجوال.

استخدم التصميمات سريعة الاستجابة:

استخدام قوالب التصميم سريع الاستجابة

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

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

استفد من استعلامات الوسائط:

تسمح لك استعلامات الوسائط بسؤال جهاز عن حجمه ثم توجيه المتصفح لعرض الأشياء باتباع مجموعة CSS التي قمت بتعيينها في التعليمات البرمجية:

أمثلة على استفسارات شاشة الوسائط

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

استخدم أطرًا مثل Bootstrap:

بالنسبة للواجهة الأمامية ، يمكنك الاستفادة من الأطر المتاحة مجانًا مثل الأساس 3, هيكل عظمي أفضل إطار عمل حر Bootstrap على تويتر.

استخدام إطار التمهيد

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

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

استخدم دائمًا العلامة الوصفية الافتراضية:

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

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

ابدأ في التصميم الأبسط:

استخدام تصميم سريع الاستجابة

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

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

لا تتجاهل حجم الخط وحجم الزر أبدًا:

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

لا تتجاهل حجم الخط

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

زيادة حجم الصورة:

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

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

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

تخلص من الزوم الافتراضي:

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

حاول استخدام الخطوط القياسية:

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

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

ضع في اعتبارك الاتجاهات:

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

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

يبعد:

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

تعمل Earleen Brown مع شركة SEO Services الشهيرة ، وهي شركة رائدة في تحسين محركات البحث في الهند. الشركة في الأساس هي شركة تكنولوجيا المعلومات خدمات كبار المسئولين الاقتصاديين الهند وقد ساعدها كثيرًا في تحسين مهاراتها في الكتابة.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map