Thiết kế web cho di động có thực sự cần?

Chưa bao giờ việc cập nhật thông tin tiện dụng như bây giờ. Chúng ta đang sống trong một thế giới đa thiết bị, từ những điện thoại kết nối GPRS, những thiết bị Smartphone, cho tới máy tính bảng, hay là tivi thông minh… rất nhiều. Và từ bất kỳ thiết bị nào người dùng cũng mong đợi cập nhật thông tin đầy đủ nhất.

co-can-thiet-ke-web-di-dong

Theo một thống kê mới đây (23/10/2013) được Google công bố thì

  • 81 % sử dụng điện thoại thông minh và tivi
  • 66 % sử dụng điện thoại thông minh và máy tính xách tay
  • 83 % nói rằng họ sẽ không rời khỏi nhà mà không có điện thoại thông minh
  • 63 % cho rằng, họ không mua hàng qua điện thoại di động, nhưng họ sẽ dùng điện thoại để thu thập thông tin và quyết định mua hàng.

Vậy điều quan trọng để nhận thấy là, bán hàng qua web cho di động là khó, tuy nhiên, web di động có ảnh hưởng đến quyết định mua hàng.

Bạn có biết, rất nhiều trang báo, và các công ty khuyên bạn thiết kế website cho di động để bán hàng, họ nói có nhiều tiềm năng lắm, bán được hàng lắm. Dám đảm bảo rằng họ chưa hiểu vấn đề nằm ở đâu, trước khi đọc bài này !?

Những web cho di động nào không bán được hàng?

Những website có chức năng giỏ hàng, và đặt hàng, sẽ không bán được hàng qua website của mình. Nói một cách chính xác là số lượng bán được hàng là ít. Hay nói theo ngôn ngữ chuyên ngành, thì tỷ lệ chuyển đối thấp.

Lý do thứ nhất: Lo ngại nhất là sự an toàn về thông tin không được đảm bảo. Người tiêu dùng vẫn chưa quen với cách thức đó, cũng như web bán hàng thời gian đầu vậy. Tín hiệu đáng mừng, là người tiêu dùng Việt Nam thích nghi rất nhanh với các công nghệ cao cấp.

Lý do thứ hai: Mục đích chính là không mua hàng, không ai sử dụng điện thoại di động với mục đích mua hàng cả. Họ dùng như 1 thiết bị giải trí, hoặc cập nhật thông tin. Mua hàng phải ngồi ở máy tính, nhiều người còn phải chắc chắn là xem tận mắt.

Lý do thứ ba: Là tốc độ kết nối chậm, dù Việt Nam là quốc gia 3G rẻ nhất, nhưng tốc độ là tệ, kết nối có thể bị ngắt bất kỳ lúc nào, hoặc là out mà không có lý do gì. Bạn tưởng tượng thế nào, nếu sản phẩm của bạn không tải ảnh về máy, hoặc ảnh về máy rất lâu mới hiển thị !?

Đừng dùng máy tính bảng hay smartphone để kiểm tra tốc độ website, dùng cái điện thoại nokia kết nối 3g hoặc gprs thử kiểm tra lại xem web đã đủ nhanh chưa nhé?

Những mảng kinh doanh nào nên thiết kế web cho di động?

Ngay và luôn! Những website về dịch vụ, đặc biệt các dịch vụ phụ vụ nhu cầu gia đình. Như sửa chữa điện lạnh, sửa chữa ống nước, lau dọn vệ sinh, hút bể phốt … Tại sao vậy nhỉ?

Bạn thử tưởng tượng rằng ống nước nhà bạn bị vỡ hoặc tắc. Mở điện thoại, tìm dịch vụ, và gọi thợ sửa. Điều đó là cực kỳ tuyệt vời. Không lịch kịch mở máy tính chờ đợi.

Những website cung cấp dịch vụ, sẽ có tỷ lệ chuyển đổi tốt, nếu web có phiên bản dành cho di động. Hoặc là, những web bán hàng có phần tư vấn tốt, nếu tập chung vào cung cấp thông tin qua di động điều đó sẽ cực kỳ tốt.

Dành cho quảng cáo: Nếu bạn có nhu cầu thiết kế web cho di động, liên hệ 097 375 5859 để được tư vấn về chi phí và báo giá. Chi phí thấp luôn là tiêu chí hàng đầu.

Tất nhiên rằng, nếu bạn có đủ điều kiện để xây dựng web cho di động thì nên xây dựng ngay từ bây giờ. Tức là bài viết này không có giá trị gì cả. Còn nếu đang phân vân về việc thiết kế web cho di động, thì bạn nên cân nhắc thật kỹ, liệu rằng có bán hàng qua di động được không? Đó là điều cần cân nhắc, không nhất thiết phải chạy theo xu thế mà bản thân chưa thực sự nắm rõ.

5 CSS FrameWork miễn phí tốt nhất khi thiết kế web mobile

Ở Việt Nam chúng ta thiết kế web ngày càng chuyên nghiệp hơn, mặc dù số lượng các công ty thiết kế web giá rẻ còn khá nhiều và thiếu tính chuyên nghiệp cao. Tức là chưa có 1 quy trình làm việc thống nhất giữa các bộ phận với nhau, và cách thức thống nhất với khách hàng nói riêng. Bạn có công nhận với mình thế không nào?

Thường thì các công ty thiết kế web tại Việt Nam có 3 bộ  phận như thế này, đội ngũ ý tưởng và thiết kế đồ họa, đội ngũ cắt css và thiết kế html, đội ngũ code và xây dựng mã nguồn. Bài này không tập trung sâu vào các mối liên hệ hay chức năng của các đội ngũ đó.

Mà theo kinh nghiệm của mình. Muốn thống nhất được các bộ phận, và làm việc chuyên nghiệp hơn, hoặc hướng ra khách hàng nước ngoài. Chúng ta nên xây dựng theo khung chuẩn sử dụng các FrameWork  phổ biến. Có lẽ đó mới là con đường lâu dài và phát triển.

FrameWork là gì?

Cái này giống như 1 mã nguồn mở, được người ta viết sẵn và mình cứ thế bê về xơi vậy. Các bạn đừng ngại làm việc đó, vì họ cho phép, và mình cũng chẳng vi phạm gì cả.

Đừng mất công ngồi xây dựng 1 cái mới từ đầu, mà chẳng theo cái chuẩn nào cả. Nếu hứng thú với việc phát triển hay thường xuyên cập nhật cùng người xây dựng nên Framework đó hoặc hỗ trợ cộng đồng sử dụng Framework.

CSS FrameWork tức là các đoạn mã css được viết sẵn theo các id và class cố định giúp khi thiết kế bạn làm việc nhanh hơn, không phải căn chỉnh lại nhiều và không sợ bị lỗi. Chắc chắn bạn hay gặp lỗi css khi thiết kế web phải không?

CSS FrameWork cho web mobile

CSS FrameWork cho web mobile là css này sử dụng cho HTML5 với lại CSS 3 hiển thị tốt trên cac Smartphone và mobile hiện tại, gần như không có lỗi trên các trình duyệt phổ biến hiện nay.

01: Bootstrap

FrameWork cho smartphone phổ biến nhất. Bootstrap được sinh ra tại Twitter hồi đầu có tên là Twitter Bootstrap hiện nay là FrameWork số 01, dễ dùng phổ biến và đầy đủ. Đây là FrameWork bạn nên chọn vì được khá nhiều đơn đặt hàng từ các trang FreeLancer trên thế giới.

Bootstrap

Chỉ số sức mạnh:

  • Alexa: 843
  • Pagerank: 8/10
  • Social Media: 17 398
  • Download: http://getbootstrap.com/

2: Html5 Boilerplate

HTML5 Boilerplate giúp bạn xây dựng App hoặc web nhanh, mạnh mẽ và đáp ứng hết các trình duyệt đây là theo giới thiệu tại trang chủ.

HTML5 Boilerplate

Chỉ số sức mạnh:

  • Alexa: 26,297
  • Pagerank: 7/10
  • Social Media: 41 634
  • Download: http://html5boilerplate.com/

