مقدمه:
فرقی نمی‌کند که کاربران از طریق لپ تاپ و یا تلفن همراه سایت شما را مشاهده کنند، در هر صورت همه چیز منظم است و کاربران می‌توانند به راحتی در وبسایت شما کاوش کرده و از این کار لذت می‌برند. این بسیار با اهمیت است که همه چیز با اندازه مناسب و در جای خود قرار گرفته باشد. درواقع وبسایت شما باید با انواع دستگاه‌ها سازگار بوده و به صورت ریسپانسیو (واکنشگرا) طراحی شده باشد.
طراحی ریسپانسیو چیست:
طراحی ریسپانسیو به نوعی طراحی سایت گفته می‌شود که محتوای وبسایت شما را قادر می‌سازد تا به اندازه صفحه مرورگر پاسخ دهد و با آن سازگار شود.
یک صفحه وب ریسپانسیو بسته به اندازه صفحه نمایش تغییرات مناسبی جهت نمایش بهتر ایجاد می‌کند و تضمین می‌کند که وبسایت شما در انواع دستگاه‌ها به درستی نمایش داده خواهد شد.
اهمیت طراحی ریسپانسیو:
با توجه به آمارها نیمی از کاربران اینترنت در سراسر جهان از طریق دستگاه‌های تلفن همراه به وب دسترسی دارند.
این آمار نشان دهنده‌ی اهمیت بالای این موضوع است، علاوه بر این سازگاری با موبایل یکی از پارامترهایی است که در رتبه بندی وبسایت شما توسط گوگل تاثیر زیادی می‌گذارد.
طراحی ریسپانسیو با المنتور:
در المنتور امکان طراحی ریسپانسیو وجود دارد و شما می‌توانید به راحتی صفحات ایجاد شده در المنتور را در دستگاه‌های موبایل و تبلت نیز ویرایش کنید.
ریسپانسیو کنترل‌ها در المنتور:
در کنار بسیاری از کنترل‌ها (در المنتور) شما می‌توانید آیکون مانیتور را مشاهده کنید. این بدان معناست که این کنترل ریسپانسیو بوده و شما می‌توانید مقادیر متفاوتی را در موبایل، تبلت و دسکتاپ برای این کنترل اعمال کنید. به عنوان مثال در dnslider ارتفاع اسلایدر یک کنترل ریسپانسیو بوده و شما می‌توانید ارتفاع اسلایدر را در موبایل، تبلت و دسکتاپ متفاوت تنظیم کنید.
ساخت اسلایدرهای واکنشگرا در DN Slider:
DN Slider این امکان را به ما داده است تا اسلایدرهای خود را به صورت کاملا واکنشگرا طراحی کنیم. در dnslider تمامی کنترل‌های لازم به صورت ریسپانسیو بوده و امکان ساخت اسلایدرهایی کاملا سازگار با انواع دستگاه ها وجود دارد.
ازجمله برخی از این کنترل‌ها :
- تنظیم ارتفاع اسلایدر
- تنظیم سایز، رنگ و مکان قرارگیری صفحه بندی
- تنظیم سایز و مکان پیکان‌های تغییر اسلاید
- تنظیم محتوای اسلاید محصولات و مکان قرارگیری آنها
- تنظیم رنگ، سایز و مکان قرارگیری فلش تخفیف، لیبل محصولات ناموجود و تایمر شمارش معکوس
- و…
مراحل ساخت اسلایدر واکنشگرا در DN Slider:
برای ساخت یک اسلایدر ریسپانسیو در المنتور لازم است که پس از ساخت اسلایدر در حالت دسکتاپ آن را در حالت‌های تبلت و موبایل نیز برسی کنید.
برای این کار ابتدا بر روی آیکون “حالت واکنشگرا” کلیک می‌کنیم (این آیکون در کنار آیکون پیشنمایش تغییرات قرار دارد)
بعد از کلیک بر روی این آیکون منویی در بالای صفحه به ما نمایش داده می‌شود که دارای سه گزینه اصلی می‌باشد (1. دسکتاپ 2. حالت عمودی تبلت 3. حالت عمودی موبایل)
برای ویرایش اسلایدر ایجاد شده در حالت موبایل لازم است که بر روی گزینه “حالت عمودی موبایل” کلیک کنیم.
پس از انتخاب این گزینه صفحه ایجاد شده در المنتور را در حالت موبایل مشاهده می‌کنیم، در این حالت می‌توانیم مقادیر متفاوتی را برای ریسپانسیو کنترل‌ها اعمال کنیم. مقادیر وارد شده در این حالت تنها در دستگاه‌های موبایل اعمال می‌شوند (یا زمانی که صفحه مرورگر فقط به اندازه صفحه موبایل باشد) به عنوان مثال اگر ارتفاع اسلایدر را برای موبایل 270 پیکسل و در دسکتاپ 350 پیکسل وارد کنید، ارتفاع اسلایدر شما در دسکتاپ و موبایل متفاوت خواهد بود.
معرفی اکستنشن mobile simulator:
برای برسی دقیق‌تر صفحه ایجاد شده با المنتور می‌توان از افزونه بسیار کاربردی mobile simulator استفاده کرد. این افزونه یک ابزار قدرتمند برای مشاهده وبسایت در انواع دستگاه ها می‌باشد.
با نصب این اکستنشن بر روی مرورگر کروم می‌توانید وبسایت خود را در انواع دستگاه‌ها مشاهده و از نظر واکنشگرایی برسی کنید.
برای نصب این اکستنشن با استفاده از مرورگر کروم به صفحه افزونه رفته و بر روی گزینه add to chrome کلیک کنید، سپس در پنجره باز شده بر روی add extension کلیک کنید.
نحوه استفاده از mobile simulator:
ابتدا با مرورگر کروم صفحه‌ی مورد نظر را باز کنید، سپس بر روی آیکون extensions کلیک کرده و در پنجره باز شده mobile simulator را انتخاب کنید.(در صفحه باز شده وبسایت خود را در حالت موبایل مشاهده می‌کنید).
برای مشاهده وبسایت خود در انواع دستگاه‌ها بر روی آیکون Change devise کلیک کرده و وبسایت خود را بر روی سایر موبایل‌ها و یا تبلت‌ها برسی کنید.
نتیجه:
همان‌طور که گفته شد تعداد بسیار زیادی از کاربران، با تلفن همراه وبسایت شما را مشاهده می‌کنند، بنابراین ساخت یک وبسایت واکنشگرا برای ایجاد یک تجربه کاربری موفق ضروری است. DN Slider با در نظر گرفتن این موضوع این امکان را برای شما فرهم کرده است تا بتوانید اسلایدرهایی جذاب را ایجاد و در انواع دستگاه‌ها به بهترین شکل نمایش دهید.
