نسخه موبایلی سایت: چگونه این کار را انجام دهیم؟ طراحی تطبیقی

فهرست مطالب:

نسخه موبایلی سایت: چگونه این کار را انجام دهیم؟ طراحی تطبیقی
نسخه موبایلی سایت: چگونه این کار را انجام دهیم؟ طراحی تطبیقی
Anonim

امروزه اکثر مردم از طریق گجت های موبایل - تبلت، گوشی - آنلاین می شوند، از این نظر بهینه سازی وب سایت نیز در حال رسیدن به سطح جدیدی است. اگر کاربر وارد شود و ببیند که سایت برای دستگاه های تلفن همراه بهینه نشده است: تصویر قابل مشاهده نیست، دکمه ها خارج شده اند، فونت ها کوچک و ناخوانا هستند، طراحی کج است - 99 از 100٪ که او خارج می شود و شروع به جستجوی راحت تر دیگری کنید. و ربات جستجو کادر بی ربط بودن منبع را بررسی می کند، یعنی با عبارت جستجو مطابقت ندارد. بنابراین، طراحی صفحه باید با دستگاه های مختلف تلفن همراه سازگار شود. نسخه موبایلی سایت چیست، چگونه می توان آن را ساخت و بهترین راه برای اعمال آن چیست؟ در این مقاله بیشتر بخوانید.

بنابراین چهار راه کلیدی برای سازگاری سایت شما با موبایل وجود دارد.

نحوه ساخت نسخه موبایلی سایت
نحوه ساخت نسخه موبایلی سایت

روش اول - طراحی پاسخگو

قالب های ریسپانسیو تصویر سایت را بسته به اندازه صفحه تغییر می دهند. به عنوان یک قاعده، آنها بر روی استانداردهای 1600، 1500، 1280، 1100، 1024 و 980 پیکسل تنظیم می شوند. برای پیاده سازی از CSS3 Media Queries استفاده می شود. طراحی سایت خود تغییر نمی کند.

مزایای این روش عبارتند از:

  • توسعه راحت،از آنجایی که ساختار خود را با پارامترهای صفحه تطبیق می دهد، و هر به روز رسانی نیازی به توسعه طراحی از ابتدا ندارد، کافی است CSS و HTML را بهینه کنید؛
  • یک URL – کاربر نیازی به به خاطر سپردن نام های متعدد ندارد، نیازی به تغییر مسیر (تغییر مسیر از یک آدرس به آدرس دیگر) نیست، که می تواند کار یک وب مستر را پیچیده کند و جستجو را آسان تر می کند. موتوری برای مرتب‌سازی و رتبه‌بندی یک منبع با یک آدرس.

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

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

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

طراحی سایت
طراحی سایت

روش دوم - نسخه جداگانه سایت

این روش بسیار رایج است و اغلب در خوانایی بیشتر سایت در دستگاه تلفن همراه موفق است. ماهیت آن ایجاد یک نسخه جداگانه از صفحه است که برای برنامه ترسیم شده و در یک URL یا زیر دامنه جداگانه قرار دارد، به عنوان مثال m.vk.com. در عین حال، عملکرد اصلی حفظ می شود، طراحی سایت فقط متفاوت به نظر می رسد. مزایای این روش واضح است:

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

اما در اینجا نیز اشکالاتی وجود داشت:

  • آدرس های متعدد - نسخه دسکتاپ و موبایل سایت. چگونه کاربر دو گزینه را به خاطر بسپارد؟ استادان وب اغلب یک تغییر مسیر (redirect) از نسخه دسکتاپ به نسخه موبایل را تجویز می کنند، اما در عین حال، اگر این صفحه در تلفن همراه باشدنسخه وجود ندارد، کاربر یک خطا دریافت می کند. در اینجا، مشکلاتی برای موتورهای جستجو ایجاد می‌شود که رتبه‌بندی 2 منبع یکسان را دشوار می‌دانند و این به طور مستقیم بر ارتقاء تأثیر می‌گذارد.
  • نسخه موبایلی سایت از طریق رایانه، اگر کاربر به اشتباه از آن بازدید کند، مضحک به نظر می رسد که می تواند بر ترافیک نیز تأثیر بگذارد.
  • این نسخه اغلب به شدت محدود شده است، بنابراین کاربر عملکرد بسیار محدودی خواهد داشت. اما در عین حال، اگر چیزی کم است، بازدید کننده می تواند به نسخه کامل صفحه برود.

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

