تصميم متجاوب - كيف يتم إعداد صفحة بيع تتجاوب مع الأجهزة المحمولة mobile ؟

تصميم متجاوب - كيف يتم إعداد صفحة بيع تتجاوب مع الأجهزة المحمولة mobile ؟

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

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

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

Índice
1- نموذج الاستهلاك عبر الإنترنت في العالم العربي. 2- المخططات layouts الأكثر استخداماً. 3- معنى مفهوم تصميم متجاوب . 4- سبب إنشاء صفحة ما تحتوي على تصميم متجاوب . 5- نصيحة إضافية : المكونات الثلاثة الرئيسية في تصميم متجاوب .

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

1. نموذج الاستهلاك عبر الإنترنت في العالم العربي

بحسب مقال نشره موقع السكينة السعودي إن شبكة الإنترنت قد دخلت العالم العربي وحيز الاهتمام العربي بين العام 1994 و 1995.

لكن في عام 1991 ارتبطت تونس بالإنترنت كأول دولة عربية، وتلتها الكويت عام 1992، مصر والإمارات عام 1993،  ثم لبنان والمغرب عام 1994، قطر وسوريا عام 1996 وظهرت الإنترنت في المملكة العربية السعودية في عام 1999.

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

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

وقد كشف مؤتمر عرب نت عام 2010 المنعقد في بيروت تضاعف نسبة مستخدمي الإنترنت في العالم العربي خلال السنوات الثمانية الماضية بنسبة 1200 في المئة.

وبحسب مقالة نشرتها مدونة التجارة الإلكترونية واستندت في مقالتها على تقرير مميز أعدته بوابة الدفع العربي (بيفورت)  في عام 2014، إن نمو استخدام الإنترنت في العالم العربي يُقدر بحوالي 400%، في عام 2014 مقارنة بعشرة أعوام مضت أو أقل، حيث كان عدد المستخدمين عام 2004 يُقدر بحوالي ثمانية وعشرين مليون مستخدم ثم أصبح مائة وثمانية وعشرون مليوناً عام 2014 أي ما يُقدر بحوالي أربعة أضعاف.

وهناك أيضاً مقالة نشرها موقع (ومضة) ، حيث قام كل من موقع بيت كوم، وكلية دبي للإدارة الحكومية  استطلاع رأي إقليمي يحلل توجهات استخدام الإنترنت في المنطقة العربية، وقد أجري الاستطلاع في آذار – مارس عام 2013 وشارك فيه 3373 شخص من كافة بلدان العالم العربي بما فيها الجزائر ، جيبوتي، المغرب، الأردن، مصر، لبنان، السعودية، الكويت والإمارات، وتوصلوا من الاستطلاع إلى أن 16% من الناس المشاركين يستخدمون الهواتف الذكية لدخول الإنترنت، و 11% يستخدمون الأجهزة اللوحية tablets و 12% يستخدمون  هاتف محمول عادي، و 61% منهم يدخلون إلى الإنترنت اعتماداً على أجهزة االحواسيب المحمولة أو المكتبية. وهذا يمثل بحد ذاته تزايداً كبيراً في عدد مستخدمي الإنترنت عبر الأجهزة المحمولة المختلفة.

ومن هنا تنبع أهمية إعداد تصميم متجاوب عبر صفحاتنا مع كافة الأجهزة المحمولة!   

لكن قبل أن نفهم كيف يعمل ذلك، يجب عليك أن تعرف جميع أنواع المخططات layouts الأكثر استخداماً.

2. المخططات الأكثر استخداماً

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

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

المخطط الثابت:

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

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

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

المخطط المرن:

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

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

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

3. ماذا يعني ” تصميم متجاوب ” ؟

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

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

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

كيف يتم ذلك ؟

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

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

تصميم متجاوب meme

4. سبب إنشاء صفحة تحتوي على تصميم متجاوب

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

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

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

بالتفكير في ذلك، استخدم جوجل العديد من الخصائص لتصنيف الصفحات التي تتضمن أفضل الحلول للمشاكل المحددة. وهناك عامل يساهم في تحسين تصنيف صفحتك وهو أن تتمتع صفحتك بميزة –mobile-friendly– أي أن تكون داعمةً للأجهزة المحمولة.

إن وجود صفحة تتلاءم مع الأجهزة المحمولة يساهم في توضع علامتك التجارية بشكل أفضل ضمن نتائج البحث. وهذا يعني أن التمتع بميزة تصميم متجاوب يعد أمراً هاماً جداً من أجل استراتيجية تحسين محركات البحث (سيو).

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

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

5. نصيحة إضافية: المكونات الثلاثة الرئيسية في تصميم متجاوب

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

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

إليك 3 اقتراحات تعد بمثابة بداية جيدة يمكنك تطبيقها اعتباراً من الآن !!

صور مرنة

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

شبكات مرنة

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

أنماط media queries

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

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

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

خاتمة

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

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

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

هل كان هذا النص مفيداً لك لتحديد المخطط layout الملائم لصفحة البيع التابعة لك ؟ اكتب لنا عبر التعليقات تساؤلاتك أو اقتراحاتِك حول موضوع تطبيق تصميم متجاوب .

نحن بانتظار أن نعرف رأيكَ فهو مهم جداَ لنا.

والسلام عليكم ورحمة الله وبركاته.

Nosso site utiliza cookies para melhorar sua experiência de navegação.