11-21-2017، 11:08 AM
انتخاب روش طراحی سایت بسته به بودجه شما و دید شما به کسب و کارتان رقم میخورد . امروز قصد داریم تا شما را روند طراحی سایت روان آشنا کنیم . در ادامه همراه با سارین وب باشید .
زمانیکه یک سایت را برای طیف وسیعی از کاربران طراحی میکنید باید تفاوت های احتمالی میان بازدیدکنندگان را در نظر داشته باشید که شامل موارد زیر می باشد :
- رزولوشن صفحه نمایش
- نوع مرورگر شامل فایرفاکس، کروم، اینترنت اکسپلورر و…
- تولبارهای اضافی نصب شده بر روی مرورگر کاربران مانند تولبار الکسا
- سیستم عامل کامپیوتر کاربران
توجه به موارد بالا ممکن است کار یک طراح سایت را تا حد زیادی مشکل کند ولی در نقطه مقابل میتواند تاثیر بالایی در کارایی سایت و رضایت کاربران بهمراه داشته باشد. تکنیک طراحی سایت Liquid به این بخش توجه ویژه ای دارد.
طراحی سایت Liquid چیست؟
عبارت Liquid یا روان بیانگر آن است که سایت شما ظاهر خود را متناسب با فضایی که در مرورگر کاربران دارد تغییر داده و در هر شرایطی دسترسی به محتوای موجود در آن برای کاربران ممکن است. در حالت عادی اگر رزولوشن صفحه نمایش کاربر بالا باشد ممکن است مجبور به تغییر بزرگنمایی یا Zoom مرورگر خود شود.
تفاوت طراحی سایت روان و ثابت
ممکن است اطلاعات این بخش برای طراحان حرفه ای سایت پیش پا افتاده و بدیهی به نظر برسد ولی در این قسمت سعی داریم نگاهی عمیق تر به طراحی Liquid و Fix داشته و تفاوت های ظاهری آنها را برای کاربران با مثال بررسی کنیم.
Fluid Website Layout
درتکنیک Fluid یا Liquid بخش های اصلی صفحه و پهنای کلی آن براساس درصد تعریف شده و پیکسل آنها با عرض صفحه نمایش کاربر تعیین میشود. تصویر پایین یک نمونه طراحی سایت روان را نمایش میدهد و همانطور که مشاهده میکنید پهنای بخش های مختلف براساس عرض صفحه نمایش یا رزولوشن تصویر کاربر تعیین میشود. حتی برای تعیین فاصله بین دو بخش نیز میتوان از درصد استفاده کرد تا جایگیری المان های سایت در هر شرایطی یکسان باشد.
مزایای طراحی سایت روان
- سایت طراحی شده کارایی بهتری دارد زیرا با توجه به تنظیمات کاربران خود را تغییر میدهد.
- فضای بین بخش های اصلی تناسب خود را حفظ کرده و نمایش سایت شما در هر شرایطی یکسان خواهد بود.
با رعایت اصول این روش شما هرگز در صفحه خود با اسکرول افقی مواجه نخواهید شد و در هر شرایطی تمام محتوا نمایش داده خواهد شد.
معایب طراحی سایت روان
- طراح سایت کنترل کمتری بر نمایش محتوا دارد زیرا همه چیز را براساس رزولوشن خود چیدمان کرده و ممکن است برخی از شرایط را در نظر نگرفته باشد.
- تصویر، ویدئو و محتوایی که باید ابعاد مشخصی داشته باشد نمیتواند با تغییر ابعاد صفحه خود را هماهنگ کند.
- در صفحه نمایش های خیلی بزرگ فاصله میان المان ها بیش از حد شده و این فضای خالی ممکن است سایت شما را کم محتوا جلوه دهد.
ممکن است بکارگیری تکنیک طراحی سایت روان برای شما مشکلات زیادی را بهمراه داشته و زمان طراحی و رفع عیب را تا حد زیادی افزایش دهد.
ولی میتوانید با ترکیب این دو روش فضای کاربری مناسبی برای سایت خود ایجاد کنید بعنوان مثال با استفاده از تکنیک طراحی روان در هدر و فوتر سایت و تکنیک سایت ثابت برای محتوای میان آنها شما بیشتر معایب این دو روش را بکار گرفته اید. میتوانید با تغییر رزولوشن صفحه نمایش یا بزرگنمایی مرورگر خود نحوه نمایش آن را در شرایط مختلف بررسی کرده و ایرادات احتمالی را شناسایی و رفع کنید. در اکثر مرورگرها با نگه داشته دکمه “Ctrl” و فشردن کلیدهای “+” یا “-” میتوانید بزرگنمایی تصویر را تغییر دهید.
زمانیکه یک سایت را برای طیف وسیعی از کاربران طراحی میکنید باید تفاوت های احتمالی میان بازدیدکنندگان را در نظر داشته باشید که شامل موارد زیر می باشد :
- رزولوشن صفحه نمایش
- نوع مرورگر شامل فایرفاکس، کروم، اینترنت اکسپلورر و…
- تولبارهای اضافی نصب شده بر روی مرورگر کاربران مانند تولبار الکسا
- سیستم عامل کامپیوتر کاربران
توجه به موارد بالا ممکن است کار یک طراح سایت را تا حد زیادی مشکل کند ولی در نقطه مقابل میتواند تاثیر بالایی در کارایی سایت و رضایت کاربران بهمراه داشته باشد. تکنیک طراحی سایت Liquid به این بخش توجه ویژه ای دارد.
طراحی سایت Liquid چیست؟
عبارت Liquid یا روان بیانگر آن است که سایت شما ظاهر خود را متناسب با فضایی که در مرورگر کاربران دارد تغییر داده و در هر شرایطی دسترسی به محتوای موجود در آن برای کاربران ممکن است. در حالت عادی اگر رزولوشن صفحه نمایش کاربر بالا باشد ممکن است مجبور به تغییر بزرگنمایی یا Zoom مرورگر خود شود.
تفاوت طراحی سایت روان و ثابت
ممکن است اطلاعات این بخش برای طراحان حرفه ای سایت پیش پا افتاده و بدیهی به نظر برسد ولی در این قسمت سعی داریم نگاهی عمیق تر به طراحی Liquid و Fix داشته و تفاوت های ظاهری آنها را برای کاربران با مثال بررسی کنیم.
Fluid Website Layout
درتکنیک Fluid یا Liquid بخش های اصلی صفحه و پهنای کلی آن براساس درصد تعریف شده و پیکسل آنها با عرض صفحه نمایش کاربر تعیین میشود. تصویر پایین یک نمونه طراحی سایت روان را نمایش میدهد و همانطور که مشاهده میکنید پهنای بخش های مختلف براساس عرض صفحه نمایش یا رزولوشن تصویر کاربر تعیین میشود. حتی برای تعیین فاصله بین دو بخش نیز میتوان از درصد استفاده کرد تا جایگیری المان های سایت در هر شرایطی یکسان باشد.
مزایای طراحی سایت روان
- سایت طراحی شده کارایی بهتری دارد زیرا با توجه به تنظیمات کاربران خود را تغییر میدهد.
- فضای بین بخش های اصلی تناسب خود را حفظ کرده و نمایش سایت شما در هر شرایطی یکسان خواهد بود.
با رعایت اصول این روش شما هرگز در صفحه خود با اسکرول افقی مواجه نخواهید شد و در هر شرایطی تمام محتوا نمایش داده خواهد شد.
معایب طراحی سایت روان
- طراح سایت کنترل کمتری بر نمایش محتوا دارد زیرا همه چیز را براساس رزولوشن خود چیدمان کرده و ممکن است برخی از شرایط را در نظر نگرفته باشد.
- تصویر، ویدئو و محتوایی که باید ابعاد مشخصی داشته باشد نمیتواند با تغییر ابعاد صفحه خود را هماهنگ کند.
- در صفحه نمایش های خیلی بزرگ فاصله میان المان ها بیش از حد شده و این فضای خالی ممکن است سایت شما را کم محتوا جلوه دهد.
ممکن است بکارگیری تکنیک طراحی سایت روان برای شما مشکلات زیادی را بهمراه داشته و زمان طراحی و رفع عیب را تا حد زیادی افزایش دهد.
ولی میتوانید با ترکیب این دو روش فضای کاربری مناسبی برای سایت خود ایجاد کنید بعنوان مثال با استفاده از تکنیک طراحی روان در هدر و فوتر سایت و تکنیک سایت ثابت برای محتوای میان آنها شما بیشتر معایب این دو روش را بکار گرفته اید. میتوانید با تغییر رزولوشن صفحه نمایش یا بزرگنمایی مرورگر خود نحوه نمایش آن را در شرایط مختلف بررسی کرده و ایرادات احتمالی را شناسایی و رفع کنید. در اکثر مرورگرها با نگه داشته دکمه “Ctrl” و فشردن کلیدهای “+” یا “-” میتوانید بزرگنمایی تصویر را تغییر دهید.