اصول طراحی واکنشگرا برای قالب وردپرس

امروزه یکی از مهم ترین ویژگی هایی که هر سایت باید داشته باشد خاصیت واکنش گرایی است. درگذشته میزان استفاده از گجت هایی مثل موبایل ها و تبلت ها برای اینترنت بسیار پایین بود اما با همگیر شدن گوشی های هوشمند وتبلت ها و افزایش سرعت اینترنت از طریق سیم کارت بخش عمده ای از جست و جو های اینترنتی از طریق این گجت هاست چرا که دسترسی سریع مهمترین ویژگی آن هاست.

لذا برای شما که میخواهید بازدید سایتتان بالا رود باید وبسایت شما ویژگی واکنش گرا (responsive) را به نحو احسنت پشتیبانی کند.

علاوه بر آن واکنش گرا بودن سایت شما در سئو سایت شما بسیار کار آمد است و باعث می شود گوگل به سایت شما امتیاز بالاتری را بدهد.

طراحی واکنش گرا فاقد هر گونه اندازه ثابت(اینچ, میلی متر و …) است , طراحی ثابت فقط برای گجت های رو میزی مثل کامپیوتر شخصی و لپ تاپ است و این نوع طراحی رو به زوال است چرا که اکثر جست و جو های انترنتی از گجت هایی غیر از لپت تاپ و کامپیوتر شخصی است! بنابراین لازم است تا به سمت وب سایت های شناور(fluid web) حرکت کنیم.

مهمترین نکات وبسایت واکنشگرا (responsive)

۱- واحد های نسبی (Relative units):

این بدین معناست که به جای استفاده از واحد های ثابت ما از واحد های نسبی مثل درصد استفاده کنیم تا وبسایت ما منتاسب با
صفحه نمایش گجت های متفاوت سازگار شود. به عنوان مثال وقتی ما می گوییم یک تگ ۸۰ درصد باشد دیگر فرقی نمی کند که صفحه نمایش ما ۵۰۰ پیکسل باشد یا ۱۵۰۰ پیکسل ولی اگر ما یک تگ را ۵۰۰ پیکسل انتخاب کنیم اگر صفحه نمایش کمتر از ۵۰۰ پیکسل باشد قطعا به مشکل برمی خوریم .به طراحی با مقیاس های ثابت مثل point , px و …. به static Unit معروف است و اگر مقیاس هایی مثل درصد باشد Relative Units می گویند.

۲- جریان (Flow):

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

۳- مقادیر بیشینه(max) و کمینه(min):

بعضی وقت ها خیلی خوب است که محتوایی در وبسایتتن قرار می دهید همهی عرض صفحه را بگیرد یعنی Full Width باشد ، مثلا روی یک دستگاه همراه. اما اینکه همان محتوا کل عرض صفحه نمایش تلویزیونتان را بگیرد معمولا کار معقولی نیست. اینجاست که مقادیر min و max به کمک شما می آید. مثلاً پهنای ۱۰۰ درصد باشد و عرض بیشینهی ۱۰۰۰ پیکسل به این معناست که محتوا کاملا صفحه را پر میکند، اما نباید بیشتر از ۱۰۰۰ پیکسل باشد.

۴- نقاط شکست (breakpoints):

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

۵-اول نسخه موبایل را طراحی کنیم یا دسکتاپ؟

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

۶- فرق فونت های وبی با فونت های سیستمی:
این خیلی بدیهی است که اگر شما از فونتهای وبی مثل yekan ,dinar استفاده کنید وب سایت شما زیبا تر خواهد بود و
سرعت بارگذاری سایت شما بالاتر خواهد بود.

موفق باشید.