قالب های تطبیقی
قالب های تطبیقی

راه سوم - طراحی RESS

موتور جستجوی Google به طور فعال از این جهت از طراحی موبایل پشتیبانی می کند. این پیچیده ترین، پرهزینه ترین، اما موثرترین روش برای تطبیق سایت با تلفن یا تبلت است. RESS نام دارد. این یک منبع را در یک برنامه تلفن همراه هدف قرار می دهد که می تواند برای هر دستگاه جداگانه بارگیری شود. برای اندروید - با GooglePlay و برای اپل - با iTunes.

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

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

وب سایت گوگل موبایل
وب سایت گوگل موبایل

ارزان ترین راه برای ساخت وب سایت تلفن همراه

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

بارگیری قالب‌های ویژه (افزونه‌ها) برای طراحی واکنش‌گرا. به عنوان مثال، WP Mobile Detector، WordPress Mobile Pack، WPSmart Mobile و دیگران. آنها به نمایش صحیح سایت در تلفن کمک می کنند، در حالی که نکاتی را در مورد مواردی که باید برای تطبیق بهتر صفحه با نسخه تلفن همراه اصلاح شود، دریافت خواهید کرد.

البته، این روش به سختی برای منابع جدی مناسب است. بلکه این ویژگی رایگان برای سایت های کوچک و ساده، وبلاگ ها، فیدهای خبری در نظر گرفته شده است. فراموش نکنید که موتور جستجوی گوگل و همچنین Yandex، امروزه تقاضاهای جدی برای نسخه های تلفن همراه دارد، بنابراین شانس زیادی برای کاهش موقعیت خود با استفاده از این روش وجود دارد.

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

نسخه موبایلی سایت اندروید
نسخه موبایلی سایت اندروید

اصول ایجاد نسخه های موبایل

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

نسخه موبایلی سایت از رایانه
نسخه موبایلی سایت از رایانه

هر چیز غیر ضروری را حذف کنید

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

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

تراز

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

اتحاد

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

و قطع ارتباط

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

فهرست ها

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

Fixed در صورتی مفید است که کاربر دقیقا بداند به دنبال چه چیزی است. مثلا شهر، شماره یا تاریخ. گزینه دوم برای نام های پیچیده طولانی یا برای مواردی که تنوع زیادی از یک و همان وجود دارد مناسب استبا همین نام، و هر لیست کشویی کاربر را یک قدم به هدف نزدیکتر می کند. گزینه تعویض خودکار بیشتر زمانی استفاده می شود که بازدیدکننده به کمک نیاز داشته باشد. به عنوان مثال، یک سایت بافتنی پیشنهاد خرید سوزن بافندگی را می دهد. کاربر عبارت جستجوی "سوزن بافندگی فلزی" را وارد می کند و در راهنمای ابزار "سوزن بافندگی 5 میلی متر"، "سوزن بافندگی 4.5 میلی متر" و غیره را می بیند.

تکمیل خودکار

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

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

همه چیز خوانده می شود، همه چیز مشاهده می شود

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

برخی آمار

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

اعداد به شرح زیر است. امروزه، ظاهراً 87٪ از مردم از ابزارها استفاده می کنند، به جز کوچکترین کودکان و برخی افراد مسن. اقتصاددانان پیش‌بینی می‌کنند که تجارت سیار طی 5 سال آینده 100 برابر خواهد شد. در عین حال، تنها 21 درصد از سایت ها برای کار با دستگاه های تلفن همراه سازگار هستند. این بدان معنی است که تنها یک پنجم کوچک از ترافیک اینترنت و بازار تجارت الکترونیک را اشغال کرده است.

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

نسخه موبایلی سایت به صورت رایگان
نسخه موبایلی سایت به صورت رایگان

جایی که به نسخه موبایل نیاز دارید

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

بدون نسخه موبایل نمی توان وجود داشت:

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

به جای نتیجه گیری

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

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

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

توصیه شده: