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

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

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

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

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

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

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

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

طراحی سایت ثابت یا Fixed

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

 

تصویر بالا یک نمونه از طراحی سایت ثابت است که پهنای کلی صفحه بر روی 960 پیکسل تنظیم شده و به سه بخش اصلی به پهنای 520، 200 و 200 پیکسل تقسیم شده است. عدد 960 یک استاندارد رایج در این روش است زیرا عموم کاربران با رزولوشن 1024*768 پیکسل از صفحات اینترنتی بازدید می کنند.

طراحی سایت روان یا Fluid

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

مزایای طراحی سایت روان

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

معایب طراحی سایت روان

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

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

***

برای دریافت اطلاعات بیشتر دربارۀ نحوۀ سایت ساز پرتال می توانید با شمارۀ 63404-021 تماس بگیرید.