شبیه ساز موبایل گوگل کروم

جهت استفاده از شبیه ساز موبایل مرورگر کروم، ابتدا با فشردن دکمه F12 در گوگل کروم، وارد محیط DevTools شوید و سپس با انتخاب آیکون موبایل و یا فشردن Ctrl+Shift+M در محیط ویندوز و Cmd+Shift+M در سیستم عامل مکینتاش، شبیه ساز موبایل کروم باز خواهد شد و می توان صفحه وب مورد نظر را در ابعاد یک گوشی موبایل، تبلت (با قابلیت انتخاب مدل گوشی و همچنین امکان نوشتن سایز مورد نظر در حالت Responsive) مشاهده نمود.
جهت آموزش دیباگ کردن صفحه با مرورگر گوگل کروم، به صفحه “آموزش شبیه ساز موبایل Google Chrome” مراجعه کنید.

مراحل دیباگ صفحه وب با استفاده از گوشی موبایل

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

مرحله 1: فعال کردن Developer options در دستگاه اندروید

Developer options در اندروید نسخه 4.1 به قبل به طور پیش فرض فعال است و از اندروید 4.2 به بعد، باید آن را به صورت دستی فعال کرد.

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

برای انجام این کار ابتدا وارد قسمت About (درباره دستگاه) در تنظیمات گوشی اندروید شده و 7 مرتبه روی Build number (شماره ساخت) ضربه بزنید. سپس پیغامی مبنی بر You are now a developer! به شما نمایش داده خواهد شد.

فعال سازی Developer options در نسخه های مختلف اندروید

سیستم عامل اندروید 9 و بالاتر:

Settings > About Phone > Build Number

سیستم عامل اندروید 8.0.0 و اندروید 8.1.0:

System > About Phone > Build Number

سیستم عامل اندروید 7.1 و پایین تر:

Settings > About Phone > Build Number

مرحله 2: فعال کردن USB debugging در دستگاه اندروید

وارد منوی System در تنظیمات اندروید شوید و در Developer options گزینه USB debugging را فعال کنید.

فعال سازی USB debugging در نسخه های مختلف اندروید

سیستم عامل اندروید 9 و بالاتر:

Settings > System > Advanced > Developer Options > USB debugging

سیستم عامل اندروید 8.0.0 و اندروید 8.1.0:

Settings > System > Developer Options > USB debugging

سیستم عامل اندروید 7.1 و پایین تر:

Settings > Developer Options > USB debugging

مرحله 3: صفحه Devices را در گوگل کروم باز کنید.

در مرورگر گوگل کروم به آدرس chrome://inspect/#devices بروید.

نکته: در قبل از گوگل کروم نسخه 80، برای دسترسی به صفحه devices باید از طریق DevTools اقدام می شد ولی از کروم نسخه 80 دسترسی به صفحه مذکور فقط از طریق آدرس chrome://inspect/#devices امکان پذیر است.

مرحله 4: اطمینان از فعال بودن Discover USB devices در صفحه Devices

در صفحه Devices، از فعال بودن گزینه Discover USB devices اطمینان حاصل کنید.

مرحله 5: اتصال گوشی به کامپیوتر

گوشی را با استفاده از کابل USB به کامپیوتر متصل نمایید. سپس پیغام “Allow USB debugging” بر روی گوشی نمایش داده می شود که باید آن را Accept کنید.

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

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

مرحله 6: باز کردن صفحه وب بر روی گوشی موبایل (دستگاه اندرویدی)

صفحه وب مورد نظر را بر روی مرورگر کروم گوشی باز کنید. سپس در صفحه Devices نام همان صفحه به شما نمایش داده خواهد شد.

مرحله 7: باز کردن URL بر روی موبایل توسط DevTools

در DevTools، قسمت New tab یک URL وارد کنید و بر روی Open، کلیک نمایید. سپس مشاهده می کنید که همان URL در گوشی شما بر روی یک تب جدید باز می شود.

مرحله 8: باز کردن DevTools مرورگر کروم موبایل توسط مرورگر گوگل کروم کامپیوتر

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

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

با کلیک بر روی Toggle screencast می توانید محتوای صفحه گوشی خود را بر روی کامپیوتر مشاهده نمایید.

