چگونه یک سایت واکنش گرا و طراحی ریسپانسیو داشته باشیم؟

سایت واکنش گرا – چرا لازم است که یک سایت واکنش گرا داشته باشیم؟ در سئوی ۲۰۱۸ این مسئله چقدر اهمیت دارد؟ سایت واکنش گرا برای موبایل از اهمیت ویژه ای برخوردار است. بخصوص در حال حاضر که بیشتر کاربران دوست دارند با موبایل و حتی با تبلت خود به سایت ها دسترسی داشته باشند.

کاربران کاملا از سطح کیفیتی که می توانند هنگام مرور وب در موبایل تجربه کنند آگاهی دارند. مثلا آنها می خواهند بدون هیچ زحمتی به اهداف خود برسند. بدون زوم کردن، بدون ناوبری گیج کننده، هیچ عنصر لمسی بیش از حد بتوانند به بخش های مختلف سایت دسترسی پیدا کنند. در یک کلام، معطل نشوند. در صورتی که هر کدام از این انتظارات برآورده نشود، باعث ناراحتی آنها می شود.

واقعا مهم است که سایتی ریسپانسیو داشته باشید و موبایل فرندلی بودن سایتتان را مد نظر بگیرید. حتما سایت خود را ریسپانسیو طراحی کنید تا کاربر با هر موبایلی براحتی بتواند از سایت شما بازدید کند.

۱-    طراحی تعاملی، که توسط گوگل تایید شده است.

 این طراحی به سایت شما اجازه می دهد بسته به دستگاه مورد استفاده برای ناوبری، ظاهر سایت متفاوت باشد و این نه تنها در مورد تنظیم اندازه صفحه نمایش مهم است، بلکه بیشتر در مورد عملکرد کلی سایت می باشد.

در حالت ایده آل، یک طراحی تعاملی باید تجربه مرور متحرک را در هر دستگاهی که کاربر انتخاب می کند ارائه دهد. این بدان معنی است که هنگام تبدیل یک سایت استاتیک به یک سایت تعاملی باید تلاش بیشتری کنید. فرض می شود که این سایت شرایط زیر را دارد:

  • زمان سریع بارگیری
  • سایت با مقادیر و اقدامات محرک (به جای ثابت) ؛
  • متن و تصاویر انعطاف پذیر؛
  • قابلیت استفاده بی عیب و نقص؛
  • نقطه توقف بهینه برای تغییرات طراحی

 من توصیه می کنم توجه خاصی به کل فصل UX داشته باشید که در آن عوامل کلیدی وجود دارد

مطالب مرتبط
فیات Abarth 124 Spider

که باعث می شود سایت شما در هر دستگاه موبایل کاربر پسند باشد.

نه تنها سایتتان باید انعطاف پذیر باشد، بلکه باید مد نظر داشته باشید که در موبایل هایی با صفحات کوچکتر، تمام اجزای سایت که از اهمیت کمتری برخوردار هستند، نمایش داده نشوند. اگر بارگذاری سایت شما زمان ببرد، انعطاف پذیری سایت‌تان به شدت افت خواهد کرد.

۲- سایت واکنش گرا  و زمان بارگذاری

بر اساس بررسی سرعت صفحه موبایل گوگل، زمان بارگذاری صفحه از یک ثانیه تا شش ثانیه متغیر بوده و سرعت جست وجو ۱۰۶ درصد افزایش می یابد.

گوگل اعلام کرد از ژوئیه ۲۰۱۸،  عامل رتبه بندی، به روز رسانی سرعت صفحه در جستجوهای انجام شده توسط موبایل خواهد شد.

افزایش سرعت بارگیری سایت

۱- بهینه سازی زمان بارگیری

فشرده سازی تصاویر شما ساده ترین راه برای بهبود UX موبایل و سرعت صفحه است. شما می توانید یک لینک آماده برای دانلود تصاویر فشرده خود را در WebSite Auditor دریافت کنید. در پروژه خود به تجزیه و تحلیل محتوا بروید و یک صفحه که باید تجزیه و تحلیل کنید را انتخاب کنید. به صفحه<Audit  فاکتورهای فنی بروید، به سرعت صفحه (دسکتاپ) بروید، بر روی تصاویر Uncompressed  کلیک کنید و در بخش How to fix درج کنید.

۲- سایت واکنش گرا  و عملکرد صفحه را ارزیابی کنید.

در حال حاضر، پیشنهاد ابزاری که به شما کمک کند تا سایت شما تحت تاثیر این بروز رسانی سرعت قرار بگیرد سخت است. با این حال، گوگل توصیه می کند گزارش تجربه کاربری کاربران   Chrome یا آمار بازدید صفحه را دنبال کنید.

۳- صفحه های سریع متحرک

