همه چیز درباره طراحی ریسپانسیو
همه چیز درباره طراحی ریسپانسیو

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

چرا سال ۲۰۱۴ سال طراحی ریسپانسیو وب سایت است؟

شاید متوجه شده باشید که سایت NasleWeb از دیرباز ظاهری جدید به خود گرفته است. به نظر می رسد طراحی عرض صفحه گسترده‌تر از حد معمول است و وقتی مرورگر خود را کوچک می کنید، اندازه محتوا تغییر کرده و متناسب عرض صفحه می شود.
با این حال، هدف صرفاً زیبایی یا نوآوری فنی نیست: شرکت‌های رسانه‌ایی مانند شرکت ما شاهد تغییراتی عمده در عادات مخاطبان خود هستند.
شرکت هایی که خود را با این تغییرات سازگار نمی‌کنند ممکن است از بقیه عقب بیافتند. در ادامه به بررسی این موضوع خواهیم پرداخت.

دوران بعد از کامپیوترهای خانگی

سال۲۰۱۲  سالی بسیار غیر معمول در بازار کامپیوترهای خانگی بوده است. برای اولین بار از سال ۲۰۰۱، فروش کامپیوترهای خانگی پایین‌تر از سال گذشته بود.
پس مصرف کنندگان چه دستگاهی را جایگزین آن کرده‌اند؟ شاید تبلت . انتظار می‌رود فروش تبلت به بیش از ۱۰۰ میلیون عدد در سال جاری برسد. تعداد فروش آنها ممکن است در سال آینده از نوت بوک هم بالاتر رود.
وب و یا نرم افزار؟ یا هر دو؟
طراحی وب سایت و خدمات، همه منجر به یک نتیجه شده است، یک میلیون مانیتور در سراسر دنیا تولید شده و باید خود را با آنها سازگار کنیم.
طراحی برنامه‌های اندروید و غیره شاید راهکاری بدیهی به نظر برسد. شکی نیست که داشتن برنامه‌های موبایل برای سیستم عامل‌های اصلی بهتر از نداشتن هیچ برنامه‌ای است، اما در عین حال چگونه می‌توان خود را برای هر فروشگاه نرم افزاری آماده کرد؟
هنگامی که نوبت به سایت‌های خبری می‌رسد، اطلاعات حاکی از آن است که وب موبایلی بسیار حائز اهمیت است. به گزارش مرکز تحقیقات پیو، ۶۰ درصد از کاربران تبلت ترجیح می‌دهند اخبار را در وب موبایل بخوانند تا از طریق برنامه. در حالی که به نظر من، شرکت‌های رسانه‌ای حتماً باید برنامه‌هایی را طراحی کنند، اما بدیهی است که داشتن وب سایت بزرگ موبایلی باید در اولویت باشد.

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

البته راه حل، طراحی وب سایتی است که به طور یکسان در هر دستگاهی دیده شود. در اینجا طراحی واکنش‌گرای وب سایت مطرح می شود.
به عبارت ساده، طراحی ریسپانسیو وب سایت از “جستجوی رسانه” برای یافتن رزولوشن دستگاهی که روی آن دیده می‌شود استفاده می‌کند. بنابراین تصاویر و شبکه‌های انعطاف پذیر کاملاً مناسب صفحه نمایش می‌شوند. برای مثال، اگر این مقاله را روی مرورگر دسکتاپ مشاهده می‌کنید، پنجره مرورگر را کوچکتر کنید. تصاویر و ستون محتوا کوچک می‌شوند، و سپس نوار کناری کاملاً ناپدید خواهد شد. در صفحه اصلی ما، خواهید دید که طرح سایت از سه ستون به دو ستون و سپس به یک ستون کاهش مییابد.
مزایای این طرح آشکارست: وب سایتی را طراحی می‌کنید، و در سراسر هزاران صفحه نمایش مختلف به خوبی کار می‌کند.

web

۲۰۱۴ سال ریسپانسیو

با توجه به توسعه سریع تبلت و موبایل‌های هوشمند – و این واقعیت که در حال حاضر کاربران ترجیح می‌دهند اخبار خود را در وب موبایل و نه در برنامه‌های کاربردی بخوانند – سال ۲۰۱۴ سالی بود که توسعه طراحی ریسپانسیو اجتناب ناپذیر خواهد بود.
برای ناشران، این ساده‌ترین راه برای رسیدن به خوانندگان در دستگاه‌های متعدد است و برای کاربران، یک تجربه بزرگ در هر صفحه نمایش است.
امروزه بیش از هر زمان دیگری، برنامه‌ها و سایت‌هایی را طراحی می‌کنیم که در دستگاه‌های مختلف دیده می‌شوند. طراحی ریسپانسیو وب سایت رویکردی رو به جلو را ارائه می‌کند، و در نهایت به ما اجازه می‌دهد تا طرح‌های گوناگونی را تولید کنیم.

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

