سرگئی لوکوشکین

1394/03/26 | | 0 نظر

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

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

چرا نسخه موبایلی یک وب سایت یا طراحی ریسپانسیو برای یک کسب و کار مهم است؟

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

چگونه یک وب سایت را موبایل فرندلی کنیم؟

دو رویکرد برای حل این مشکل وجود دارد:

1. یک نسخه جداگانه از سایت ایجاد کنید که در دستگاه تلفن همراه باز می شود
2. یک وب سایت با طراحی واکنش گرا ایجاد کنید که با هر اندازه صفحه سازگار باشد

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

و این همان چیزی است که روی صفحه نمایش یک گوشی هوشمند به نظر می رسد


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

5 دلیل اصلی برای ایجاد یک وب سایت تجاری واکنش گرا

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

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

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

بنابراین، چهار راه کلیدی برای تطبیق سایت با نسخه موبایل وجود دارد.

روش اول - طراحی واکنشگرا

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

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

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

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

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

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

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

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

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

اما حتی در اینجا هم بدون اشکال نبود:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

هم ترازی

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

یک انجمن

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

و قطع ارتباط

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

لیست ها

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

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

تکمیل خودکار

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

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

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

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

برخی از آمار

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

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

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

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

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

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

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

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

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

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

کتاب جدیدی با عنوان «بازاریابی محتوای رسانه‌های اجتماعی: چگونه وارد ذهن مشترکان شویم و آنها را عاشق برند خود کنیم» منتشر کرده‌ایم.

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

ویدیوهای بیشتر در کانال ما - بازاریابی اینترنتی را با SEMANTICA یاد بگیرید

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

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

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

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

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

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

چگونه کار می کند

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

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

اصول خاصی وجود دارد و اجرای آنها به مهارت های برنامه نویسی و چیدمان نیاز دارد.

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

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

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

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

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

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

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

مزایا و معایب نسخه موبایل

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

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

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

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

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

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

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

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

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

دومین گزینه دشوار که به شما امکان می دهد نسخه موبایل سایت را از طریق رایانه بررسی کنید، نصب یک مرورگر خاص است. به عنوان مثال، Opera Mobile Classic Emulator. نسخه های آن برای ویندوز، مک و لینوکس وجود دارد. متأسفانه، این توسعه مبتنی بر موتور قدیمی Presto است که قبل از نسخه 12 مرورگر اپرا استفاده می شد و واقعاً نشان نمی دهد که چگونه سایت در یک مدرن نمایش داده می شود. مرورگر موبایل. از سال 2013 مرورگر اپراروی موتور نرم افزار Blink کار می کند، بنابراین بهتر است سایت موبایل را بررسی کنید مرورگر مدرن. این می تواند اپرا یا کرومکه روی همان موتور Blink مبتنی بر WebKit که در Apple Safari استفاده می‌شود، اجرا می‌شوند.

باید در آن گنجانده شود مرورگرهای مشخص شدهحالت ویژه توسعه دهنده (F12 در کروم یا Ctrl+Shift+i در Opera) و به حالت دستگاه تلفن همراه بروید:

پس از آن، به راحتی می توانید ببینید که سایت در یک دستگاه تلفن همراه چگونه به نظر می رسد.

اگر ارزیابی شخصی بصری برای بررسی یک سایت موبایل کافی نیست، وجود دارد برنامه های ویژه، که می تواند سایت را از نقطه نظر یک دستگاه تلفن همراه تجزیه و تحلیل کند و نه تنها ارزیابی کمی از تحرک سایت ارائه دهد، بلکه توصیه هایی در مورد بهبود دید سایت در تلفن های هوشمند نیز ارائه می دهد. در سایت ما فقط چنین خدماتی مبتنی بر فناوری وجود دارد Google Mobile Friendly. فقط باید آدرس سایت خود را در یک خط خاص وارد کنید و روی دکمه "بررسی" کلیک کنید. ربات به آدرس مشخص شده، یک اسکرین شات از صفحه در قالب دستگاه تلفن همراه می گیرد و در مورد کیفیت سایت موبایل شما نظر می دهد.
مثلا این.

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

در حال حاضر، هنگام ساخت نسخه های موبایلی سایت ها، 3 روش اصلی برای ساخت آنها وجود دارد:

• طراحی تطبیقی؛
• نسخه موبایل مجزای سایت؛
• RESS (طراحی پاسخگو + سمت سرور).

هر یک از روش ها مزایا و معایب خود را دارد که سعی می کنم به طور مفصل توضیح دهم.

