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

/, برنامه نویسی, مقالات آموزشی, وردپرس/اصول طراحی واکنشگرا برای قالب وردپرس

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

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

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

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

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

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

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

14554521613

۲- جریان (Flow):

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

14554521052

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

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

14554522185

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

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

14554522854

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

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

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

موفق باشید.

درباره نویسنده:

امام صادق علیه السلام می فرمایند :هرچيزى‏ زكاتى دارد و زكات دانش، آموختن آن است به اهلش! یاد دهید تا یادبگیرید!

نظر شما چیست