نکته: شما می توانید به امکاناتی مانند reload، focus و close a tab نیز دسترسی داشته باشید.

پرسش های متداول در مورد دیباگ صفحه با گوشی موبایل

1- آیا در صورت موفقیت آمیز بودن تست صفحه در شبیه ساز موبایل گوگل کروم، باز هم نیاز به ریموت دیباگینگ با گوشی اندروید است؟

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

2- آیا امکان ریموت دیباگینگ با کروم برای گوشی یا تبلت اپل و سیستم عامل iOS وجود دارد؟

خیر. در حال حاضر امکان remote debugging با گوگل کروم فقط برای گوشی و تبلت اندرویدی وجود دارد. البته شما می توانید با استفاده از مرورگر Safari و سیستم عامل MAC این کار را انجام دهید.

3- اگر در هنگام اتصال گوشی به کامپیوتر، پیام Allow USB Debugging مشاهده نشد، چه کاری انجام دهیم؟

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

4- گوشی را به کامپیوتر متصل کردم، ولی ویندوز آن را نشناخت. چه کاری باید انجام دهم؟

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

5- آیا می شود جهت اتصال گوشی به کامپیوتر از هاب USB استفاده کرد؟

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

The post دیباگ صفحه وب توسط گوشی موبایل با مرورگر گوگل کروم appeared first on وب یوز.

Mobile-first index چیست؟

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

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

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

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

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

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

از موبایل فرست ایندکس بترسیم؟

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

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

The post Mobile-first index گوگل شروع به کار کرد appeared first on وب یوز.

موبایل فرندلی چیست

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

1. Responsive Web Design: 

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

2. Dynamic Serving: 

   در طراحی به صورت dynamic serving، آدرس URL صفحات برای انواع دستگاه ها یکسان است ولی کد HTML با توجه به عرض دستگاه متفاوت است.

3. Separate URLs: 

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

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

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

از نظر SEO تفاوت خاصی بین سه نوع تکنیک مذکور نیست ولی گوگل مورد Responsive Web Design را به دلیل خطای کمتر برنامه نویسی و مدیریت بهتر سایت به طراحان و دارندگان سایت پیشنهاد می کند و نکات زیر را در مورد سایت موبایل فرندلی توصیه می کند:

• مطمئن باشید که خزنده گوگل به همه منابع سایت مانند عکس، HTML، CSS و JS علاوه بر user-agent دسکتاپ با user-agent موبایل نیز دسترسی کامل دارد. برای این کار می توانید از ابزار Fetch as Google در سرچ کنسول استفاده کنید.
• از ویدیوهایی استفاده کنید که با موبایل هم قابل پخش شدن باشد.
• از ریدایرکت اشتباه اجتناب کنید. اگر از تکنیک separate URLs استفاده می کنید، وب سرور را به نحوی تنظیم کنید که اگر کاربری با موبایل قصد ورود به یک صفحه با آدرس دسکتاپ را داشت، حتما به معادل همان صفحه در موبایل ریدایرکت کنید.

• در صورتی که کاربران موبایل را به آدرس URL مخصوص موبایل ریدایرکت می کنید، مطمئن باشید که همه دستگاه های موبایل مانند Android و iOS و Windows phone ریدایرکت می شوند.

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

The post انواع سایت موبایل فرندلی appeared first on وب یوز.

سنجش سرعت صفحه با گوگل اسپید اسکورکارد

پس از اعلام گوگل برای آپدیت الگوریتمش به نام آپدیت سرعت گوگل، این غول موتور جستجو با معرفی ابزاری جدید به نام Speed Scorecard، این امکان را برای سئوکاران و وبمستران فراهم کرد که بتوانند سرعت بارگذاری سایت خود توسط موبایل را با دیتای واقعی که از گوشی های موبایل کاربران در شبکه 4G و شبکه 3G کسب شده، بررسی کنند.

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

گوگل اطلاعات Speed Scorecard را از کجا می آورد

اطلاعات اسپید اسکورکارد از مرورگر کروم گوشی های موبایل کاربران به صورت ناشناس که Chrome User Experience Report نام دارد، جمع آوری می شوند. در حال حاضر اطلاعات گوگل اسپید اسکورکارد از کاربران موبایل 12 کشور آمریکا، کانادا، استرالیا، انگلیس، هلند، سوئد، آلمان، هند، ایتالیا، ژاپن، اسپانیا و فرانسه جمع آوری می شود و قرار است به تدریج کاربران بیشتری از کشورهای دیگر نیز به این اطلاعات افزوده شوند.

نمره سرعت کدام سایت ها در اسپید اسکورکارد در دسترس است

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

محاسبه تاثیر سرعت بارگذاری صفحه بر درآمد با Impact Calculator

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

شماره هایی که در تصویر بالا مشخص شده اند به شرح زیر می باشند:

1. نام دامین
2. میانگین بازدید ماهانه
3. میانگین ارزش هر سفارش یا فروش
4. سرعت بارگذاری صفحه که در Speed Scorecard محاسبه شده و یا سرعت لود فرضی که قصد دارید تاثیر آن را بر درآمد سالیانه مشاهده کنید.
5. نرخ تبدیل (نسبت سفارش به تعداد بازدید)
6. تاثیر مثبتی که سریعتر شدن لود صفحه به میزان نمایش داده شده در قسمت 7 بر درآمد سالیانه سایت می گذارد.
7. دکمه کشویی که توسط آن می توانید سرعت لود صفحه را به صورت دستی تغییر داده تا تاثیر آن را در قسمت 6 بر درآمد سالیانه سایت ببینید.

اگر سایت شما پرترافیک است، هم اکنون می توانید جهت سئوی حرفه ای سایت و تست سرعت بارگذاری صفحهات سایتتان و یا هر سایت پرترافیک دیگر به صفحه Winning on Mobile گوگل مراجعه نمایید. دقت فرمایید که متاسفانه این آدرس با IP ایران در دسترس نیست و جهت استفاده از این سرویس فعلا باید از آی پی آدرس غیر از ایران استفاده کنید.

The post تست سرعت لود صفحه با Google Scorecard appeared first on وب یوز.

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

ابتدا گوگل کروم را باز کرده و سپس با فشردن دکمه F12 وارد محیط DevTools گوگل کروم شوید. حال با فشردن دکمه های Ctrl+Shift+M در سیستم عامل ویندوز و یا Cmd+Shift+M در سیستم عامل MAC و یا با کلیک بر روی آیکون موبایل که در تصویر زیر به عنوان شماره 1 نمایش داده شده است، محیط شبیه ساز موبایل گوگل کروم را فعال کنید.

قسمت های مختلف شبیه ساز موبایل گوگل کروم

قسمت های شماره گذاری شده در تصویر بالا به شرح زیر می باشند:

1. دکمه فعال یا غیر فعال کردن شبیه ساز موبایل گوگل کروم

2. انتخاب گوشی های موبایل پیشفرض مختلف از منوی آبشاری. همچنین می توانید با کلیک بر روی گزینه Edit اقدام به تعریف گوشی موبایل دلخواه خود نمایید.

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

3. تنظیم دستی رزولوشن گوشی موبایل مورد نظرتان که شامل عرض و ارتفاع می باشد و واحد آن به پیکسل است.

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

A. در صورتیکه گوشی موبایل خاصی را از لیست گوشی ها (آیتم 2) انتخاب کرده باشید، با کلیک بر روی Show device frame، گوگل کروم، قاب گوشی را هم به شما نمایش می دهد که حس بهتری نسبت به واقعیت داشته باشید.

B. با کلیک بر روی گزینه Show media queries، گوگل کروم همه media query هایی که در قالب سایت از آن استفاده کردید را با خطوط رنگی در بالای صفحه نمایش می دهد. همانطور که در تصویر زیر مشاهده می کنید، ابعاد مختلفی که در media query در صفحه مورد نظر استفاده شده اند، به صورت خطوطی مشخص شده اند و اگر شما با موس روی هر کدام از آن خط ها بروید، ابعاد تعریف شده در media query به شما نمایش داده خواهد شد.

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

D. با کلیک بر روی Add device pixel ratio می توانید pixel ratio مد نظرتان را در شبیه سازی اعمال نمایید.