طراحی تطبیقی

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

صفحه رسانه @ و (حداکثر عرض: 1600 پیکسل) (div.for-example (عرض: 1500 پیکسل؛) ) صفحه رسانه @ و (حداکثر عرض: 1280 پیکسل) (div.for-example (عرض: 1100px;) ) @media صفحه و (حداکثر عرض: 1024 پیکسل) (به عنوان مثال div.(عرض: 980 پیکسل؛))

مزایای طراحی واکنشگرا

• سهولت توسعه -با طرح تطبیقی، کل ساختار سایت به طور خودکار با عرض های مختلف صفحه تنظیم می شود. برای به دست آوردن یک محصول کارآمد، نیازی نیست همه چیز را از ابتدا بنویسید - فقط CSS و HTML را تغییر دهید... با توجه به در دسترس بودن چارچوب هایی مانند Bootstrap، چنین توسعه ای با یک پیاده سازی استاندارد چندان دشوار نیست. علاوه بر این، پشتیبانی از چنین محصولی کار نسبتاً ساده ای خواهد بود.
• یک URL -ما را از تغییر مسیرهای غیر ضروری و نیاز کاربر به یادآوری آدرس نسخه موبایل (حتی اگر فقط پیشوند m باشد) نجات می دهد. همچنین، وجود یک آدرس واحد تأثیر مثبتی بر ارتقای سایت خواهد داشت، زیرا برای موتورهای جستجو "راحت تر" خواهد بود.

معایب طراحی واکنشگرا

• کارهای متفرقه -وظایف معمول کاربران "موبایل" سایت های بزرگ معمولاً با کارهای کاربران رایانه شخصی متفاوت است. اگر مشتری بانک هستید، به احتمال زیاد، در نسخه موبایل سایت به طیف بسیار محدودی از اطلاعات علاقه مند خواهید شد - آدرس های نزدیکترین شعب، دستگاه های خودپرداز و غیره.
  به طور کلی، با چیدمان تطبیقی، رایج‌ترین رویکرد این است که یک کپی از یک سایت معمولی، پیاده‌سازی نیازهای همه گروه‌های مخاطب هدف در طرح‌بندی گوشی‌ها است. اما پس از آن می توانید قابلیت استفاده را فراموش کنید. بخش‌های ثانویه لازم برای پنج درصد بازدیدکنندگان باعث ایجاد ناراحتی برای اکثر مشتریان می‌شود.
"وزن" سایت ها همچنان یک مانع جدی برای کاربران تلفن همراه است. این بدان معناست که برخی از عناصر فعال معمولی سایت های دسکتاپ، از جمله نقشه های جاسازی شده، فیلم ها، ماشین حساب های وام و منوهای متحرک در سایت های تلفن همراه، باید با جایگزین های سبک تر جایگزین شوند. آیا طراحی واکنشگرا می تواند این توانایی را به ما بدهد؟ در یک پیاده سازی محبوب، کاربر با صفحه نمایش کوچک باید کل صفحه را بارگذاری کند تا تنها بخشی از آن را ببیند. به عنوان مثال، اگر وزن نسخه دسکتاپ طرح اصلی 200 کیلوبایت و وزن نسخه موبایل 50 کیلوبایت دیگر باشد، برای مشاهده آن باید 250 کیلوبایت دانلود کنید. البته می توانید از فشرده سازی کد صفحه استفاده کنید، اما درخواست های اضافیهمچنان به سرور خواهد رفت.
• ناامیدی -یکی از مزیت های انکارناپذیر نسخه موبایل: اگر آن را دوست ندارید، می توانید آن را خاموش کرده و به یک دامنه معمولی تغییر دهید. وب سایت های طراحی ریسپانسیو این انتخاب ساده و در عین حال مهم را ارائه نمی دهند. اگر چیدمان سفارشی ناخوشایند، باگ است، یا اگر یک عنصر ناوبری مهم را پنهان می کند، آن را به حال خود رها کنید: برای دیدن دوباره آن کاری نمی توانید انجام دهید. شما باید برای جستجوی وب سایت دسکتاپ یا رقیب بدوید. می‌توانید برای دور زدن این محدودیت، «عصا» بیابید (از کوکی‌ها استفاده کنید و شیوه نامه‌های مختلف را درج کنید). اما این رویکرد توسعه را پیچیده می کند.

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

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

