نسخه ریسپانسیو (واکنشگرا) سایت خود را بساز!

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

ریسپانسیو

اصل جریان:

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

اصل واحد های نسبی:

اگه به جای اختصاص دادن واحد های ثابت به المان ها به اونها درصد بدیم. وب سایت بهتر میتونه خودش رو با شرایطی که توش قرار می گیره سازگار کنه!
مثلا وقتی میگیم 100% منظورمون کل عرض مرورگر توی هر سخت افزاریه حالا چه عرض اون سخت افزار 400px باشه جه 1900px فرقی نمیکنه ولی وقتی میگیم 800px دیگه توی سخت افزار هایی که صفحه نمایش اونها از 800px کمتر هست قطعا به مشکل بر میخوریم. به این نوع طراحی نسبی Relative Units میگن.

اصل ماکسیمم و مینیمم

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

اصل نقاط شکست

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

اصل عناصر تودرتو در طراحی ریسپانسیو

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

خب تا اینجا چنتا اصل در مورد طراحی ریسپانسیو گفتیم. حالا وقت اینه که بببینی دوست داری اول نسخه وبی سایتتو طراحی کنی یا نسخه موبایلی! پیشنهاد ما شروع با نسخه ی وبی هست چرا که خیلی محدودیت هاش کمتره.
در طراحی های ریسپانسیو سعی کنید از فونت وبی استفاده کنید چون باعث میشه وب سایت زیباتری داشته باشید اما این نکته رو در نظر بگیرید که حجم وب سایت رو کمی بالا میبره. اما مسئله نگران کننده ای نیست. مثلا ما برای طراحی قالب های وردپرس مثل قالب ورپرس مهندسی به راحتی از فون های وبی استفاده کردیم اما به جای اون با بهینه کردن تصاویر و کدها سعی کردیم حجم قالب رو پایین بیاریم تا تاثیر حجمی که در اثر اسفاده از فونت وبی مثل yekan و iransansرو خنثی کنه و زیبا جلوه کنه.
قطعا شما به انواع سایز اسکرین سخت افزارها دسترسی ندارید و ممکنه این سوال پیش بیاد که چطور می تونید طرحتون رو در سایز های مختلف چک کنی؟ در ادمه بهتون میگیم:
وبسایت رو داخل مرورگری مثل گوگل کروم باز میکنیم و شروع می کنیم به کوچک کردن سایز صفحه مروگر اونهم در سایزهای مختلف. با اینکار شبیه سازی میکنیم که اگر یک کاربر سایت ما رو با موبایل باز کنه، با چه صحنه‌ای مواجه میشه.