پیش نمایش نسخه موبایل قبل از طراحی واکنش گرا
یکی از ایده های طراحان راه اندازی سایتی مناسب برای صفحه نمایش موبایل به نام نسخه موبایل بود، بعدها بسیاری از سایت ها نرم افزارهای خاصی را برای دسترسی به محتوای سایت توسعه دادند که به مرور زمان واضح تر شد. موفق نبوده اند و کاربران علاقه زیادی به این روش نشان نداده اند و تجربه کاربری خوشایندی با نسخه موبایل نداشته اند.
چرا طراحی سایت ریسپانسیو مهم است؟
اکنون می دانیم که مسئولیت وب سایت ارتباط مستقیمی با استفاده کاربران از تلفن همراه دارد. اگر به اطراف نگاه کنید، می بینید که از کوچکترین اعضای خانواده تا مسن ترین آنها به تلفن همراه دسترسی دارند و این بدان معنی است که مخاطبان وب سایت شما نه تنها زیاد هستند، بلکه همه اقشار را پوشش می دهند و این شما را به سمت طراحی واکنش گرا سوق می دهد. قانع کننده است زیرا یک فرد هفتاد ساله وقتی به دنبال راه حلی سریع برای کاهش فشار خون می گردد، قطعاً با این سایت برخورد خواهد کرد. اگر به درستی مشخص نشده باشد نه تنها سریع از سایت خارج می شوند، بلکه دوباره آن را انتخاب نمی کنند. در اینجا مثال های زیادی وجود دارد. کاربر آنقدر درک و صبور نیست که محتوای وب سایت شما را با نمایش اشتباه ببیند و بهتر است. با رعایت این نکته می توانید از کاهش ترافیک وب سایت خود جلوگیری کنید.
مزایای طراحی سایت ریسپانسیو چیست؟
بازدید از سایت را در سطرهای آخر پاراگراف قبل ذکر کردیم و باید بگوییم که این مزیت بزرگ طراحی ریسپانسیو است. تصور کنید وب سایت شما عالی است و محتوای عالی دارد، اما وقتی URL خود را در تلفن همراه تایپ می کنید، صفحه ای با عناوین اسکرول ظاهر می شود و نه تنها مطالب و تلاش های خوب شما، بلکه کاربران سایت های دیگر نیز قابل مشاهده هستند. کلیک کنید و اگر دوباره تکرار شود، گوگل وب سایت شما را با کاهش دید آن به دلیل نرخ پرش بالا جریمه می کند و این بدترین چیز برای وب سایت شما است.
نکات مهم برای طراحی وب سایت ریسپانسیو
برای جلوگیری از تسلیم شدن گوگل و کاربران، دو مرحله اساسی را دنبال کنید:
مرحله اول: تست واکنش گرایی وب سایت
مرحله دوم: مواردی که پاسخگو نیستند را جستجو کنید
یکی را پاس کن
برای اطمینان از اینکه سایت شما مورد توجه قرار می گیرد، چندین ابزار در اختیار دارید، از جمله:
پاسخگو: استفاده از این ابزار رایگان است و می توانید با جستجو در گوگل نام سایت خود را بررسی کرده و نحوه نمایش آن را در صفحات مختلف مشاهده کنید.
Screenfly: این یک ابزار رایگان است که به تازگی منتشر شده است که به شما امکان می دهد خروجی یک وب سایت را با وارد کردن آدرس وب سایت و نام دستگاه (موبایل، رایانه، تبلت، تلویزیون هوشمند) مشاهده کنید.
Google DeTools Device Mode: با کلیک راست بر روی صفحه سایت خود در گوگل کروم و انتخاب Inspect در قسمت Responsive، می توانید پاسخگویی سایت خود را با استفاده از مرورگر Google Chrome بررسی کنید.
Google Resizer
آزمایشگاه ارواح
موکوکامبوزی
CrossBrowserTesting
مرحله دوم
پس از انجام مرحله اول و تست سایت، عناصر واکنش گرا و غیر ریسپانسیو را شناسایی کردیم. در این مرحله باید مواردی که پاسخگو نیستند را شناسایی و رفع کنید. از عناصر طراحی واکنشگرا باید توجه شود و معمولاً مشکل دارند.
نوار ناوبری
ناوبری یک راهنمای منو است که در نقاط مختلف اطراف صفحه نمایش قرار می گیرد، به عنوان مثال در صفحات موبایل معمولا در بالا و مرکز صفحه و در صفحه دسکتاپ که پهن تر است، در بالا قرار می گیرد. و سمت راست صفحه نمایش
ستون ها
اگر ستون های تصویر، ویدئو و متن واکنش گرا نباشند، وقتی کاربر مثلاً با تلفن همراه به صفحه شما دسترسی پیدا می کند، محتوا لود نمی شود، فقط قسمتی که در صفحه می بینید بارگذاری می شود، یعنی . ، صفحه باید به اندازه صفحه بارگذاری شود، در غیر این صورت صفحه شما دچار مشکل خواهید شد.
استفاده از px%
به جای استفاده از مقادیر حداقل و حداکثر برای طول، عرض و ارتفاع، بهتر است از px% برای تعریف قطعات و نسبت های نامگذاری شده به جای اندازه خاص استفاده کنید.
توجه به تایپوگرافی (بهینه سازی تایپوگرافی)
متن شما نباید خیلی بزرگ یا خیلی کوچک باشد تا کاربر بتواند روی آن بزرگنمایی کند. می توانید از ابزاری مانند FitText برای انعطاف پذیری تایپ فیس خود استفاده کنید.
بهینه سازی تصویر
تصاویر نقش بسیار مهمی در تاثیر بصری سایت شما دارند و با استفاده از آنها می توانید ارتباط موثرتری با مخاطب برقرار کنید، اما مشکل اینجاست که اگر تصاویر بهینه نباشند، سرعت سایت (یک سایت ریسپانسیو کمتر لود می شود. بیش از چهار ثانیه) و به این ترتیب کاربران را از دست خواهید داد. برای بهبود این مشکل می توانید از ابزارهای رایگان مختلفی مانند TinyPng برای کاهش حجم تصاویر برای حفظ کیفیت و بهبود سرعت سایت استفاده کنید.
جمع بندی
در نهایت یک طراحی وب ریسپانسیو با توجه به فضای مدرن و حضور پررنگ کاربرانی که از موبایل برای جستجو و دنبال کردن استفاده می کنند، می تواند برگ برنده ای در عرصه رقابت باشد. به احتمال زیاد ترافیک بیشتری دریافت می کند و در نتیجه رتبه های بالاتر و در نهایت فروش بیشتری کسب خواهید کرد.
درباره این سایت