طراحی سایت Mobile First

Mobile First چیست؟

معنی Mobile First Design را می توان از نام آن فهمید: طرحی که برای اولین بار برای موبایل طراحی شده است.

احتمالا می دانید که یک وب سایت باید برای اندازه های مختلف صفحه نمایش طراحی شود مانند طراحی برای دسکتاپ، طراحی برای موبایل، طراحی برای تبلت و... تا کاربران با هر پلتفرم و ویوایسی بتوانند وب سایت را به خوبی مشاهده کنند. به این مفهوم در طراحی وب، ریسپانسیو (Responsive Design) می گویند که برای درک مفهوم Mobile First باید ابتدا با آن آشنا شوید. مقاله زیر شما را در زمینه رویکرد موبایل فرست یا طراحی اول برای موبایل، راهنمایی می کند.

طراحی Mobile First چیست؟

اگر طراحی صفحات برای موبایل در ابتدای طراحی اولویت طراح باشد، به آنها Mobile First Design می گویند. به این ترتیب طراح وب سایت ابتدا باید طراحی صفحات را برای ابعاد صفحه نمایش کوچکتر را در نظر بگیرد، ابتدا کوچکترین سایز را طراحی کند و سپس طراحی را به صفحات بزرگتر بسط دهد.

طراحی وب سایت بصورت Mobile First در واقع یک رویکرد است، اینکه طراحی وب سایت اولویت طراحی را برای کاربران موبایل در نظر بگیرد و تمام تلاشش را برای ابعاد کوچکتر انجام دهد و ابعاد بزرگتر را بصورتی انجام دهد که از طراحی اولیه که برای موبایل انجام شده بود ساخته شود. همین موضوع یعنی اولویت زیبایی و اجرای UI و همچنین UX مناسب در بازدیدکنندگان موبایل مهم تر است.

برای اطلاعات بیشتر در مورد UI و  UX می توانید مقاله ی مربوط به UI و UX را مطالعه فرمایید.

در نهایت یک وب سایت اگر به خوبی طراحی شده باشد در تمامی سایز ها برای انواع دستگاه ها باید به خوبی نمایش داده شود. هم در موبایل که کوچکترین عرض صفحه را دارد و هم بعد از آن در دسکتاپ ها و یا تبلت ها و به همین صورت ابعاد بزرگتر مانند لپتاپ ها و مانیتور های بزرگتر که عرض های بزرگتری دارند. در گذشته یک سایت از ابتدا برای دسکتاپ و مانیتور های بزرگ طراحی می شد و طراح سایت تمامی تلاشش را میکرد که آن طراحی را برای دیوایس های کوچکتر هم استاندارد کند. همانطور که قبلا به آن اشاره کردیم بصورت Responsive طراحی انجام می شد.

طراحی ابتدا برای موبایل

این نوع طراحی در تضاد با Desktop First Design است، که وب سایت ها در ابتدا برای صفحه های دسکتاپ طراحی شده و سپس با استفاده از تکنیک های برنامه نویسی برای صفحات کوچکتر بهینه می شوند.

در حال حاضر در دنیا رویکرد و متد Mobile First برعکس این موضوع را از طراح سایت می خواهد که از ابتدا بدون در نظر گرفتن ابعاد بزرگ که بر روی دسکتاپ مورد استفاده قرار میگیرد باید ابتدا در سایز کوچک یک طراحی کامل به خوبی پیاده سازی شود و در صورت مناسب بودن و داشتن یک طراحی قابل قبول و تکمیل کم کم به سمت ابعاد بزرگتر و صفحه نمایش های بزرگ تر این طراحی کامل شود.

چرا باید از طرح Mobile First استفاده کنیم؟

همانطور که می دانید هر ساله افراد بیشتری از گوشی های هوشمند استفاده می کنند. نمودار آماری وب سایت Statista که معتبر می باشد، کاربران استفاده کننده از گوشی های هوشمند را از سال 2016 تا 2020 نشان می دهد.این آمار برای سال 2021 نیز موجود است که با مراجعه به این وب سایت می توانید آمار پیش بینی برای سال 2022 را هم نیز مشاهده بفرمائید.

.

چرا باید از طرح Mobile First استفاده کنیم؟

