ما هو تصميم Mobile First واستخداماته؟

يمكن فهم معنى  Mobile First Design من اسمه: تصميم تم تصميمه لأول مرة للجوال.

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


ما هو تصميم Mobile First؟

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


تصميم Mobile First

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


لماذا يجب أن نستخدم تصميم Mobile First؟

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

إحصاءات مستخدمي المحمول

لماذا يجب أن نستخدم تصميم Mobile First؟
 © Statista.com 2020

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

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


الفرق بين Mobile First Design و Desktop First Design في الكود

عند كتابة اكواد HTML أو لغة الخادم، لا يهم حجم الشاشة كثيرًا. لأن CSS هي التي تحدد كيفية ظهور كل علامة HTML في أي شاشة عرض.

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


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


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

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


كلمات مفتاحية: