اگر کسب و کار شما به هر میزانی به وب سایت خود وابسته باشد و تا به حال به یک طراحی وب responsive (واکنش گرا) روی نیاورده اید، شما در معرض از دست دادن بسیاری (بخشی) از مشتریان کسب و کار خود قرار دارید.
دلیل اصلی، تغییر عظیمی است که امروزه در نحوه‌ی گشت و گذار مردم در اینترنت اتفاق افتاده است. بر اساس تحقیقاتی که در انتهای سال ۲۰۱۶ انجام گرفته، از بین تمام جستجوهای وبی که انجام گرفته، بیش از ۵۰ درصد از آن ها از روی گوشی هوشمند یا تبلت بوده است. اگر مشتریانی که با گوشی هوشمند خود وارد سایت شما می شوند، با صفحات وبی که متناسب با دستگاه آن ها تنظیم نشده و بهینه ساری نباشد مواجه شوند، شما این ۵۰ درصد از کسب و کار را از دست خواهید داد.
موضوع دیگری که بیشتر قابل توجه است این است که با توجه به اینکه از سال ۲۰۱۵، گشت و گذار وب با موبایل از استفاده از کامپیوترهای رومیزی پیشی گرفته است، این ضرورت ایجاد می شود که وب سایت شما باید برای استفاده توسط هر صفحه نمایشی آماده باشد.
طراحی واکنش گرا
حتما تابه حال با این موضوع روبرو شده اید که وقتی با موبایل یا تبلت خود در حال وبگردی هستید با صفحاتی مواجه شوید که از لحاظ سایز و اندازه با موبایل یا تبلت شما همخوانی نداشته باشند و برای دیدن مطلب یا لینک مورد نظر مادام عملیات zoom in و zoom out کنید و خلاصه جهت خواندن مطالب سایت به زحمت بیافتید چنین سایتی از تکنولوژی واکنش گرا بهره نمی برد.
Responsive design به معنی طراحی یک سایت برای نمایش مناسب در تمام مرورگرها و دستگاه های احتمالی کاربران است. در این روش ظاهر سایت با توجه به ابعاد صفحه نمایش کاربر تغییر کرده و سایر بخش ها متناسب با آن تنظیم میشود. شاید ۱۰ سال پیش که اثری از گوشی های موبایل هوشمند، تبلت و گجت های متنوع نبود نیازی به responsive design احساس نمی شد ولی با ورود مدل ها و برندهای متنوع و استقبال کاربران از این دستگاه ها طراحی سایت نیز دچار تغییراتی اساسی و مهم شد.
به بیان ساده، طراحی واکنش گرا یعنی یک طراحی برای وب سایت که بدون هیچ نقصی خود را برای انطباق با مرورگر یک میز کاری، گوشی هوشمند و تبلت، تنظیم میکند. اگر تا به حال با موبایل به یک وب سایت مراجعه کرده باشید تا ببینید نسخه ی رومیزی آن چگونه است، متوجه شده‌اید که زوم کردن، حرکت در صفحه و نهایتاً رسیدن به آنچه قصدش رادارید امری مشکل می باشد.از حدود ماه می سال ۲۰۱۰ تاکنون، طراحی وب واکنش گرا هنوز هم یک استراتژی نسبتاً جدید برای اکثر صاحبان مشاغل است.
طراحی وب واکنش گرا قصد دارد که مرور صفحات از ابزاری به ابزار دیگر را بی نقص نماید و در نتیجه، بازدیدکنندگان را بدون در نظر گرفتن اینکه چه راهی را برای ورود به وب سایت شما انتخاب می‌کنند، حفظ کند.
همان‌طور که در تصویر بالا می بینید، محتوای صفحه ی وب تغییر اندازه داده و برای متناسب شدن با محدوده‌ی فضای در دسترس، تنظیم شده است.
درگذشته، طراحان، یک وب سایت برای دسکتاپ و سپس یک نسخه ی کاملاً متفاوت موبایل برای استفاده در تمام دستگاه های مختلف در حال ظهور توسعه می‌دادند. در نوامبر سال ۲۰۱۲، سایت محبوب Mashable، توسط بیش از ۲۵۰۰ ابزار مختلف مورد بازدید قرار گرفت، عددی که به آنها کمک کرد تا سال ۲۰۱۳ را به نام سال طراحی وب responsive اعلام نمایند.
واکنش گرا بودن طراحی سایت
واکنش گرا بودن طراحی سایت یعنی قابلیت انعطاف پذیری طراحی سایت و همچنین در برنامه نویسی سایت که هنگام بارگذاری صفحات با طول و عرض مختلف سایت با سرعت مناسب و بدون حذف موارد و اطلاعات ضروری صورت بگیرد، البته این به این معنا نیست که سایت های غیر واکنش گرا در تبلتها و گوشی های هوشمند بارگذاری نمی شوند و دیده نمی شوند. بلکه به شکل هوشمندانه کنترل نمی شوند، یک طراحی سایت واکنش گرا چند مرحله طراحی بیشتر از سایت های معمولی دارد و باید قالبهای مختلفی را طراحی و شکل داد تا مطالب با دسته بندی موضوعی به شکلی مناسب در آنها قرار گیرند.
وب سایتهایی که دارای قابلیت واکنش گرا بودن در طراحی سایت نمی باشند معمولا در نمایش اطلاعات و مخصوصا تصاویر در ابعاد مختلف دچار اشکال می شوند و بخشی از تصاویر نمایش داده نمی شود و یا به نحو مطلوب مطالب در کنار آن قرار نمی گیرد. با وجود اینکه مرورگر ها (Browser) مختلف هم تا حدی می توانند این کاستی ها را جبران نمایند ، اما در نهایت عدم بهره بردن از طراحی سایت واکنش گرا یعنی اینکه حداقل کاربرانی هستند که وب سایت ما را خوب نمی بینند.
مزایای طراحی وب واکنش گرا
صرفه جویی در هزینه
قبل از اینکه ویژگی واکنش گرا بودن (responsive) به صورت گسترده مورد استفاده قرار گیرد، شرکت ها اگر می خواستند نسخه موبایل برای سایت خود طراحی کنند برای هر نوع ابزار یک قالب خاص طراحی می کردند. تصور کنید اگر می خواستید مثلا برای ۳ ابزار آی پد، آی فون و کامپیوتر های معمولی قالب طراحی شود چه هزینه ای می بایست پرداخت می کردید. نکته جالب اینجاست که اگر روزی وسیله جدید به بازار معرفی و به سرعت فراگیر شود، باز دوباره باید هزینه جدید صرف شود تا برای این ابزار جدید، قالب طراحی گردد.
زیبایی قالب واکنش گرا آنجا خود را نشان می دهد که شما سایتتان برای هر ابزاری که در بازار وجود دارد، خود را هماهنگ کرده و نیازی به طراحی دوباره قالب نیست.
صرفه جویی در زمان
با توجه به تجربه ای که در زمینه طراحی سایت کسب کرده ایم می دانیم که همیشه “وقت” یکی از الویت های مشتریان است. زمانی که فقط با یک پروژه (در یک نوبت)، قالبی طراحی می شود که در تمام ابزارها با سایزهای مختلف به خوبی نمایش داده می شود، زمان به شدت کاهش خواهد یافت.
سبقت از رقیبان
از آنجایی که طراحی واکنش گرا هنوز هم تقریبا در ابتدای راه است، طبیعتا تمام رقیبان شما از این ویژگی بهرمند نمی باشند. داشتن این ویژگی به بازدیدکنندگان شما می گوید کار شما در همه زمینه ها حرفه ایست و همچنین بسیار جلوتر از رقیبان خود حرکت می کنید. در نظر داشته باشید که شما سایتی در اختیار دارید که نه تنها در تمام مانیتورها بلکه در همه ابزارهای موجود در بازار به زیبایی و بدون مشکل به نمایش درمی آید. همین مساله باعث سبقت شما از رقیبان می شود.
افزایش ترافیک سایت
امروزه اکثر کاربران اینترنت، با موبایل خود به وب گردی می پردازند. شما تصور کنید اگر سایتی در اختیار نداشته باشید که در ابزارهای موبایل به خوبی به نمایش در بیاید، تعداد زیادی از کاربرانی که می توانید داشته باشید را از دست می دهید.
جلوگیری از ایجاد محتوای تکراری(Duplicate Content)
تصور کنید که دو نسخه سایت، یکی برای کامپیوترهای معمولی و یکی هم برای موبایل، در اختیار دارید. با توجه به اینکه این دو سایت، در اصل یکی هستند و برای نقاط مختلف مطالبشان هم یکسان است، روبات گوگل که هر چند وقت یک بار سری به سایت شما می زند پس از ایندکس کردن نسخه ابتدایی به سراغ نسخه موبایل می رود و مطالب نسخه دوم را به عنوان “تکراری” یا “Duplicate” می شناسد. در صورت اتفاق افتادن این موضوع رنکینگ سایت شما بسیار نزول خواهد کرد. اما در صورتی که شما یک سایت واکنش گرا برای تمام ابزارها در اختیار داشته باشید تمام مطالبتان در همین یک سایت قرار خواهد گرفت و از ایجاد محتوای تکراری (Duplicate Content) جلوگیری خواهد شد. پس می بینید که داشتن قالب واکنش گرا شما را در امر بهینه سازی موتورهای جستجو (SEO) نیز یاری خواهد کرد و باعث می شود وب سایت شما رتبه بهتری در موتورهای جستجو به دست بیاورد.
تمامی صفحات شما یک آدرس (URL) دارند
تا به حال به این فکر کرده اید که اگر نسخه موبایل جداگانه‌ای برای یک سایت داشته باشید و کاربری از طریق موبایل وارد سایت شده و لینکی را با دوست خود که با لپ‌تاپ کار میکند به اشتراک بگذارد چه خواهد شد؟ با طراحی واکنش گرا دیگر نگران نوع دستگاه کاربر سایت خود نیستید. لپ‌تاپ؟ تبلت؟ موبایل؟ یا حتی دستگاهی که هنوز وارد بازار نشده؟
به طور خلاصه می توان از مزایای طراحی واکنش گرا به موارد زیر اشاره داشت:
- افزایش ترافیک وب سایت
- افزایش سرعت بارگذاری صفحات وب سایت ها و فروشگاه های اینترنتی
- توجه به توصیه گوگل برای داشتن وب سایت واکنش گرا
- پیشی گرفتن از دیگر رقبا
- کاربر پسند بودن
- جلوگیری از ایجاد محتوای تکراری (داشتن ۲ وب سایت یکی برای موبایل و دیگری برای دسکتاپ)
نتیجه گیری
با توجه به آمار زیر و اعلام اینکه در کشور ما درصد استفاده کنندگان از گوشیهای هوشمند روز به روز بیشتر می شود استفاده از این نوع طراحی بسیار ضروری به نظر می رسد.
بیش از نیمی از افرادی که عضو شبکه اجتماعی فیسبوک هستند، گوشی های هوشمند، تبلت، آیفون و … دارند و بیش از نیمی از کسانی که گوشی های هوشمند دارند هر ۱۵ دقیقه گوشی خود را برای مطالب جدید چک می کنند.
