mobile-first vs desktop-first

بستگی به پروژه داره و نمیشه برای همه شون یک نسخه پیچید. ولی بطور کلی mobile-first در بیشتر مواقع جذابیت و مزیت بیشتری داره. و احتمالا بوت استرپ هم توضیح محکمی داره که چرا از نسخه 3.0.0 به بعد به mobile-first شیفت کرده. دو تا از جذابیت های mobile-first که به نظرم میرسه:

• حجم کد css کمتر. چون در حالت پیش فرض خیلی از استایل ها از قواعد استایل در سایز موبایل پیروی میکنند. اگر mobile-first ننویسیم یکبار باید بیایم اون حالت رو تغییر بدیم و بعد یکبار دیگه در حالت موبایل اون رو اضافه کنیم. اما اگر mobile-first بنویسیم فقط در سایز دسکتاپ میایم اون رو تغییر میدیم و این باعث صرفه جویی در حجم کد و زمان میشه.

• ظاهرا برای وبسایت هایی که حجم بیشتر مخاطبینش کاربران موبایل هستند، از نظر SEO تاثیر مثبتی داره.

لینک های زیر هم اطلاعات خوبی دارند که میتونه کمک کنه:
https://zellwk.com/blog/how-to-write-mobile-first-css/
https://moz.com/blog/mobile-first-indexing-seo

@mhyeganeh
ولی مشکل اصلیش اینه که کدنویسی از حالت صفحات کوچک به صفحات بزرگ، پیچیدگی بیشتری رو شامل میشه.
واقعا تبدیل صفحات رایانه به گوشی، خیلی ساده تر هستش نسبت به تبدیل صفحات گوشی به رایانه.

اگر واکنشگرایی از طریق سیستم های شبکه بندی نظیر بوت استرپ رو در نظر نگیریم، به نظرم روش اول-موبایل پیچیدگی بیشتری رو در کدنویسی بهمراه داره.

@milad
متوجه منظورتون از پیچیدگی بیشتر نمیشم. میتونید یک مثال از پیچیدگی بیشترش در عمل بزنید؟

به نظرم میاد تفاوتی از نظر پیچیدگی با هم نداشته باشند. چون خیلی تفاوت عمده ای ایجاد نمیشه. فقط سخت ترین بخشش تغییر Mindset هست که ممکنه در اوایل برای کسی که مدت زیادی desktop-first نوشته کمی چالشی باشه و زمان ببره تا عادت کنه. تنها راهش هم تمرین و انجام چند پروژه mobile-first هست.

@mhyeganeh
ممنون از توضیحات شما
به نظر من این شیوه مشکل تر هستش، منتها چه بسا صحبت شما صحیح باشه و نیاز هستش که تغییر اساسی ای در ذهنیتم برای پیاده سازی به این شیوه ایجاد کنم.
اگر فیلم آموزشی یا پیوندی در خصوص پیاده سازی عملی قرار بدین ممنون میشم. من تابحال ندیدم چجوری یک نفر طرح متوسط/بزرگی رو مرحله مرحله، به روش اول-موبایل پیاده سازی کنه و در تجارب عملی ای که خودم داشتم هم، برام تبدیل به کار مشکلی می شدش.

@milad

والا چیز خاصی نیست که فیلم آموزشی یا ... داشته باشه. تنها فرقش توی کد شما هم اینه که باید از این به بعد در media query ها بجای max-width از min-width استفاده کنید.

لینک اولی که بالا ارسال کردم نسبتا خیلی جامع اومده همراه با مثال و کد توضیح داده. فکر کنم همون رو مطالعه کنید کامل دستتون بیاد. تو یوتیوب هم که کلی فیلم وجود داره اگر جستجو کنید.

ممنون از شما
پیوندی که قرار داده بودین رو من قبلا مطالعه کردم، سودمند هستش ولی نه به اندازه کافی. اینکه بیایم طراحی مون رو بصورت اول-موبایل کدنویسی کنیم، فراتر از استفاده min-width به جای max-width هستش.

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