طراحی وب سایت واکنش گرا

رویکرد طراحی وب برای ساخت صفحات وب به خوبی در دستگاه های مختلف ارائه می شود

تصویری از ویکی‌پدیا با پوسته واکنش‌گرا Vector 2022، روی صفحه کامپیوتر (سمت چپ) و روی صفحه تلفن همراه (راست). عناصر خود را به یک چیدمان سازگارتر با موبایل بازآرایی می کنند.

محتوا مانند آب است ، ضرب المثلی که اصول RWD را نشان می دهد

طراحی وب ریسپانسیو ( RWD ) یا طراحی ریسپانسیو رویکردی در طراحی وب است که هدف آن این است که صفحات وب در انواع دستگاه ها و اندازه های پنجره یا صفحه نمایش به خوبی نمایش داده شوند از حداقل تا حداکثر اندازه نمایش برای اطمینان از قابلیت استفاده و رضایت. ^{[1] [2]}

یک طراحی واکنش‌گرا، طرح‌بندی صفحه وب را با محیط مشاهده تطبیق می‌دهد ^[1] با استفاده از تکنیک‌هایی مانند شبکه‌های مبتنی بر نسبت سیال، ^{[3] [4]} تصاویر انعطاف‌پذیر، ^{[5] [6]} و پرسش‌های رسانه‌ای CSS3 ، ^{[7] [8] [9]} بسط قانون ، ^[10] به روش های زیر:@media

• مفهوم شبکه سیال می‌خواهد اندازه عنصر صفحه در واحدهای نسبی مانند درصد باشد، نه واحدهای مطلق مانند پیکسل یا نقاط . ^[4]
• تصاویر انعطاف پذیر نیز در واحدهای نسبی اندازه می شوند تا از نمایش آنها در خارج از عنصر حاوی آنها جلوگیری شود . ^[5]
• پرس و جوهای رسانه ای به صفحه اجازه می دهد تا از قوانین مختلف سبک CSS بر اساس ویژگی های دستگاهی که سایت در آن نمایش داده می شود، استفاده کند، مثلاً عرض سطح رندر (عرض پنجره مرورگر یا اندازه نمایش فیزیکی).
• طرح‌بندی‌های واکنش‌گرا به‌طور خودکار با هر اندازه صفحه نمایش دستگاه، اعم از دسکتاپ، لپ‌تاپ، تبلت یا تلفن همراه، تنظیم و تطبیق می‌یابند.

طراحی وب ریسپانسیو اهمیت بیشتری پیدا کرد زیرا کاربران دستگاه های تلفن همراه اکثر بازدیدکنندگان وب سایت را به خود اختصاص دادند. ^{[11] [12]} به عنوان مثال، در سال 2015، Google Mobilegeddon را اعلام کرد و شروع به افزایش رتبه صفحه سایت های سازگار با تلفن همراه هنگام جستجو از یک دستگاه تلفن همراه کرد. ^[13]

طراحی وب ریسپانسیو نمونه ای از انعطاف پذیری رابط کاربری است . ^[14]

چالش ها و رویکردهای دیگر

Luke Wroblewski برخی از چالش‌های طراحی RWD و موبایل را خلاصه کرده و کاتالوگی از الگوهای چیدمان چند دستگاه ایجاد کرده است. ^{[15] [16] [17]} او پیشنهاد کرد که در مقایسه با رویکرد ساده HWD، تجربه دستگاه یا رویکردهای RESS (طراحی وب پاسخگو با اجزای سمت سرور) می‌تواند تجربه کاربری را ارائه دهد که برای دستگاه‌های تلفن همراه بهینه‌تر است. ^{[18] [19] [20]} اجرای مولد CSS سمت سرور از زبان های شیوه نامه مانند Sass می تواند بخشی از چنین رویکردی باشد. گوگل طراحی ریسپانسیو را برای وب سایت های گوشی های هوشمند نسبت به روش های دیگر توصیه کرده است. ^[21]

