ما می دانیم که طراحی واکنش گرا برای ارائه بهترین تجربه چند دستگاهی ایده خوبی است، اما طراحی واکنش گرا نیز برای دسترسی به یک پیروزی مفید است.
سایتی مانند Udacity را در نظر بگیرید:
یک کاربر کم بینا که در خواندن چاپ کوچک مشکل دارد، ممکن است تا 400٪ در صفحه بزرگنمایی کند. از آنجایی که سایت به صورت واکنش گرا طراحی شده است، رابط کاربری خود را برای "نمای کوچکتر" (در واقع برای صفحه بزرگتر) تنظیم می کند، که برای کاربران دسکتاپ که نیاز به بزرگنمایی صفحه دارند و همچنین برای کاربران صفحه خوان موبایل نیز عالی است. این یک برد-برد است. در اینجا همان صفحه بزرگنمایی شده تا 400٪ است:
در واقع، فقط با طراحی واکنشگرا، با قانون 1.4.4 چک لیست WebAIM مواجه میشویم که بیان میکند که یک صفحه "... باید زمانی که اندازه متن دو برابر میشود قابل خواندن و کاربردی باشد."
بررسی تمام طراحی ریسپانسیو خارج از محدوده این راهنما است، اما در اینجا چند نکته مهم وجود دارد که برای تجربه واکنشگرایانه شما مفید خواهد بود و به کاربران شما دسترسی بهتری به محتوای شما میدهد.
از متا تگ viewport استفاده کنید
<meta name="viewport" content="width=device-width, initial-scale=1.0">
تنظیم width=device-width عرض صفحه در پیکسلهای مستقل از دستگاه مطابقت دارد و تنظیم initial-scale=1 یک رابطه 1:1 بین پیکسلهای CSS و پیکسلهای مستقل از دستگاه برقرار میکند. انجام این کار به مرورگر دستور میدهد تا محتوای شما را با اندازه صفحه نمایش مطابقت دهد، بنابراین کاربران فقط یک دسته از متنهای خرد شده را نبینند.
برای اطلاعات بیشتر به Size content برای viewport مراجعه کنید.
به کاربران اجازه بزرگنمایی بدهید
استفاده از متا تگ viewport برای جلوگیری از بزرگنمایی، با تنظیم maximum-scale=1 یا user-scaleable=no امکان پذیر است. از انجام این کار خودداری کنید و به کاربران خود اجازه دهید در صورت نیاز بزرگنمایی کنند.
طراحی با انعطاف پذیری
از هدف قرار دادن اندازه های خاص صفحه خودداری کنید و به جای آن از یک شبکه منعطف استفاده کنید و زمانی که محتوا دیکته می کند، در طرح بندی تغییرات ایجاد کنید. همانطور که در مثال Udacity در بالا دیدیم، این رویکرد تضمین میکند که طراحی پاسخ میدهد چه فضای کاهشیافته به دلیل صفحه نمایش کوچکتر باشد یا سطح زوم بالاتر.
می توانید در مقاله اصول طراحی وب واکنش گرا (Responsive) اطلاعات بیشتری در مورد این تکنیک ها بخوانید.
از واحدهای نسبی برای متن استفاده کنید
برای اینکه بهترین استفاده را از شبکه انعطاف پذیر خود ببرید، به جای مقادیر پیکسل، از واحدهای نسبی مانند em یا rem برای مواردی مانند اندازه متن استفاده کنید. برخی از مرورگرها از تغییر اندازه متن فقط در تنظیمات برگزیده کاربر پشتیبانی میکنند و اگر از یک مقدار پیکسل برای متن استفاده میکنید، این تنظیم روی کپی شما تأثیری نخواهد داشت. با این حال، اگر از واحدهای نسبی در سراسر جهان استفاده کرده باشید، کپی سایت به روز می شود تا اولویت کاربر را منعکس کند.
این کار باعث میشود که با بزرگنمایی کاربر، کل سایت دوباره جریان پیدا کند و تجربه خواندنی را برای استفاده از سایت شما ایجاد کند.
از جدا کردن نمای بصری از ترتیب منبع خودداری کنید
بازدیدکنندهای که با صفحهکلید در سایت شما صفحهبندی میکند، ترتیب محتوای سند HTML را دنبال میکند. هنگام استفاده از روشهای چیدمان مدرن مانند Flexbox و Grid ، به راحتی میتوان رندر بصری را با ترتیب منبع مطابقت نداشت. این میتواند منجر به پرشهای نگرانکننده در اطراف صفحه برای شخصی شود که از صفحه کلید برای حرکت در اطراف استفاده میکند.
اطمینان حاصل کنید که طراحی خود را در هر نقطه شکست با استفاده از زبانه در محتوا آزمایش کنید، آیا جریان در صفحه هنوز منطقی است؟
درباره قطع ارتباط منبع و صفحه نمایش بصری بیشتر بخوانید.
مراقب سرنخ های فضایی باشید
هنگام نوشتن میکروکپی از استفاده از زبانی که محل عنصر را در صفحه نشان می دهد خودداری کنید. به عنوان مثال، اشاره به ناوبری "در سمت چپ شما" در نسخه تلفن همراه زمانی که ناوبری در بالای صفحه است، معنی ندارد.
اطمینان حاصل کنید که اهداف ضربهای در دستگاههای صفحه لمسی به اندازه کافی بزرگ هستند
در دستگاههای صفحه لمسی مطمئن شوید که اهداف ضربهای شما به اندازهای بزرگ هستند که فعال کردن آنها بدون ضربه زدن به لینکهای دیگر آسان باشد. اندازه خوب برای هر عنصر قابل ضربه زدن 48 پیکسل است، راهنمایی بیشتر در مورد اهداف ضربه بزنید.