طراحی سایت Responsive(واکنش گرا)
امروزه اکثر کاربرانی که در حال جستجو در اینترنت هستند به صفحات وب سایت هایی که ریسپانسیو هستند بر میخورند, و متوجه میشوند که ظاهر وب سایت مورد نظر در تبلت آنها با گوشی همراه آنها و کامپیوتر شخصی شان فرق میکند,اما در کنار این نوع سایت ها وب سایت هایی نیز وجود دارند که قابلیت نمایش در گوشی های تلفن همراه یا تبلت ها را ندارند و برای دیدن قسمت های مختلف آن باید بر روی قسمت های مختلف سایت کلیک کرده تا آن چه که مورد نظرتان هست را ببینید,از همه بدتر وب سایت هایی هستند که محتوای سایت کلا به هم ریخته و برای کاربر و بازدید کننده غیر قابل استفاده می شوند, این جاست که نیاز به وب سایت های ریسپانسیو که ترجمه ی فارسی آن واکنش گرا میباشد احساس میشود.
چرا وب سایت های ریسپانسیو( واکنش گرا) ؟؟؟؟؟
برای آن که سایت های ریسپانسیو، سایت هایی هستند که خود را با اندازه ی صفحه نمایش تلفن همراه یا تبلت به خوبی سازگار کرده و انجام کار با آن ها بسیار روان و آسان می باشد, و این خود یک قابلیت بسیا ر جذاب برای کاربران وب سایت ها در هنگام استفاده از وب سایت ها میباشد. از دیگر مواردی که باعث اهمیت موضوع ریسپانسیو بودن سایت ها می شود تنوع سیستم عامل ها و مرورگر های موجود در بازار می باشد. سایت ریسپانسیوتوانایی مچ شدن و سازگاری با انواع سیستم عامل ها (ویندوز – اندروید – لینوکس – IOS– مکینتاش- یونیکس و…) و انواع مرورگر های جدید و قدیمی عرضه شده را دارند که این خود یکی از مهم ترین نقاط قوت این نوع سایت ها می باشد.
قابیلیت های سایت ریسپانسیو:
- سازگاری با طیف وسیعی از مرورگر های جدید و قدیمی
- سازگاری با انواع صفحه نمایش گوشی و تبلت
- انعطاف پذیری بالا و کارامد
- افزایش قدرت سئو سایت
- افزایش بازدیدکنندگان سایت
- محبوبیت بیشتر در بین موتور های جستجوگر
آیا طراحی ریسپانسیو راه حل تمامی مشکلات جهت افزایش بازدید مشتریان است؟؟؟
اگر چه طراحی ریسپانسیو بسیار مهم است,اما نه همیشه. کاربران دسکتاپ اغلب دوست دارند تمام مطلب را ببینید و آن را بخوانند و از همه امکانات سایت استفاده کنند اما کاربران موبایل میخواهند همه چیز خلاصه باشد و خیلی سریع به همه امکانات سایت دسترسی داشته باشند.پس بهترین کا راین است که نوع کاربران خود رابشناسید.و متناسب با نوع کاربرانت اقدام به طراحی سایت بکنید,اما خب طراحی ریسپانسیو را دیگه نمیشه کنار گذاشت.
چگونگی طراحی سایت ریسپانسیو:
برای آنکه بتوانیم یک سایت ریسپانسیو را درست به کاربر نمایش دهیم باید ابتدا اندازه نمایشگر کاربر را بگیریم و مطابق با اندازه نمایگشر کاربر, سایت را نمایش دهیم.
ما برای همه نمایشگرها طراحی جداگانه ای انجام نمیدهیم. فقط برای نمایشگرهایی با اندازه های پایین:
۳۲۰px نمایشگرهایی که کمترین عرضشان ۳۲۰px است.
۴۸۰px نمایشگرهایی که کمترین عرضشان ۴۸۰px است.
۶۰۰px نمایشگرهایی که کمترین عرضشان ۶۰۰px است.
۷۶۸px نمایشگرهایی که کمترین عرضشان ۷۶۸px است.
۹۰۰px نمایشگرهایی که کمترین عرضشان ۹۰۰px است.
۱۲۰۰px نمایشگرهایی که کمترین عرضشان ۱۲۰۰px است.
وبرای تشخیص عرض نمایشگرها:
شما به دوصورت قادر به انجام این کار هستید. راه اول در گذاشتن فایل های CSS جدا برای هر نمایشگر. در این روش وقتی از طریق تگ link فایل استایل را به صفحه وصل میکنید با استفاده از خاصیت media اندازه نمایشگر را مشخص میکنید:
<link rel=”stylesheet” media=”screen and (min-width: 480px) href=” />
در نوع دوم شما در خود فایل CSS اندازه نمایشگر را مشخص میکنید:
@media screen and (min-width: 480px) {
.content {
float: left;
}
.social_icons {
display: none
}
}
بخش مهمی از کارهایی که برای طراحی ریسپانسیو باید انجام بدهید موارد بالا بود ,اما خب بدون شک به موارد بالا ختم نمیشود,ریزکاریی های دیگه ای برای طراحی ریسپانسیو وجود داره که در آموزش های بعدی به شما آموزش داده میشود.
در آخر میخواهم تفاوت اصلاحات بوت استرپ با ریسپانسیو را که خیلی از افراد به اشتباه به جای هم این دو اصطلاح را به کار میبرند به شما عزیزان توضیح بدهم.
تفاوت ریسپانسیو با بوت استرپ:
بوت استرپ یک فریم ورک (css,javascript) هست که می توانی در طراحی خود از ان استفاده کنی ، اما ریسپانسیو یک تکنولوژی طراحی هست که می توانی صفحات خود را واکنش گرا کنی یعنی در هر نمایشگری از قبیل موبایل ، کامپیوتر ، تبلت و… سایت درست نشون داده بشه . حالا اگه طراحی تو با بوت استرپ درست کنی بوت استرپ این امکان رو بهت میده که صفحات ریسپانسیو طراحی کنی .
