احسانم
4 سال پیش توسط احسانم مطرح شد
6 پاسخ

mobile-first vs desktop-first

سلام دوستان
الان در حاضر کدوم حالت پیشنهاد میشه؟
mobile-first یا desktop-first؟
ممنون میشم راهنمایی کنید 🙏


ثبت پرسش جدید
محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 4 سال پیش مطرح شد
4

بستگی به پروژه داره و نمیشه برای همه شون یک نسخه پیچید. ولی بطور کلی 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


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
2

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

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


محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 4 سال پیش مطرح شد
0

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

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


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
0

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


محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 4 سال پیش آپدیت شد
2

@milad

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

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


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

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

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


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام