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

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

یکی از مهمترین ویژگی های Mobify آن است که هم دارندگان هاستهای شخصی و هم وبلاگ نویسانی که از سرویس دهنده های رایگان (مثل بلاگفا، پرشین بلاگ و…) استفاده می کنند، می توانند از این سرویس دهنده استفاده کنند. از ویژگی های دیگر Mobify عبارتند از:

  • تشخیص خودکار مرورگر موبایل و هدایت کردن آن به سمت قالب موبایلی وبگاه
  • انتخاب آسان بخشهایی از قالب وبگاه که باید در نسخه موبایلی نمایش داده شوند
  • امکان طراحی شمایل (CSS) برای هر یک از صفحات قالب موبایلی
  • اختصاص دادن یک دامنه رایگان برای نسخه موبایلی
  • امکان تعریف دامنه شخصی برای نسخه موبایلی

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

۱- برای شروع به کار در سایت mobify.me روی Sign Up کلیک کنید و فرم ثبت نام (که شامل آدرس ایمیل و یک کلمه عبور دلخواه می باشد) را پر نمائید.

(برای دیدن اندازه بزرگتر تصاویر، روی آنها کلیک کنید!)

۲- پس از وارد شدن به پیشخوان حساب کاربری تان، در کادر بالای صفحه، آدرس وبلاگتان را وارد کنید و روی Click here to begin! کلیک نمائید!

۳- بخش اول برای راه اندازی نسخه موبایلی، انتخاب (Choose) قسمتهایی از قالب اصلی وبلاگتان است. (موبی فای،  توصیه می کند برای استفاده از همه امکانات این بخش از مرورگرهای FireFox یا Safari استفاده کنید!)

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

 

۴- بعد از اینکه انتخاب هایتان را کردید، در بالای صفحه روی دکمه Next کلیک کنید.

در بخش دوم، شما می توانید به طراحی شمایل (Design) نسخه موبایلی تان بپردازید. برای این کار فایل CSS نسخه اصلی وبلاگتان در کنار پیش نمایش نسخه موبایلی در اختیار شما قرار دارد. شما با دست بردن در فایل CSS می توانید شکل و رنگ دیگری به نسخه موبایلی وبلاگتان بدهید. مثلاً می توانید اندازه فونتها، رنگ آنها و یا نحوه قرار گیری شان را تغییر دهید.

هر تغییری که در فایل CSS بدهید، نتیجه آنرا در کادر پیش نمایشی که در سمت راست صفحه قرار دارد، می توانید ببینید. برای صفحه پیش نمایش هم چهار حالت در نظر گرفته شده است: iPhone، Nokia، RAZR و BlackBerry. بدین ترتیب شما می توانید نسخه موبایلی وبلاگتان را روی صفحات چهار نوع تلفن همراه نیز ببینید!

۵- در بخش سوم، شما این امکان را به وبلاگتان می دهید، تا اگر شخصی با موبایل وارد آن شد، بصورت خودکار به نسخه موبایلی هدایت شود. برای این کار در صفحه Manage روی گزینه Launch کلیک کنید.

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

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

گام اول: یک نام برای نسخه موبایلی که ساخته اید، انتخاب کنید. (توجه داشته باشید، نامی که انتخاب می کنید، قسمتی از آدرس نسخه موبایلی وبلاگتان خواهد شد. بدین صورت http://name.mobify.me)

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

چنانکه از سیستم های مدیریت محتوایی چون WordPress یا Drupal و… استفاده می کنید، می توانید به جای قرار دادن کد جاوا، افزونه (Plugin) مربوطه را نصب نمائید. برای دانلود کردن افزونه ها به این صفحه مراجعه کنید.

 

نکته آخر:

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

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