جلسه ۷۳ – روش ها و متد های طراحی واکنش گرا

تا اینجا، با مفهوم طراحی واکنش گرا آشنا شدیم. فهمیدیم که طراحی واکنش گرا، بر پایه مفهومی به نام مدیا کوئری انجام می‌گیره.

همچنین متوجه شدیم که چطور می‌تونیم با استفاده از واحد های وابسته به viewport یا همون متغیر، عناصرمون رو واکنش گرا کنیم.

تو این مقاله، روش هایی رو یاد می‌گیریم که با استفاده از اون ها، همراه با مدیا کوئری، می‌تونیم عناصرمون رو به شکلی کاملا واکنش گرا در کنار هم بچینیم.

ولی قبل از هر چیزی، باید با استراتژی mobile first یا ” اول موبایل! ” آشنا شیم:

استراتژی mobile first

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

همین موضوع، به دست ما بهونه ای داد که طراحی واکنش گرا رو یاد بگیریم و سایت هامون رو به این شکل طراحی کنیم.

اما این سایت قراره چطور طراحی شه؟ مسلما در حالت پیش فرض،‌ اول کد رو برای دسکتاپ می‌نویسیم و بعد صفحات کوچیک تر رو بررسی می‌کنیم.

اما استراتژی mobile first، اینطور چیزی رو توصیه نمی‌کنه.

این استراتژی، میگه: اول سایت رو برای گوشی موبایل طراحی کن، بعد صفحات بزرگ تر رو بررسی کن!

یکی از فایده های این استراتژی، اینه که اگه سایت تو موبایل جا شه، حتی اگه واکنش گرا هم نباشه،‌ تو دسکتاپ هم جا می‌شه و می‌تونیم به شکل مناسبی مشاهدش کنیم.

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

فایده بعدی و مهم ترین فایده ی استراتژی mobile first، افزایش سرعت لود وب سایته. اما چطوری؟

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

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

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

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

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

همزمان ممکنه سرعت لود وب سایت تو دسکتاپ کم بشه، اما مشکلی نداره، چون هدف ما کاربرای گوشی موبایل هستن که به مراتب تعداد بیشتری رو در بر می‌گیرن.

پس سعی کنین همیشه دسکتاپ انتخاب دومتون باشه 🙂

روش های طراحی واکنش گرا در CSS

ما از روش های طبقه بندی متعددی می‌تونیم برای چیدن عناصر واکنش گرامون در کنار هم استفاده کنیم. پر استفاده ترین این روش ها به شکل زیر هستن:

• استفاده از خاصیت های معمول CSS
• استفاده از flexbox
• استفاده از grid

استفاده از خاصیت های معمول CSS

منظور از این روش، استفاده از مفاهیم ابتدایی مثل float یا inline-block هست. امروزه روش های دیگه ای مثل flexbox و grid، استفاده بیشتری دارن. اما هنوز هم در خیلی از موارد، فقط با این روش های معمول می‌تونیم عناصرمون رو کنار هم بچینیم.

به مثال زیر که در دو مقاله قبلی هم دیدیم توجه کنین، واکنش گرایی این مثال توسط خاصیت های ابتدایی CSS انجام شده:

dark

همونطور که می‌بینید، فقط با دستکاری مداوم عرض عناصر، و سوییچ کردن عناصر بین حالت inline-block و block تونستیم چیدمان رو به شکل واکنش گرا انجام بدیم.

استفاده از Flexbox

از روش طبقه بندی flexbox، بیشتر زمانی استفاده می‌کنیم که می‌خوایم یک سری کارت هم عرض و اندازه رو در کنار هم دیگه قرار بدیم.

برای نمونه، می‌تونیم به کارت های معرفی محصول یا خدمات اشاره کنیم.

به مثال زیر توجه کنین:

dark