تا چندی پیش برای نمایش یک وب سایت در موبایل، طراحی و برنامه نویسی مجزا تحت عنوان Mobile version یا سایت موبایل محور انجام می‌شد. در این نوع طراحی، سرور با توجه به شناسه مرورگر کاربر تشخیص می داد که کاربر سایت را با موبایل بازدید می کند در این حالت محتوای موبایل را در همان آدرس به او نشان می‌داد یا او را به URL مخصوص موبایل هدایت می نمود.

اهمیت طراحی وب سایت واکنش گرا ریسپانسیو (RESPONSIVE)

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

در طراحی سایت واکنش گرا که Responsive Web Design مشهور است، ساختار لایه‌های سایت به صورت شناور طراحی می‌شود که باعث تنظیم عرض صفحه، سایز متن و … در ابعاد مختلف می شود که این کار به صورت کاملا خودکار انجام می‌شود.

سایت واکنش گرا برای واکنش سایت نسبت به تغییر دستگاه های مختلف مانند تبلت، موبایل، لپ تاپ، تلویزیون های هوشمند و همچنین تغییر رزولوشن ها مورد استفاده قرار می گیرد.

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

با توجه به این امکان بی نظیر کاربر تعامل بهتری با سایت برقرار کرده و این تکنیک تاثیر مثبت و جذب بیشتری روی کاربر خواهد داشت.

هم اکنون موقع تغییر و ارائه سایت در محتوایی جدید و قالبی پیشرو می باشد.

چرا واکنش گرا (Responsive)

صرفه جویی در هزینه

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

صرفه جویی در زمان

با توجه به تجربه ای که در زمینه طراحی سایت کسب کرده ایم می دانیم که همیشه وقت یکی از الویت های مشتریان است. زمانی که فقط با یک پروژه (در یک نوبت)، قالبی طراحی می شود که در تمام ابزارها با سایزهای مختلف به خوبی نمایش داده می شود، زمان به شدت کاهش خواهد یافت.

 

سبقت از رقیبان

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

افزایش ترافیک سایت

تقریبا ۱۵ درصد از کاربران اینترنت، با موبایل خود به وب گردی می پردازند. شما تصور کنید اگر سایتی در اختیار نداشته باشید که در ابزارهای موبایل به خوبی به نمایش در بیاید، تعداد زیادی از کاربرانی که می توانید داشته باشید را از دست می دهید. پس شما می توانید هم اکنون که قصد سفارش یک سایت را دارید با کمی هزینه بیشتر، کاری کنید که تمام افرادی (با هر ابزاری) که وارد دنیای نت می شوند سایت شما را نیز بتوانند به بهترین شکل ممکن مشاهده کنند. چه از این بهتر؟!

جلوگیری از ایجاد محتوای تکراری (Duplicate Content)

تصور کنید که دو نسخه سایت، یکی برای کامپیوترهای معمولی و یکی هم برای موبایل، در اختیار دارید. با توجه به اینکه این دو سایت، یک سایت هستند اما برای نقاط مختلف مطالبشان هم یکی است. روبات گوگل که هر چند وقت یک بار سری به سایت شما می زند پس از ایندکس کردن نسخه ابتدایی به سراغ نسخه موبایل می رود و مطالب نسخه دوم را به عنوان تکراری یاDuplicate می شناسد که در صورت اتفاق افتادن این موضوع رنکینگ سایت شما بسیار نزول خواهد کرد. اما در صورتی که شما یک سایت واکنش گرا برای تمام ابزارها در اختیار داشته باشید تمام مطالبتان در همین یک سایت قرار خواهد گرفت و از ایجاد محتوای تکراری (Duplicate Content) جلوگیری خواهد شد. پس می بینید که داشتن قالب واکنش گرا شما را در امر SEO نیز یاری خواهد کرد.

 

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

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

 

دلایل نیاز به سایت واکنش گرا (ریسپانسیو)

 

دلایل نیاز به وب سایت ریسپانسیو برای تجارت در سال ۲۰۱۴

اگر مقالات قبلی را نادیده گرفته اید و اکنون وب سایت مشخصی برای رونق کسب و کار خود ندارید و یا برنامه‌ی انجام این کار را در آینده بسیار نزدیک ریخته اید، بدون شک در سال ۲۰۱۴ کسب و کار شما در معرض ورشکستگی قرار می‌گیرد.

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

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

اگر نوشته‌ی پیتر Cashmore را که تقریبا یک سال پیش در سال ۲۰۱۳ چاپ کرد خوانده باشید، متوجه میشوید که موضوع طراحی وب سایت واکنش گرا جدید نیست و ممکن است از اینکه این موضوع خیلی قدیمی است شگفت زده شوید. البته شما خیلی هم دیر نکردید، چرا که به احتمال زیاد هنوز خیلی از رقبای شما از این موضوع بی خبرند. سال ۲۰۱۳ معلوم شد که آن سال، سال برانداختن شرکت ها و صنایعی است که تمایل دارند همچنان در مرز ورشکستگی فعالیت کنند و کاری به بازاریابی آنلاین و طراحی وب سایت واکنش گرا برای رونق دادن به کار خود ندارند. اکثر شرکت های تجاری فاصله‌ی خیلی کمی تا ورشکستگی دارند و ممکن است در فاصله یک سال چنین اتفاقی برای آنها رخ دهد. موقعیت شما در گذشته امن بود، اما اکنون رقبای شما اوضاع را تغییر دادند و شرایط به گونه ای تغییر پیدا کرده است که بازاریابی اینترنتی و آنلاین اهمیت بسیار زیادی پیدا کرده است.