برای راحت کردن سایت برای کاربران تلفن همراه، آنها اغلب نسخه های جداگانه ای از سایت ها را نیز ایجاد می کنند - مخصوصاً برای کاربر با تلفن هوشمند / تبلت. رایج ترین روش هدایت کاربران تلفن همراه به یک زیر دامنه خاص (m.example.com، mobile.example.com و غیره) است. احتمالاً در 99٪ موارد، نسخه موبایل یک نسخه اصلی حذف شده است - فقط با عملکردی که به گفته توسعه دهندگان برای کاربران دستگاه های تلفن همراه و تبلت ها ضروری و مفید خواهد بود.

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

• سهولت تغییراز آنجایی که سایت، به طور واقعی، جدا از نسخه اصلی وجود دارد، ایجاد تغییرات در آن فقط مربوط به نسخه تلفن همراه بسیار ساده تر است، زیرا نسخه موبایل اغلب عملکرد اضافی و غیر ضروری را ارائه نمی دهد.
• کاربر پسندی -نسخه موبایل معمولاً در مقایسه با نسخه دسکتاپ بسیار ساده شده است، بنابراین کاربر مجبور نیست برای اطلاعات مورد نیاز خود راه دور برود.
• سرعت -به دلیل همین ساده بودن سایت، نسخه موبایل سریعتر بارگذاری می شود. این برای کاربرانی که هنوز از GPRS یا 3G ضعیف استفاده می کنند ضروری است.
• انتخاب-اغلب در نسخه موبایل امکان تغییر به نسخه اصلی سایت وجود دارد.

معایب نسخه موبایل

• آدرس های متعدد -
• ناراحتی کاربر -آدرس های مختلف برای نسخه های دسکتاپ و موبایل. برای برخی، این ممکن است به یک مزیت تبدیل شود، برای برخی دیگر می تواند یک عامل بسیار آزاردهنده باشد، زمانی که برای مشاهده راحت سایت، باید یک آدرس دیگر را به خاطر بسپارید. موتورهای جستجو نیز مشکلاتی دارند: برای جلوگیری از محتوای تکراری، سئوکاران باید از متا تگ های rel="alternative" و rel="canonical" استفاده کنند. علاوه بر این، هنگامی که یک کاربر تلفن همراه جستجوی گوگلبا کلیک بر روی پیوند در نتایج، او به نسخه دسکتاپ منتقل می شود یا به نسخه موبایل هدایت می شود. اما اگر نسخه موبایل این صفحه وجود نداشته باشد با خطا مواجه می شود.
• محدودیت -ایجاد یک سایت مجزا برای موبایل به معنای خلاص شدن از شر برخی از محتوا و عملکرد است. علاوه بر این، ممکن است دو مجموعه متفاوت از محتوا داشته باشید که می تواند بر تصویر کلی اطلاعات تأثیر منفی بگذارد.

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

RES

خود گوگل با وجود اینکه از طراحی ریسپانسیو توسط وبمسترها پشتیبانی می کند اما از سیستم متفاوتی در محصولات خود استفاده می کند. برای مثال، اگر بازدید کنید، صفحه نخستتحت User-Agent های مختلف، می توانید HTML های مختلف را برای دستگاه های مختلف ببینید. RESS - طراحی پاسخگو + سمت سرور. مثال پیاده سازی، با طرح "روی زانو":

$DS = DIRECTORY_SEPARATOR. require_once(dirname(__FILE__). $DS . "libraries" . $DS . "browser.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE)($tmpl = "template.m.php"; ) other if($device == DEVICE_TYPE_TABLET)($tmpl = "template.t.php";) else($tmpl = "template .php"; ) include(dirname(__FILE__). $DS . "templates" . $DS . $tmpl);

مزایای RES

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

• به حداقل رساندن ترافیک -جاوا اسکریپت غیر ضروری را می توان از HTML حذف کرد که باعث آزاد شدن CPU، حافظه و حافظه پنهان در دستگاه تلفن همراه می شود. همچنین می تواند به طور خاص html و css را بهینه سازی کند.
• امکان استفاده از هدف گذاری وجود دارد -به عنوان مثال، برای دستگاه های Android، پیشنهاد دانلود برنامه از GooglePlay و برای اپل - از iTunes را ارائه دهید. برای هر دستگاه، می توانید طرح خود را ایجاد کنید.

منفی

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

به طور کلی، RESS بهترین گزینه از سه گزینه پیشنهادی است، با این حال، در طول توسعه به تلاش بسیار بیشتری نیاز دارد.

خلاصه

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