Đầu tiên, bạn truy cập vào http://mobify.me, nhấn SIGN UP để đăng ký một tài khoản miễn phí. Tại trang đăng ký, bạn khai báo địa chỉ email và nhập hai lần mật khẩu vào phần Account Information, rồi đánh dấu vào ô I have read and agree to the MOBIFY Terms of Service. Xong, bạn nhấn CREATE ACCOUNT để đăng nhập và sử dụng ngay tài khoản vừa tạo mà không cần kích hoạt.
Sau khi đăng nhập, bạn nhấn vào mục DASHBOARD phía trên để tiến hành tạo thêm phiên bản điện thoại di động cho website đã có sẵn. Bạn nhập địa chỉ của website đó vào ô MOBIFY A WEBSITE, rồi nhấn MOBIFY MY SITE.
Giao diện website sẽ được hiển thị đầy đủ trên màn hình. Bạn nhấn chuột vào từng thành phần muốn đưa vào phiên bản dành cho di động, chỉ nên giữ lại các thành phần cần thiết và loại bỏ những “phụ kiện” linh tinh như banner quảng cáo, hình ảnh trang trí,…
Sau khi nhấp vào một thành phần trên web, dịch vụ sẽ hiển thị tên của thành phần. Nếu rành CSS, bạn cần ghi nhớ tên để chỉnh sửa lại giao diện dễ dàng hơn.
Chọn xong, bạn nhấn nút Next ở phía trên góc phải để sang chuyển bước thiết kế giao diện. Khung bên phải hiển thị giao diện website khi xem trên điện thoại ứng với từng loại máy: iPhone, Nokia, Motorola RAZR, BlackBerry (nhấp vào tên máy để xem giao diện website hiển thị trên màn hình máy đó).
Tại bước này, bạn có thể chỉnh sửa lại một số thành phần như: màu sắc, kiểu chữ, cách trình bày thông qua hộp CSS bên trái (nếu không rành CSS thì bạn bỏ qua bước này). Ngoài ra, nếu muốn thêm nội dung HTML vào website, bạn nhấn New Block, điền đoạn mã vào hộp HTML hiện ra. Bạn có thể thay đổi vị trí của các thành phần trên giao diện bằng cách nhấn vào thành phần cần di chuyển rồi chọn một trong hai nút: Move Down (đưa lên trên), Move Up (dời xuống dưới).
Lưu ý: Do menu trên website “phiên bản máy tính” thường không hiển thị đúng khi xem trên điện thoại, nên bạn có thể tự tạo menu cho website bằng cách nhấn New Block và điền vào đoạn mã HTML sau:
Code:
[b]<div id="navigation">
<a href="đường dẫn web">Tên chuyên mục</a>
<a href=" đường dẫn web "> Tên chuyên mục </a>
</div>[/b]Ví dụ:
Code:
[b]<a href="http://news.goonline.vn/604/ict.htm">ICT</a> [/b]Tiếp đến, bạn trang trí lại cho menu bằng cách sử dụng CSS, hoặc sử dụng đoạn CSS mẫu sau (dán đoạn CSS vào hộp CSS phía trên, thay đổi màu #003b77 thành bất cứ mã màu nào bạn thích):
Code:
#navigation{
background:#003b77;
padding:10px 7px;
margin-bottom:12px;
text-align:center;
}
#navigation a{
color:#fff;
font-size:1.1em;
letter-spacing:.7px;
margin:0 1px;
text-transform:uppercase;
} 
Xong, bạn nhấn Next và nhấn nút LAUNCH YOUR MOBILE VIEW để tận hưởng thành quả của mình. Tuy nhiên, bạn chỉ mới thiết kế phần giao diện cho trang chủ website mà chưa “đụng” đến các bài viết . Vì thế, khi người xem nhấp vào xem bài viết trên website, họ sẽ được chuyển đến trang web gốc như xem trên máy tính. Muốn thiết kế lại giao diện của từng bài viết để chúng hiển thị tốt trên điện thoại, bạn nhấn vào từng liên kết dưới trường SUGGESTED TEMPLATES và tiến hành chỉnh sửa tương tự như ở trang chủ.
Hoàn tất, bạn nhấn LAUNCH YOUR MOBILE VIEW và chờ trong chốc lát để Mobify lồng giao diện website vào các mẫu điện thoại. Nếu đã ưng ý, bạn nhấn LAUNCH YOUR MOBILE VIEW để xuất bản. Ngược lại, bạn chọn I’m not ready yet! Take me back để quay lại và chỉnh sửa thêm.
Tại trang Deploy, bạn nhập tên cho website vào ô NAME YOUR MOBILE VIEWS rồi nhấn Save Name (nếu nhận được thông báo “The slug xyz has already been taken”, bạn cần chọn lại tên khác). Ngay sau đó, bạn có thể dùng điện thoại, hoặc trình duyệt web truy cập vào trang xyz.mobify.me để xem thử kết quả (xyz là tên website).
Nếu đã có sẵn tên miền và muốn người xem truy cập vào phiên bản website cho di động bằng tên ngắn gọn kiểu m.news.goonline.vn (với news.goonline.vn là tên miền website đã có), bạn điền m.news.goonline.vn vào ô USE A CUSTOM DOMAIN WITH YOUR MOBILE VIEW, rồi nhấn Save Custom Domain. Sau đó, bạn xem thêm hướng dẫn cấu hình tên miền tại http://community.mobify.me/guides/custom-domain-guide.
Cuối cùng, bạn cần thực hiện thêm bước tích hợp phiên bản website dành cho di động vào website, bằng cách dán đoạn mã JavaScript tại khung SEND MOBILE VISITORS TO YOUR MOBILE vào cặp thẻ <head> của website gốc. Khi người xem dùng điện thoại truy cập, họ sẽ được tự động chuyển đến phiên bản website dành cho điện thoại. Rất tiện lợi!
Lưu ý: Nếu website sử dụng mã nguồn WordPress, Drupal hay ExpressionEngine, bạn phải sử dụng thêm plugin thay vì dùng JavaScript, xem thêm hướng dẫn và đường dẫn tải plugin tại http://community.mobify.me/guides/mobile-device-detection (phần CMS PLUGINS).
Phương Trúc
