طراحی موبایل فرست چیست و چرا باید از آن استفاده کنیم؟
مفهوم پیاده سازی تلفن همراه فرست (mobile-first) را می‌اقتدار از اسم آن فهم کرد: برنامه ای که آغاز برای گوشی پیاده سازی گردیده باشد! میدانید که یک اینترنت‌وب سایت بایستی برای سایزهای طراحی سایت در مشهد گوناگون نمایشگرها، پیاده سازی خواهد شد تا یوزرها با هر پلتفرمی بتوانند اینترنت‌وب سایت را به خیر مشاهده نمایند. این به عبارتی معنا رسپانسیو بودن میباشد که موردنیاز میباشد آغاز با آن به خیر آشنا باشید تا بتوانید به مضمون تلفن همراه فرست پی ببرید. نوشته‌علمی‌ی تحت شمارا دراین باره ارشادوراهنمایی می‌نماید.
مفهوم ریسپانسیو بودن در ساخت سایت
پیاده سازی گوشی فرست (Mobile fisrt) چیست؟
در‌صورتی‌که حین پیاده سازی، صفحه های گوشی الویت طراح باشند، طرح تلفن همراه فرست اسم میگیرد. درین شیوه طراح اینترنت می بایست آغاز صفحه های کوچکتر را در لحاظ بگیرد، آن ها را پیاده سازی نماید آنگاه این طرح را برای صفحه ها بزرگتر بسط دهد.
این نوع پیاده سازی مقابل مدل دسکتاپ-فرست قرار میگیرد که در صدر اینترنت‌تارنما برای نمایشگرهای دسکتاپ پیاده سازی می شود بعد با تکنیک‌های نرم افزار‌نویسی برای صفحه ها کوچکتر هم سئو میگردد.
چرا بایستی از پیاده سازی تلفن همراه فرست به کارگیری کنیم؟
همانگونه که میدانید سالانه اشخاص بیشتری از تلفن‌های هوشمند به کار گیری می‌نمایند. نمودار پایین داده های عددی کاربرانی که از تلفن هوشمند به کار گیری می‌نمایند را در دوران‌ی وقتی ۲۰۱۶ تا ۲۰۲۰ آرم می دهد. همینطور این داده های عددی برای سال ۲۰۲۱ هم پیش‌بینی شد‌ه‌است.
یکی‌از دلایل محبوبیت پیاده سازی گوشی فرست همین داده های عددی میباشد! سالانه یوزرها بیشتری به سمت به کار گیری از تلفن‌های هوشمند می روند و این منجر می شود آن ها جستجوهای خویش را هم به یاری همین گوشی ایفا دهند. براین اساس سالانه داده های عددی بازدیدکنندگان موبایلی وب سایت شما رو به ارتقاء میباشد.
از سال ۲۰۱۲ تا به امروز فروش موبایل هوشمند از فروش لپتاپ بیشتر میباشد! همینطور یوزرها تلفن همراه بیشتر برای وبگردی وقت صرف می‌نمایند. همگی این مورد ها منجر می شوند که یک طراح اینترنت به سمت پیاده سازی mobile first قدم بردارد.
تفاوت پیاده سازی mobile-first و desktop-first در کد
در تایپ کردن html یا این که گویش سمت سرور، سایز نمایشگر چندان عنایت ندارد. این CSS میباشد که گزینش می‌نماید هر تگ از HTML در چه نمایشگری به چه صورتی چشم خواهد شد.
برای ادراک بیشتر مورد به سراغ کد میرویم. فرض فرمائید میخواهید به پس‌مورد یک رنگ بدهید که‌این رنگ در نمایشگر گوشی و دسکتاپ گوناگون میباشد. در پیاده سازی گوشی فرست از قطعه کد تحت به کار گیری می شود:
body {
background: black;
}
// This applies from 600px onwards
@media (min-width: 600px) {
body {
background: green;
}
}
در کد بالا برای دور‌نما رنگ مشکی در لحاظ گرفتیم. بعد گزینش کردیم در نمایشگرهای بزرگتر از ۶۰۰ پیکسل رنگ پس‌مورد به سبز تغییر و تحول نماید. پس پیاده سازی نخستین مختص گوشی بوده میباشد. درحال حاضر به قطعه کد پایین دقت فرمایید.
body {
background: black;
}
// This applies from 0px to 600px
@media (max-width: 600px) {
body {
background: red;
}
}
در کد بالا ما آغاز برای دور‌نما رنگ مشکی را گزینش کردیم. آنگاه گزینش کردیم که در نمایشگرهای گوشی پس مورد به رنگ قرمز رنگ تغییر‌و تحول نماید. یعنی آغاز برای وضعیت دسکتاپ استایل در لحاظ گرفته گردیده که‌این خلاف با پیاده سازی تلفن همراه فرست میباشد.