ریسپانسیو (Responsive) در اصطلاح به معنای پاسخ گرا یا واکنشی می باشد. به این معنا که طراحی وب سایت به گونه‌ای می باشد که در صفحات مختلف و ابزارهای متفاوت سایت به درستی نمایش داده می شود، به فرض مثال زمانی که شما از طریق گوشی یا تبلت سایت را تماشا می کنید ساختار ظاهری سایت به گونه ای تغییر پیدا می کند که قابلیت پیمایش سایت در این ابزارها به راحتی فراهم گردد.
از طرفی در مانیتورهای با رزولوشن بالا نیز سایت به گونه‌ای مناسب نمایش داده می شود و به عبارت دیگر کاربران با هر ابزاری سایت شما را تماشا می کنند از محتوا و ظاهر سایت شما کمال استفاده را خواهند برد. تفاوت سایت واکنشگرا و غیر واکنشگرا در چیست و چگونه می توان آن را تشخیص داد؟
برای تشخیص ریسپانسیو بودن یک سایت و تفاوت سایتهای ریسپانسیو و غیر ریسپانسیو، سایت مورد نظرتان را در لپ تاپ یا کامپیوتر باز کنید و عرض مرورگر را به آهستگی کم و زیاد کنید. اگر سایت واکنش گرا باشد مشاهده می کنید که اندازه و چیدمان اجزای آن مطابق با تغییر عرض صفحه تغییر می کند به گونه ای که هیچ اسکرول افقی پدید نمی آید. اما در سایتهای غیر ریسپانسیو چنین تطابقی رخ نمی هد و اسکرول افقی لازم است تا بتوان قسمتهای پنهان شده چپ و راست صفحه را مرور کرد
طراحی وب سایت ریسپانسیو چیست؟
منظور از وب سایت ریسپانسیو این است که سایت شما به گونه‌ای طراحی شده باشد که در انواع دستگاه‌های موبایل و تبلت به خوبی و با اندازه و ساختار متناسب نمایش داده شود.
یک سایت واکنش گرا یا ریسپانسیو، این امکان را ایجاد می‌کند که بازدیدکنندگان بتوانند سایت و تمام المان‌های آن را به صورت کاملاً واضح و با اندازه‌های مناسب در دستگاه تلفن همراه خود مشاهده کنند. این ویژگی برای صاحبان تمامی وب سایت‌ها، به ویژه سایتهای فروشگاهی اهمیت زیادی دارد، چون بسیاری از بازدیدکنندگان سایت‌ها و مشتریان آن‌ها، برای مشاهده و خرید اینترنتی از موبایل استفاده می کنند.
صاحبین کسب و کارهای آنلاین با داشتن یک وبسایت ریسپانسیو از دیگر رقبای خود – که از این قابلیت مهم غافل هستند – حداقل یک قدم جلوتر خواهند بود.
این نکته را نیز باید گفت که در حال حاضر داشتن یک سایت واکنشگرا، از یک مزیت به یک ضرورت تبدیل شده است؛ ضرورتی که اغفال شدن از آن می‌تواند تأثیر بسیار منفی را بر روند رشد کسب و کارتان بگذارد و شما را به عنوان یک مدیر کسب و کار آنلاین از صحنه رقابت حذف کند.
عملکرد سایتهای واکنش گرا چگونه است؟
عملکرد سایتهای واکنشگرا به صورت فنی به این شکل است که طراحان سایت، با بکارگیری روشهای حرفه‌ای برنامه‌نویسی، به ابعاد آیتم‌های موجود در صفحات سایت، درصدهای مختلفی را نسبت می‌دهند. منظور از آیتم سایت در اینجا، تصاویر، جعبه متن، ستون‌ها و … می‌باشد. این نسبت دادن درصدهای مختلف به عناصر سایت در طراحی واکنشگرا موجب می‌شود که سایت برای نمایش در هر دستگاه و با هر ابعادی، آماده باشد و برای هر سایز دستگاه، واکنش مناسبی نمایش داده و خود را به شکلی صحیح و مناسب در ابعاد دستگاه، نمایش دهد.
برای اینکه این موضوع را بیشتر درک کنید، آن را در قالب یک مثال مقایسه‌ای بیان می‌کنیم. فرض کنید شما به عنوان یک کاربر بازدیدکننده، سایتی را در رایانه شخصی خود مشاهده می‌کنید. در این حالت، اطلاعات وب سایت در ۳ ستون برایتان نمایش داده می‌شود. حال اگر همین سایت را در موبایل خود باز کنید، خواهید دید که سایت در یک ستون برایتان نمایش داده می‌شود. این امر نشان از آن است که این سایت از طراحی واکنش گرا برخوردار است.
از آنجا که اندازه صفحه نمایش موبایل کوچکتر است، اطلاعات وبسایت با حفظ تناسب اندازه در یک ستون نمایش داده می‌شود. بدین شکل تمام اطلاعات سایت به شکل واضح دیده می‌شود. این امر در شکل زیر به خوبی قابل اثبات است:
روش های طراحی سایت واکنش گرا
به طور کلی طراحی وب سایت واکنش گرا با دو روش مختلف انجام میشه . من هرکدوم رو به اختصار خدمت تون توضیح میدم و ایشالا بعدا در پست های جداگانه روش های مختلف رو بررسی میکنم . اگرچه روش پیاده سازی طراحی واکنش گرا برای مشتری مشکلی ایجاد نمیکنه اما اگر قصد سفارش طراحی سایت دارید ، بهتره حتما با روش های طراحی واکنش گرا آشنا بشید .
به طور کلی طراحی وب سایت واکنش گرا با دو روش مختلف انجام میشه . من هرکدوم رو به اختصار خدمت تون توضیح میدم و ایشالا بعدا در پست های جداگانه روش های مختلف رو بررسی میکنم . اگرچه روش پیاده سازی طراحی واکنشر گرا برای مشتری مشکلی ایجاد نمیکنه اما اگر قصد سفارش طراحی سایت دارید ، بهتره حتما با روش های طراحی واکنش گرا آشنا بشید .
طراحی سایت واکنش گرا با کدنویسی اختصاصی
در این روش همه شناسه ها به صورت اختصاصی نوشته میشن و همه اندازه ها توسط کدنویس ( طراح وب ) محاسبه میشه . به نظر من این روش در پروژه های کوچیک مناسب تره . چون در یک وب سایت چند صفحه ای Element های زیادی تعریف نمیشه ؛ بنابراین ویرایش این نوع کد نویسی در پروژه های کوچیک راحت تره .
طراحی سایت واکنش گرا با استفاده از فریمورک ها
پیش از توضیح این قسمت لازمه بدونید که اصلا فریمورک یعنی چی . به طور ساده و خلاصه عرض کنم خدمت تون که Framework در فرهنگ واژه ها یعنی « چهارچوب کاری » . انجمن های غیر انتفاعی در دنیا هستن که اومدن یه سری نمونه کد CSS رو آماده کردن تا بقیه کدنویس ها و طراحان وب بتونن از این الگو های آماده توی کارهاشون استفاده کنن . با این روش طراحان وب با دانش فنی کمتر و در مدت زمان کوتاه تر میتونن یک وب سایت درست و حسابی تولید کنن که اکثر اصول طراحی وب در اون رعایت شده . تا امروز چند فریمورک برای طراحی سایت واکنش گرا ساخته شده که هر کدوم مزایا و معایبی دارن . فریمورک بوت استرپ BootStrap یکی از مهمترین و پرکاربرد ترین فریمورک های طراحی سایت واکنش گراست . بسیاری از طراحان سایت در سراسر دنیا برای ساخت وب سایت های واکنش گرا از بوت استرپ Bootstrap استفاده میکنن .
اهمیت طراحی سایت واکنش گرا یا ریسپانسیو (RESPONSIVE)
گوگل سایت های Responsive را دوست دارد
چرا که گوگل و الگوریتم هایش به تجربه کاربر از استفاده از یک سایت، مدت زمان سپری شده یک کاربر در آن و همچنین bounce rate آن اهمیت می دهند. اگر کاربران و مشتریانتان از سایت شما راضی باشند و برایشان تجربه کاربری مناسبی را به ارمغان آورید، گوگل هم سایت شما را در بالاترین نتایج نشان خواهد داد.
سبقت از رقیبان
از آنجایی که طراحی سایت واکنش گرا هنوز در ابتدای راه است، احتمال اینکه رقیبان شما از این ویژگی بهرمند باشند کم است. داشتن این ویژگی به بازدیدکنندگان شما می گوید کار شما در همه زمینه ها حرفه ایست و همچنین بسیار جلوتر از رقیبان خود حرکت می کنید. در نظر داشته باشید که شما سایتی در اختیار دارید که نه تنها در تمام مانیتورها بلکه در همه ابزارهای موجود در بازار به زیبایی و بدون مشکل به نمایش درمی آید. همین مساله باعث سبقت شما از رقیبان می شود.
صرفه جویی در هزینه
قبل از اینکه ویژگی واکنش گرا بودن (Responsive) به صورت گسترده مورد استفاده قرار گیرد (گرچه هنوز هم این اتفاق نیفتاده)، شرکت ها اگر می خواستند نسخه موبایل برای سایت خود طراحی کنند برای هر نوع ابزار یک قالب خاص طراحی می کردند. تصور کنید اگر می خواستید مثلا برای ۳ ابزار کامپیوتر ، آی فون و آی پد های معمولی قالب طراحی شود چه هزینه ای می بایست پرداخت می کردید.
نکته جالب اینجاست که اگر روزی وسیله جدید به بازار معرفی و به سرعت فراگیر شود، باز دوباره باید هزینه جدید صرف شود تا برای این ابزار جدید، قالب طراحی گردد. زیبایی قالب واکنش گرا آنجا خود را نشان می دهد که شما سایتتان برای هر ابزاری که در بازار وجود دارد، خود را هماهنگ کرده و نیازی به طراحی دوباره قالب نیست. به زبان ساده وکلی میتوان گفت یک قالب برای تمام ابزارها.
جلوگیری از ایجاد محتوای تکراری (Duplicate Content)
فرض کنید که دو نسخه سایت، یکی هم برای موبایل و یکی برای کامپیوترهای معمولی ، در اختیار دارید. با توجه به اینکه این دو سایت، یک سایت هستند اما برای نقاط مختلف مطالبشان هم یکی است. روبات گوگل که هر چند وقت یک بار سری به سایت شما می زند پس از ایندکس کردن نسخه ابتدایی به سراغ نسخه موبایل می رود و مطالب نسخه دوم را به عنوان “تکراری” یا “Duplicate”می شناسد که در صورت اتفاق افتادن این موضوع رنکینگ سایت شما بسیار نزول خواهد کرد. اما در صورتی که شما یک سایت واکنش گرا برای تمام ابزارها در اختیار داشته باشید تمام مطالبتان در همین یک سایت قرار خواهد گرفت و از ایجاد محتوای تکراری (Duplicate Content) جلوگیری خواهد شد. پس می بینید که داشتن قالب واکنش گرا شما را در امر SEO نیز یاری خواهد کرد.
افزایش ترافیک سایت
تقریبا ۱۶ درصد از کاربران اینترنت، با موبایل خود به وب گردی می پردازند. شما تصور کنید اگر سایتی در اختیار نداشته باشید که در ابزارهای موبایل به خوبی به نمایش در بیاید، تعداد زیادی از کاربرانی که می توانید داشته باشید را از دست می دهید. پس شما می توانید هم اکنون که قصد سفارش یک سایت را دارید با کمی هزینه بیشتر، کاری کنید که تمام افرادی (با هر ابزاری) که وارد دنیای نت می شوند سایت شما را نیز بتوانند به بهترین شکل ممکن مشاهده کنند.
صرفه جویی در زمان
با توجه به تجربه ای که در زمینه طراحی سایت کسب کرده ایم می دانیم که همیشه “وقت”یکی از الویت های مشتریان است. زمانی که فقط با یک پروژه (در یک نوبت)، قالبی طراحی می شود که در تمام ابزارها با سایزهای مختلف به خوبی نمایش داده می شود، زمان به شدت کاهش خواهد یافت.
جلوگیری از ایجاد محتوای تکراری (Duplicate Content)
فرض کنید که دو نسخه سایت، یکی هم برای موبایل و یکی برای کامپیوترهای معمولی ، در اختیار دارید. با توجه به اینکه این دو سایت، یک سایت هستند اما برای نقاط مختلف مطالبشان هم یکی است. روبات گوگل که هر چند وقت یک بار سری به سایت شما می زند پس از ایندکس کردن نسخه ابتدایی به سراغ نسخه موبایل می رود و مطالب نسخه دوم را به عنوان “تکراری” یا “Duplicate”می شناسد که در صورت اتفاق افتادن این موضوع رنکینگ سایت شما بسیار نزول خواهد کرد. اما در صورتی که شما یک سایت واکنش گرا برای تمام ابزارها در اختیار داشته باشید تمام مطالبتان در همین یک سایت قرار خواهد گرفت و از ایجاد محتوای تکراری (Duplicate Content) جلوگیری خواهد شد. پس می بینید که داشتن قالب واکنش گرا شما را در امر SEO نیز یاری خواهد کرد.
افزایش ترافیک سایت
تقریبا ۱۶ درصد از کاربران اینترنت، با موبایل خود به وب گردی می پردازند. شما تصور کنید اگر سایتی در اختیار نداشته باشید که در ابزارهای موبایل به خوبی به نمایش در بیاید، تعداد زیادی از کاربرانی که می توانید داشته باشید را از دست می دهید. پس شما می توانید هم اکنون که قصد سفارش یک سایت را دارید با کمی هزینه بیشتر، کاری کنید که تمام افرادی (با هر ابزاری) که وارد دنیای نت می شوند سایت شما را نیز بتوانند به بهترین شکل ممکن مشاهده کنند.
مزایای طراحی وب سایت ریسپانسیو
پویایی سایت:
مهم ترین مزیت وب سایت های واکنش گرا، نمایش کلیه اجزای سایت در قالبی کوچکتر به کاربران وب سایت است. در سایت های ریسپانسیو، سایت دقیقا با سایز و قالب دستگاه بازدید کننده هماهنگ خواهد بود.
انعطاف پذیری سایت ریسپانسیو:
طراحی ریسپانسیو کاملا منعطف است. به عنوان مثال هنگام طراحی و پیاده سازی سایت واکنش گرا می توانید بخشی از سایت را در گوشی های موبایل نمایش ندهید و به‌جای آن موارد دیگری قرار دهید.
صرفه‌جویی در زمان و هزینه طراحی:
با وجود طراحی ریسپانسیو دیگر نیازی نیست با ورود هر دستگاه جدید به بازار، قالب جداگانه ای برای آن طراحی کنید. بنابراین در زمان و هزینه صرفه جویی قابل توجهی صورت می گیرد. قبل از فراگیر شدن طراحی واکنش گرا، باید برای طراحی هر نوع صفحه نمایش، هزینه ای جداگانه صرف می شد. این مساله نه تنها به هزینه بلکه به زمان زیادی هم نیاز داشت.
سبقت از رقبا:
سایت واکنش گرا، مخاطبین بیشتری را از همه انواع دستگاه های هوشمند با هر اندازه صفحه نمایشی به خود جذب می کند. به‌این ترتیب شما قادر خواهید بود از سایر رقبا پیشی بگیرید و به موفقیت دست پیدا کنید. در حالی که بسیاری از مدیران، با نادیده گرفتن ریسپانسیو سایت، بسیاری از مخاطبان خود را از دست می دهند.
افزایش بازدید از سایت و در نتیجه افزایش فروش:
اگر سایت شما بر روی موبایل، تبلت و هر دستگاه دیگری قابل مشاهده باشد، ترافیک بیشتر و در نتیجه فروش بیشتری خواهید داشت و در غیر این صورت کاربران زیادی را از دست خواهید داد. بنابراین در هنگام طراحی سایت، حتما به ویژگی ریسپانسیو بودن آن توجه کنید.
بهبود سئو سایت:
گوگل یک منبع بسیار مهم برای جذب مخاطب است و طراحی ریسپانسیو سایت از فاکتور های بسیار مهم سئو برای افزایش رتبه سایت در گوگل است. موتور های جست و جوی گوگل به وب سایت هایی که برای کاربران خود ارزش قائل شده و برای راحتی آن ها طراحی مناسبی دارند، بیشتر توجه می کنند. بنابراین شانس شما برای قرار گرفتن در نتایج اولیه جست و جو بیشتر می شود. اگر شما نتوانید سایت را ریسپانسیو کنید، شانسی برای جذب مخاطب ندارید و به زودی از صحنه رقابت حذف خواهید شد.
معایب طراحی وب سایت ریسپانسیو
هر چیز خوبی معایبی هم دارد و طبیعتاً طراحی ریسپانسیو نیز از این قاعده مستثنا نیست؛ در واقع، اگر غیر از این بود وب سایت های بزرگی مانند فیس بوک و توییتر نیز به جای استفاده از سایت های مجزا برای کاربران موبایل، در همان سایت اصلی‌شان از طراحی ریسپانسیو استفاده می کردند.
هر چند که طراحی ریسپانسیو از نظر تجربه کاربری و سئو اهمیت زیادی دارد و انجام آن در دنیای اینترنت، تبدیل به یک ضرورت شده است، اما معایبی هم دارد که در ادامه آن ها را بررسی خواهیم کرد:
سرعت بارگذاری وب سایت:
استفاده از طراحی ریسپانسیو هیچ مزیتی را در سرعت بارگذاری سایت برای کاربران موبایل ایجاد نمی کند. توجه داشته باشید که حتی اگر برخی از مؤلفه های سایت برای کاربری که از گوشی هوشمند خود استفاده می کند ظاهر نشود به این معنی نخواهد بود که آن مؤلفه ها بارگذاری نشده‌اند؛ بلکه فقط از دید کاربر پنهان می شوند تا ایرادی در طرح وب سایت در موبایل به وجود نیاید.
شاید بتوان بزرگ ترین معضل طراحی ریسپانسیو را مدت زمان و سرعت بارگذاری تصاویری دانست که باید با اندازه صفحه نمایش دستگاه مورد استفاده کاربر تطبیق پیدا کنند. دقت داشته باشید که فرآیند تغییر اندازه تصاویر برای نمایش در تبلت یا گوشی های هوشمند می تواند تحت تأثیر قدرت محدود دستگاه های موبایل قرار بگیرد و دچار وقفه یا کندی شود.
عدم پشتیبانی تمامی مرورگر ها:
برخی از مرورگر های موبایل از مدیا کوئری ها (media queries) پشتیبانی نمی کنند. مدیا کوئری ها در واقع دستورالعمل های CSS هستند. پشتیبانی مرورگر مورد استفاده کاربر برای نمایش صحیح طراحی ریسپانسیو ضروری است. البته این مشکل با به روز رسانی های منظم سیستم های عامل، اپ ها و دستگاه های موبایل و پشتیبانی روزافزون آن ها از طراحی ریسپانسیو به سرعت در حال برطرف شدن است؛ اما به هرحال مسئله ای است که باید به آن توجه داشته باشید.
چطور از واکنش گرا بودن سایت خود مطمئن شوید؟
از آنجا که طراحی سایت ریسپانسیو به مهارت کدنویسی نیاز دارد، یک کاربر معمولی از پس آن بر نمی‌آید. اما به عنوان صاحب یک وبسایت، قطعاً می‌توانید هنگام طراحی سایت، مساله واکنش گرایی را در نظر بگیرید و از ریسپانسیو بودن سایت خود مطمئن شوید. می‌پرسید چگونه؟
در ادامه به شما چند راه کاربردی معرفی می‌کنیم که به‌وسیلۀ آن بتوانید، واکنش‌گرایی سایت خود را چک کنید. (بدون اینکه نیاز باشد سایت خود را در گوشی موبایل یا تبلت باز کنید.)
دو راه ساده برای بررسی ریسپانسیو بودن یک وبسایت
در ابتدا بگذارید دو مسیر راحت برای چک کردن واکنش گرایی یک وب سایت را بشناسیم:
- وبسایت Am I Responsive: به سایت Am I Responsive مراجعه کنید و آدرس سایت خود را وارد کنید. این سایت به سرعت چهار نسخه کامپیوتر، لپ‌تاپ، تبلت و موبایل از سایت شما را برایتان نمایش خواهد داد و به همین راحتی می‌توانید واکنش گرایی آن را تست کنید.
- تغییر اندازۀ صفحه مرورگر: اگر می خواهید دقیق‌تر نسخه‌های مختلف را بررسی کنید، می‌توانید مرورگر خود را از حالت تمام صفحه خارج کنید و با صفحه آن را به دلخواه بزرگ و کوچک کنید. وقتی شما اندازه مرورگر را تغییر می‌دهید، سایت شما خودش را تطبیق خواهد داد؛ به این ترتیب، از نمایش درست آن در تمام اندازه‌ها مطمئن می‌شوید.
نتیجه گیری
با توجه به موارد گفته شده در این مقاله از گروه تبلیغاتی فورسی ، به اهمیت و ضرورت واکنش گرا بودن سایت پی بردید. از این رو اگر قصد سفارش و ساخت یک سایت برای کسب و کار خود دارید، حتما از طراح سایت بخواهید آن را به صورت ریسپانسیو طراحی کند. در طی مرور زمان نیز، صفحات مختلف سایت خود را از نظر سازگاری با موبایل مورد بررسی قرار دهید. این بررسی‌ها و توجه به این مورد، رتبه صفحات سایت شما در نتایج جستجوی گوگل بهبود خواهد داد.