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

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

کمی تئوری

اکثر سایت های مدرن بر اساس یک یا آن سیستم مدیریت محتوا (CMS) یا یک موتور وب ساده کار می کنند. برای ظاهر سایت در موتور وب، i.e. سپس بازدیدکنندگان منبع چگونه آن را می بینند به به اصطلاح الگوها پاسخ می دهند.
قالب معمولاً مجموعه‌ای از فایل‌ها است که ظاهر یک سایت را مشخص می‌کند. هر موتور از الگوهای خود استفاده می کند، اما همه آنها یک چیز مشترک دارند - این یک فایل (ها) با جداول است سبک های cssو فایل(های) مسئول چیدمان صفحه، می تواند PHP، ASP، و غیره باشد. گزینه های عجیب و غریب بیشتری ممکن است، اما در هر صورت، خروجی موتور وب CSS و HTML خواهد بود، و احتمالا چیز دیگری. خب من پرت میشم

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

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

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

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

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

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

این امر به ویژه در صورتی صادق است که خود دستگاه به صورت افقی قرار گرفته باشد.

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

راه اندازی موتور وب

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

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

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

یک قالب ایجاد کنید

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

متا تگ ها و مقیاس بندی

یکی از موارد رایجی که باید بدون توجه به موتور مورد استفاده وجود داشته باشد، متا تگ ویژه است - درگاه دید.

این تگ ریاضی باید در قسمت قرار گیرد سردر کنار بقیه متا تگ ها و چیزی شبیه به این است:

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

به یاد داشته باشید، در همان ابتدا در مورد نحوه در نظر گرفتن این یا آن عنصر در صفحه در سایت های غیر بهینه شده نوشتم، اغلب باید از زوم، بزرگنمایی و بزرگنمایی استفاده کنید. بخش های جداگانهصفحات؟ بنابراین، پارامتر مقیاس اولیه = 1.0فقط مقیاس صفحه اولیه را روی 100٪ تنظیم می کند.
اگر مقیاس اولیه را برای دستگاه تلفن همراه مشخص نکنید، می تواند بسته به سیستم دستگاه، مانند Android، iOS، آن را به طور مستقل تنظیم کند. تلفن ویندوزو همچنین مرورگر مورد استفاده مانند فایرفاکس، کروم، سافاری، اپرا و غیره.
بهتر است در وهله اول از آن اجتناب کنید. برای کسانی که ترازو را مناسب نمی‌دانند، می‌توانند آن را به دلخواه خود و با اشاره مناسب مقیاس کنند.

مرزهای سایت

اگر برای نسخه کاملسایت موجود در الگو از padding از مرزهای مرورگر استفاده می کند، به عنوان مثال، برای برجسته کردن محتوا:

بدن (
margin-top: 20px;
margin-left:100px;
margin-right:100px;
حاشیه: 1px جامد #dfdfdf;
}

سپس برای نسخه تلفن همراه این در حال حاضر از دست دادن یک فضای قابل استفاده کوچک است که بهتر است 100٪ استفاده شود.

بدن (
عرض: 100%;
}

کلاه

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

سربرگ جستجو
{
text-align:right;
float:right;
}

یک سطح پایین تر و موقعیت سمت چپ:

سربرگ جستجو
{
margin-top: 5px;
text-align:left;
}

منو

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

Topmenu ul li
{
صفحه نمایش: درون خطی;
}

Topmenu li a
{
display:block;
شناور به سمت چپ؛
}

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

منوی برتر اول لی (
display:block;
}

منوی بالا li a (
display:block;
}

فونت

به عنوان یک قاعده، یک فونت 12-13 پیکسل برای نسخه کامل سایت استفاده می شود:

p، li، dt، dd، افسانه
{
اندازه فونت: 13px;
}

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

p، li، dt، dd، افسانه
{
اندازه فونت: 16px;
}

از همان ملاحظات، اندازه فونت برای بقیه انتخاب می شود عناصر متن، برای مثال مانند این:

h1 (
اندازه فونت: 24px;
}

h2 (
اندازه فونت: 22px;
وزن فونت: معمولی
}

h3 (
اندازه فونت: 17px;
margin-top: 5px;
margin-bottom:0px;
}

h4(
اندازه فونت: 16px;
}

تصاویر

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