اگرچه بسیاری از ناشران طرح‌های واکنش‌گرا را پیاده‌سازی کرده‌اند، اما یک چالش برای پذیرش RWD این بود که برخی از تبلیغات بنر و ویدیوها روان نبودند. ^[22] با این حال، تبلیغات جستجو و تبلیغات نمایشی (بنر) از هدف گذاری پلت فرم دستگاه خاص و فرمت های اندازه تبلیغات مختلف برای دسکتاپ، گوشی های هوشمند و دستگاه های تلفن همراه اولیه پشتیبانی کردند. URL های صفحه فرود مختلف برای پلتفرم های مختلف استفاده شده است، ^[23] یا Ajax برای نمایش انواع تبلیغات مختلف در یک صفحه استفاده شده است. ^{[24] [16] [25]} جداول CSS طرح‌بندی‌های هیبریدی ثابت و سیال را مجاز می‌دانند. ^[26]

راه‌های زیادی برای اعتبارسنجی و آزمایش طرح‌های RWD وجود داشته است، ^[27] از اعتبارسنجی‌های سایت تلفن همراه و شبیه‌سازهای تلفن همراه تا ابزارهای آزمایش همزمان مانند Adobe Edge Inspect . ^[28] مرورگرها و ابزارهای توسعه‌دهنده کروم، فایرفاکس و سافاری، مانند اشخاص ثالث، ابزارهای طراحی واکنش‌گرای تغییر اندازه نمای پورت را ارائه کرده‌اند. ^{[29] [30]}

تاریخچه

مشخصات W3C HTML+ بیان می‌کند که وب‌سایت‌ها باید بر اساس ترجیحات کاربر ارائه شوند. ^[31] با این حال، سفارشی‌سازی طرح‌بندی صفحه وب وجود نداشت. بسیاری از توسعه دهندگان وب به جداول معمولی HTML به عنوان راهی برای سفارشی کردن چیدمان و ایجاد پاسخگویی اولیه به وب سایت های خود در همان زمان متوسل شدند.

اولین سایت بزرگی که دارای طرح‌بندی است که به شیوه‌ای غیر پیش پا افتاده با عرض نمای مرورگر سازگار می‌شود، Audi .com بود که در اواخر سال 2001 راه‌اندازی شد، ^[32] توسط تیمی در razorfish متشکل از یورگن اسپانگل و جیم کالباخ ​​(معماری اطلاعات)، کن ایجاد شد. اولینگ (طراحی) و یان هافمن (توسعه رابط). قابلیت‌های محدود مرورگر به این معنی است که برای اینترنت اکسپلورر، طرح‌بندی می‌تواند به صورت پویا در مرورگر تطبیق یابد، در حالی که برای Netscape، صفحه باید در صورت تغییر اندازه از سرور بارگذاری مجدد شود.

کامرون آدامز در سال 2004 نمایشی را ایجاد کرد. ^[33] تا سال 2008، تعدادی از اصطلاحات مرتبط مانند "انعطاف پذیر"، "مایع"، ^[34] "سیال" و "الاستیک" برای توصیف طرح‌بندی استفاده می‌شدند. پرسش‌های رسانه‌ای CSS3 تقریباً در اواخر سال 2008/اوایل سال 2009 برای اولین بار آماده بودند. ^[35] اتان مارکوت اصطلاح طراحی وب پاسخ‌گو ^[36] را ابداع کرد - و آن را به معنای شبکه سیال / تصاویر انعطاف‌پذیر / پرس‌وجوهای رسانه‌ای - در می 2010 تعریف کرد. در A List Apart . ^[1] او تئوری و عمل طراحی وب واکنشگرا را در کتاب مختصر خود در سال 2011 با عنوان طراحی وب واکنشگرا تشریح کرد . طراحی ریسپانسیو پس از ارتقای تدریجی در رتبه 1، به عنوان شماره 2 در روندهای برتر طراحی وب در سال 2012 توسط مجله .net قرار گرفت . ^[37]

