در طراحی وب سایت، ساید بار چیست؟

در این مقاله تصمیم دارم برای شما عزیزانم مطالبی را در ارتباط با طراحی وب سایت و ساید بار بیان کنم

هر وب سایت دارای چند بخش اصلی میباشد که به آنها اشاره میکنیم :

• قسمت بالایی یک سایت ( قسمتی که تصویری در بالایی سایت به عنوان لوگو و ... قرار دارد ) را هدر Header مینامند

 هدر Header را می‌توان به عنوان یکی از اصلی‌ترین و مهم‌ترین قسمت‌های ساختار قالب در طراحی وب سایت معرفی کرد چرا که  هدر Header  می‌تواند نقش مهم و بسزایی را در رابط کاربری ایفا کند و انتخاب  هدر Header مناسب و مرتبط با طرح و رنگ و موضوع سایت می‌تواند تاثیر مثبتی را در ذهن مخاطبان سایت و یا وبلاگ شما ایجاد کند.

• قسمتی که مطالب یک سایت در آن قرار میگیرد را content مینامند

بدنه یا ناحیه‌ی محتوا در یک صفحه از سایت اصلی‌ترین قسمت صفحه است (به قسمت <main> در شکل اول نگاه کنید) که بازدیدکنندگان بیشترین وقت خود را در آن می‌گذرانند چرا که به دنبال جستجویی که کرده‌اند به صفحه‌ی جاری هدایت شده‌اند. اینجاست که ایده‌های طراحی سنتی در مورد خوانایی و وضوح مطالب به کمک می‌آید هر چند برخی نکات جدید را نیز باید به آن ضمیمه کرد. یک صفحه از سایت می‌تواند هر ارتفاعی داشته باشد. بنابراین مهم است که متون طولانی را با فضاهای خالی سفید و با زیرهدرها یا subheaderهایی به قسمت‌های مجزا تقسیم نمود. این جداسازی به کاربر اجازه می‌دهد تا صفحه را با سرعت بیشتری بخواند. همچنین عناوین بالای هر قسمت که با فونت‌های درشت (معمولا با تگ‌های هدینگ) نوشته می‌شوند به کاربر می‌گویند که در متن پیش رو در مورد چه چیزی صحبت خواهد شد.

 

 

تقسیم‌بندی محتوا با استفاده از تگ‌های هدینگ شامل <H1>، <H2> و امثال آن به موتورهای جستجو کمک می‌کند تا اطلاعات صفحه را با دقت بیشتر ارزیابی کنند. برخی از موتورهای جستجو نظیر گوگل به کلماتی که در داخل این تگ‌ها نوشته شده‌اند ارزش بالاتری می‌دهند چرا که تمایل به خلاصه‌سازی اطلاعات صفحه دارند.

• قسمت های کناری یک سایت ( بخشی که تبلیغات در کنار سایت ها قرار میگیرد + لینک دیگر مطالب + آمار سایت و ... ) را ساید بار  sidebar  نامیده و به سایدبار چپ و سایدبار راست جدا میشود ( برخی سایت ها دارای 2 ساید بار در سمت چپ و راست هستند )

• نوار نشان‌دهنده‌ی مسیر یا Navigation

لینک‌های راهبری یا نویگیشن (Navigation) لینک‌هایی از صفحه هستند که دسترسی به قسمت‌های مختلف سایت را در شکل‌های خاصی نشان می‌دهند و باعث می‌شوند کاربران مطالب را در به صورت دسته‌بندی‌های خاصی ببینند و راحت‌تر به سراغ موضوع خود بروند. همچنین بکارگیری این لینک‌ها به کاربران این امکان را می‌دهد که قسمت‌های مختلف سایت را به صورتی کارا و در کمترین زمان ممکن بازدید کنند.نویگیشن را می‌توان به نقشه‌ی جاده تشبیه کرد که بازدیدکنندگان را قادر می‌سازد که قسمت‌های مختلف سایت و اطلاعات ذخیره شده در آن را کشف کنند.

 

• قسمت پایینی سایت که توضیحاتی در رابطه با حق نشر سایت ( کپی رایت ) تاریخ افتتاح سایت و ... قرار میگیرد را فوتر footer مینامند که حتما لزومی نیست این بخش در سایت قرار بگیرد

از هدر (Header) تا فوتر یا پاورقی (Footer)، لایه‌بندی صفحه احتیاج به مکانیزمی دارد تا به کاربر جهت دهد و به وی کمک کند تا آن‌چه را که به دنبال یافتن آن است بیابد. صرفنظر از اینکه برنامه‌ریزی شما برای لایه‌بندی صفحات سایت چگونه است شما باید برنامه‌ای نیز برای پیاده‌سازی این عناصر و طراحی آن‌ها داشته باشید.

این بخش ها کلی ترین دسته بندی بخش های یک سایت میباشد که در آموزش های بعدی به توضیح کامل و تشریح بخش های سایت خواهیم پرداخت .

 

 

تعریف ساید بار

در طراحی وب سایت قسمت های کناری یک سایت ( بخش مربوط به تبلیغات، آمار سایت، لینک دیگر مطالب و … ) را ساید بار (sidebar) می نامند. در طراحی وب سایت بعضی از سایت ها ۲ ساید بار دارند یکی در سمت چپ و یکی سمت راست خود 

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

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

 

 

 

 

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

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

 

کدنویسی یک ساید بار در طراحی وب سایت:

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

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

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

 

 

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

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

فاکتورهایی که در ساید بار باید حضور داشته باشد:

• تبلیغات

• جستجو

• آرشیو سایت

• دسته بندی مطالب سایت

• تگ های پر بازدید

• آخرین وبلاگها

• دسترسی به RSS سایت های مربط

 

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

منبع: ساپرن