طراحی سایت روان چیست؟

آموزشی

طراحی روان یا Liquid Design

انتخاب روش طراحی سایت و فوت وفن شما در میان طراحی روان، ثابت یا Responsive بستگی زیادی به نوع فعالیت سایت، بودجه شما و اندازه توجه به کاربران داره. در این مقاله می خوایم به معرفی فوت وفن Liquid Design یا همون طراحی سایت روان پرداخته و مشکلات و امتیازات اونو بررسی کنیم. در مقاله با عنوان طراحی سایت Responsive امتیازات و کاربرده های این فوت وفن روز بررسی و معرفی شده که پیشنهاد میکنیم اونو هم بخونین.

مشکلات

زمانیکه یه سایت رو واسه طیف بزرگی از کاربران طراحی میکنین باید تفاوتای احتمالی میان بازدیدکنندگان رو در نظر داشته باشین که شامل موارد زیره:

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

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

طراحی سایت Liquid چیه؟

عبارت Liquid یا روان نشون دهنده اون هستش که سایت شما ظاهر خود رو متناسب با فضایی که در مرورگر کاربران داره تغییر داده و در هر شرایطی دسترسی به محتوای موجود در اون واسه کاربران ممکنه. در حالت عادی اگه رزولوشن صفحه نمایش کاربر بالا باشه ممکنه مجبور به تغییر بزرگنمایی یا Zoom مرورگر خود شه.

فرق طراحی سایت روان و ثابت

ممکنه اطلاعات این بخش واسه طراحان حرفه ای سایت بی ارزش و روشن به نظر برسه ولی در این قسمت تلاش داریم نگاهی عمیق تر به طراحی Liquid و Fix داشته و تفاوتای ظاهری اونا رو واسه کاربران با مثال بررسی کنیم.

Fixed Website Layout

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

Fluid Website Layout

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

یک مطلب دیگر:
چند ایده جدید برای دکوراسیون منزل :

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

مشکلات طراحی سایت روان

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

ممکنه استفاده فوت وفن طراحی سایت روان واسه شما مشکلات زیادی رو بهمراه داشته و زمان طراحی و رفع عیب رو تا حد زیادی زیاد کنه. ولی می تونین با ترکیب این دو روش فضای کاربری مناسبی واسه سایت خود بسازین مثلا با به کار گیری فوت وفن طراحی روان در هدر و فوتر سایت و فوت وفن سایت ثابت واسه محتوای میان اونا شما بیشتر مشکلات این دو روش رو بکار گرفتین. می تونین با تغییر رزولوشن صفحه نمایش یا بزرگنمایی مرورگر خود چگونگی نمایش اونو در شرایط جور واجور بررسی کرده و ایرادات احتمالی رو شناسایی و رفع کنین. در بیشتر مرورگرها با نگه داشته دکمه “Ctrl” و فشردن کلیدهای “+” یا “-” می تونین بزرگنمایی تصویر رو تغییر بدین.

آموزشای CSS موجود در سایت W3schools میتونه راهنمای مناسبی واسه به کار گیری این دستورات در طراحی سایت روان باشه.