logo
رمضان گرافیک سایت گرافسیت سایت اسلایدر سایت

تعریف طراحی ریسپانسیو

تعریف طراحی ریسپانسیو

 

 

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

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

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

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

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

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

 

اگر طراحی وب سایت شما ریسپانسیو نیست یعنی شما گاهی در دسترس نیستید!
دردسر نمایش درست یک وب سایت در نمایشگرهای مختلف یکی از دغدغه های طراحان وب است. به این معنی که اگر یک کاربر سایت شما را با یک نمایشگر دکستاپ(Desktop) ببیند و کاربر دیگری همان سایت را با یک اسمارت فون(Smart Phone) مشاهده کند هیچ فرقی بین این دو نکند و یا حداقل تفاوت را داشته باشد.

 

 قابلیت ریسپانسیو بودن طراحی سایت

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

 

اصول کلی طراحی ریسپانسیو :

طراحی ریسپانسیو عموما بر مبنای طرح اولیه سایت پیاده سازی می شود . به این معنی که وب سایت عموما از ابتدا ریسپانسیو  نیست و برای مانیتور طراحی می گردد . این مانیتور ها ،  امروزه به خاطر فراگیر شدن لپ تاپ ها به جای کامپیوتر های رومیزی ،  عموما مانیتور های لپ تاپ که اندازه ای بین 13 تا 15 اینچ را شامل می شوند.

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

و البته این پرسش به ذهنتان خطور خواهد کرد که خب پس چرا من باید هزینه بیشتری برای طراحی ریسپانسیو به طراح سایت پرداخت کنم ؟ در حالی که طراحی سایت به اندازه کافی گران هست . هرچند که ممکن است فرد مودبی باشید و این را به زبان نیاورید ! برای پاسخ  به این پرسش باید بگویم به دودلیل :

1- هدف از وب سایت فقط دیده شدن نیست بلکه بازدید کنندگان با آن تعاملاتی هم دارند . باید روی نقاط مختلف کلیک کنند ( در شرایط تبلت و موبایل انگشت بگذارند ) از منو ها گزینه هایی را انتخاب کنند و یا فرم هایی را پرکننده و اگر به عنوان صاحب یک وب سایت تجاری خوش شانس باشید ، از سایت شما خرید کنند . خب فرض کنید برای انجام این فرایض مجبور باشید مدام با انگشت خود صفحه را بالا پایین و چپ و راست کنید تا بتوانید از این امکانات استفاده کنید ، اطلاعات را وارد کنید ، کلیک ها را انجام بدهید و هشدار ها را هم بخوانید . تجربه جالبی نخواهد بود .

2- طراحی ریسپانسیو امروزه به نوعی استاندارد متداول بدل گشته است ، اگر وب سایت شما ریسپانسیو نیست ، یعنی پایین تر از سطح استاندارد عمومی وب سایت های جدید قرار گرفته است .

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

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

 

دو روش استفاده شده در طراحی سایت ریسپانسیو

 

1- استفاده از ترکیبی از کوئری های CSS  و افکت های حرکتی

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

 

2-  دراپ داون شدن منو

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

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

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

 

1- عدم در نظر گرفتن کلمات کلیدی در طراحی سایت ریسپانسیو

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

2- سرعت لود پایین در طراحی سایت ریسپانسیو

بسیاری بر این باور هستند که طراحی سایت ریسپانسیو اگر به درستی انجام پذیرد می تواند سرعت لود بالایی داشته باشدطراحی سایت ریسپانسیو با سرعت لود بالا تاثیر منفی در تجربه کاربر خواهد داشت که موجب اثرگذاری منفی در سئو سایت می شود. میانگینطراحی سایت های ریسپانسیو سرعت لود بهتری را در مقابل طراحی وب سایت برای کامپیوترهای شخصی را دارا می باشند.

 

3- عدم در نظر گرفتن برنامه های خاص موبایل

مسئله بسیار قابل توجه در نظر گرفتن برنامه های خاص موبایل در طراحی سایت ریسپانسیو می باشد که موجب ترافیک به سمت وب سایت می شود. مرورگر اپرا برنامه ایست که بسیاری از کاربران موبایل را به صفحات سایت هدایت می نماید. اپرا طبق آماری بیان نموده است که 68% از کاربرانش از تلفن های هوشمند به منظور هدایت به صفحه سایت استفاده نموده اند.

 

تفاوت سایت واکنشگرا و غیر واکنشگرا در چیست و چگونه می توان آن را تشخیص داد؟

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

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