در گذشته اغلب افراد سایت ها را به روی یک کامپیوتر خانگی می دیدند و رزولوشن صفحه نمایش ها محدودتر از امروز بود. با روی کار آمدن تلفن های هوشمند و تبلت ها، حالا چندین سایز مختلف صفحه نمایش وجود دارد که شما باید بتوانید سایتتان را به روی آنها نمایش دهید. اما چطور ممکن است بتوان یک سایت را با چندین صفحه نمایش سازگار کرد؟ اینجاست که طراحی سایت ریسپانسیو (Responsive) یا واکنشگرا معنا پیدا می کند. در ادامه به شما خواهیم گفت طراحی سایت ریسپانسیو چیست و چطور می تواند به شما در عملکرد بهتر وب سایتتان کمک کند.
طراحی سایت ریسپانسیو چیست؟
طراحی سایت ریسپانسیو به رویکردی در طراحی وب گفته می شود که این امکان را فراهم می کند یک وب سایت و تمامی صفحات آن بتواند به روی دستگاه هایی با سایز صفحه نمایش متفاوت، از جمله دسکتاپ، لپتاپ، تبلت و گوشی های هوشمند، به شکل یکسان و سازگار نمایش داده شوند.
طراحی سایت ریسپانسیو را می توان اینطور توصیف کرد، وب سایتی که طراحی می شود باید بتواند به طور اتوماتیک به ترجیحات کاربر پاسخ دهد. اما نیاز نیست برای هر گجت موجود در بازار یک طراحی جداگانه داشته باشید، با کمک طراحی سایت ریسپانسیو می توانید به راحتی به این نیاز پاسخ دهید.
طراحی سایت ریسپانسیو به کمک CSS اجرا می شود. دستورات و کد های مختلفی برای هر سایز صفحه، زرولوشن، قابلیت های رنگی، جهت و وضوح تصویر نوشته می شود و به نوعی در این کد ها به ویژگی های مختلفی که دستگاه کاربر دارد توجه می شود.
حالا چه کاربر بخواهد وب سایت را در تلفن هوشمند به صورتی افقی ببیند یا عمودی، یا به روی ویندوز ببیند یا IOS، همه چیز یکسان دیده می شود.
چرا طراحی سایت ریسپانسیو اهمیت دارد؟
طراحی سایت ریسپانسیو کار طراحان سایت، طراحان رابط کاربری، و توسعه دهندگان وب را راحت می کند چرا که دیگر لزومی ندارد شب و روز مشغول طراحی برای دستگاه های مختلف موجود باشند. همچنین این نوع طراحی به نفع صاحبان کسب و کارهای مختلف و بازاریاب ها نیز است. به برخی از مزایای داشتن طراحی ریسپانسیو یا واکنشگرا در ادامه اشاره می کنیم:
یک سایت برای تمامی دستگاه ها
چه بخواهد سایت شما به روی یک iMac با سایز ۲۷ اینچ نمایش داده شود چه صفحه نمایش یک گوشی اندروید، وب سایت شما طوری پیاده سازی می شود که کاربر از کارکردن با آن لذت ببرد.
طراحی بهینه برای دستگاه های مختلف
با طراحی وب واکنشگرا، تمامی تصاویر، نوشته ها، و سایر عناصر HTML، به نسبت سایز صفحه نمایش تغییر کرده و نمایش داده می شود.
عدم نیاز به ریدایرکت شدن
گزینه های دیگری که برای طراحی برای دستگاه های مختلف وجود داشت، مستلزم ریدایرکت شدن از نسخه اصلی به نسخه طراحی شده مناسب آن دستگاه بود. اما در طراحی واکنشگرا بدون نیاز به ریدایرکت شدن، کاربر خیلی سریع تر به محتوایی که نیاز دارد خواهد رسید.
بهینه سازی سایت
با توجه به اینکه این روزها افراد بیشتری از موبایل و تبلت برای جستجو در وب استفاده می کنند، طراحی سایت سازگار با موبایل منجر به تجربه کاربری بهتری می شود که این امر در بهینه سازی سایت نیز تاثیرگذار خواهد بود.
هزینه کمتر
طراحی سایت ریسپانسیو حتی از جنبه هزینه ای هم بهینه تر است. همچنین برای شما نیز مدیریت یک سایت از مدیریت دو سایت راحت تر خواهد بود چرا که نیازی نیست دوبار همه تغییرات را انجام دهید. در عوض به روی یک سایت همه کارها را انجام می دهید و به راحتی در دستگاه های مختلف مشاهده خواهید کرد.
از کجا بدانیم وب سایت ما ریسپانسیو طراحی شده؟
شما همین حالا می توانید به روش زیر متوجه شوید آیا وب سایتتان ریسپانسیو طراحی شده یا خیر:
- مرورگر گوگل کروم را باز کنید.
- وارد وب سایتتان شوید.
- کلیدهای Ctrl + Shift + I را فشار دهید تا Chrome Dev Tools باز شود.
- سپس کلیدهای Ctrl + Shift + M را فشار دهید تا نوار ابزار دستگاه را تغییر دهید.
- حالا فقط کافیست انتخاب کنید که می خواهید وب سایتتان به روی موبایل، تبلت یا دستکتاپ نمایش داده شود.
نکاتی که در طراحی سایت ریسپانسیو اهمیت دارند
از دکمه ها غافل نشوید
نحوه رفتار بازدیدکننده با این دکمه ها هنگامی که سایت را روی دسکتاپ مشاهده می کنند با هنگامی که روی موبایل می بینند متفاوت است. اسکرول کردن روی دسکتاپ برای آن ها ساده تر است بنابراین می توانید این فراخوان را به شکل پاپ آپ، یا حتی در پایین صفحه، اضافه کنید.
اما زمانیکه نوبت به طراحی برای موبایل می شود باید جایگاه آن را مجدد ارزیابی کنید تا آن را جایی قرار دهید که در دسترس کاربر باشد.
به این مثال از سایت هاب اسپات.com دقت کنید. فراخوان عمل در این نمونه، عبارت Get هاب اسپات Free است که در نسخه دسکتاپ در پایین صفحه نمایش داده می شود.
اما وقتی این طراحی در صفحه نمایش یک تلفن هوشمند دیده شود دیگر نمی تواند به همین شکل طراحی کرد. اما قرار نیست این عبارت به طور کامل از طراحی ریسپانسیو شما حذف شود بلکه باید جایگاه صحیحی را برای نمایش آن پیدا کنید.
این می تواند نمایش در چهارچوب صفحه نمایش باشد، یا درون منوی همبرگری (منویی که به شکل سه خط افقی در گوشه ی بالای صفحه دیده می شود) قرار بگیرد و به طور کلی جایی باشد که در دید بازدیدکننده باشد و بتواند سریع نسبت به کلیک کردن به روی آن عکس العمل نشان دهد.
علاوه بر اینها، به فضایی که برای کلیک کردن در نظر می گیرید نیز در نسخه موبایل بیشتر دقت کنید. چرا که بر خلاف دسکتاپ که در آن بازدیدکنندگان اغلب از ماوس برای کلیک کردن به روی لینک ها و دکمه ها استفاده می کنند، روی موبایل از انگشت برای کلیک کردن استفاده می شود.
بنابراین باید فضای کلیک شدن طوری در نظر گرفته شود که کار برای فرد آسان شود. به همین خاطر پیشنهاد می شود فضاهای قابل کلیک شدن روی موبایل حداقل ۴۸ پیکسل ارتفاع داشته باشند. این فضاها شامل دکمه ها، فیلدها، لینک های داخل متن، و عبارات داخل منوها می شود.
از گرافیک های وکتور مقیاس پذیر استفاده کنید
بهتر است آیکون ها و تصاویر گرافیکی روی وب سایتتان با فرمت گرافیک های وکتور مقیاس پذیر (SVG) باشد.
برخلاف فرمت هایی نظیر JPG و PNG، SVG ها می توانند تا بی نهایت با مقیاس های مختلف تغییر کنند بدون اینکه تغییری در کیفیت آن ها ایجاد شود.
با استفاده از تصاویر با این فرمت می توانید تا حد زیادی مطمئن باشید که کاربران وب سایت شما همه چیز را با کیفیت خوب به روی دستگاه های مختلف خواهند دید.
همچنین این فایل ها کمک می کنند وب سایتتان سریع تر بارگزاری شود. سرعت باز شدن و لود صفحات وب نیز تاثیر بسیار زیادی در امتیازدهی یک صفحه در نتایج جستجوی گوگل یا نتایج جستجوی گوگل خواهد داشت.
اطمینان حاصل کنید تصاویر وب سایتتان هم تغییر سایز می دهند
آیکون ها و گرافیک ها تنها مدیا هایی نیستند که به روی دستگاه های مختلف تغییر سایز می دهند. تصاویر استفاده شده روی سایت نیز باید تغییر کنند. بعنوان مثال، وب سایت هایی که روی دسکتاپ دیده می شوند نیازمند تصاویر ۱۲۰۰ پیکسلی هستند، این در حالیست که برای وب سایت ها به روی موبایل تصاویر ۴۰۰ پیکسلی کافیست. استفاده از فایل با رزولوشن بالا به روی تمامی دستگاهها موجب کاهش سرعت صفحه می شود، بنابراین توصیه نمی شود.
در عوض بهتر است از تصاویر با رزولوشن های مختلف استفاده کنید و مشخص کنید هر کدام به روی چه دستگاهی نمایش داده شوند. این کار در کدهای CSS وب سایت با استفاده از تگ های مختلف «media» و «source» انجام می شود.
به متن صفحه نیز توجه داشته باشید
فونتی که روی دسکتاپ زیبا و جذاب دیده می شود ممکن است به روی دستگاه موبایل، که تقریبا یک چهارم سایز دسکتاپ است، خوانایی لازم را نداشته باشد. اگر کاربر نتواند وب سایتتان را بخواند به روی چیزی کلیک نخواهد کرد و هیچ خریدی انجام نمی شود.
در عین حال، نمایش وب سایت به روی دسکتاپ با فونت های مخصوص موبایل هم زیبایی کار را از بین می برد و فرد ناگهان با فونتی درشت و زشت مواجه خواهد شد که این امر می تواند در برندینگ شما نیز تاثیر منفی بگذارد. بهترین کاری که می توانید برای بهتر دیده شدن متون در طراحی سایت ریسپانسیو انجام دهید توجه به موارد زیر است:
- برای نمایش محتوای وب در موبایل و دسکتاپ از فونت ۱۶pt استفاده کنید.
- از فونت هایی که خیلی باریک هستند و ممکن است در صفحات کوچک تر محو دیده شوند بپرهیزید.
- اطمینان حاصل کنید تمامی هدینگ ها از متن اصلی شما بزرگتر هستند و به خوبی دیده می شوند.
- از رنگ های متضاد برای نوشته هایتان استفاده کنید تا در رنگ پس زمینه وب سایتتان محو نشده و خوانایی خود را از دست ندهند.
- دقت داشته باشید، کاربر نباید مجبور باشد برای خواندن محتوای شما در موبایل به روی آن زوم کند.
از ویژگی های دستگاه های مختلف بهره ببرید
در این صورت به جای اینکه فرد با آدرس ایمیل مواجه شده یا مستقیما وارد صفحه ارسال پیام شود، با شماره تماس شرکت مواجه شده یا با کلیک به روی این عبارت مستقیم با شما تماس می گیرد.
همچنین اگر کسب و کار شما یک اپلیکیشن موبایل دارد، بهتر است بازدیدکنندگان سایت را تشویق کنید تا وب سایتتان را به روی اپلیکیشن ببینند، این هم از جمله ویژگی هایی است که در نسخه دسکتاپ اجرایی نیست.
وب سایتتان را روی دستگاه های مختلف بررسی کنید
همیشه وب سایتتان را به روی دستگاه ها و مرورگرهای مختلف بررسی کنید. برای اینکه بدانید عملکرد وب سایتتان به روی موبایل چطور است می توانید از ابزار Google Mobile-Friendly Test استفاده کنید.
نمونه هایی از طراحی سایت ریسپانسیو
سایت Slack
سایت Stripe
Alibaba
Bonakchi
اهمیت طراحی سایت ریسپانسیو را فراموش نکنید
طراحی سایت ریسپانسیو به شما کمک می کند:
- دسترسی سایتتان را برای کاربران دستگاه های مختلف فراهم کنید.
- تجربه کاربری خوبی برای بازدیدکنندگان سایتتان ایجاد کنید.
- زمان و هزینه مدیریت محتوای سایتتان را کاهش دهید.
- به راحتی با سایر برندها در فضای تحت وب رقابت کنید.