3: Foundation

Foundation không chỉ xử lý về kích thước hình ảnh, mà còn giúp bạn chọn lọc được các thành phần nào cần tải và không cần tải giúp cho website nhanh hơn và đẹp hơn.

Foundation

 

Chỉ số sức mạnh:

  • Alexa: 3,338
  • Pagerank: 7/10
  • Social Media: 3 300
  • Download: http://foundation.zurb.com/index.html

4: Skeleton

Skeleton đẹp nhẹ, dễ sử dụng đó là điều mà Framework này có thể đánh bại các đối thủ khác, với đầy đủ các tính năng tượng tự như nhau.

Skeleton

Chỉ số sức mạnh:

  • Alexa: 45,638
  • Pagerank: 6/10
  • Social Media: 12 437
  • Download: http://www.getskeleton.com/

5: Blueprint

Blueprint được viết theo chuẩn HTML 4 cũng là 1 Framework bạn nên lưu tậm khi xây dựng website cho smartphone.

Blueprint

Chỉ số sức mạnh:

  • Alexa: 122,330
  • Pagerank: 6/10
  • Social Media: 9 551
  • Download: http://www.blueprintcss.org/

Bài viết theo kinh nghiệm có phần chưa được sâu lắm của mình, vì thường mình không có hứng thú tìm hiểu chàn lan. Mình thích cái nào thì sử dụng và tìm hiểu về cái đó thôi, còn đâu chịu những cái khác không biết.

Ví dụ mình chỉ biết về WordPress, còn đâu Joomla hay Drupal mình chịu chẳng biết mù tịt gì, kể cả cài đặt cũng chưa thử bao giờ.

Nếu viết bài mà cứ theo ý mình, hoặc là không có lựa chọn khác cho các bạn, thì kiểu thể hiện giống như là gia chủ vậy. Vậy nên mình liệt kê ra, bạn nào đang sử dụng frameworkthấy hay thì giới thiệu cho mọi người nữa nhé.

Thời gian sắp tới chắc mình sẽ sử dụng Bootstrap  cho việc thiết kế. Thêm nữa Bootstrap khá là dễ sử dụng khi kết hợp với WordPress.

Kiểm tra thiết kế web di động bằng Chrome

Bài viết hướng dẫn dùng Chomre để kiếm tra thiết kế website cho di động. Chrome là trình duyệt tuyệt vời, và luôn luôn tuyệt vời. Dù gần đây những máy cấu hình “yếu” chạy Chrome khá là ỳ ạch không giống như thời mới khai sinh.

Hôm nay mình mới để ý Chrome phiên bản mới nhất như mình đang sử dụng Version 33.0.1750.154 m (tự nó luôn update) có thêm phần kiểm tra website cho thiết bị di động. Hay nói chính xác là Chrome sẽ giả lập thiết bị di động để kiểm tra cách hiển thị của website trên đó.

Đầu tiên các bạn vào website cần hiển thị, click chuột phải sau đó chọn Inspect element (Kiểm tra phần tử) lựa chọn cuối cùng khi bạn click chuột phải

chrome-kiem-tra-web

Ở phần hiển thị ra bạn chọn Emulation lựa chọn thứ 3 ở phần dưới, sau đó chọn thiết bị bạn muốn giả lập, sau đó nhất nút Emulate trình duyệt sẽ giả lập về thiết bị bạn muốn

kiem-tra-website-tren-di-dong

Sau đó muốn chuyển về chế độ bình thường bạn chỉ cần tắt phần Inspect element đi hoặc nhấn Reset.

Cập nhật 14/04

kiemtrawebdidong
Bạn lưu ý lựa chọn theo mũi tên sẽ thấy phần Emulation

Có rất nhiều công cụ giúp bạn làm việc này, tuy nhiên sử dụng trình duyệt Chrome sẽ khiến công việc nhanh hơn, và chuẩn hơn. Hướng dẫn khá đơn giản, chúc các bạn thiết kế được những website cho di động đẹp và theo chuẩn.