از طرفی برای یک تصویر با کیفیت، 480 پیکسل در نسخه کامل سایت بسیار کم است.
به عنوان یک ترفند کوچک، ساخت فرم می تواند خدمت کند:

img
{
حداکثر عرض: 100%;
ارتفاع: خودکار;
}

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

جداول

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

جدول tr td
{
display:block;
}

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

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

بررسی نتیجه، آزمایش

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

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

برای بررسی در محیط iOS، برای iPhone و iPod، یک محیط توسعه ویژه از Apple - Xcode وجود دارد. با کمک آن، می توانید تقریباً هر دستگاه اپل را شبیه سازی کنید.

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

یک ابزار تأیید نسبتاً جالب، شبیه ساز سیستم عامل فایرفاکس است که افزودنی است مرورگر فایرفاکس. می توانید آن را در آدرس زیر دانلود کنید:
https://addons.mozilla.org/En-us/firefox/addon/firefox-os-simulator/

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

همچنین، در فرآیند توسعه یک قالب، بسیار مفید است که مرورگر معمولی خود را به عنوان یک موبایل کنار بگذارید. برای فایرفاکس، این کار با یک افزونه انجام می شود عامل کاربرسوییچر که از اینجا قابل نصب است:
https://addons.mozilla.org/en/firefox/addon/user-agent-switcher/

در این حالت، شما این فرصت را خواهید داشت که از ابزارهای توسعه وب نسبتاً قدرتمندی که در خود FireFox ساخته شده است استفاده کنید.

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

فراتر از هر چیز دیگری موتور جستجوی گوگلهمچنین باید منبع را برای "تحرک" آن بررسی کنید، زیرا تنها در این صورت سایت نسبت به دیگران برتری پیدا می کند. شما می توانید بررسی کنید که آیا همه چیز توسط موتور جستجو مورد پسند است یا خیر:
https://www.google.com/webmasters/tools/mobile-friendly/

برای اطمینان کامل از اینکه گوگل از همه چیز راضی است، توصیه می شود تمام صفحات سایت را بررسی کنید. یا آیتم «قابلیت نمایش تلفن همراه» را در ابزار وب مستر در آدرس زیر مشاهده کنید:
http://www.google.com/webmasters/

نتیجه

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

ترافیک موبایل در حال رشد است و به طور متوسط ​​حدود 25 درصد از کل بازدیدها را به خود اختصاص داده است. اگر قبلاً از دست دادن این بازدیدکنندگان ناچیز بود، اکنون هر 4 یا 5 کاربر است. فکر نمی کنم نیازی به آمار باشد. ما از نزدیک و به طور جدی در حال توسعه یک نسخه جدید ویجت تلفن همراه هستیم. ما تمام تجربیات اشتباهات قبلی را جمع آوری کردیم و هفته ها نتایج را آزمایش کردیم. باز هم، ما در حال توسعه یک ویجت موبایل بودیم، نه بهبود سایت خود. در نتیجه ما لیستی از مرگبارترین اشتباهات نسخه موبایلی سایت را تهیه کرده ایم. از اشتباهات گذشت طراحی موبایلو چیدمان موبایل. همه این اشتباهات تبدیل ترافیک موبایل را از بین می برد. و وقت آن است که به این نکته توجه کنید:

1. اشکال بیش از حد طولانی گرفتن.

این یک قاتل تبدیل واقعی در هر وب سایتی است! نسخه های موبایل به ویژه به این امر حساس هستند، زیرا پر کردن پرسشنامه ها در تلفن بسیار ناخوشایند است. از شر آنها خلاص شوید.
این مثال نشان می دهد که بچه های Tinkoff Bank چقدر با مهارت عمل کردند که یک درخواست طولانی "برای وام" را به مراحل تقسیم کردند. تنها با پر کردن 4 فیلد، بازدیدکننده به لید تبدیل می شود و اگر در مرحله دوم سقوط کند، مخاطبین او باقی می مانند.

2. شماره تلفن شرکت بدون +7 یا به صورت تصویر درج شده است.

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

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

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

4. ویجت ها و پاپ آپ های موجود در سایت که سازگار با موبایل نیستند.

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

چگونه ویجت را به درستی بررسی کنیم و به چه مواردی باید توجه کنیم، به بررسی ویدیوی کوتاه مراجعه کنید:

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

