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