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

تلفن‌های هوشمند به سرعت از فناوری جدید گران قیمت و مهیج به بخشی دائمی زندگی روزمره تبدیل شده‌اند. امروز برای هر کسی تقریباً غیرممکن است که بدون به همراه داشتن موبایل خود، خانه را ترک کند. از اتاق انتظار بیمارستان تا لابی‌های تئاتر، مشاهده افرادی که به موبایل‌هایشان خیره شده‌اند، یک منظره عادی است. در نتیجه پاسخ این سوال برای دارندگان سایت مهم می‌شود که چگونه یک سایت ریسپانسیو داشته باشیم؟ در واقع سازگاری وب سایت‌ها با تلفن‌های همراه به یکی از دغدغه‌های اصلی همه تبدیل شده است.

برای توسعه دهندگان وب سایت، این بدان معناست که وقت آن رسیده که وب سایت شما یک نسخه مناسب با موبایل یا به اصطلاح Mobile Friendly، جهت ارائه یک تجربه عالی برای نسل جدید کاربران داشته باشد.

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

 

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

ممکن است بارها قبلاً این مورد را شنیده باشید، اما مجدد این را می‌گوییم که ظاهر وب سایت شما باید در تلفن همراه مناسب باشد و کاربران به سهولت با موبایل‌های خود بتوانند به تمامی بخش‌های سایت شما دسترسی داشته باشند.

 

نحوه بررسی ریسپانسیو بودن وب سایت

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

 

جهت این کار، Google ابزاری برای تست موبایل تحت عنوان mobile-friendly testing tool فراهم نموده است. URL خود را در کادر جستجو وارد نمایید. شما نه تنها در مورد سازگاری نسخه سایت خود با موبایل وب سایت سریع پاسخ خواهید گرفت، بلکه همچنین تصویری از صفحه‌ای که روی صفحه گوشی هوشمند می‌باشد و کاربرد آن را مشاهده می‌کند، به همراه لیستی از توصیه ها برای بهتر شدن تجربه تلفن همراه می‌باشد.

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

 

اما در صورتی که ابزارGoogle نتیجه قابل قبولی ارائه می دهد، نیازی نیست که به روزرسانی وب سایت شما برای تلفن همراه، اولویت اول باشد. اما شما هنوز هم می‌بایست با در نظر گرفتن راه‌کارهای ارائه شده، برای بهتر شدن تجربه تلفن همراه برای کاربران خود استفاده کنید.

 

۱۲ گام برای ساخت سایت ریسپانسیو یا سازگار با موبایل

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

 

۱. با طراحی سایت ریسپانسیو (Responsive) آشنا باشید.

 

اکثر کارشناسان طراحی وب موافقند که ساختن یک وب سایت واکنشگرا‌ (Responsive)، بهترین راه برای ایجاد سایتی است که هم در سیستم عامل دسکتاپ و هم در سیستم عامل موبایل، به خوبی کار کند.
دلیل طراحی سایت ریسپانسیو این است که یک وب سایت واکنشگرا‌، محتوای مشابه و اطلاعات موجود در هر دستگاهی را که به آن دسترسی دارید، در بر میگیرد، اما سایت به دستگاهی که در آن نمایش داده می شود، پاسخ می دهد و متناسب با آن ظاهر خود را بهینه می‌کند.

 

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

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

 

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

 

۲. اطلاعات را ساده کرده و مسیریابی در سایت را برای کاربرانتان راحت کنید.

 

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

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

 

اگر مطمئن نیستید بازدید کنندگان تلفن همراه شما هنگام مراجعه به سایت شما به دنبال چه هستند ، از تجزیه و تحلیل گوگل استفاده کنید. در Google Analytics، می توانید Traffic Mobile را به عنوان یک بخش در بخش Behavior اضافه کنید که به شما این امکان را می دهد تا بدانید بازدید کنندگان موبایل چگونه با وب سایت شما ارتباط برقرار می‌کنند و به شما این امکان را میدهد که بهینه سازی سایت برای موبایل را در اولویت انجام دهید.

 

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

 