Mashable سال 2013 را سال طراحی وب سایت واکنش گرا نامید. ^[38]

مفاهیم مرتبط

طراحی اول موبایل و بهبود پیشرونده مفاهیم مرتبطی هستند که قبل از RWD به وجود آمده اند. ^{[39] مرورگرهای تلفن‌های همراه اصلی جاوا اسکریپت یا} درخواست‌های رسانه‌ای را درک نمی‌کنند ، بنابراین یک روش توصیه‌شده این بود که یک وب‌سایت اصلی ایجاد کنید و آن را برای تلفن‌های هوشمند و رایانه‌های شخصی بهبود بخشید ، به‌جای تکیه بر تخریب زیبا برای ایجاد یک تصویر پیچیده و سنگین. کار سایت روی تلفن همراه ^{[40] [41] [42] [43]}

همچنین ببینید

• پورتال اینترنتی

• طراحی وب تطبیقی
• بوت استرپ (فریمورک جلویی)
• چارچوب CSS
• Em (تایپوگرافی) § CSS
• پایه (چارچوب)
• طراحی وب بدون میز
• طرح بندی T

مراجع

1. Marcotte, Ethan (25 مه 2010). "طراحی وب ریسپانسیو". یک لیست جدا
2. Shade, Amy (4 مه 2014). "طراحی وب واکنشگرا (RWD) و تجربه کاربری". گروه نیلسن نورمن بازبینی شده در 19 اکتبر 2017 .
3. «مفاهیم اصلی طراحی وب واکنشگرا». 8 سپتامبر 2014.
4. Marcotte, Ethan (3 مارس 2009). "شبکه های سیال". یک لیست جدا.
5. Marcotte, Ethan (7 ژوئن 2011). "تصاویر سیال". یک لیست جدا.
6. هانمان، آنسلم (7 سپتامبر 2012). "راهی به سمت تصاویر واکنشگرا". مجله نت.
7. Gillenwater، Zoe Mickley (15 دسامبر 2010). نمونه هایی از طرح بندی های انعطاف پذیر با پرس و جوهای رسانه ای CSS3. CSS3 خیره کننده. ص 320. شابک 978-0-321-722133.
8. Gillenwater، Zoe Mickley (21 اکتبر 2011). "ایجاد پرس و جوهای رسانه ای با کیفیت".
9. "طراحی پاسخگو - استفاده از قدرت پرسش های رسانه ای". Google Webmaster Central. 30 آوریل 2012.
10. «قانون @media». w3.org​ W3C .
11. «شاخص شبکه‌های بصری سیسکو: به‌روزرسانی پیش‌بینی ترافیک داده‌های موبایل جهانی 2014–2019 کاغذ سفید». سیسکو ​30 ژانویه 2015 . بازبینی شده در ۴ اوت ۲۰۱۵ .
12. «سهم تلفن همراه از بازدید موتورهای جستجوی ارگانیک ایالات متحده در سال 2021». Statista . بازیابی شده در 29 اکتبر 2021 .
13. «وبلاگ مرکزی وب مستر گوگل: انتشار به‌روزرسانی سازگار با موبایل». وبلاگ رسمی وب مستر گوگل . بازبینی شده در ۴ اوت ۲۰۱۵ .
14. تیونین، دی. کوتاز، جی (2002). "پلاستیک بودن رابط های کاربری: چارچوب و دستور کار تحقیقاتی". Proc. Interact'99، A. Sasse & C. Johnson Eds، IFIP IOS Press . ادینبورگ صص 110-117.
15. Wroblewski، Luke (17 مه 2011). "Mobilism: jQuery Mobile".
16. Wroblewski، Luke (6 فوریه 2012). "آستین های پاسخگو را بالا بزنیم".
17. Wroblewski، Luke (14 مارس 2012). "الگوهای چیدمان چند دستگاه".
18. Wroblewski، Luke (۲۹ فوریه ۲۰۱۲). "طراحی پاسخگو ... یا RESS".
19. Wroblewski، Luke (12 سپتامبر 2011). "RESS: طراحی پاسخگو + اجزای سمت سرور".
20. اندرسن، آندرس (9 مه 2012). "شروع با RESS".
21. «ساخت وب‌سایت‌های بهینه‌شده برای گوشی‌های هوشمند».
22. اسنایدر، متیو؛ کورن، اتای (30 آوریل 2012). "وضعیت تبلیغات پاسخگو: دیدگاه ناشران". مجله دات نت.
23. «Google Partners Help». google.com . بازبینی شده در 21 مه 2015 .
24. «تشخیص دستگاه سمت سرور: تاریخچه، مزایا و نحوه انجام». مجله شکستن. 24 سپتامبر 2012.
25. جاوا اسکریپت و طراحی وب پاسخگو توسعه دهندگان گوگل
26. «نقش چیدمان جدول در طراحی وب سایت واکنش گرا». طراحی وب سایت Tuts+ . 23 ژانویه 2013 . بازبینی شده در 21 مه 2015 .
27. یانگ، جیمز (۱۳ اوت ۲۰۱۲). "برترین مشکلات طراحی وب ریسپانسیو ... تست". مجله دات نت.
28. رینالدی، برایان (26 سپتامبر 2012). "تست مرورگر ... با Adobe Edge Inspect".
29. «نمای طراحی واکنشگرا». شبکه توسعه دهندگان موزیلا بازبینی شده در 21 مه 2015 .
30. مالت واسرمن. "ابزار تست طراحی پاسخگو - Viewport Resizer - شبیه سازی وضوح های مختلف صفحه نمایش - بهترین نوار ابزار تست دستگاه توسعه دهنده". maltewassermann.com . بازبینی شده در 21 مه 2015 .
31. «مروری از HTML+». w3.org​ W3C .
32. کالباخ، جیم (۲۲ ژوئیه ۲۰۱۲). "اولین وب سایت طراحی واکنشگرا: آئودی (حدود 2002)." ^{[ منبع خود منتشر شده؟ ]}
33. آدامز، کامرون (21 سپتامبر 2004). "طرح بندی وابسته به وضوح: طرح بندی متفاوت با توجه به عرض مرورگر". مرد آبی پوش .
34. "G146: استفاده از طرح مایع". w3.org ​بازبینی شده در 21 مه 2015 .
35. «پرسش‌های رسانه‌ای». w3.org ​بازبینی شده در 21 مه 2015 .
36. "گروه فروش خارجی - سازماندهی، بهینه سازی، به حداکثر رساندن". outseller.net . بازبینی شده در 21 مه 2015 .
37. گرانل، کریگ (9 ژانویه 2012). "15 روند برتر طراحی و توسعه وب برای سال 2012". مجله دات نت. بایگانی شده از نسخه اصلی در 11 سپتامبر 2013 . بازیابی شده در 29 اکتبر 2021 .
38. کشمور، پیت (11 دسامبر 2012). "چرا سال 2013 سال طراحی وب سایت واکنش گرا است". قابل مشروب کردن .
39. «طراحی وب ریسپانسیو چیست». 23 جولای 2012.
40. Wroblewski، Luke (3 نوامبر 2009). "ابتدا موبایل".
41. فرتمن، ماکسیمیلیانو (30 ژوئیه 2011). برنامه نویسی وب موبایل رسانه اوریلی ص 512. شابک 978-0-596-80778-8.
42. «تخریب برازنده در مقابل افزایش تدریجی». 3 فوریه 2009. بایگانی شده از نسخه اصلی در 13 نوامبر 2014.
43. پارکر، تاد؛ واچز، مگی کاستلو؛ جهل، اسکات (فوریه 2010). طراحی با ارتقای پیشرونده. سوارکاران جدید. ص 456. شابک 978-0-321-65888-3. بازیابی شده در 1 مارس 2010 .