صفحات سریع موبایل (AMP) یک پروژه اپن سورس است که به محتوای سایت موبایل اجازه می دهد تا تقریبا بلافاصله (به دلیل ساده تر و بسیار سبک تر از HTML ارائه شده از نسخه ذخیره شده گوگل میزبان) ارائه شود. این ابتکار توسط گوگل حمایت شده است، اما متعلق به آن نیست و توسط Bing، Baidu، توییتر،  Pinterest و شرکت های دیگر پشتیبانی می شود.

مطالب مرتبط
دانشمندان دریافته اند که مگس ها از داشتن رابطه جنسی لذت می برند و اگر نتوانند جفت گیری کنند، به مصرف الکل روی خواهند آورد

هنگامی که اولین بار در سال ۲۰۱۵ ظاهر شد، پروژه بر ناشران متمرکز بود. گوگل نیز به غیر از نمایش فوری صفحات موبایل خود، مقالات خبری را در گزینه  Top Stories، در نمایش نتایج جستجوی خود قرار داد.

۴- برنامه های پیشرفته وب

به دنبال بحث همگرا بودن دستگاه، بیایید نگاهی به یک روند دیگر ۲۰۱۷  Progressive Web – Apps (PWAs)  که قطعا تا سال ۲۰۱۸ ادامه یابد- بیاندازیم.

در حالی که یک صفحه وب، اگر درست اجرا شود، می تواند باعث شود کاربران فکر کنند که آن یک برنامه بومی هست (هر چند که در یک فروشگاه App منتشر نشده باشد) با توجه به این واقعیت که سرعت بارگذاری صفحات همراه با بهترین عملکرد یک برنامه بومی ترکیب شده است. اگر به یک برنامه نیاز دارید، اما مطمئن نیستید که بتوانید هزینه را پوشش دهید قطعا یک گزینه مناسب است.
PWA ها را می توان بر روی گوشی نصب کرد، آنها یک آیکون برنامه، صفحه نمایش تمام صفحه بدون نوار آدرس، قابلیت های آفلاین و آنلاین و اطلاعیه ها را خواهند داشت. به علاوه، آنها نیازمند نگهداری، بهینه سازی و تلاش های تبلیغاتی بسیار کمتری هستند.

گوگل نمونه ای را با ایجاد یک گذار از منابع وب خود به PWA ها، مانند ترافیک، ورزش، رستوران، آب و هوا، Google Contribute و Maps-Go، تنظیم می کند.

اگر فکر می کنید PWA ها بیشتر از برنامه های اندرویدی و کروم هستند، باید بدانید که اپل در نهایت اذعان می کند که Safari قصد پشتیبانی از فایل های Workforce را دارد که با PWA ها  تا حد زیادی کار می کنند.

 ۵- سایت واکنش گرا  و طراحی موبایل

-تصاویر، فونت ها، سرفصل ها

سایت خود را در دستگاه های مختلف آزمایش کنید. برای اطمینان از این که همه عناصر بصری پاسخگو هستند، به این نیاز خواهید داشت. از فونت هایی استفاده کنید که برای خواندن راحت باشند و به چشم کاربر فشاری وارد نگردد.

مطالب مرتبط
تولید نسخه های جدیدی از لامبورگینی اوروس 2019 با قیمتی بالغ بر 200 هزار دلار

– پاک کردن Navigation

 Navigation نباید اولین و تنها چیزی باشد که کاربر هنگام باز کردن سایت شما می بیند. بهتر است زمانی که به آن نیاز دارید ظاهر شود و البته شما باید بدانید که چگونه آن را احضار کنید.

بهترین سناریو این است که به اصطلاح از منوی همبرگری استفاده کنید – جعبه ای با میله های افقی که معمولا در گوشه بالا سمت راست قرار می گیرند.

عمل کردن دکمه ها پس از تماس  

لطفا به یاد داشته باشید، هر زمان که هر عنصر لمسی را به نسخه موبایل خود اضافه کنید، آن را به اندازه کافی بزرگ کنید تا انگشتان کاربر به راحتی بتواند روی آن کلیک کند. اگر چندین دکمه در نزدیکی هم وجود دارند، آنها نباید بیش از حد به یکدیگر نزدیک شوند – در غیر این صورت، کاربر می تواند روی دکمه اشتباه کلیک کند و واقعا عصبانی شود. هرگز از دکمه های غیر فعال استفاده نکنید.

پنجره های پاپ آپ

درست است که گوگل بر روی صفحات پیشنهادی متمرکز است ولی نه همه آنها. اگر مجبور به استفاده از پاپ آپ ها هستید، به صورت هوشمندانه و با دقت آنها را طراحی و پیاده کنید.

هیچ کس پنجره های تبلیغاتی، با یک دکمه “X” کوچک که به سختی قابل مشاهده است و کل صفحه را اشغال می کند دوست ندارد.

نظرات بسته شده است.