در شرایطی که دستگاه‌های متصل به اینترنت روز به روز متنوع‌تر می‌شوند، طراحی وب سایت سازگار با موبایل یا همان رسپانسیو اهمیت بسیاری دارد. چند سال پیش، قبل از ظهور گوشی‌های تلفن همراه هوشمند طراحی سازگار با موبایل وجود نداشت. اما تکنولوژی ما را به مسیری هدایت کرد که امروزه تا حدودی آن را پذیرفته‌ایم. بر اساس آمار ارائه شده، از سال 2019 به بعد، 61 درصد از کل جستجوهای گوگل از طریق تلفن همراه انجام می‌شود. در سپتامبر 2020، گوگل الگوریتم جستجوی خود را تغییر داد تا وب‌سایت‌های سازگار با موبایل را در اولویت قرار دهد. در این پست نگاهی خواهیم داشت به مفهوم طراحی سایت واکنشگرا و تکنیک‌ها و ابزارهای مورد استفاده.
طراحی سایت سازگار با موبایل یا همان ریسپانسیو رویکردی است که بر دستگاهی که کاربر استفاده می‌کند تمرکز دارد. از آنجاییکه کاربر گاهی از لپ تاپ و گاهی از گوشی تلفن همراه خود استفاده می‌کند، وب سایت باید طوری طراحی شود که به طور خودکار برای تطبیق وضوح، اندازه تصویر و توانایی‌های اسکریپت تغییر کند. ممکن است فرد مجبور باشد تنظیمات دستگاه خود را نیز در نظر بگیرد. دستگاه مورد استفاده کاربر ویژگی‌های زیادی دارد که باید به آن توجه کرد. از جمله:
• اتصال شبکه
• اندازه صفحه نمایش
• نوع تعامل (صفحه نمایش لمسی، ماوس)
• وضوح گرافیکی
در طراحی سایت واکنشگرا سرور همیشه کد HTML یکسان به دستگاه‌های مختلف ارسال می‌کند و در عوض برای رندرگیری صفحه روی دستگاه کاربر از CSS استفاده می‌کند.
وضوح، اندازه و جهت‌گیری در صفحه نمایش‌های مختلف، متفاوت است. روز به روز دستگاه‌های جدید با اندازه صفحه نمایش متفاوت ساخته می‌شود و هر یک از این دستگاه‌ها در مدیریت اندازه، عملکرد و حتی رنگ متفاوت عمل می‌کنند. برخی به صورت افقی، برخی دیگر به صورت عمودی، برخی دیگر حتی کاملاً مربعی هستند. بسیاری از دستگاه‌های جدید می‌توانند به دلخواه کاربر از حالت عمودی به افقی تغییر جهت بدهند. چگونه می‌توان وب سایتی واکنشگرا برای انطباق با این موقعیت‌ها طراحی کرد؟ با ما همراه باشید تا در ادامه به این سوال پاسخ دهیم.
اگر در طراحی سایت ریسپانسیو تازه کار هستید، مدیا کوئری اولین و مهمترین ویژگی CSS است که باید یاد بگیرید. مدیا کوئری به شما این امکان را می‌دهد که عناصر را بر اساس عرض درگاه صفحه نمایش تنظیم کنید. مدیا کوئری بخش مهمی از طراحی سایت واکنشگرا است که معمولا برای طرح‌بندی‌های شبکه‌ای، اندازه فونت و حاشیه‌ها در صفحه نمایش‌های متفاوت، استفاده می‌شود.
اگرچه مدیا کوئری برای طراحی وب واکنشگرا ضروری است، امروزه بسیاری از ویژگی‌های جدید CSS نیز به طور گسترده در مرورگرها پذیرفته شده و پشتیبانی می‌شوند. Flexbox یکی از این ویژگی‌های جدید و مهم CSS از نظر طراحی سایت واکنشگرا است.
شاید سوال پیش بیاید که فلکس باکس چیست و چه کاری می‌تواند انجام دهد؟ در پاسخ باید بگوییم بهتر است بپرسید فلکس باکس چه کاری نمی‌تواند انجام دهد؟ ساده‌ترین راه برای ترازبندی عمودی با CSS چیست؟ فلکس باکس. چگونه می‌توان یک گرید لایوت رسپانسیو ایجاد کرد؟ فلکس باکس. چگونه می‌توانیم به صلح جهانی دست یابیم؟ فلکس باکس.
ماژول طرح‌بندی فلکس باکس(Flexbox) راه‌حل سودمندی برای چیدمان، تراز و توزیع فضا بین عناصر موجود در یک صفحه ارائه می‌دهد، حتی زمانی که اندازه آنها پویاست.
چند سال پیش، زمانی که طرح‌بندی‌های انعطاف‌پذیر تقریباً فقط برای وب‌سایت‌ها «لوکس» در نظر گرفته می‌شدند، تنها چیزهایی که در طراحی انعطاف‌پذیر بودند، ستون‌های چیدمان و متن بود. در واقع تصاویر اصلا انعطاف‌پذیر نبودند. آنها می‌توانستند چند صد پیکسل داشته باشند، اما نمی‌توانستند از یک صفحه کامپیوتر بزرگ به یک نت بوک تغییر وضعیت بدهند.
امروزه طراحی سایت‌ها انعطاف‌پذیرتر شده است و تصاویر را می‌توان به طور خودکار تنظیم کرد. این موضوع برای دستگاه‌هایی که در یک لحظه از جهت عمودی به افقی تغییر می‌کنند یا برای زمانی که کاربران بجای استفاده از صفحه نمایش بزرگ رایانه با تلفن همراه یا موبایل خود از وب سایت دیدن می‌کنند، عالی است.
همانطور که گفتیم یکی از مشکلات عمده‌ای که طراحی سایت واکنش گرا سعی در حل آن داشته کار با تصاویر است. تعدادی تکنیک برای تغییر اندازه تصاویر متناسب وجود دارد و بسیاری از آنها به راحتی انجام می‌شوند. محبوب‌ترین گزینه، استفاده از حداکثر عرض(max-width) در CSS است.
در این روش هر تصویر در اندازه اصلی خود بارگذاری می‌شود، مگر اینکه اندازه ناحیه مشاهده در صفحه نمایش از عرض اصلی تصویر کوچکتر شود. حداکثر عرض تصویر روی 100٪ عرض صفحه یا مرورگر تنظیم شده است، بنابراین وقتی این 100٪ باریکتر می‌شود، تصویر نیز باریک می‌شود. اساسا، ایده پشت تصاویر سیال این است که شما تصاویر را در حداکثر اندازه‌ای که دارند ارائه دهید. شما ارتفاع و عرض را در کد خود اعلام نمی‌کنید، بلکه به مرورگر اجازه می‌دهید تا در حین استفاده از CSS اندازه نسبی تصاویر را تغییر دهد. این یک تکنیک عالی و ساده برای تغییر اندازه تصاویر به زیبایی است.
این تکنیک که توسط گروه Filament ارائه شده است، این تکنیک در طراحی سایت نه تنها اندازه تصاویر را به تناسب تغییر می‌دهد، بلکه وضوح تصویر را نیز در دستگاه‌های کوچکتر کم می‌کند، بنابراین بخش زیادی از فضا در صفحه نمایش‌های کوچک به دلیل تصاویر بسیار بزرگ هدر نمی‌رود. این تکنیک به چند فایل نیاز دارد. ابتدا یک فایل جاوا اسکریپت (rwd-images.js)، فایل htaccess. و یک فایل تصویری (rwd.gif) و سپس، می‌توانیم از کمی HTML برای ارجاع تصاویر با وضوح بزرگ‌تر و کوچکتر استفاده کنیم.
یکی از استراتژی‌های کلیدی برای ایجاد تصاویر، ویدئو، و سایر عناصر واکنشگرا، استفاده از جعبه نسبت ابعاد است. جعبه نسبت ابعاد(aspect ratio) تکنیک جدیدی نیست و ابزاری کاملا مفید برای یک طراح سایت است.
ممکن است با کوچکتر شدن صفحه نمایش، اشیا را به طور متناسب کوچک کنید. به نظر می‌رسد روش معقولی است. اما کوچک کردن محتوای یک صفحه نمایش بزرگ برای نشان دادن در یک صفحه نمایش کوچک همیشه بهترین پاسخ نیست. تفاوت‌های محیط نمایشی در تلفن همراه با صفحه نمایش‌های بزرگ عبارت است از:
• ناوبری ساده‌تر
• محتوای متمرکزتر
• فهرست‌ها یا ردیف‌ها به جای ستون‌های متعدد.
طراحی سایت ریسپانسیو فقط به معنی ایجاد یک طرح‌بندی انعطاف‌پذیر برای طیف گسترده‌ای از پلتفرم‌ها نیست. بلکه این طراحی باید به گونه‌ای باشد کاربر بتواند انتخاب کند که کدام بخش از محتوا را ببیند. خوشبختانه، سال‌هاست به کمک CSS می‌توانیم محتوا را به راحتی نشان دهیم و پنهان کنیم!
این روزها صفحه‌نمایش‌های لمسی عمدتا روی دستگاه‌های کوچکتر مثل موبایل‌ها و تبلت‌ها استفاده می‌شوند، اما بسیاری از لپ‌تاپ‌ها و رایانه‌های رومیزی موجود در بازار نیز قابلیت نمایشگر لمسی دارند. واضح است که دستورالعمل‌های طراحی صفحات نمایش لمسی و صفحات مبتنی بر ماوس متفاوت است. در صفحات لمسی کاربر برای عمل کلیک کردن باید صفحه را لمس کند.
دو نکته مهم که در صفحه نمایش‌های لمسی باید در نظر گرفته شود:
• اندازه و محل قرارگیری عناصر صفحه وب در طراحی سایت سازگار با موبایل باید متناسب با انگشت شست کاربر باشد.
• ناوبری فرعی در سمت راست صفحه کاربرپسندتر است، زیرا اکثر مردم راست دست هستند.
خوب، حالا که در طراحی سایت سازگار با موبایل استاد هستیم، چگونه می‌توانیم کارهایی را که انجام داده‌ایم آزمایش کنیم؟ خوشبختانه، تعدادی ابزار برای شبیه‌سازی و نظارت بر تجربه کاربری در دستگاه‌های مختلف داریم. در ادامه دو نمونه مفید را معرفی می‌کنیم.
ابزار شبیه‌سازی تلفن همراه DevTools کروم طیف وسیعی از تبلت‌ها و دستگاه‌های تلفن همراه را پشتیبانی می‌کند. همچنین یک گزینه "responsive" دارد که به شما امکان می‌دهد اندازه صفحه نمایش را به صورت سفارشی تعریف کنید.
لایت هوس (Lighthouse) یک ابزار متن باز است که راهی برای تجزیه و تحلیل عملکرد وب سایت در یک دستگاه خاص ارائه می‌دهد.
لایت هوس (Lighthouse) و Foo برای نظارت بر عملکرد وب‌سایت و تجزیه و تحلیل استفاده می‌کند. می‌توانید آن را هم برای نظارت دستگاه‌های دسکتاپ و هم تلفن همراه تنظیم کنید تا بازخورد مستمری در مورد واکنشگرا بودن وب‌سایت خود دریافت کنید.
کلام آخر
درک اینکه چگونه یک طراحی رسپانسیو داشته باشید نیاز به یادگیری زیادی ندارد، و قطعا بسیار راحت‌تر از یادگیری نحوه طراحی و کدنویسی است. واضح است که طراحی سایت واکنشگرا و تکنیک‌های مورد بحث در بالا، پاسخ نهایی به دنیای تلفن همراه نیست. طراحی وب رسپانسیو مفهومی است که با اجرای صحیح آن می‌توان تجربه کاربری را بهبود بخشید، اما به طور کامل آن را برای هر کاربر، دستگاه و پلتفرم حل نمی‌کند. ما باید دائماً با دستگاه‌ها، رزولوشن‌ها و فناوری‌های جدید کار کنیم تا به طور مستمر تجربه کاربری را با تکامل فناوری در سال‌های آینده بهبود
