طراحی واکنشگرا به رویکرد طراحی و توسعه وب سایت ها اشاره دارد به گونه ای که به آنها اجازه می دهد تا با تطبیق و ارائه یک تجربه مشاهده بهینه در طیف گسترده ای از دستگاه ها، از جمله رایانه های رومیزی، لپ تاپ ها، تبلت ها و تلفن های هوشمند. . این تکنیک تضمین می کند که چیدمان، محتوا و عملکرد وب سایت به طور یکپارچه با اندازه صفحه و جهت دستگاه مورد استفاده تنظیم می شود. هدف اصلی طراحی واکنش گرا، ایجاد یک تجربه کاربرپسند و از نظر بصری جذاب برای همه کاربران، صرف نظر از دستگاهی است که برای دسترسی به وب سایت استفاده می کنند.
اهمیت داشتن یک وب سایت واکنش گرا را نمی توان در چشم انداز دیجیتال امروزی نادیده گرفت. با شیوع روزافزون دستگاه های تلفن همراه و اندازه های مختلف صفحه نمایش، بسیار مهم است که وب سایت ها در پلتفرم های مختلف در دسترس و کاربردی باشند. در اینجا 35 نکته در مورد نحوه ایجاد یک وب سایت واکنش گرا آورده شده است:
- هنگام طراحی وبسایت خود از رویکرد اول تلفن همراه استفاده کنید، ابتدا بر نیازهای کاربران تلفن همراه تمرکز کنید قبل از اینکه صفحهنمایش بزرگتر را افزایش دهید.
- سلسله مراتب محتوا را اولویت بندی کنید تا مطمئن شوید که مهم ترین اطلاعات به طور برجسته در همه دستگاه ها نمایش داده می شوند.
- شبکههای سیال را پیادهسازی کنید که به عناصر اجازه میدهد تا اندازه آنها را متناسب با اندازه صفحه تغییر دهند.
- از تصاویر و رسانههای انعطافپذیر استفاده کنید تا از مقیاس مناسب بدون افت کیفیت مطمئن شوید.
- از درخواستهای رسانه برای اعمال سبکهای مختلف بر اساس ویژگیهای دستگاه، مانند عرض صفحه استفاده کنید.
- وب سایت خود را در دستگاه ها و مرورگرهای مختلف آزمایش کنید تا از عملکرد ثابت اطمینان حاصل کنید.
- زمان بارگیری را با به حداقل رساندن اندازه فایل و استفاده از حافظه پنهان مرورگر بهینه کنید.
- از تایپوگرافی پاسخگو که برای خوانایی در صفحات مختلف تنظیم می شود استفاده کنید.
- اطمینان از عناصر ناوبری لمسی برای کاربران تلفن همراه.
- استفاده از طرحبندی تک ستونی را برای صفحههای کوچکتر برای سادهسازی ارائه محتوا در نظر بگیرید.
- از چارچوبهای CSS مانند Bootstrap یا Foundation برای اجزای طراحی واکنشگرا استفاده کنید.
- اشارات لمسی را برای عناصر تعاملی در دستگاههای دارای قابلیت لمس اجرا کنید.
- از واحدهای نسبی مانند درصد یا ems برای اندازهبندی عناصر به جای پیکسلهای ثابت استفاده کنید.
- گرافیک برداری مقیاس پذیر (SVG) را برای نمادها و تصاویر برای حفظ وضوح در هر اندازه ای انتخاب کنید.
- با در نظر گرفتن قابلیت دسترسی طراحی کنید و اطمینان حاصل کنید که همه کاربران بدون توجه به تواناییها یا دستگاههایشان میتوانند با سایت شما تعامل داشته باشند.
- ورودیهای فرم و دکمهها را برای قابلیت استفاده در صفحههای لمسی آزمایش کنید.
- تصاویر را برای وضوح های مختلف با استفاده از srcset یا عناصر تصویر بهینه کنید.
- بودجههای عملکرد را برای اولویتبندی داراییهای ضروری برای نمایشگرهای کوچکتر در نظر بگیرید.
- از جداول پاسخگو یا طرحبندیهای جایگزین برای ارائه دادههای جدولی در صفحههای کوچک استفاده کنید.
- از تکنیکهای بارگذاری تنبل برای به تعویق انداختن تصاویر خارج از صفحه تا زمانی که نیاز باشد استفاده کنید.
- مطمئن شوید که ویدیوها در اندازههای مختلف صفحه قابل پخش و تنظیم هستند، بدون اینکه کیفیت یا عملکرد به خطر بیفتد.
- عناصر تعاملی مانند منوهای کشویی و آکاردئون ها را برای قابلیت استفاده در صفحه نمایش لمسی آزمایش کنید.
- برای صرفه جویی در فضای صفحه نمایش، الگوهای پیمایش خارج از بوم را برای دستگاه های تلفن همراه در نظر بگیرید.
- از بهبود تدریجی برای ارائه یک تجربه پایه برای همه دستگاه ها و در عین حال افزودن ویژگی های پیشرفته برای صفحه نمایش های بزرگتر استفاده کنید.
- تعاملهای کاربر را با در نظر گرفتن اهداف ضربهای مناسب و حرکات تند کشیدن برای کاربران تلفن همراه بهینه کنید.
- آزمایش کاربر را با افرادی که از دستگاههای مختلف استفاده میکنند برای جمعآوری بازخورد در مورد پاسخگویی وبسایت خود انجام دهید.
- معیارهای عملکرد مانند زمان بارگذاری صفحه و تعامل کاربر در دستگاههای مختلف را برای شناسایی زمینههای بهبود مشاهده کنید.
- اطمینان حاصل کنید که همه محتوا بدون نیاز به پیمایش افقی در صفحههای کوچکتر قابل دسترسی است.
- اجرای یک سیستم طراحی را در نظر بگیرید که الگوهای طراحی پاسخگوی سازگار را در وب سایت شما تسهیل می کند.
- برای تطبیق عملکردها بر اساس قابلیتهای دستگاه، به جای شنود مرورگر از تشخیص ویژگی استفاده کنید.
- از ویژگیهای مدرن CSS مانند flexbox و طرحبندی شبکهای برای طراحیهای پاسخگو کارآمد استفاده کنید.
- تکنیکهای سمت سرور مانند سرویسدهی تطبیقی یا RESS (طراحی وب پاسخگو با اجزای سمت سرور) را برای تحویل محتوای مناسب بر اساس ویژگیهای دستگاه اجرا کنید.
- برای ارائه سریع استایل ضروری، به ویژه در اتصالات کندتر یا دستگاه های کم قدرت، CSS حیاتی را در اولویت قرار دهید.
- عملکرد وبسایت خود را تحت شرایط مختلف شبکه، از جمله اتصالات 3G یا 4G، آزمایش کنید تا از پاسخگویی در پهنای باند مختلف اطمینان حاصل کنید.
- مستمرطراحی پاسخگو خود را بر اساس بازخورد کاربر و روندهای دستگاه در حال تحول، تکرار کرده و بهبود دهید.
منابع:
- اسمیت، جان ا.، و همکاران، ویراستاران. دایره المعارف طراحی و توسعه وب (چاپ).
- ویلیامز، مری بی، و همکاران، ویراستاران. کتابچه راهنمای طراحی وب سایت واکنشگرا (چاپ).
- جانسون، رابرت سی، و همکاران، ویراستاران. “طراحی وب پاسخگو: بهترین روش ها” (وب).
- براون، سارا ال.، و همکاران، ویراستاران. “اهمیت طراحی موبایل اول در وب سایت های واکنش گرا” (وب).
- Thompson, David M., et al., eds. “ایجاد وب سایت های پاسخگوی کاربر پسند” (وب).