۳. تبلیغات و متن‌های تبلیغاتی و متفرقه را در نسخه موبایل مسدود نمایید.

هیچکس تبلیغات و متن های تبلیغاتی و متفرقه را در هیچ زمینه‌ای دوست ندارد، اما تصور کنید هنگامی که می خواهید متن اصلی را در صفحه کوچک موبایل بخوانید و یک پنجره تبلیغاتی بزرگ یا پاپ آپ (pop Up) جلوی دید شما را بگیرد، که این بسیار آزار دهنده است.

 

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

 

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

 

۴. افزایش سرعت سایت را در اولویت قرار دهید.

شاید روزهای اینترنت dial-up را به یاد بیاورید که می‌بایست بی صبرانه منتظر می‌ماندید تا وب سایت‌ها به آرامی بارگیری شوند. اما اکنون که سرعت اینترنت سریعتر شده است، اگر وب سایت شما با سرعت بالای اینترنت، به کندی باز می‌شوند، مخاطبان شما منتظر نخواهند ماند و به سایر سایت‌های سریعتر مراجعه خواهند نمود. با خرید هاست پرسرعت می‌توان سرعت سایت خود را افزایش داده و از این طریق به سازگاری سایت خود برای تلفن‌های همراه کمک کنید.

 

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

 

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

• از AMP (صفحات شتاب دهنده تلفن همراه) استفاده کنید – AMP مخفف عبارات Accelerated Mobile Pages می‌باشد و چارچوبی است که Google برای سرعت بخشیدن به بارگذاری صفحات وب شما در تلفن همراه آن را پیشنهاد می کند. اگر وب سایت وردپرس دارید می توانید با پلاگین AMP شروع به کار کنید.
• تصاویر و CSS خود را فشرده سازی کنید – قسمت هایی از صفحه وب که کمترین سرعت را بارگیری می کنند مواردی هستند که حجم آن‌ها زیاد می باشد و فضای زیادی را اشغال می‌کنند، مانند تصاویر با وضوح بالا و CSS. می توانید با فشرده سازی اندازه پرونده تصویری خود، زمان بارگیری وب سایت را افزایش دهید، بنابراین بارگیری آنها بدون تأثیر منفی بر کیفیت آنچه مردم در سایت مشاهده می کنند، سریعتر انجام می شود.
• پلان میزبانی وب خود را بررسی کنید – اگر پلان وب سایت شما با نیازهای شما سازگاری نداشته باشد و به طور مثال منابع مصرفی سایت شما بیشتر از منابع اختصاص داده شده در هاست شما باشد، این مورد در سرعت بارگذاری سایت شما تأثیر منفی داشته و می‌بایست به دنبال هاستی باشید که منابع کافی برای سایت شما را فراهم کند.

 

۵. طراحی ساده انتخاب کنید.

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

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

 

این تفکر را در منوی خود نیز اعمال کنید. اگر وب سایت شما دارای صفحات و دسته بندی‌های زیادی است، ممکن است منطقی باشد که منوی بزرگی را در صفحه های دسک تاپ ارائه دهید. اما در تلفن همراه، می‌بایست آن را به مهمترین گزینه ها کاهش دهید. برخی وب سایت ها می توانند منوی خود را پشت دکمه با عنوان burger menu در موبایل قرار دهند. به این ترتیب فضای زیادی روی صفحه نمایش تلفن همراه نمی گیرد، اما بازدید کنندگان می توانند در صورت لزوم بر روی آن کلیک کنند تا منوی مربوطه ظاهر شود.

 

۶. اندازه دکمه‌ها را برای کار با موبایل به اندازه کافی بزرگ کنید.

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

 

بهترین راه برای رفع این مشکل و راحتی کار بازدیدکنندگان، استفاده از دکمه‌های بزرگتر است و در مورد جایی که روی صفحه نمایش آن‌ها قرار دارید فکر کنید. جوش کلارک، متخصص UX، می نویسد: “در حالی که انگشت شست می‌تواند به بیشترین نقاط صفحه نمایش روی همه تلفن‌ها به جز بزرگترین گوشی‌ها دسترسی داشته باشد، اما تنها یک سوم صفحه نمایش واقعاً یک منطقه بدون دردسر است: در پایین، در طرف مقابل انگشت شست.”

هر وقت دکمه‌ای به سایت خود اضافه می‌کنید، مدتی وقت بگذارید تا خودتان آن را در دستگاه‌های تلفن همراه مختلف مورد آزمایش قرار دهید. اطمینان حاصل کنید که انتخاب هر دکمه در تمام دستگاه ها کاملاً آسان است و اگر اینگونه نیست، آن را به روز کنید تا همینطور باشد.

 

۷. از فونت بزرگ استفاده کنید.

اگر سایز فونت کوچک باشد، خواندن بر روی صفحه نمایش کوچک بسیار سخت‌تر است. بهتر است حداقل از اندازه فونت ۱۴px در صفحات وب خود استفاده کنید، پس از تنظیم سایز فونت، حتماً آن را بررسی کنید که در موبایل چگونه به نظر می‌رسد.

همچنین بهتر است از فونت‌های استاندارد استفاده نمایید. هر فونتی که ممکن است مرورگر بازدید کننده شما برای نمایش آن، نیاز به بارگیری آن از سرور داشته باشد، سرعت بارگیری وب سایت شما را کم می‌کند.

 

۸. از Flash استفاده نکنید.

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

 

اکثر طراحان اکنون می دانند که از فلش در وب سایت استفاده نکنند ، اما اگر سایت شما چند سال پیش ساخته شده باشد و یا اخیراً به روزرسانی نشده است، هنوز هم ممکن است برخی از ویژگی هایی را داشته باشید که از فناوری منسوخ شده فلش استفاده می کنند. به طور کلی این فناوری را در وب سایت خود حذف کنید و به یک طراحی وب قوی دست پیدا کنید که بدون فلش کار کند.

 

۹. حتما از تگ Viewport Meta Tag استفاده کنید.

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

افزودن این مورد به html بسیار ساده است. تنها کافی است خطوط زیر را در html برای هر صفحه سایت وارد نمایید:

 

۱۰. تصحیح خودکار را برای فرم‌های داخل سایت خود خاموش کنید.

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

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

 

جهت این کار، در قسمت Input در کد html ، مطمئن شوید که autocorrect=off را در html قرار داده‌اید. اگر قبلاً این کار را نکرده‌اید، مطمئن شوید که فرم‌های شما کوتاه باشد.
بازدیدکنندگان را ملزم به ارائه اطلاعات بیشتر از حد لازم نکنید. مهم نیست که از چه دستگاهی استفاده می‌کنند، اگر پر کردن فرم یا جزئیاتی که بازدیدکننده نمی‌خواهد به اشتراک بگذارد، طولانی شود، برای آن‌ها مزاحمت ایجاد خواهند کرد.

 

۱۱. بخشی برای تغییر به نسخه دسکتاپ قرار دهید.

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

 

۱۲. به طور منظم تست موبایل را انجام دهید.

بهترین کاری که می توانید انجام دهید تا مطمئن شوید وب سایت شما تجربه خوبی در زمینه موبایل را دارد این است که خودتان مرتباً آن را روی دستگاه تلفن همراه مختلف آزمایش کنید. هر چند وقت یک بار، وب سایت خود را از طریق تلفن و تبلت و رایانه خود باز کنید و مدتی را صرف مرور قسمت‌های مختلف سایت کنید تا تجربه کاربران را در سایت خود مشاهده کنید. از کارمندان خود بخواهید که همین کار را انجام دهند.

 

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

 

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

 

هم اکنون با خرید هاست پرسرعت می‌توانید سرعت سایت خود را چندین برابر کرده و در نتیجه باعث افزایش بازدید سایت ریسپانسیو خود بر روی دستگاه‌های تلفن همراه شوید.