به مشاوره نیاز دارید؟ چت از طریق واتساپ
مکالمه از طریق WhatsApp
یکی از پشتیبان ها را انتخاب و در واتساپ گفتگو کنید
مکالمه از طریق WhatsApp
یکی از پشتیبان ها را انتخاب و در واتساپ گفتگو کنید
فهرست مطالب این صفحه
وب سایت های واکنش گرا، وب سایت هایی هستند که با همه اندازه‌ها و رزولوشن‌های صفحه‌نمایش سازگار هستند، نه تنها روی دسکتاپ، بلکه در موبایل، تبلت و گاهی اوقات حتی تلویزیون.
کسب و کارهایی که وب‌سایت آنها برای تلفن همراه طراحی نشده اند با نرخ هشداردهنده‌ای عقب می افتند، زیرا از هر 10 بازدیدکننده، 8 بازدیدکننده با وب سایتی که به خوبی در دستگاهشان نمایش داده نمی‌شود، ارتباط برقرار نمی کنند. برای کاربران بسیار آسان است که دکمه برگشت را بزنند و به جای آن یک کسب و کار رقیب را امتحان کنند، و گوگل حتی وب سایت هایی را که پاسخگو نیستند در جستجوی پایین تر رتبه بندی می کند.
اما آیا هر یک از این ها به این معنی است که موبایل از دسکتاپ مهمتر است؟ 83 درصد از کاربران تلفن همراه می گویند که در صورت تمایل باید بتوانند این تجربه را روی دسکتاپ ادامه دهند.
موتورهای جستجو وب سایت هایی را که به سرعت بارگیری نمی شوند، کاهش می دهند. این برای جستجوهای موبایل و دسکتاپ اعمال می شود.وب سایت هایی که در کمتر از چهار ثانیه بارگذاری نمی شوند، خطر از دست دادن 25 درصد از بازدیدکنندگان خود را دارند.
طراحی واکنشگرا یا ریسپانسیو یک رویکرد طراحی رابط کاربری گرافیکی (GUI) است که برای ایجاد محتوایی که به راحتی با اندازه های مختلف صفحه نمایش تنظیم می شود، استفاده می شود. طراحان، عناصر را در واحدهای نسبی اندازه می‌دهند، بنابراین طرح های آن ها می توانند به طور خودکار با فضای مرورگر سازگار شوند تا از سازگاری محتوا در دستگاه ها اطمینان حاصل کنند.
در اوایل دهه 2010، طراحان مجبور شدند به یک پدیده تاریخی بپردازند. کاربران بیشتری شروع به دسترسی به مطالب وب در دستگاه های دستی مانند موبایل نسبت به رایانه های رومیزی کردند. دو راه حل اصلی وجود داشت. طراحان می توانند چندین نسخه از یک طرح بسازند و هر کدام را دارای ابعاد ثابتی بسازند (رویکردی به نام طراحی تطبیقی). از طرف دیگر، آن ها می‌توانند روی یک طرح منعطف کار کنند که متناسب با صفحه نمایش کشیده یا کوچک شود (طراحی واکنشگرا). طراحی واکنشگرا بی عیب و نقص نیست. با این وجود، مزایای قابل توجهی دارد و جذابیت آن به طور پیوسته افزایش یافته است. همچنین تعداد فریم ورک های رایگان متناسب با آن وجود دارد. طراحی ریسپانسیو به یکی از ویژگی های اجباری چندین سازمان (به عنوان مثال، گوگل) تبدیل شده است.
مطالعه بیشتر: طراحی سایت در کرج
HTML کد یکسان به همه دستگاه‌ها با استفاده از CSS ( که طرح‌بندی صفحه وب را تعیین می‌کند) برای تغییر ظاهر صفحه ارائه می‌دهد. به جای ایجاد یک سایت جداگانه، یک پایگاه کد متناظر برای نمایشگرهای با صفحه عریض، رایانه‌های رومیزی، لپ‌تاپ، تبلت‌ها و تلفن های با اندازه‌های مختلف، می‌تواند از کاربرانی با اندازه‌های دید متفاوت پشتیبانی کند.
در طراحی ریسپانسیو، عناصر صفحه با بزرگ شدن یا کوچک شدن نما، تغییر شکل می دهند. طراحی دسکتاپ سه ستونی ممکن است به دو ستون برای تبلت و یک ستون برای گوشی همراه تغییر کند.
در حالی که طراحی واکنشگرا به عنوان راهی برای ارائه دسترسی برابر به اطلاعات بدون توجه به دستگاه ظاهر شد، همچنین می توان موارد خاصی را مانند تصاویر پس زمینه و… پنهان کرد. تصمیم گیری در مورد پنهان کردن محتوا و عملکرد یا تغییر ظاهر برای انواع مختلف دستگاه باید بر اساس دانش کاربران و نیازهای آن ها باشد.
از آن جایی که طراحی واکنشگرا به ترکیب عناصر در سراسر صفحه متکی است، برای طراحی و توسعه باید با هم همکاری نزدیکی داشته باشند تا از تجربه قابل استفاده در دستگاه‌ها اطمینان حاصل کنند. طراحی ریسپانسیو اغلب به حل یک معما تبدیل می‌شود، که چگونه عناصر را در صفحات بزرگ تر سازماندهی مجدد کنیم تا صفحات باریک تر و طولانی تر شوند یا برعکس. با این حال، اطمینان از قرار گرفتن عناصر در یک صفحه کافی نیست. برای موفقیت یک طراحی واکنش گرا، طراحی باید در تمام وضوح ها و اندازه های صفحه نمایش قابل استفاده باشد.
هنگامی که عناصر در سراسر صفحه حرکت می کنند، تجربه کاربر می تواند از یک نمای سایت به نمای بعدی کاملاً متفاوت باشد. این مهم است که تیم‌های طراحی و توسعه با هم کار کنند و همچنین ببینند نتیجه نهایی این تغییر چگونه به نظر می‌رسد و چگونه بر تجربه کاربر تأثیر می‌گذارد.
بسیاری از تیم ها برای کمک به ایجاد طرح‌ها به چارچوب های طراحی واکنش گرای محبوب مانند Bootstrap نگاه می کنند. چنین چارچوب هایی می توانند کمک بزرگی در پیشبرد توسعه باشند. با این حال، به جای این که چگونه به طور کلی چگونه کار می کند، به دقت در نظر بگیرید که چگونه چارچوب با محتوا و عملکرد سایت شما کار می کند.
اولویت بندی محتوا یکی از جنبه های کلیدی برای انجام طراحی واکنشگرا است. محتوای بسیار بیشتری بدون پیمایش روی یک مانیتور دسکتاپ بزرگ نسبت به صفحه نمایش کوچک گوشی هوشمند قابل مشاهده است. اگر کاربران فوراً آن چه را که می خواهند در یک مانیتور دسکتاپ نبینند، می توانند به راحتی به اطراف صفحه نگاهی بیندازند تا آن را کشف کنند. در گوشی های هوشمند، کاربران ممکن است مجبور شوند برای کشف محتوای مورد علاقه خود، بی نهایت پیمایش کنند. اولویت بندی محتوای هوشمند به کاربران کمک می کند تا آن چه را که به آن نیاز دارند را بهتر بیابند.
طراحی واکنشگرا بسیار فراتر از “مناسب ساختن” است. در واقع، بهترین وب سایت های واکنشگرا آن هایی هستند که تجربه ساده‌تری را ارائه می‌دهند و اهداف اولیه را اولویت بندی می‌کنند و در صورت لزوم اهداف ثانویه را با ظرافت حذف می‌کنند. همراه با نکات قابل استفاده طراحی واکنشگرا و روزمره، این امر به طراحان امکان می دهد تا وب سایت هایی را برای آینده ایجاد کنند که روی همه دستگاه ها و اندازه های صفحه نمایش کار کنند. حتی آن هایی که هنوز وجود ندارند، یا در آستانه استفاده بیشتر هستند.
طراحی پاسخگو یک ابزار است، نه یک درمان. در حالی که استفاده از طراحی واکنش گرا مزایای زیادی در هنگام طراحی در بین دستگاه ها دارد، استفاده از این تکنیک تجربه قابل استفاده ای را تضمین نمی کند (همان طور که استفاده از یک دستور غذای خوب باعث ایجاد یک وعده غذایی خوب نمی شود.) تیم ها باید روی جزئیات محتوا، طراحی، تمرکز کنند. و عملکرد به منظور پشتیبانی از کاربران در همه دستگاه ها.
">
">
">