چرا طراحی responsive مهم است بخش دوم
آیا می توانید نسخه کوچک شده یک وب سایت دسک تاپ را در تلفن همراه خود به یاد بیاورید ، جایی که برای مشاهده هر چیزی باید مجبور به زوم شوید و بزرگنمایی کنید؟ احتمالا تجربه چندان خوبی نبود!
چگونه یک طراحی واکنشگرا ایجادکنیم
در هنگام ایجاد یک طرح Responsive ، مواردی وجود دارد که باید به آنها فکر کنید. این فرایندی است که به یک سیستم طراحی و سلسله مراتب محتوا در دستگاه ها نیاز دارد. سه مؤلفه اصلی یک طراحی وب Responsive شامل موارد زیر است:
• یک شبکه سیال
• متن و تصاویر انعطاف پذیر
• کوئری های رسانه ای
شبکه سیال
این شبکه یک عنصر اساسی برای ایجاد یک طرح Responsive است. درحال حاضر ، شبکه ها چیز جدیدی نیستند. طراحان وب از ابتدای کار از شبکه های مختلف برای ایجاد وب سایت ها استفاده کرده اند. با این حال ، در گذشته ، این شبکه ها با عرض ثابت بودند و نمی توانستند از یک طرح وب سایت روان و متغیر پشتیبانی کنند. یک شبکه سیال که برای سایت های Responsive مورد استفاده قرار می گیرد ، از انعطاف پذیری و مقیاس پذیری طراحی اطمینان حاصل می کند. عناصر دارای فاصله ، نسبت متناسب و مطابق با درصد می توانند با عرض یک صفحه خاص بر اساس درصد تنظیم شوند. متداول ترین اندازه صفحه نمایش برای طراحی Responsive عبارتند از:
- دسک تاپ بزرگ : 1220 px و بیشتر
- دسکتاپ : 960 - 1219 px
- تبلت : 768 - 959 px
- تلفن همراه (بزرگ) : 480 - 767 px
- تلفن همراه (کوچک) : 479 px و کمتر
با یک شبکه سیال، کاربران بهترین تجربه را در هر صفحه نمایش خواهند داشت.
متن و تصاویر انعطاف پذیر
نحوه نمایش متن بسته به نوع دستگاهی که سایت شما را مشاهده می کند متفاوت است ، اما مهم این است که قابل خواندن باشد. در وب سایت های واکنش گرای تلفن همراه ، فرصتی برای افزایش اندازه فونت و ارتفاع خط (فاصله بین هر خط متن) برای خوانایی وجود دارد. متن و تصاویر انعطاف پذیر مطابق سلسله مراتب محتوا با CSS در عرض وب سایت تنظیم می شوند. اکنون متن بدون در نظر گرفتن دستگاه کاربری نهایی قابل خواندن است. با داشتن یک مخزن انعطاف پذیر (درون شبکه) ، متن می تواند با افزایش اندازه فونت در دستگاه های کوچکتر پوشش داده شود. تصاویر انعطاف پذیر می توانند به دلیل بارگیری در مرورگرهای دستگاه کوچکتر ، چالش برانگیزتر باشند. اما این تصاویر بسته به نوع محتوا برای تجربه تلفن همراه ، مقیاس ، برش داده شده یا از بین می روند.
کوئری های رسانه
این کدی است که قابلیت انعطاف پذیری یک چیدمان در وب سایت های Responsive را دارد. بسته به نقطه ضعف دستگاه (برای مثال ، جهت پرتره آیفون یا جهت افقی آیپد و غیره) ، کدهای CSS را برای استفاده مناسب تعیین می کنند. کوئری رسانه ها اجازه چندین طرح بندی را می دهد ، که از همان صفحه وب دارای کد HTML استفاده می کنند. حوزه های دیگری نیز وجود دارد که می تواند به تعریف و اصلاح طراحی وب Responsive برای سایت ها و فروشگاه های اینترنتی در موبایل کمک کند.
تست کاربر از وب سایتهای Responsive
اطلاعاتی در مورد نحوه تعامل کاربران با سایت شما بسیار ارزشمند بوده و ارزش سرمایه گذاری در آن را دارد ، تا یک تجربه بهینه برای آنها ایجاد کند. روش های بسیاری وجود دارد که می توانید تست کاربر را انجام دهید تا مفیدترین بازخورد ممکن را به دست آورید. سایت هایی مانند Peek یا UserTesting.com تست کاربر را با هزینه ای ناچیز یا رایگان ارائه می دهند. روشهای غیرمعمول مانند مرتب سازی و دسته بندی کارت نیز می توانند به کشف نقاط ضعف غیرمترقبه کمک کنند.
مرورگر و تست دستگاه برای طراحی Responsive
اطمینان حاصل کنید که یک طرح طراحی Responsive با تمام مرورگرهای مربوط سازگار است و یکپارچگی تجربه و طراحی کاربر شما را حفظ می کند. برای آزمایش یک طراحی وب Responsive برای تلفن همراه ، فقط به کشیدن مرورگر به داخل و خارج تکیه نکنید. سعی کنید سایتی را در هر دستگاه فیزیکی در دسترس مشاهده کنید.
تجربه موبایلی یا تجربه دسکتاپ سایت را ترجیح می دهید؟
یافتن پاسخ به این سؤالات می تواند به شما در یافتن نکات ضعف کمک کند که احتمالاً در طی مرور روزمره خود متوجه آن نشده اید.