چرا اهمیت دارد؟

چرا که راه حل خوبی است و اکنون تمام افراد دیگر همین کار را انجام می‌دهند.

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

بسیاری از بازدید کنندگان آنلاین برای بازدید از وب سایت ها از گوشی همراه، تبلت، و دسکتاپ در ۱۲ ماه گذشته استفاده کردند. شما می توانید این جدول را بر روی وب سایت خود فعال کنید و شاهد این آمار باشید

در این مورد تقریبا ۴۰ درصد از ترافیک و آمار بازدید از سایت به دستگاه های موبایلی مربوط است (البته این آمار با در نظر گرفتن تبلت‌ها در دسته‌ی دستگاه‌های “موبایلی” انجام گرفته است). با توجه به اینکه این وب سایت واکنش گرا نبوده، و یک نسخه مخصوص تلفن همراه برای آن تهیه نشده، پس این از این تعداد تنها مقدار کثیری در سایت مانده و بقیه وب سایت را ترک کرده اند. اما صبر کنید، اوضاع بهتر شده است! البته شاید برخی این “بهتر” را بدتر تعبیر کنند.

مجموعه دوم نمودارها به ما قسمتی را نشان می دهد که در آن همه چیز دسته بندی می‌شود سپس شاهد یک مقایسه بین بازدید کنندگان موبایلی و دسکتاپ در ۱۲ ماه گذشته و ۱۲ ماه قبل از آن بودم. می‌بینید

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

این تنها یک نمونه از مزایای طراحی واکنش گرا در طول یک سال بود، در ماه اوت امسال بخش بازاریابی آنلاین شرکت ما به صورت طراحی وب سایت واکنش گرا برای “مرکز ذخیره سازی” راه اندازی شد- یک شرکت ذخیره سازی خودکار در لوئیزیانا، می سی سی پی و تگزاس. در ایالات متحده صنعت ذخیره سازی فصلی است و هر سال روند درخواست آن در میان ماه‌های اوت و نوامبر یک روند رو به کاهش عادی است. همانطور که انتظار می رفت، مرکز ذخیره سازی شاهد کاهش کلی در درخواست ها بود، اما این کاهش کاملا مربوط به بخش دسکتاپ بود، و درخواست‌های موبایلی همچنان پابرجا بودند ( درخواست‌هایی که روی ‌وب سایت قبلی ثبت می‌شدند، با وجود این که این وب سایت در مرورگرهای موبایلی خیلی خوب کار نمی‌کرد)، مقدار این درخواست ها از ۵٫۵٪ تا ۲۰-۳۰٪ افزایش یافته بود.

طراحی واکنش گرا، چقدر هزینه بر است؟

اگر وب سایت خود را چند سالی است که بازطراحی نکردید، لازم است فرایند طراحی مجدد را کاملا از ابتدا انجام دهید و قطعا در این حالت ایجاد این نوع تغییرات مقداری بیشتر هزینه به دنبال خواهد داشت، معمولا مقدار هزینه “بستگی به درخواست دارد”.برای مثال اگر شما یک فروشگاه دارید و یا با وب سایت خود کار

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

آینده از آن ابزار های موبایلی است

حال که با وب سایت واکنش گرا آشنا شدید، من به موضوع صحبت قبلی خود برمی‌گردم و دوباره می‌گویم بدون وب سایت واکنش گرا تجارت آنلاین و آینده آن در معرض افول قرار می‌گیرد. اگر میلی به تهیه چنین وب سایتی ندارید ممکن است مشتریان شما به سراغ رقیبان شما که رفتن به وب سایت آنها آسان تر است بروند. همانطور که می بینیم آینده از آن ابزار های موبایلی است و مردم به طور فزاینده ای به دستگاه های موبایل خود بیش از کامپیوترهاشون علاقه دارند. نیلسن می گوید که بیش از ۶۰٪ از صاحبان تلفن همراه از گوشی های هوشمند خود برای مرور صفحات وب استفاده می‌کنند. در یک مطالعه اخیر توسط واکر سندز دیجیتال مشخص شد که از سال ۲۰۱۱ ترافیک پایه‌ی موبایل مشتری ها ۱۷۱ درصد بیشتر شده است. Statistaمی گوید که تا سال ۲۰۱۷، ۵ میلیارد نفر از گوشی های همراه استفاده می‌کنند. ساختن وب سایت واکنش گرا هزینه کمی را برای شما خواهد داشت و با پرداخت آن می‌توانید به راحتی به تمام این افراد دسترسی پیدا کنید.

گردآوری: ایده ساز

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *