النسخة المحمولة للموقع: كيف نفعل ذلك؟ تصميم متكيف

جدول المحتويات:

النسخة المحمولة للموقع: كيف نفعل ذلك؟ تصميم متكيف
النسخة المحمولة للموقع: كيف نفعل ذلك؟ تصميم متكيف
Anonim

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

إذن هناك أربع طرق رئيسية لجعل موقعك على الويب مناسبًا للجوّال.

كيفية عمل نسخة محمولة من الموقع
كيفية عمل نسخة محمولة من الموقع

الطريقة الأولى - التصميم المستجيب

تعمل القوالب المستجيبة على تغيير صورة الموقع حسب حجم الشاشة. كقاعدة عامة ، يتم ضبطها على معيار 1600 و 1500 و 1280 و 1100 و 1024 و 980 بكسل. للتنفيذ ، يتم استخدام استعلامات وسائط CSS3. تصميم الموقع نفسه لا يتغير

تشمل مزايا هذه الطريقة:

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

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

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

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

تصميم الموقع
تصميم الموقع

الطريقة الثانية - نسخة منفصلة من الموقع

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

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

ولكن كانت هناك بعض السلبيات هنا أيضًا:

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

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

قوالب قابلة للتكيف
قوالب قابلة للتكيف

الطريقة الثالثة - تصميم RESS

يدعم محرك بحث Google بنشاط هذا الاتجاه لتصميم الأجهزة المحمولة. هذه هي الطريقة الأكثر تعقيدًا وتكلفة لكنها فعالة لتكييف الموقع مع هاتف أو جهاز لوحي. إنه يسمى RESS. هذا يستهدف موردًا في تطبيق جوال يمكن تنزيله لكل جهاز على حدة. لنظام Android - مع GooglePlay ، ولأجهزة Apple - مع iTunes.

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

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

موقع جوجل للجوال
موقع جوجل للجوال

أرخص طريقة لإنشاء موقع ويب للجوال

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

تنزيل قوالب خاصة (ملحقات) للتصميم سريع الاستجابة. على سبيل المثال ، WP Mobile Detector و WordPress Mobile Pack و WPSmart Mobile وغيرها. سوف يساعدون في عرض الموقع بشكل أكثر دقة على الهاتف ، بينما ستتلقى بعض النصائح حول ما يجب تصحيحه لتكييف الصفحة بشكل أفضل مع إصدار الهاتف المحمول.

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

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

النسخة المحمولة من موقع android
النسخة المحمولة من موقع android

مبادئ إنشاء إصدارات الأجهزة المحمولة

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

النسخة المحمولة للموقع من جهاز كمبيوتر
النسخة المحمولة للموقع من جهاز كمبيوتر

إزالة كل شيء غير ضروري

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

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

المحاذاة

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

توحيد

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

وانفصال

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

قوائم

بالمناسبة حول القوائم. هناك اثنان منهم - ثابتان حسب الترتيب الأبجدي أو غيره مع الاستبدال. يعتمد اختيارهم على ما سيتم إدراجه.

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

الملء التلقائي

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

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

يتم قراءة كل شيء ، يتم عرض كل شيء

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

بعض الإحصائيات

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

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

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

النسخة المحمولة للموقع مجانا
النسخة المحمولة للموقع مجانا

أين تريد إصدار الهاتف المحمول

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

لا يمكن أن توجد بدون إصدار الجوال:

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

بدلا من الاستنتاج

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

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

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

موصى به: