13
تشکر

بهینه سازی سایت برای IOS

Mobile Web App

Mobile Web App

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

مقداردهی Viewport

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

اینکار را با اضافه کردن تگ زیر به قسمت head سایت انجام میدهیم.

<meta name="viewport" content="width=device-width, initial-scale=1">

اضافه کردن آیکون

مرورگر Safari در IOS امکان اضافه کردن سایت به home screen را دارد. در این صورت اگر برای سایت آیکون تعیین نکرده باشید، آیکون پیش فرض نمایش داده میشود. برای قرار دادن آیکون از تگ link استفاده میکنیم.

فرمت آیکون شما باید PNG باشد. اما از آنجا که دستگاه هایی از که سیستم عامل IOS استفاده میکنند دارای سایزهای مختلفی هستند، باید چندین آیکون با سایزهای مشخص شده را تعیین کنید. اگر سایز را در تگ link تعیین نکنید، مقدار پیشفرض 60*60 خواهد بود.

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

مروگر Safari در نسخه های پایینتر از IOS 7 تغییراتی در آیکون شما میدهد، برای جلوگیری از اینکار، مطمئن شوید نام آیکون شما با precomposed.png- تمام شود.

اضافه کردن عکس استارت آپ

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

برخلاف آیکون که به آن اشاره شد، شما برای عکس استارت آپ نمیتوانید، سایز مشخصی تعیین کنید. اما اینکار را میتوانید با media انجام دهید. Taylor Fausak در این زمینه یک gist عالی ایجاد کرده است. از خط 62 به بعد میتوانید ببینید که چگونه از media برای اینکار استفاده کرده است.

<link rel="apple-touch-startup-image" href="/startup-image.png">

مشخص کردن عنوان در Home Screen

به طور پیشفرض، IOS از مقدار تگ titile برای عنوان سایت استفاده میکند. اما شما میتوانید این مقدار را با استفاده از کد زیر تغییر دهید. اینکار زمانی مناسب است که شما مقدار تگ title را برای SEO طولانی درنظر گرفتید.

<meta name="apple-mobile-web-app-title" content="Kojitsu">

مخفی کردن رابط کاربری مرورگر

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

<meta name="apple-mobile-web-app-capable" content="yes">
Browser UI Comparison

Browser UI Comparison

مرورگر Chrome برای اندروید نیز از این مشخصه پشتیبانی میکند.

<meta name="mobile-web-app-capable" content="yes">

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

if (window.navigator.standalone) {
  // The app is running in standalone mode.
}

استایل دهی به نوار وظیفه

در بالا دیدیم که چگونه میتوانیم رابط کاربری مرورگر را حذف کنیم، اما اینکار ممکن است برای کاربر زیاد جالب نباشد. بوسیله خاصیت apple-mobile-web-app-status-bar-style در تگ meta میتوانیم استایل مناسب را به نوار وظیفه بدهیم. این تگ دارای خاصیت content است که سه مقدار متفاوت میگیرد.

<meta name="apple-mobile-web-app-status-bar-style" content="">

اولین مقدار default است. که نوار وظیفه را بالای صفحه وب نشان میدهد.

The ‘default’ status bar style

The ‘default’ status bar style

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

The ‘black’ status bar style

The ‘black’ status bar style

و سومین مقدار black-translucent است که نوار وظیفه را جزئی از صفحه وب نشان میدهد. در صورت استفاده از این خاصیت مطمئن شوید که padding مناسب را ایجاد کرده باشید.

The ‘black-translucent’ status bar style

The ‘black-translucent’ status bar style

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

ارتباط با اپ ها (Native Apps)

شما میتوانید با وارد کردن URLهای مشخص با اپ های IOS ارتباط ایجاد کنید.

ارسال ایمیل

برای ارتباط با برنامه ایمیل کافیست از همان روش است استاندارد یعنی mailto استفاده کنید.

<a href="mailto:hello@example.com">Send Email</a>

برقراری تماس تلفنی

برقراری تماس تلفنی از طریق اضافه کردن tel به ابتدای URL امکان پذیر است، که البته ابتدا باید توسط کاربر تایید شود.

<a href="tel:01234567890">Call Me</a>

ارسال پیام کوتاه

ارسال پیام کوتاه نیز با اضافه کردن sms انجام میشود.

<a href="sms:01234567890">Send an SMS</a>

نمایش نقشه

برای نمایش نقشه باید از آدرس maps.apple.com استفاده کنید. که برای استفاده از تنظیمات آن مانند محل نقشه، زوم و غیره باید از پارامترهای آن استفاده کنید. تمام پارامترها را میتوانید در اینجا ببینید.

<a href="http://maps.apple.com/?q=cupertino">Cupertino</a>

اطلاعات بیشتر

Developing Web Content for Safari

iOS User Interface Guidelines: Icon and Images Sizes

iOS7 Web App Gist

  • طراحی سایت می‌گه:

    عالی بود واقعا بهش نیاز داشتم…

  • behnam می‌گه:

    مطالب سایتتون بسیار مفید هست، فقط خیلی بهتر می‌شد اگر نام منابع خبرهاتونم می‌ذاشتید، مثلا فکر کنم این مطلب از وبلاگ Treehouse باشه 😉

  • محسن می‌گه:

    مطلب خوبی بود. در سایت وب دیزاین دانلود لینک شد.
    موفق باشی.

  • عادل می‌گه:

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

    • محسن شفیعی می‌گه:

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

  • محمد جهانی می‌گه:

    مرسی محسن جان جالب بود. فقط اگه به تگ
    meta name=”viewport”
    ویژگی
    user-scalable=0
    اصافه بشه، نتیجه بهتری میده. اینجوری امکان زوم کردن با گوشی رو از کاربر میگیریم که خاصیت مشابه اَپ بودنِ وبسایت یا وب‌اَپمون حفظ بشه.

  • رضا می‌گه:

    عالی بود
    راستی منو ی سایت رو تو حالت گوشی چطوری اینجوری کردی


  • نظرات این مطلب بسته است.