مزایای داشتن نسخه موبایل چیست؟
اولاً، موتورهای جستجو در صدور اولویت دارند. اینگونه است که گوگل وب‌سایت‌ها را به‌عنوان «موبایل دوستانه» علامت‌گذاری می‌کند:

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

3 مشکل کلیدی سرعت سایت وجود دارد - اندازه، فاصله و ابزارک. معمولاً برای یک کاربر تلفن همراه، نیازی به جلوه های ویژه در سایت نیست، طرح معمولی سایت بدون «زنگ و سوت» انجام می شود. صفحه نمایش اختیاری تلفن همراه، اغلب با وضوح پایین، بنابراین برای کاربران تلفن همراه می توانید تصاویر کوچکتر را ارسال کنید (و از فرمت پیشرفته تر مانند WebP استفاده کنید).

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

برای راه حل کاملمشکلات سرعت و در دسترس بودن هر دو سایت موبایل و معمولی، می توان از خدمات تخصصی نیز استفاده کرد. برای مثال Airi.rf

9. تغییر مسیر اشتباه. عدم انتقال به نسخه کامل سایت.

طبیعتاً همه کاربران موبایل باید به نسخه موبایلی سایت دسترسی پیدا کنند، اما گاهی اوقات اشتباهات معمولیدر یک تغییر مسیر
مثلا چطور اتفاق می افتد؟

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

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

10. تکمیل خودکار. شماره گیری را فعال کنید

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

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

چگونه انجامش بدهیم:
یک نماد 180 پیکسل در 180 پیکسل (بدون گرد) ایجاد کنید و یک برچسب در سایت اضافه کنید

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

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

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

اگر سایت شما همچنان سازگار با موبایل نیست، توصیه می کنم از مشاوره من استفاده کنید یا با متخصصان تماس بگیرید - http://www.mobile-version.ruکه همه کارها را طبق استانداردهای موتورهای جستجو انجام خواهد داد. همچنین می توانید با استفاده از همین پیوند، سایت خود را از نظر تحرک بررسی کنید.

