طراحی واکنشگرا یا ریسپانسیو چیست؟

14فوریه - توسط behinesaz - 0 - در طراحی وب سایت مقالات اموزشی

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

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

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

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

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

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

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

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

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

هم اکنون موقع تغییر و ارائه سایت در محتوایی جدید و قالبی پیشرو می باشد.با تکنولوژی طراحی ریسپانسیو یا واکنش گرا ” Responsive design ” این مشکلات برطرف میشود.

آیا ریسپانسیو بودن طراحی سایت در رتبه سایت تاثیر دارد ؟

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

آیا ابزاری برای بررسی رسپانسیو بودن وب سایت وجود دارد؟

شما می توانید در این وب سایت نحوه نمایش وب سایت خود را در مدلهای معروف گوشیهای هوشمند و تبلتهای معروف بازار و دستگاه های اپل و همچنین رزولوشن های انتخابی خود مشاهده نمایید و مشکلات وب سایت خود را ببینید

بحث اصلی در قالب واکنش گرا بر سر “عرض” صفحه نمایش است

در اینجا (بحث قالب واکنش گرا) ارتفاع صفحه ی نمایش اهمیت چندانی ندارد و باز هم تاکید می کنم که “عرض” صفحه ی نمایش از اهمیت بالایی برخوردار است زیرا امروزه با ورود دستگاه های همراه مانند گوشی های تلفن همراه و تبلت ها به دنیای دستگاههای پیشمایش صفحات اینترنتی تنوع “عرض” این دستگاه ها بسیار زیاد شده است.

این تنوع عرض از دستگاههای موبایل کوچک با کمتر از چند صد پیکسل شروع می شود و تا کامپیوترهای رو میزی که گاه عرض مانیتور آنها به چند هزار پیکسل میرسد را شامل می شود.
در گذشته سایت ها به گونه ای طراحی می شدند که از یک عرض پرکاربرد به بالا را پاسخ دهند (مثال ده سال پیش عرض 800 در ارتفاع 600 پیکسل به بالا و پنج سال پیش عرض 1024 در ارتفاع  768 اهمیت بیشتری برای طراحان قالب داشت) و بدیهی است که زمانی که یک عرض به عنوان عرض پایه برای طراحی در نظر گرفته می شود آن قالب نباید برای عرض های بزرگتر مشکلی داشته باشد اما مشکل از زمانی شروع می شود که قصد داشته باشیم در یک دستگاه با عرض کمتر سایت را مشاهده کنیم. در این زمان برای استفاده از صفحه اسکرول افقی در صفحه به وجود خواهد آمد که به دلیل دشوار نمودن پیمایش صفحات اینترنتی برای کاربر یک نکته ی بسیار منفی در طراحی محسوب می شود.
طراحی ریسپانسیو یا واکنش گرا آمده است که این مشکل را برطرف نماید به این معنی که شما به همان راحتی که در کامپیوتر رومیزی یا به اصطلاح دسکتاپ صفحات اینترنتی را مشاهده و پیمایش می کنید بتوانید در دستگاه کوچک و قابل حمل خود نیز این کار را به وسیله امکان لمس (تاچ) انجام دهید.
مهمترین دستور Css مرتبط با این موضوع min-width می باشد که اگر با اچ تی ام ال آشنایی داشته باشید موضوع به سرعت دست گیرتان می شود
از مباحث مهم دیگر در مورد طراحی و قالب واکنش گرا این است که غیر از مبحث عرض دستگاههای مختلف مبحث لمس یا همان touch از ویژگی های اصلی دستگاههای جدید است که در طراحی بحث استفاده از جاوااسکریپت را در طراحی پر رنگتر می کند زیرا به طور معمول در اچ تی ام ال و سی اس اس این امکان جایگاه چندان خاصی ندارد.

چگونه بفهمیم صفحه ریسپانسیو است؟

فهمیدن اینکه صفحه واکنش گرا است یا بهتر بگویم قالب وبسایت واکنش گرا است یا نه، کار مشکلی نیست گرچه برای طراحان حرفه ای ابزارهای مناسبی وجود دارد تا صفحات خود را تست کنند اما به صورت ساده می توانید با resize کردن صفحه ئ مرورگر خود در کامپیوترتان به ویژگی واکنش گرا بودن قالب وبسایت پی ببرید. برای مثال می توانید صفحه ئ حاضر را کوچک یا بزرگ کرده، در این صورت خواهید دید که چینش اجزای صفحه تغییر می کند و حتی بعضی element ها و عناصر از صفحه حذف می گردند، این به این خاطر است که قالب سایت وبدار responsive است. به شکل های زیر توجه کنید که تصویر از سایت وبدار در حالت نمایش برای یک تبلت است:

امکان ارتقاء سایت ها به وب سایت واکنشگرا (ریسپانسیو) وجود دارد ؟

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

چرا سال 2014 سال طراحی ریسپانسیو وب سایت است؟

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

2014 سال ریسپانسیو

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

نتیجه گیری

با توجه به آمار زیر و اعلام اینکه در کشور ما درصد استفاده کنندگان از گوشیهای هوشمند روز به روز بیشتر می شود استفاده از این نوع طراحی بسیار ضروری به نظر می رسد. زیرا:

۸۰% کسانیکه گوشیهای هوشمند دارند هنگام صبح قبل از اینکه دندانهای خود را مسواک بزنند گوشیهای خود را چک می کنند.

۸۰% کسانیکه عضو شبکه اجتماعی فیسبوک هستند گوشیهای هوشمند ، تبلت و آیفون و یا کیندل ( تبلت انحصاری آمازون ) دارند.

۸۰% کسانیکه گوشیهای هوشمند دارند هر ۱۵ دقیقه گوشی خود را برای مطالب جدید چک می کنند

 

پاسخ دهید

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