همین موضوع که استفاده از موبایل های هوشمند هر روز بیشتر می شود و درصد قابل توجهی که وب سایت ها فقط با موبایل دیده می شوند از دلایل محبوبیت طراحی Mobile First است، هر ساله تعداد بیشتری از کاربران به گوشی های هوشمند روی می آورند و این امکان را به آنها می دهد تا جستجوهای خود را با کمک همان تلفن همراه انجام دهند. بنابراین، هر ساله تعداد بازدیدکنندگان سایت شما از طریق موبایل افزایش می یابد.

از سال 2012، فروش گوشی های هوشمند بیشتر از فروش لپ تاپ ها بوده است. کاربران موبایل نیز زمان بیشتری را صرف وبگردی می کنند. همه اینها باعث می شود که طراح وب به سمت Design Mobile First حرکت کند.

تفاوت Mobile First Design و Desktop First Design در کد

هنگام نوشتن HTML یا زبان های برنامه نویسی سمت سرور، اندازه صفحه اهمیت زیادی ندارد. زیرا این CSS است که نحوه نمایش  هر تگ HTML را در هر نمایشی تعریف می کند.

برای درک بیشتر موضوع به سراغ کد می رویم. فرض کنید می خواهید به پس زمینه رنگ دیگری در صفحه نمایش موبایل و دسکتاپ بدهید. قطعه کد زیر در طراحی Mobile First استفاده می شود:

// این قطعه کد از 0px تا 600px اعمال خواهد شد

body { background: red; }

// این قطعه کد از 600px به بعد اعمال خواهد شد

{@media (min-width: 600px)

body { background: green; } }

در کد بالا رنگ قرمز را برای پس زمینه در نظر گرفتیم. سپس در صفحه های بزرگتر از 600 پیکسل رنگ پس زمینه را سبز می کنیم. بنابراین در این رویکرد طرحی اولیه برای موبایل بود. حالا به قطعه کد زیر توجه کنید.

body { background: green; }

// این قطعه کد از 0px تا 600px اعمال خواهد شد

{@media (max-width: 600px)

body { background: red; }}

در کد بالا ابتدا رنگ سبز را برای پس زمینه انتخاب کردیم. سپس در صفحه نمایش موبایل، پس زمینه را به رنگ قرمز تنظیم می کنیم. این بدان معناست که در ابتدا برای سبک دسکتاپ طراحی شده بود که با طراحی Mobile First در تضاد است.

البته این یک مثال خیلی ساده و غیر عملیاتی است، پیچیدگی هایی که در طراحی وب سایت وجود دارد و پیش روی یک طراح وب قرار دارد می تواند مانند Navigation سایت و یا لیست محصولات، اسلایدر های تصاویر، اخبار و مقالات و بخش های پیچیده تری مانند هدر سایت و یا فوتر نیز چالش بر انگیز باشد. در برخی موارد طراحی مناسب برای موبایل بسیار متفاوت است با آن طراحی ای که برای دسکتاپ انجام می شود و خوب درآوردن تمام حالات برای یک طراح سایت بسیار مشکل خواهد بود.

یکی دیگر از مزایای تمرکز بر طراحی Mobile First این است که گوگل در الگوریتم های خود را عادت داده است به وب سایت های سازگار با موبایل توجه بیشتری کنند. البته این عادت از روی نیاز است و کاربران این نیاز را ایجاد کرده اند. بنابراین، در حالی که دریافت ترافیک ارگانیک از موتورهای جستجو برای موفقیت بیشتر مشاغل مهم است، در نظر گرفتن اولویت های الگوریتم گوگل به نفع سئو سایت شما و رشد بیزینس شما است، پس قبل از طراحی سایت باید حتما این رویکرد جدید را درک کنید و از شرکت طراح سایت خود این مسئله را بخواهید.

در گذشته های دور داشتن سایت ریسپانسیو مزیت محسوب میشد و گوگل سایت های ریسپانسیو را بیشتر دوست داشت، اما رویکرد جدید این نیاز را تبدیل به الزام کرده است. در سرچ کنسول نیز می توانید نشانه هایی از مزایای طراحی Mobile First را ببینید، موبایل فریندلی بودن یک سایت از مسائل مهم تکنیکالی می باشد و در صورت وجود اشکال در نمایش موبایل، گوگل به شما خطا نشان می دهد و از شما میخواهد که فورا این عیب را برطرف کنید.

سخن آخر

موبایل فرندلی بودن شاید در حال حاضر یک مزیت محسوب شود اما در مانند ریسپانسیو بودن در آینده ای نزدیک الزام و اجبار می شود پس سایت های خود موبایل فرست طراحی کنید. "ممنونم بابت مطالعه ی این مقاله"