در سال 2013، گوگل شروع به اعمال فشار بر وب مسترها کرد ( https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html، متقاعد کردن نیاز به ایجاد تغییرات سبک وب سایت، و از سال 2015، تحرک به یکی از جنبه های رتبه بندی تبدیل شده است ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Yandex با ایجاد یک الگوریتم ویژه Vladivostok که مناسب بودن سایت را برای مشاهده از تلفن ها در نظر می گیرد، عقب نمانده است.

Mobile Friendly امروزه فقط مراقبت از بازدیدکنندگان نیست، بلکه شرطی ضروری برای ارتقاء است.

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

سه رویکرد وجود دارد:

• آدرس و طرح بندی جداگانه - در یک زیر دامنه از فرم m.site.ru قرار داده شده است. تغییر مسیر از طریق تغییر مسیر سرور توسط عامل کاربر رخ می دهد.
• طراحی ریسپانسیو - url و html مانند فرمت دسکتاپ باقی می مانند، اما در CSS، درخواست های رسانه ای قوانین را برای صفحه های مختلف برمی گرداند.
• RESS یک طراحی واکنش گرا است، آدرس ثابت می ماند، اما سرور بسته به نوع سخت افزاری که صفحه را درخواست می کند، مجموعه های سبک را ارسال می کند.

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

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

مراحل بعدی مستلزم داشتن دانش پایه قوی از html و css یا توانایی جستجوی سریع چیزهای نامفهوم در گوگل است.

اطلاعات برای مبتدیان: در CSS، کلمات قبل از براکت های فرفری به معنای تکه های خاصی از فایل html است که وظیفه نمایش آن ها را بر عهده دارند. بیشتر با نقطه یا علامت هش نوشته می‌شود - #مکان (مخصوص: ارزش؛).

مرحله 1. محدودیت ها را حذف کنید.

دارندگان طرح‌بندی مایع می‌توانند از این مرحله بگذرند. بقیه باید سخت کار کنند.

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

تصاویر- به جای اندازه های واضح، ویژگی هایی را برای تگ img تجویز می کنیم که به تصاویر سازگاری می دهد. عکس‌ها نسبت ابعاد را در کانتینرهای اصلی خود تغییر می‌دهند.

img(

حداکثر عرض: 100%

ارتفاع: خودکار؛

جداول- سازگاری کامل را نمی توان تنظیم کرد، اما می توانید با افزودن این کد، صفحاتی را با آنها برای دستگاه های تلفن همراه مناسب کنید:

جدول(

display:block;

عرض: 100%;

سرریز-x: اسکرول;

سرریز-y: پنهان;

ms-overflow-style: -ms-autohiding-scrollbar;

webkit-overflow-scrolling: لمس;

Wraps - توسط ویژگی float تنظیم می شوند. تنظیم این گزینه به جعبه‌ها اجازه می‌دهد تا بر اساس تنظیمات پنجره حرکت کنند و با عناصری با موقعیت ثابت یا درون ظروف اصلی تنظیم شوند. عناصر div استاندارد به طور پیش فرض هر کدام را به یک خط جدید ترجمه می کنند. به عنوان مثال، با قرار دادن بلوک های div 200 پیکسل در یک ظرف 1000 پیکسلی، می توانید این تصویر را مشاهده کنید.

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

مرحله 2: برای سازماندهی مجدد محتوا برنامه ریزی کنید.

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

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

مرحله 3. راحتی.

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

ناحیه محتوا: تلفن‌ها معمولاً عرض بلوک اصلی در CSS را بسته به فضای موجود روی 100٪ تنظیم می‌کنند. این بدان معنی است که متن، ماژول ها، تبلیغات، محتوای نوار کناری در دستگاه های کوچک در یک ستون نمایش داده می شود.

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

به بازدیدکنندگان خود کمک کنید تا فضای فعال را تعریف کنند - بالشتک، برجسته کردن، تغییر رنگ و موارد دیگری که می‌توانند برای لمس تنظیم شوند، شبه کلاس شناور را برای پیوندها و دکمه‌ها تجویز کنید.

پیاده سازی پرس و جوهای رسانه ای با مثال

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

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

پرس و جوهای رسانه ای را می توان با پارامترها تخصیص داد:

• عرض و ارتفاع پنجره مرورگر؛
• عرض و ارتفاع دستگاه؛
• جهت - حالت افقی یا عمودی؛
• وضوح صفحه.

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

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

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

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

برای رفع آن، فریم های ثابت را با اضافه کردن به استایل های قالب حذف می کنیم:

صفحه فقط رسانه @ و (حداکثر عرض: 1000 پیکسل) (

Nav (عرض: 100%؛ )

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

اما بلوک ها هنوز مشکوک به نظر می رسند - بیایید صفحه نمایش آنها را با افزایش عرض به عنوان درصد تغییر دهیم تا متناسب با ابعاد مورد نظر باشد.

ما به همان mediaquery اضافه می کنیم:

بلوک (عرض: 35٪؛)

چگونه اندازه های بهینه برای بلوک های سایت خود را دریابیم؟ به صورت دستی محاسبه کنید یا هر شبکه آماده - شبکه سیال را به عنوان پایه در نظر بگیرید. می توانید روی استانداردهای موجود تمرکز کنید: در طرح بندی های دو ستونی با عرض پنجره 980-1050 پیکسل، لفاف 95٪ در نظر گرفته می شود، محتوا 60٪ است و 30٪ برای نوار کناری باقی می ماند. فضای باقی مانده به شکل گیری حاشیه و حاشیه برای دقت می رود.

با این حال، می توانید اندازه جعبه را روی محتوا اعمال کنید تا هر بار پیکسل ها را محاسبه نکنید، بلکه با توجه به ابعاد کلی کار کنید.

بیایید به تنظیم نمایشگر روی صفحه نمایش با وضوح کمتر ادامه دهیم:

صفحه فقط رسانه @ و (حداکثر عرض: 600 پیکسل) (

مسدود کردن (

float:none;

عرض: 85%;

حاشیه: 1em خودکار;

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

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

بیایید با استفاده از مثال تغییر رنگ ها و نمایشگرها، امکانات را نشان دهیم.

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

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

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

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

نسخه موبایلی سایت: چگونه بسازیم و به دنبال چه چیزی باشیم

Mediacware توسط همه مرورگرهای مدرن قابل درک است، اما در IE 8 و پایین تر کار نمی کند. مشکل با مراجعه به اینترنت اکسپلورر قدیمی از طریق نظرات شرطی حل می شود. آنها باید در کد قالب نوشته شوند، نه در CSS.

خود اسکریپت در github موجود است ( https://github.com/scottjehl/respond)، پشتیبانی از حداقل و حداکثر ابعاد و مدیاکوری ها را به IE های قدیمی اضافه می کند.

یک مشکل دیگر - طراحی تطبیقیبه معنای استفاده از Html5 است که باز هم برای مرورگرهای قدیمی قابل درک نیست. درمان با هک:

کد در html نوشته شده است، علاوه بر این، نمایش بلوک عناصر ایجاد شده در CSS تنظیم شده است:

سرصفحه، ناوبری، بخش، مقاله، کنار، پاورقی (نمایش: بلوک؛)

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

اگر ($(document).width() > 980) (

$.getScript("مسیر به اسکریپت");

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

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

اگر سایت تبدیل به سرور محلی، صحت را می توان در تعیین کرد ami.responsivedesign.is. برای نمایش مناسب، صاحبان دنور باید با ویرایش کدگذاری را به utf-8 تغییر دهند. فایل سرور httpd.conf.

این سرویس نشان می دهد که چگونه پروژه در دستگاه های مختلف به نظر می رسد.

علاوه بر این، الگو تست شده است https://developers.google.com/speed/pagespeed/insights/یا به صورت خاص https://www.google.com/webmasters/tools/mobile-friendlyو همچنین در وب مسترها.

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

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

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

با احترام، گالیولین روسلان.

همانطور که قول داده بودم، وقت آن رسیده است که به شما بگویم "لایه بندی تطبیقی" چیست و چگونه می توان نسخه موبایلی سایت را برای گوشی های هوشمند و تبلت ها ساخت و همچنین موتورهای جستجو را خشنود کرد!

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

بله، و ترافیک ابزارها روز به روز بیشتر و بیشتر می شود! مدیر سایت باید این را در نظر بگیرد ...

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

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

به نظر می رسد به وضوح توضیح داده شده است؟ کی نفهمید؟ در نظرات بنویسید، بیایید با هم بحث کنیم.

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

در یکی از بهترین روزها من پست الکترونیک(اما همه آن را دریافت کردند) پیام زیر را دریافت کردند:

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

سایت وردپرس موبایل با افزونه!

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

اگر همچنان می خواهید از افزونه ها برای این منظور استفاده کنید، بهترین آنها عبارتند از:

افزونه WPtouch Mobile - من این افزونه را بیشتر از همه دوست داشتم، همه چیز کاملاً ساده و واضح است، وبلاگ من به درستی و بدون هیچ گونه مانعی نمایش داده شد!

من هر افزونه را توضیح نمی دهم، خودتان آن را امتحان کنید و تصمیم بگیرید:

• MobilePress;
• بسته موبایل وردپرس
• سایت ساز موبایل دودا
• بسته موبایل وردپرس
• وردپرس PDA و آیفون.
• WPmob Lite؛
• مطبوعات WPtap News;
• آشکارساز موبایل WP;
• WiziApp.

یکی دیگر از معایب پلاگین ها این است که گاهی اوقات مشکل دارند، به عنوان مثال، من از طریق تلفن هوشمند می گذرم - همه چیز خوب است، دوباره آن را تکرار کردم یا آن را به روز کردم - یک سایت معمولی را نشان می دهد! چه معمایی

خلاصه به من نمی خورد و به دنبال راه حل بهتری بودم!

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

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

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

اکنون دانش خود را با شما در میان می گذارم و مهمترین نکات را به شما می گویم ...

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

تا جایی که من می دانم سه جهت وجود دارد. بیایید هر فناوری را جداگانه تحلیل کنیم، چه مزایا و معایبی داریم که می توانیم با آن روبرو شویم؟!

نسخه سایت جداگانه- این یک نوع سایت سبک وزن جداگانه است که به طور خاص برای مشاهده در دستگاه های تلفن همراه یا با سرعت اینترنت کم ایجاد شده است..site یا http://mobile.site. در این مورد از تغییر مسیر استفاده می شود.

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

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

فناوری RES- در اینجا، یک محاسبه سمت سرور استفاده می شود، بسته به اینکه ورودی از کدام دستگاه بوده است - یک یا طرح بندی دیگر ایجاد می شود (html و css). این معجزه نام دارد - طراحی وب تطبیقی ​​+ ویژه نرم افزاردر سمت سرور (RESS - طراحی وب پاسخگو و اجزای سمت سرور).

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

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

طرح‌بندی واکنش‌گرا (طراحی وب)- این طرح سایت با هر وضوح صفحه با استفاده از CSS3 Media Queries تعریف می شود. به عنوان یک قاعده، از همان منبع استفاده می شود که شامل گزینه های مختلفی برای نمایش در تلفن های هوشمند، تبلت ها و رایانه ها است.

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

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

ما به تنهایی یک طرح تطبیقی ​​ایجاد می کنیم

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

1. بدون نیاز به نقض یکپارچگی سایت اصلی، وبلاگ؛
2. از یک محتوای واحد، یک پایگاه داده و غیره استفاده می کند.
3. برای من شخصا سهولت اجرا (آشنایی با html و css الزامی است).

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

ابتدا باید متا تگ را در آن بنویسید :

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

همچنین اگر حداکثر-scale=1.0، user-scalable=no را هم اضافه کنیم، با این کار مقیاس گذاری را ممنوع می کنیم، اما این کار را توصیه نمی کنم، اجازه دهید خود شخص تصمیم بگیرد، شاید مشکل بینایی داشته باشد...

اینجا شروع شده است، حالا اگر از گوشی هوشمند یا چیزی بگذریم، می بینیم که سایت ما چگونه است! غمگین ها؟!

این مورد باید با استفاده از Media Queries در فایل سبک CSS برطرف شود، پارامتر به شکل زیر است:

صفحه رسانه @ و (حداکثر عرض: 240 پیکسل) و (حداکثر عرض: 720 پیکسل) (
برچسب ها و ویژگی ها در اینجا
}

یعنی این استایل ها از حداقل عرض 240px تا حداکثر عرض 720px دستگاه توسط مرورگر اعمال خواهد شد! اگر بیشتر یا کمتر از این مقادیر باشد، سبک های اصلی سایت اعمال می شود. همه چیز ساده است!

و به این صورت است که برای رزولوشن های مختلف دستگاه استایل می نویسیم. مثلا:

• گوشی های هوشمند به صورت عمودی - از 240 تا 340، از 341 تا 420؛
• گوشی های هوشمند به صورت افقی و برخی تبلت ها به صورت عمودی - از 421 تا 540، از 541 تا 670؛
• تبلت به صورت عمودی - از 671 تا 800؛
• تبلت ها به صورت افقی - از 801 تا 1024

اگر می خواهید هر عنصری را نشان دهید: display:block، اگر می خواهید آن را پنهان کنید: display:none;

برای اینکه ببینید یک وب سایت یا وبلاگ در چه شکلی است دستگاه های مختلفخدمات عالی وجود دارد:

• http://quirktools.com
• http://www.emulateurmobile.com/
• http://webmark.com.ua

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

این همه برای من است! امیدوارم مقاله من واقعا به شما کمک کرده باشد، برای سپاسگزاری، آن را به اشتراک بگذارید =)

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

با احترام، ولادیمیر ساولیف

درس های برتر از باشگاه webformyself

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

بیشتر

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

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

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

1.MoAction

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

مزیت اصلی MoAction توانایی کار با کاتالوگ محصولات است. در واقع، این سخت ترین بخش ایجاد یک نسخه موبایل است. اگر ده ها یا صدها محصول در سایت خود دارید، به سختی می خواهید اطلاعات را به صورت دستی وارد کنید. می تواند یک کاتالوگ موجود را در قالب های Yandex.Market (YML) وارد کند. شما فقط باید دوره به روز رسانی را مشخص کنید، برای مثال یک ساعت یک بار یا یک بار در روز.

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

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

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

2. GoMobi

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

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

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

3. DudaMobile

DudaMobile، مانند GoMobi، به کاربران خود پیشنهاد می‌کند تا به صورت خودکار یک وب‌سایت را تبدیل کنند یا یک نسخه تلفن همراه را بر اساس آن ایجاد کنند قالب آماده. و نسخه خودکار DudaMobile بسیار بهتر تولید می کند.

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

4. Onbile

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

همچنین تعداد کمی الگو برای انتخاب وجود دارد: فقط 15 مورد، اما برای هر کدام 2-3 تنوع بیشتر با تفاوت های جزئی در طرح، ساختار و رنگ وجود دارد.

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

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

5. Prosto.mobi

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

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

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

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