طراحی سایت ریسپانسیو یکی از ضروریات طراحی سایت است. درحال حاضر داشتن نسخه موبایل برای اکثریت وب‌سایت‌ها و به‌خصوص وب‌سایت‌های کسب‌وکار به یک ضرورت تبدیل شده است. در واقع شرایط به گونه‌ای شده که انگار باید برای هر دستگاهی یک طراحی مجزای مناسب داشته باشید: یک طرح برای آیفون، طراحی‌های متفاوت برای دستگاههای مختلف اندرویدی، طراحی مناسب برای تبلت‌ها و از جمله آیپد و … . در نهایت، وبسایت شما باید با همه دستگاههای مختلف و رزولوشن‌های متنوع آنها سازگار باشد.
علاوه بر این‌ها، بدون تردید در سال‌های آینده ابداعات متنوع‌تری را نیز شاهد خواهیم بود که باید وبسایت خود را با آنها نیز تطبیق بدهید. اما این وضعیت تا چه زمانی ادامه خواهد داشت؟ البته که تا همیشه! در واقع بالاخره به جایی می‌رسیم که دیگر امکان ایجاد طرح‌های مختلف برای انواع بی‌پایان دستگاههای جدید وجود نخواهد داشت. البته حتی در حال حاضر نیز طراحی نسخه‌های مختلف برای هر رزولوشن و دستگاه برای اغلب وب‌سایت‌ها امکان‌پذیر نیست. در چنین شرایطی چه باید کرد؟ آیا باید از خیر برخی از دستگاه‌ها بگذریم و فقط روی چند موردی تمرکز کنیم که بیشترین بازدیدکننده و مشتری را برای ما جذب میکنند؟ در این صورت باز هم بازار بزرگی را از دست خواهیم داد، چرا که مجموع کاربرانی که از دستگاههای مختلف نامتناسب با وبسایت ما استفاده میکنند کم نخواهد بود. اما آیا گزینه دیگری هم داریم؟
مقاله مرتبط: رابط کاربری چیست؛ با اصول و فرآیند طراحی UI آشنا شوید.
راه حلی به نام طراحی ریسپانسیو
طراحی وب از زمان رواج روزافزون استفاده از دستگاههای همراه همواره برای پاسخگویی به نیازهای خاص کاربران این ابزارها و تناسب طراحی با محیط، اندازه و رزولوشن آنها تحت فشار بوده است. در ابتدا به نظر می‌رسید که بهترین راهکار استفاده از stylesheet های متفاوت برای اندازه‌های مختلف باشد؛ اما امروزه یک stylesheet می‌تواند پاسخگوی صفحات نمایشی باشد که اندازه‌های متفاوتی دارند. در نتیجه از این طریق حجم کدهای وبسایت نیز کاهش پیدا خواهد کرد. این نوع از طراحی همچنان از روش‌های استاندارد برای تشخیص دستگاه مورد استفاده کاربر بهره می‌برد،و نیاز به طراحی یک stylesheet برای هر دستگاه را برطرف کرده است. این طراحی همان چیزی است که به آن طراحی «ریسپانسیو» (Responsive) یا طراحی واکنشگرا می‌گوییم.
تعریف طراحی ریسپانسیو چیست؟
طراحی ریسپانسیو یک روش یا رویکرد است که طراح بر مبنای آن صفحه را به نحوی طراحی میکند که با هر دستگاهی که در آن نمایش داده می‌شود تطبیق پیدا میکند. در این روش، طراحی و توسعه به گونه‌ای انجام میگیرد که بهترین تجربه برای کاربران دستگاههای مختلف رقم زده شود.
در طراحی ریسپانسیو از ترکیبی از تصاویر، گریدها (Grid) و طرح‌های انعطاف‌پذیر در کنار کاربرد منطقی و زیرکانه CSS استفاده می‌شود. در این حالت با تغییر محیط کاربری از وضعیت لپ‌تاپ به گوشی هوشمند، وبسایت به سرعت با اندازه و رزولوشن صفحه و همچنین میزان پشتیبانی دستگاه مورد نظر از اسکریپت‌های مختلف تطبیق پیدا میکند. طبیعتاً فناوری لازم برای واکنش خودکار به درخواست کاربر باید در سایت و مرورگر کاربر وجود داشته باشد. در آخر، از طریق این روش نیاز به طراحی و توسعه مجزا برای دستگاههای مختلفی که در بازار وجود دارند یا در آینده عرضه خواهند شد مرتفع می‌شود.
طراحی ریسپانسیو به چه صورت است ؟
با استفاده از طراحی ریسپانسیو یک وبسایت خواهید داشت که مؤلفه‌هایی مختلفی در آن وجود دارد و هنگامی که وبسایت شما در دستگاههای مختلفی به نمایش در می‌آید، بنا به تنظیماتی که برای طراحی تعریف شده، این مؤلفه‌ها واکنش‌های متفاوتی را از خود نشان می‌دهند.
یک وبسایت با طراحی سنتی را در نظر بگیرید؛ معمولاً چنین وب‌سایت‌هایی کاربران موبایل یا تبلت را مجبور میکنند تا به سمت چپ یا راست صفحه اسکرول کرده یا برای مشاهده متن‌های ریز به ناچار بر روی آنها زوم کنند. به عبارت دیگر کاربر مجبور به انجام کارهایی می‌شود که علاقه‌ای به انجامشان ندارد. طبیعتاً ایجاد طرح مناسبی که پاسخگوی نیاز همه کاربران باشد آسان نخواهد بود. به علاوه، قابلیت چرخش خودکار صفحه گوشی‌ها و تبلت‌ها نیز مزید بر علت می‌شود و کار را برای طراحان دشوارتر میکند. برخی از دستگاه‌ها نیز صفحات بسیار کوچکی دارند که طراحی برای آنها را به دردسر بزرگ‌تری تبدیل خواهد کرد. به علاوه، حفظ طرح صفحه و نمایش درست سایت برای وب‌سایت‌هایی که تصویر محور هستند یا از آیتم‌های گرافیکی فراوانی استفاده میکنند دشوارتر است.
در چنین شرایطی طراحی ریسپانسیو به کمک طراحان، صاحبان سایت و همچنین کاربران می‌آید. به عنوان مثال با استفاده از این نوع از طراحی می‌توان نسخه تبلت را به نحوی تنظیم کرد که در حالت دو ستونه نمایش داده شود. از این طریق، در خوانایی محتوا و حرکت در سایت اختلالی به وجود نمی‌آید. در گوشی‌های هوشمند می‌توان محتوا را به صورت عمودی در یک ستون مرتب کرد یا امکان جابجایی بین چند ستون را با حرکت لمسی سوایپ برای کاربر فراهم کرد و از نمایش عناصر مزاحم جلوگیری نمود. تصاویر نیز به جای آنکه ریز یا بزرگ به نظر برسند یا اینکه فقط قسمتی از آنها دیده شود به طور خودکار تغییر اندازه داده می‌شوند.
به بیانی ساده و مختصر، با استفاده از طراحی ریسپانسیو، وبسایت شما با دستگاه مورد استفاده بازدیدکننده تطبیق پیدا میکند.
عملکرد طراحی ریسپانسیو چگونه است؟
در طراحی ریسپانسیو از fluid grid یا جدول‌های شناور استفاده می‌شود. در این حالت به جای تعیین اندازه مؤلفه‌های مختلف سایت بر مبنای پیکسل، همه اندازه‌ها به طور نسبی تعیین می‌شود. بنابراین اگر در طرح سایت خود سه ستون داشته باشید، به جای آنکه عرض هر یک را به طور مجزا تعیین کنید مشخص می‌کنید که عرض هر کدام نسبت به ستون‌های دیگر چقدر باید باشد. همین قضیه در مورد آیتم‌های رسانه‌ای و از جمله تصاویر سایت نیز مصداق دارد، به نحوی که تصاویر و انواع مختلف آیتم‌های چندرسانه‌ای سایت هم به صورت نسبی تغییر اندازه پیدا میکنند.
تفاوت طراحی ریسپانسیو با (طراحی fluid روان) و (طراحی adaptive انطباق پذیر)
تفاوت عمده طراحی ریسپانسیو با طراحی fluid یا روان این است که در طراحی روان، تمرکز طراحی بر روی نسبت اندازه‌ها قرار دارد تا همه مؤلفه‌ها درصد مشابهی را در صفحات نمایش مختلف اشغال کنند؛ اما در طراحی ریسپانسیو با استفاده از Media Query های خاصِ CSS، نحوه نمایش مؤلفه‌های مختلف بر اساس اندازه صفحه تعیین می‌شود. در طراحی adaptive یا انطباق پذیر یا انطباقی، اندازه‌ها به صورت ثابت تعریف شده و طرح‌ها و چینش‌های کاملاً مجزایی طراحی می‌شود که با توجه به اندازه صفحه یا دستگاهی که کاربر از آن استفاده میکند در اختیار وی قرار خواهند گرفت.
طراحی Fluid یا Liquid
هدف در این نوع طراحی، حفظ اندازه نسبی همه عناصر موجود در صفحه است؛ بنابراین هر آنچه که در یک مانیتور ۲۴ اینچی مشاهده می‌کنید را در یک لپ‌تاپ ۱۲ اینچی نیز خواهید دید. استفاده از این روش برای صفحات مشابهی که اندازه‌های متفاوتی دارند کارساز خواهد بود. در عین حال، هنگامی که پای گوشی‌های همراه به میان می‌آید، به دلیل اندازه کوچک صفحه نمایش این دستگاه‌ها تجربه کاربری تحت تأثیر قرار خواهد گرفت.
طراحی Adaptive
در این نوع از طراحی باید هدف و کاربران مورد نظر را مشخص و پیش‌بینی کرد. به عنوان نمونه می‌توان استفاده از برخی از مؤلفه‌های طراحی را محدود کرد تا صفحه مورد نظر با توجه به هدف‌گذاری انجام شده در گوشی‌های همراه با سرعت بیشتری بارگذاری شود؛ یا اینکه بر ویژگی‌های خاصی تمرکز کرد که بیشتر با نیازهای کاربران این دستگاه‌ها سنخیت دارند.
طراحی ریسپانسیو
طراحی ریسپانسیو با عنایت ویژه به مقیاس پذیری (Scalability) شروع می‌شود. در این حالت، طرح صفحه به شکلی در می‌آید که برای صفحه نمایش مورد نظر تعریف شده است. به عنوان مثال، اگر یک سایت را در موبایل خود باز کنید، کل طرح به حالت یک ستونه در خواهد آمد تا با اندازه صفحه موبایل شما تناسب پیدا کند.
استفاده از طراحی سایت ریسپانسیو چه مزایایی برای سایت من دارد؟
در یک دنیای ایده آل، همه ما باید زمان و توان کافی برای ایجاد و طراحی سایت‌های مجزایی که کاملاً برای استفاده در موبایل بهینه‌سازی شده‌اند را داشته باشیم؛ اما معمولاً مناسب‌ترین شرایط موجود نیز برای ما به اندازه سایت‌های بزرگی مثل فیس‌بوک و توییتر (که نسخه موبایلی مخصوص خودشان را دارند) ایده آل نیست. در نتیجه باید به دنبال روشی باشیم که بدون ایجاد دردسرهای اضافی بتواند بهترین تجربه کاربری را برای بازدیدکنندگانمان رقم بزند. همانطور که می‌دانید این راه چیزی به جز استفاده از طراحی ریسپانسیو نیست. اما استفاده از این روش چه مزایایی را در بر دارد؟
- اولین و بزرگترین مزیت : صرفه‌جویی در وقت برای طراحی سازگار با دستگاههای مختلف
استفاده از طراحی ریسپانسیو برای مسئولان سایت به این معنی است که فقط یک نسخه از سایت وجود دارد که باید به‌روزرسانی شود. بنابراین هر محتوایی که وجود دارد در یک مکان قرار میگیرد و همه چیز ساده‌تر خواهد شد.
برای طراحان و توسعه دهندگان سایت نیز در مقایسه با ایجاد چندین stylesheet مختلف کار ساده‌تر یا سازمان‌یافته‌تری در پیش خواهد بود؛ البته نمی‌توان زمان و تلاش لازم برای طراحی یک سایت ریسپانسیو مطمئن و بدون ایراد را دست کم گرفت. در هر صورت، از این طریق همه کدهای CSS در یک جا قرار میگیرد و برای ایجاد هر تغییر کوچکی نیاز به ویرایش چندین و چند فایل مختلف نخواهید داشت.
- مزیت دوم طراحی سایت ریسپانسیو: راحتی کاربر
همانطور که در بالاتر اشاره شد، کاربران مختلفی با دستگاههای متفاوت، به سایت شما مراجعه میکنند. آنچه که مهم است این است که افراد بیشتری با سایت شما راحت باشند، که طراحی ریسپانسیو، این امکان را فراهم میکند. - مزیت سوم: گوگل پسند شدن سایت
همه ی ما به گوگل احتیاج داریم…همه برای جستجو کردن به گوگل احتیاج داریم ولی اگر کسب و کار اینترنتی دارید یا طراح سایت هستید یا سئو کار هستید کلا برای اینکه گوگل شما را بشناسد هم به این موتور جستجو احتیاج دارید. گوگل برای سایت های ریسپانسیو و سایت هایی که برای موبایل بهینه شده اند ارزش ویژه ای قایل است. از طرفی اگر سایتتان برای موبایل مناسب نباشد، گوگل این ضعف را به عنوان یک امتیاز منفی در نظر میگیرد.
بیشتر بدانید: چطور به سئوبه سایت شما کمک میکند؟
آیا طراحی ریسپانسیو معایبی هم دارد؟
هیچ چیز کامل نیست و طبیعتاً طراحی ریسپانسیو نیز از این قاعده مستثنا نیست. در واقع، اگر غیر از این بود وب‌سایت‌های بزرگی مانند فیس‌بوک و توییتر نیز به جای استفاده از سایت‌های مجزا برای کاربران موبایل در همان سایت اصلی‌شان از طراحی ریسپانسیو استفاده می‌کردند.
استفاده از طراحی ریسپانسیو هیچ مزیتی را در سرعت بارگذاری سایت برای کاربران موبایل ایجاد نمی‌کند. توجه داشته باشید که حتی اگر برخی از مؤلفه‌های سایت برای کاربری که از گوشی هوشمند خود استفاده میکند ظاهر نشود به این معنی نخواهد بود که آن مؤلفه‌ها بارگذاری نشده‌اند؛ بلکه فقط از دید کاربر پنهان می‌شوند تا ایرادی در طرح وبسایت در موبایل به وجود نیاید.
شاید بتوان بزرگترین معضل طراحی ریسپانسیو را مدت زمان و سرعت بارگذاری تصاویری دانست که باید با اندازه صفحه نمایش دستگاه مورد استفاده کاربر تطبیق پیدا کنند. دقت داشته باشید که فرآیند تغییر اندازه تصاویر برای نمایش در تبلت یا گوشی‌های هوشمند می‌تواند تحت تأثیر قدرت محدود دستگاههای موبایل قرار بگیرد و دچار وقفه یا کندی شود. که این مشکل را باید بتوانید مدیریت کنید.
برخی از مرورگرهای موبایل از مدیا کوئری‌ها (media queries) پشتیبانی نمی‌کنند.
حالا مدیا کوئری چه کاری انجام می دهند؟
مدیا کوئری‌ها در واقع دستورالعمل‌های CSS هستند و پشتیبانی مرورگر مورد استفاده کاربر برای نمایش صحیح طراحی ریسپانسیو ضروری است. البته این مشکل با به‌روزرسانی‌های منظم سیستم‌های عامل، اپ‌ها و دستگاههای موبایل و پشتیبانی روزافزون آنها از طراحی ریسپانسیو به سرعت در حال برطرف شدن است؛ اما به‌هرحال مسئله‌ای است که باید به آن توجه داشته باشید.
استفاده از طراحی ریسپانسیو چه لزومی دارد؟
اگر ترافیک وبسایت خود را به زیر ذره‌بین ببرید احتمالاً خواهید دید که بخش اعظم بازدیدکنندگان شما برای بازدید و استفاده از سایتتان از موبایل و دستگاههای همراه استفاده میکنند. همین آمار تجربی برای شما کافی است تا به اهمیت طراحی مناسب برای کاربران این قبیل دستگاه‌ها پی ببرید.
با استفاده از طراحی واکنشگرا می‌توانید دامنه وسیع‌تری از کاربران را پوشش بدهید. در واقع، از این طریق دیگر محدودیت خاصی در استفاده از وبسایت شما وجود نخواهد داشت؛ چرا که طرح سایتتان به راحتی با هر دستگاه و با هر فناوری و هر اندازه‌ای که صفحه نمایش آن داشته باشد تطبیق پیدا خواهد کرد. با استفاده از طراحی ریسپانسیو می‌توانید هم پاسخگوی نیاز کاربری باشید که از یک لپ‌تاپ یا دستگاه قدیمی استفاده میکند و هم پاسخگوی کاربرانی که از دستگاههای به‌روزتری استفاده میکنند. اتفاقی که در این حالت می‌افتد رقم خوردن تجربه کاربری مطلوب برای بازدیدکنندگان وبسایت شماست و این دقیقاً همان چیزی است که طراحان وب و صاحبان وب‌سایت‌ها همیشه به دنبال آن بوده و هستند.
صحبت پایانی
با توجه به رشد روزافزون استفاده از موبایل و سایر دستگاههای پرتابل یا همراه برای استفاده روزمره و اتصال به اینترنت، استفاده از طراحی ریسپانسیو دیگر یک گزینه نیست؛ بلکه به یک ضرورت تبدیل شده است. با همه این‌ها باید به این نکته نیز توجه داشته باشید که طراحی ریسپانسیو حلّال همه مشکلات نیست و نمی‌تواند از شما در برابر تغییرات مستمر دنیای موبایل محافظت کند.
طراحی وب ریسپانسیو یک مفهوم است که اگر به درستی پیاده‌سازی و اجرا شود می‌تواند تجربه بهتری را برای کاربران رقم بزند، اما نمی‌تواند همه مشکلاتی که کاربر با آن مواجه می‌شود را به شکل خودکار حل و فصل کند. به همین دلیل، همیشه باید در جریان جدیدترین فناوری‌ها، دستگاه‌ها و رزولوشن‌ها قرار داشته باشید تا بتوانید همگام با تغییرات قدم بردارید و تجربه بهتری را برای بازدیدکنندگان وب‌سایتتان فراهم کنید.
