33
تشکر

طراحی به شیوه ابتدا موبایل (Mobile First)

Mobile First Web Design

Mobile First Web Design

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

زمانی که طراحی تنها با یک ستون به پایان رسید با استفاده از Media Queryها و JavaScript سایت را برای نمایشگرهای بزرگتر آماده میکنیم. برای مثال ستون‌های بیشتری اضافه میکنیم، عکس‌های با رزولویشن بالاتری را لود میکنیم و هر کاری که میخواهیم در نمایشگرهای بزرگتر انجام دهیم.

اما فواید این روش چیست؟ در ادامه مطلب همراه ما باشید…

  • اولین فایده این روش این است که در صورتی که دستگاه کاربر از Media Query پشتیبانی نکند، سایت به خوبی نمایش داده میشود، چه نمایشگر کاربر بزرگ باشد چه کوچک.
  • نکته بعدی این است که این روش یک روش منطقی محسوب میشود. زمانی که شما، سایت را ابتدا بر اساس گوشی های هوشمند طراحی و توسعه دهید میتوانید از خیلی از ویژگی‌هایی که در گوشی های هوشمند موجود هستند اما در سیستم‌های دسکتاپ وجود ندارند استفاده کنید مانند GeoLocation, Vibration, Orientation و ویژگی‌های دیگر.
  • فایده دیگر آن این است که تمرکز ما را بر محتوا بیشتر میکند. در گوشی های هوشمند شما فضای زیادی در اختیار ندارید که بخواهید مانور زیادی بدهید و در کنار محتوای اصلی مطالب دیگری را نیز نمایش دهید به همین دلیل تمرکز شما بر روی نمایش درست محتوا افزایش پیدا میکند.
  • و اما دلیل آخر اینکه شما سایت را برای کاربران طراحی میکنید، نه برای خودتان! در حال حاضر هر روز به تعداد دارندگان گوشی های هوشمند و تبلت ها در ایران زیادتر می‌شود در حالی که بیشتر آن‌ها قبل از داشتن این دستگاه‌ها مجهز به سیستم کامپیوتری نبودند اما اکنون آن‌ها نیز از کاربران وب محسوب می‌شوند و سایتهای ما باید برای گوشی های هوشمند در حداکثر ممکن بهینه باشد.

خب نظر شما در مورد روش Mobile First جیست؟ آیا تا به حال از آن استفاده کردید؟

  • etc می‌گه:

    من همیشه از دسکتاپ شروع کردم و با روش تطبیقی کار کردم در مواقعی که تمپلیت رو از صفر نوشتم
    اما در مورد ریسپانسیو بودن که هرچی bootstrap تصمیم بگیره ما همونیم :)
    من یه تکنیک ابداع کردم که توی کارام استفاده میکنم و مشتری رو غافلگیر میکنم
    وقتی سایت کوچیک میشه هیچ ظاهری از بین نمیره و مثل همه سایتا ساده نمیشه
    بلکه تمام منوها شناور میشه و به صورت کشو و رابط کاربری موبایل به طرفین کشیده میشه اینطوری همه چی حفظ میشه…

    حالا هی بگید ما تولید ملی نداریم :)

    اگه خدا بخواد به صورت یه فریم ورک میدمش بیرون

    میخوام ببینم میتونم کل بوتسترپ رو بخوابونم یا نه!!!

    منتظر پاسخت میمونم حاج محسن . ایمیل بده من زیاد وبگردی نمیکنم که بیام دوباره جوابتو بخونم 😉

  • حامد می‌گه:

    بسیار عالی بود.
    من فکر میکنم برای سایتهایی که طیف مخاطب تلفن همراه بیشتری داره مناسب خواهد بود.
    تشکر از شما.

  • فوق العاده بود

    خیلی ممنون بابت وب سایت خوبتون

  • hosein می‌گه:

    به نظر من تمرکز بر محتوا و دوری از اضافات تجملی و غیر ضروری، مهم ترین ویژگی بود که با آمدن تلفن های هوشمند در طراحی وب سایت ها اعمال شد.

  • erfan می‌گه:

    ممنونم اموزش خوبی بود

  • محمدرضا می‌گه:

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

  • محمد جهانی می‌گه:

    خسته نباشی محسن جان. خیلی خوب بود. یه مورد دیگه که جا انداختی میتونه سرعت باشه. در مورد نحوه‌ی دقیق اجرای مدیا کوئری‌ها اطلاع دقیقی ندارم اما خب به هر حال اجرای اونها میتونه زمان‌بر و هزینه‌بر (هزینه اینترنت) باشه. روی دستگاه‌های موبایل، ممکنه دسترسی به اینترنت از طریق سیمکارت و سرعت اینترنت کم باشه. اینجوری استایل اولیمون استایل موبایل هستش که به صورت پیشفرض، در ابتدا لود میشه.


  • نظرات این مطلب بسته است.