چگونه یک ساید بار طراحی کنیم

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

طراحی ساید بار برای همه مخاطبان سایت

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

طراحی ساید بار بصورت ریسپانسیو

هنگامیکه با روش های مختلف ریسپانسیو کار میکنید، گاهی لازم است بین یک جلوه زیبا در ریسپانسیو و داشتن ساید بار یکی را انتخاب کنید. کتابخانه masonry یکی از کتابخانه های جاوا اسکریپت است که باید بین انتخاب آن و انتخاب یک اسلایدر یکی را برگزینید. بسیاری از طراحان سایت masonry را زیباتر از هر ساید باری میدانند و از آن استفاده می کنند. اگر میخواهید علاوه بر داشتن یک ساید بار یک جلوه ریسپانسیو هم داشته باشید، میتوانید کتابخانه Shuffle جاوا اسکریپت را استفاده کنید. این کتابخانه به شما کمک میکند که در حالت نمایش در مونیتور های بزرگ به کمک بوت استرپ یک ساید بار داشته باشید. در عین حال با کوچک شدن صفحه با جلوه های زیبایی چیدمان صفحه شما را مرتب می کند.

یک ساید بار را چگوه کد نویسی کنیم

برای کد نویسی ساید بار میتوان از روش های متعددی مانند Float و یا استفاده از سیست Grid در بوت استرپ 3 یا بوت استرپ 4 و یا از سیتسم 960 استفاده کرد. اینکه کدام روش را انتخاب می کنید به مهارت استفاده از هر کدام از این تکنیک ها بستگی دارد . با حضور Css3 عملا خود Css توانایی های بسیار بالایی در مدیریت صفحه و سادگی انجام این مدیریت پیدا کرده است. اما هنوز هم بسیاری از طراحان وب شبکه بندی بوت استرپ را به اینکه خودشان بخواهند تمام حالات قرارگیری ساید بار در اندازه های مختلف صفحه نمایش تنظیم کنند را ترجیح میدهند. بوت استرپ برای سادگی کار ایجاد شده است و عملا دلیلی برای عدم بکارگیری آن در یک سایت وجود ندارد. نکته ای که هنگام کار با بوت استرپ برای طراحی ساید بار باید بخاطر داشته باشید این است که برای طراحی پا صفحه باید تمام قسمت محتوا را در یک تگ کانتینر جدا قرار دهید . خود بوت استرپ یک تگ Div با کلاس Raw را پیشنهاد میدهد. این کلاس بخوبی برای تنظیم محتوا های خارج از کانتینر تنظیم شده است.

گرافیک ساید بار چگونه طراحی میشود

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

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

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

چه عناوینی در ساید بار باید حضور داشته باشند

• تبلیغات
• جستجو
• آرشیو سایت
• دسته بندی مطالب سایت
• تگ های پر بازدید
• آخرین وبلاگها
• دسترسی به RSS سایت های مربط

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

براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد