نوشته شده توسط مهندس کلانتری
آدرس کوتاه: https://sitedar.com/?p=33
این روزها خیلی از مشتریان ما در دارکوب درباره طراحی واکنش گرا (Responsive) و AMP برای وب سایت جدیدشان می پرسند. من سعی می کنم در این مقاله تا جایی که می توانم اطلاعات مفیدی در اختیار شما قرار دهم.
برای یک وب سایت موفق در کسب و کار اینترنتی شما به یک وب سایت سازگار با دستگاه های موبایل نیاز دارید. دستگاه های موبایل امروز بسیار پر طرفدار هستند تا جایی که امروز 75 درصد کاربران سفارشات خود را با دستگاه های موبایل انجام می دهند. برای پاسخ به این نیاز و روند رفتار کاربران یک طراح وب سایت بایستی طراحی سازگار با موبایل Mobile-Friendly را در نظر داشته باشد. طراحی واکنش گرا یا ریسپانسیو یکی از این روش ها برای سازگاری با دستگاه های موبایل است. در حالی که AMP یا Accelerated Mobile Pages راه دیگری است برای ایجاد صفحات وب صرفا سریع بار گذاری شونده برای دستگاه ها موبایل است.
لیست مطالب
شما می توانید با استفاده از مدیا کوئری های CSS به طراحی واکنش گرا دست پیدا کنید. مدیا کوئری ها به صفحات وب اجازه می دهند از کدهای متفاوت CSS نسبت به اندازه صفحه نمایش کاربر استفاده کنند. نسبت به اندازه عرض دستگاه موبایل، برنامه نویس کد هایی در طراحی قرار می دهد که اندازه صفحات وب سایت متناسب با اندازه عرض دستگاه موبایل از آن ها استفاده کند. در این نوع طراحی، طراح وب سایت حتی می تواند المان های صفحه را نسبت به سایز صفحه حذف یا اضافه کرده، یا می تواند طراحی بخشی از آن را تغییر دهد مثلا نوار منوی بالای وب سایت را به منوی همبرگری در صفحات کوچک تر تبدیل کند.
حال همانطور که از اسم طراحی سایت ریسپانسیو مشخص است این نوع طراحی نسبت به AMP بر انعطاف پذیری طراحی صفحات وب تمرکز دارد.
علاوه بر این ما نمی توانیم برای موفقیت کسب و کار خود سئو (بهینه سازی وب سایت برای موتورهای جستجو) و گوگل را فراموش کنیم. امروز گوگل به عنوان مهم ترین موتور جستجوگر اینترنتی شناخته می شود. گوگل اهمیت زیادی به چگونگی تجربه بازدید کاربران و سرعت صفحات وب سایت ها می دهد. هنوز بسیاری از کاربران از وب سایت ها به جای اپلیکیشن های موبایل برای بازدید یک کسب و کار آنلاین استفاده می کنند. یعنی تنها بخشی از کاربران اندروید و iOS برای بازدید از یک کسب و کار از App ها بهره می برند.
گوگل در صفحات نتایج جستجو برای لینک های صفحات سازگار با دستگاه های موبایل نشانه ایی را به کاربران نمایش می دهد. امروز تقریبا 90 درصد وب سایت ها با دستگاه های موبایل سازگاری دارند، بنابراین گوگل ایده دیگری را مطرح کرد و آن AMP است در آن هدف ایجاد صفحات سبک و سریع بار گذاری شونده ی وب برای دستگاه های موبایل است.
AMP یا صفحات موبایل سریع یک نوآوری متن باز از گوگل است. که یک فریم ورک طراحی وب برای صفحات سریع سازگار با موبایل می باشد. AMP تلاش دارد که حجم کد های استفاده شده در یک صفحه وب را کاهش دهد. و در کنار این AMP تکنیک های زیادی را به جهت بهینه سازی و بالا بردن سرعت بار گذاری صفحات و در دستگاه های موبایل را به کار می گیرد.
علاوه بر این شما برای پیاده سازی AMP در وب سایت خود نیازی به طراحی دوباره وب سایت کنونی خود ندارید و شما می توانید آن را بدون تغییر سایت فعلی پیاده سازی نمایید. و این زیبایی AMP است. پس AMP در مقابل طراحی واکنش گرا بر سرعت تمرکز دارد.
در AMP از AMP HTML، AMPJS و Google AMP Cache استفاده می شود و دو هدف اصلی دارد: یکی بهبود تجربه کاربران در دستگاه های موبایل و دوم توزیع آسان تر محتوا.
AMP به نوعی زیر مجموعه ایی از HTML می باشد و به همین جهت است که از آن نیز انتقاد هایی صورت می گرفته است. با این حال این نوع طراحی جایگزین طراحی واکنش گرا نیست.
مطالب صفحات وبی که از AMP استفاده می کنند به اصطلاح در رتبه صفر در بالای لیست نتایج جستجوی وب نمایش داده می شوند. این محتویات به صورت کادر های مربعی در ردیف اول در کنار یکدیگر قرار می گیرند و می توانند باعث بهتر دیده شدن آن صفحه در نتایج جستجو شوند. طراحی AMP پاسخی است به سوالات کوتاه که نیاز به پاسخی سریع دارند. مثلا اخبار یا پاسخ به اینکه رودخانه آمازون در کدام کشور هاست.
همانطور که گفتم AMP یک فریم ورک است که می تواند با وب سایت فعلی کار کند. علاوه بر این برای محتوای استاتیک مناسب است و تمرکز اصلی آن بر روی سرعت بارگذاری صفحات وب سایت می باشد. با سرعت بالاتر بارگذاری وب سایت نرخ پرش یا همان ترک وب سایت توسط بازدید کننده به علت کند بودن وب سایت کاهش پیدا می کند.
اما طراحی واکنش گرا یا Responsive از کوئری های موجود در CSS استفاده می کند و برای اضافه کردن آن لازم است طراحی وب سایت فعلی را تغییر یا حتی به کلی جایگزین کند. تمرکز این نوع طراحی بر انعطاف پذیری و سازگاری صفحه وب با عرض صفحه نمایشگر موبایل بوده است و می توان آن را برای همه ی وب سایت ها پیاده سازی کرد.
گوگل تایید کرده است که هر وب سایتی می تواند از AMP استفاده کند. من در اینجا چند نوع وب سایت را که پتانسیل بیشتری برای جذب ترافیک از این طریق AMP را دارند بررسی می کنم:
eBay یکی از مشهور ترین فروشگاه های اینترنتی نیز هم اکنون توانسته است با کمک AMP تعداد بیشتری کاربر را به سمت خود جذب کرده و درآمد بیشتری را بدست آورد. پس اگر شما هم در تجارت الکترونیک فعال هستید می توانید از AMP بهره ببرید.
کسب و کارها و وب سایت های زیادی هستند که دارند و یا می خواهند که از میوه و حاصل AMP برای خود برداشت کنند. AMP نیز در بسیاری از سیستم های مدیریت محتوا CMS از جمله وردپرس قابل دسترسی است. یعنی یک چهارم وب سایت ها می توانند از این تکنولوژی گوگل به نفع خود سود ببرند.
از سوی دیگر اگر در صفحه نتایج جستجو با دستگاه های موبایل دقت کرده باشید، می بینید که هنوز عبارات جستجوی زیادی هستند که برای آنها نتایج AMP نمایش داده نمی شود. علت آن این است که هنوز محتوایی مرتب با آن عبارت با AMP بهینه سازی نشده است. پس شما فرصت های زیادی دارید که محتوای خود را برای AMP بهینه سازی کنید تا بتوانید در رقابت با رقیبان در این زمینه گول رقابت را در صفحه نتایج جستجو بدست آوردید. چون تنها وب سایت شما برای آن عبارت محتوایی متناسب برای AMP تهیه دیده است. و این یکی از مشوق های گوگل برای توسعه و استفاده بیشتر از این نوع طراحی می باشد.
طراحی واکنش گرا راه حل پیشنهادی گوگل برای سازگار ساختن وب سایت ها با دستگاه کاربران موبایل است. اینکه ما وب سایتی داشته باشیم که در دستگاه های موبایل به خوبی قابل نمایش و بازدید نباشد اصلا برای کسب و کار و سئوی وب سایت مناسب نیست. گوگل به سازگاری وب سایت ها با دستگاه های موبایل بسیار اهمیت می دهد و بطور غیر مستقیم بر سئوی وب سایت شما تاثیر می گذارد. پس اگر شما در فکر طراحی یک وب سایت برای کسب و کار خود هستید ما در دارکوب به شما پیشنهاد می کنیم که طراحی واکنش گرا را انتخاب نمایید.
اما AMP با سرعت و فرصت هایی که برای دیده شدن محتوای وب سایت شما فراهم کرده است، می تواند نسبت به کسب و کار و امکان سرمایه گذاری شما در سایت توجیه پیاده سازی و سرمایه گذاری داشته باشد. این سریع بودن AMP کاربران را تشویق به کلیک کردن می کند و شما می توانید با AMP برای آگاهی دادن به کاربران از کسب و کار خود با کمک محتویات وبلاگ وب سایت تتان، تشویق کننده ی شروع فرآیند خرید از طریق صفحه نتایج جستجو باشید.