E. با توجه به تصویر زیر با کلیک بر روی گزینه Add device type می توانید نوع دستگاهی که می خواهید شبیه سازی کنید را انتخاب نمایید.

F. با کلیک بر روی گزینه Capture screenshot می توانید از صفحه ای که در حال رویت آن هستید یک اسکرین شات بگیرید.

G. با کلیک بر روی Capture full size screenshot می توانید از ابتدا تا انتهای صفحه ای که در آن هستید، بدون نیاز به اسکرول کردن، اسکرین شات تهیه کنید.

H. با کلیک بر Reset to defaults، همه تنظیمات به حالت پیشفرض باز می گردد.

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

یک سئوکار متخصص می تواند به شما در مورد موبایل فرندلی بودن سایتتان مشاوره دهد.

The post آموزش شبیه ساز موبایل گوگل کروم appeared first on وب یوز.

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

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

یکی از روشهای تست موبایل فرندلی بودن سایت، استفاده از ابزار شبیه ساز موبایل گوگل کروم است. بدین منظور ابتدا صفحه وب مورد نظرتان را در گوگل کروم باز کنید. سپس با فشردن کلید F12 وارد محیط Dev Tools شوید و بعد از آن با فشردن Ctrl+Shift+M یا با توجه به تصویر زیر با کلیک بر روی آیکون موبایل می توانید از شبیه ساز موبایل گوگل کروم استفاده کنید.

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

تست موبایل فرندلی با ابزار Mobile-Friendly Test گوگل

گوگل ابزاری را برای بررسی آنلاین صفحه وب جهت داشت سایتی موفق و انجام سئوی حرفه ای در اختیار وبمستران قرار داده است. شما می توانید از طریق صفحه Google Mobile-Friendly Test از این ابزار جهت بررسی صفحات سایتها استفاده کنید.

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

The post تست موبایل فرندلی صفحه با ابزارهای گوگل appeared first on وب یوز.

انواع فیلد ورودی در HTML5

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

فیلد url

در صورتیکه فیلد ورودی از نوع url باشد، با توجه به تصویر زیر، کیبورد مناسب جهت نوشتن آدرس URL برای کاربران موبایل باز خواهد شد. ضمنا کاربران فقط می توانند آدرس را به صورت http:// و https:// و ftp:// و mailto: وارد نمایند.

<input type="url">

فیلد tel

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

<input type="tel">

فیلد number

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

<input type="number">

فیلد email

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

<input type="email">

فیلد date

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

<input type="date">

فیلد time

اگر از input با نوع time استفاده کنید، مشابه تصویر زیر، امکان انتخاب ساعت و دقیقه و AM و PM وجود خواهد داشت.

<input type="time">

فیلد datetime-local

اگر از input با نوع datetime-local استفاده کنید، مشابه تصویر زیر، امکان انتخاب زمان و تاریخ با هم وجود دارد.

<input type="datetime-local">

فیلد week

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

<input type="week">

فیلد month

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

<input type="month">

فیلد range

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

<input type="range">

فیلد color

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

<input type="color">

به این نکته توجه داشته باشید که استفاده از نوع صحیح input الزاما به معنی اعتبارسنجی یا validation دیتای ورودی نیست. جهت اعتبارسنجی از تکنیک های مختلف مانند استفاده از Ajax و یا استفاده از pattern در HTML می توانید استفاده نمایید.

The post انواع فیلد HTML5 در طراحی فرم برای موبایل appeared first on وب یوز.

ارتباط سرعت سایت موبایل فرندلی با سئوی حرفه ای

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

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

مقایسه سایت سریع و کند

طبق تحقیق گوگل، سایتهایی که در مدت زمان 5 ثانیه بر روی موبایل باز می شوند نسبت به سایتهایی که در 19 ثانیه بارگذاری می شوند برتریهای زیر را دارند:

35 درصد bounce rate پایین تر

70 درصد مدت زمان سپری شده بیشتر در سایت

25 درصد نمایش تبلیغ بیشتر

100 درصد درآمد بیشتر از تبلیغ

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

The post سئوی حرفه ای و سایت موبایل فرندلی سریع appeared first on وب یوز.

24 نکته گوگل برای طراحی سایت برای موبایل:

۱- دکمه های “call to action” را در بالا و وسط صفحه و به نحوی قرار دهید که به راحتی توسط کاربر قابل مشاهده باشد.

۲- سعی کنید نام منوها کوتاه و مختصر و مفید باشند.

۳- راه برگشت به صفحه اصلی را تسهیل کنید. از لوگو برای لینک به صفحه اصلی استفاده کنید.

۴- پیامهایی مانند فروش ویژه و غیره نباید کل صفحه را بگیرند و مانع از دیده شدن لوگو و منو بشود.

۵- قسمت جستجو در همه صفحات به راحتی دیده شود.

۶- نتیجه جستجو با عبارت جستجو شده همخوانی داشته باشد تا کاربر سریع تر به هدفش برسد.

۷- از فیلترها جهت جستجو استفاده کنید که کاربر بتواند با دقت بیشتری به جستجو بپردازد.

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

۹- اجازه خرید به کاربر مهمان را بدهید ولی هر جایی که ممکن بود، او را تشویق به ثبت نام در سایت کنید.

۱۰- کار را برای کاربر راحت کنید. فیلدها را از قبل برای کاربرانی که ثبت نام کرده اند پر کنید.

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

۱۲- کاربر موبایل باید بتواند به راحتی در دستگاههای مختلف به ادامه کارش بپردازد.

۱۳- در مواقعی که قرار است کاربر موبایل، اعدادی را وارد کند، صفحه کلید اعداد را به او نشان دهید.

۱۴- آسوده ترین راه برای وارد کردن اطلاعات را برای کاربر موبایل در نظر بگیرید. مانند منوی آبشاری و یا امکان تیک زدن.

۱۵- از تقویم دیداری برای راحتی کاربر جهت انتخاب تاریخ و برنامه ریزی استفاده کنید.

۱۶- به صورت شفاف توضیح دهید. از اعتبارسنجی لحظه ای استفاده کنید و به کاربر بگویید که علت اشتباه بودن اطلاعاتی که وارد کرده چه بوده است.

۱۷- طراحی فرم حائز اهمیت است. کوتاه و راحت خوانده شدن، کلید طراحی فرم برای طراحی سایت موبایل است.

۱۸- همه صفحات وبسایت هم با دسکتاپ و هم با موبایل به صورت اصولی دیده شوند.

۱۹- عکسها و همه المان های سایت خوانا باشند.

۲۰- از عکسهای کلیدی با کیفیت و از نمای نزدیک استفاده کنید. مانند عکس محصولات.

۲۱- به کاربران بگویید که وبسایت در حالت افقی بهتر دیده می شود یا عمودی.

۲۲- کاربران را در یک صفحه browser نگاه دارید. از هدایت کاربر به صفحه دیگر و یا تب دیگر خودداری کنید.

۲۳- از برچسب موبایل/دسکتاپ استفاده کنید.

۲۴- به کاربر اجازه دهید شعبات و یا فروشگاه های نزدیک خودش را پیدا کند.

مقاله انواع فیلد input در HTML5 برای طراحی فرم به شما کمک می کند که کیبورد یا کیپد متناسب با دیتای ورودی را به کاربر موبایل نمایش دهید.

The post اصول طراحی وبسایت برای موبایل appeared first on وب یوز.

همچنین این موتور جستجوی معظم در راستای ترغیب بیشتر سایت های غیر موبایل فرندلی برای موبایل فرندلی شدن، اقدام به نمایش پیغام Your site is not mobile-friendly در پایین لینک سایت در صفحه نتایج جستجوی انجام شده توسط دستکتاپ نمود.

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

The post اخطار گوگل به سایتهای غیر موبایل فرندلی appeared first on وب یوز.

61% از کاربران هنگامی که نتوانند به سرعت به هدف مورد نظرشان برسند، به سایت دیگری خواهند رفت.

57% از کاربران اذعان داشتند که احتمال کمتری دارد که با سایتی که برای موبایل بهینه نشده باشد کار کنند.

67% از کاربران اذعان داشتند که احتمال بیشتری دارد که در یک سایت بهینه شده برای موبایل خرید کنند.

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

The post ضرورت موبایل فرندلی بودن سایت appeared first on وب یوز.