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

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


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

طراحي سايت Liquid چيست؟

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


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

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


Fixed Website Layout

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


Fluid Website Layout

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


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

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


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

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

آموزش هاي CSS موجود در سايت W3schools ميتواند راهنماي مناسبي براي استفاده از اين
 دستورات در طراحي سايت روان باشد.




منبع : وبسيما