واکنش گرایی این کارت های محتوا، به سادگی توسط دستور flex-wrap:wrap در عرض های بیشتر از ۶۰۰ پیکسل انجام شده و خود کارت ها در صورت نداشتن فضای کافی، به پایین هدایت می‌شن.

برای مطالعه بیشتر در مورد flexbox، می‌تونین به مقاله flexbox در CSS میزفا مراجعه کنین.

استفاده از Grid

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

به مثال زیر توجه کنین:

dark

در مورد grid، می‌تونین تو مقاله grid در CSS میزفا بیشتر بخونین.

اگه جایی از مطالب براتون مبهمه حتما و حتما تو قسمت نظرات بپرسین. ما همراهتون هستیم 🙂

استفاده از فریمورک ها در CSS

فریمورک ها، ابزاری هستن که کار ما رو به شدت تو استفاده کردن از زبان های مختلف، راحت می‌کنن.

به تناسب، CSS هم فریمورک های خودش رو داره که توسط اون ها، می‌تونیم کارمون رو سبک تر و همزمان، با کیفیت تر انجام بدیم.

دو فریمورک مشهور CSS که از اون ها تو بحث واکنش گرایی استفاده بسیاری می‌شه، عبارتند از:

• Bootstrap
• W3.CSS

از اون جایی که هدف ما در آموزش، یاد گرفتن فریمورک ها نیست، در موردشون زیاد صحبت نمی‌کنیم. اما یه نیم نگاهی بهشون بندازیم که ببینیم چطور کار می‌کنن.

قبل از هر چیزی، مثال های این دو فریمورک رو تو دو لینک زیر از سایت w3school.com مشاهده کنین:

• مثال فریمورک Bootstrap
• مثال فریمورک W3.CSS

با استفاده از کلاس هایی که این فریمورک ها برای ما آماده کردن، می‌تونیم بدون نوشتن کد CSS، استایل مورد نظرمون رو به عناصر بدیم.

این فریمورک ها با تقسیم کردن viewport صفحه ما به ۱۲ قسمت مساوی، بر اساس اون قسمت ها، رسپانسیو سازی صفحه وب سایت رو انجام می‌دن.

برای مثال، کد زیر رو ببینین:

<div class="col-md-4 col-sm-6 col-xs-12"> ... </div>

بر اساس این کد، div مورد نظر ما در عرض های بالا تر از ۹۹۲ پیکسل، ۴ قسمت از صفحه، در عرض های بین ۹۹۲ و ۷۶۸، ۶ قسمت از عرض صفحه و در عرض های پایین تر از ۷۶۸ تمام عرض صفحه رو اشغال می‌کنن.

CSS فریمورک های واکنش گرای دیگه ای هم داره که از اون ها می‌تونیم به bulma، foundation و pure اشاره کنیم.

پایان ترم

سوال:

یک پیج کاملا واکنش گرا طراحی کنین.

نکته: پیج حداقل دارای سه ستون محتوا باشه.

نکته: از هر روشی که علاقه دارین (خاصیت های معمول CSS، فکلس باکس، گرید یا حتی ترکیب هر سه تا) می‌تونین استفاده کنین.

نکته: کد های Html و CSS رو داخل یه فایل زیپ بریزین، و با نام “پاسخ کوییز مقاله ۷۳” آپلود کنین.

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

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

به پایان این مقاله، و این فصل می‌رسیم.

تو این مقاله متوجه شدیم که چقدر سیستم های طبقه بندی تو CSS، مثل Flexbox و Grid می‌تونن بهمون تو بحث واکنش گرایی کمک کنن. همچنین با فریمورک ها آشنا شدیم و دیدیم کارمون رو خیلی جاها راحت تر می‌کنن.

خلاصه که ضربه نهایی رو به طراحی واکنش گرا زدیم و فهمیدیم که چقدر دستمون برای استفاده از روش های مختلف برای طراحی واکنش گرا بازه!

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

مدیر محتوا: علی اسماعیلی