Thiết kế website

  • Thu gọn
  • Mở rộng
  • Giảm cỡ chữ
  • Cỡ chữ chuẩn
  • Tăng cỡ chữ
Trang chủ thiet ke website vnt Kiến thức thiết kế web thiet ke website vnt Thông tin công nghệ
|

Hiểu thêm về thiết kế web cho thiết bị di động.

Thiết kế website cho điện thoại di động, mobile, máy tính bảng

Từ năm 2013 người dùng internet có xu hướng lướt web bằng thiết bị di động như điện thoại cảm ứng màn hình rộng hoặc máy tính bảng nhiều hơn là dùng PC hay Laptop như trước kia. Nắm bắt nhu cầu phát triển công nghệ của người dùng VNT với những nhà thiết kế chuyên nghiệp đã cho ra đời những sản phẩm dành riêng cho thiết bị di động.

Thiết kế website cho thiết bị di động đã, đang và sẽ trở thành một nhu cầu không thể thiếu trong xã hội hiện đại ngày nay. Vì vậy quý khách hãy tham khảo những hướng dẫn thiết kế cho lĩnh vực mới này để nắm bắt cơ hội phát triển cho sản phẩm, dịch vụ và thương hiệu của mình.

Những chú ý khi thiết kế website chi điện thoại di động:

Nên dùng Ứng dụng hay Website?

Thiet ke web cho dien thoaiĐây là thắc mắc của khách hàng khi đến với VNT. Ứng dụng có những thuận lợi riêng, có thể dùng off-line và có lượng người dùng nhất định. Tuy nhiên chúng ta hãy xem xét sâu hơn về thiết kế và sự phát triển của các ứng dụng trong các thiết bị di động. Bài viết này VNT sẽ tập trung vào thiết kế website cho thiết bị di động.

Thiết kế web cho thiết bị di động cũng tương tự như những website bạn vẫn thường thiết kế, Tuy nhiên thiết kế web cho thiết bị di động sẽ làm đơn giản hóa để nội dung được hiển thị dễ dàng cho người đọc. Web cho thiết bị di động không còn quá nhiều màu sắc đường nét và những phần quảng cáo rườm rà vì màn hình hiển thị là tương đối nhỏ so với Laptop và PC.

Tốc độ kết nối được ưu tiên hàng đầu.

Từ những năm trước, internet băng thông rộng (wifi) đã phổ biến ở khắp nơi từ quán cafe, nhà hàng, khách sạn, người thiết kế website phải tối ưu trình duyệt của mình để đảm bảo thời gian lướt web nhanh nhất. Bây giờ chúng ta cũng phải làm điều tương tự cho thiết bị di động.

Các nhà sản xuất đưa ra ngày càng nhiều trình duyệt với tốc độ lướt web, tải dữ liệu cực nhanh. Thêm vào đó là nhu cầu tải dữ liệu không giới hạn của một bộ phận người dùng, họ sẵn sàng chi trả cho việc download tài liệu của mình. Vì vậy, trong vai trò người thiết kế, VNT đã phải nghiên cứu và cân nhắc vấn đề này. Phải giảm code, xóa bỏ bớt thẻ tags và các bình luận. Dùng hình ảnh kích thước nhỏ hơn và tài liệu nén để cho việc download được thực hiện dễ dàng hơn.

Thiế kế cho phù hợp với độ phân giải màn hình.

Khi thiết kế web cho thiết bị di động, chúng ta phải xem xét đến kích thước màn hình. Điều này có vẻ sẽ gây khó khăn cho những nhà thiết kế và lập trình đã quen làm cho màn hình HD với kích thước 1920 x 1200 hoặc lớn hơn.

Màn hình của Iphone 5 hiện nay có độ phân giải 640 x 1136, Ipad 1536 x 2048. Nhưng hai kiểu màn hình này lớn hơn nhiều so với mặt bằng chung các thiết bị di động khác. Một số điện thoại di động dùng hệ điều hành Android hay Blackberry màn hình chỉ là 480 x 854. Website với kích thước này thật sự nhỏ hơn nhiều so với những mẫu mà chúng ta thường thiết kế, nhưng hãy luôn nhớ rằng chúng ta sẽ thiết kế nó cho thiết bị di động.

Tìm hiểu và chuyển hướng người dùng

Đặt địa vị bạn vào người dùng và bạn đang lướt web bằng thiết bị di động nếu website bạn đang vào không thể gửi mẫu website phù hợp, hoặc không thể load web được thì liệu bạn có muốn vào website này nữa không?

Một cách để xác định thiết bị đang dùng là dựa vào dữ liệu WURFL. WURFL đây là cơ sở dữ liệu có sẵn trên các trang web thu thập thông tin về các thiết bị di động hiện có. WURFL có các hàm APIs cho một số chương trình ngôn ngữ. Yelitza Jaramillo có viết một bài hướng dẫn sử dụng gói PHP API cho WURFL

Tự động nhận biết URL trên thiết bị di động

Thông thường khi duyệt web trên mobile người dùng thường nhìn thấy URL có dạng http://m.vnt.net.vn. Tuy nhiên với các kỹ sư VNT khách hàng có thể truy cập vào địa chỉ web bình thường nhưng website sẽ tự hiểu thiết bị mà hiển thị thông tin dưới dạng web cho PC, Lapop hay web cho thiết bị di động. Điều này sẽ giúp khách hàng dễ dàng hơn trong việc truy cập website và hỗ trợ cho công cụ tìm kiếm tốt hơn

Cấu trúc một cột cho thiết bị di động

Khi một trang được tải trên thiết bị di động, nó nên được tùy chỉnh tự động cho phù hợp với kích thước màn hình. Với kích thước màn hình của hầu hết các loại điện thoại, một trang khó có thể hiển thị được hết. Nếu không được thu nhỏ lại, người dùng sẽ phải dùng đến thanh cuốn ngang và dọc để xem được hết nội dung của trang. Như vậy rất bất tiện cho người dùng

Hiểu được điều này các kỹ sư của VNT đã tạo cấu trúc một cột vừa với kích thước màn hình của các thiết bị di động. Người dùng vẫn phải sử dụng thanh cuốn, nhưng họ chỉ cần cuốn theo chiều dọc rất đơn giản và dễ dàng nhưng vẫn hiển thị được đầy đủ nội dung mà người dùng quan tâm.

Tối ưu nội dung và đơn giản hóa.

Thêm một lưu ý nữa đó là hãy đặt sự đơn giản và kích thước nhỏ lên hàng đầu. Nhẹ nhàng luôn là tiêu chí được ưu tiên khi sắp xây dựng nội dung và cấu trúc trang. Giảm bớt những đường links và nội dung không liên quan đến phần nội dung. Những mục trên sidebar (cột bên cạnh) và footer (chân trang) cũng có thể nên được bỏ đi để tập trung vào nội dung chính và góp phần đơn giản hóa trang web.

Việc giảm bớt một số nội dung không cần thiết như vậy sẽ giúp giảm dung lượng và thời gian tải trang. Điều này rất quan trọng khi thiết kế web dành cho thiết bị di động.

Giảm bớt thao tác nhập và thanh điều hướng webiste

Thao tác nhập (User Input) có thể khó sử dụng trên một số dòng điện thoại vì bàn phím nhỏ không giống như bàn phím thông thường mà người dùng lại rất dễ nhập sai. Thay vào đó, chúng ta có thể tùy chỉnh số lần nhập cần thiết cho người dùng. Ví dụ, thông tin có thể được kéo vào từ tài khoản được ghi nhớ lần trước. Thanh điều hướng có thể được chuyển thành dropdown menu (danh mục sổ xuống). Hoặc chúng ta cũng có thể tận dụng các chức năng sẵn có của điện thoại

Một vài điều cơ bản khi thiết kế web cho thiết bị di động.

  • Lựa chọn font chữ phù hợp khi thiết kế

  • Khi thiết kế không dùng Flash, Java, Frames và Pop Ups

  • Tạo độ rộng cho wrapper tỉ lệ phần trăm với với độ rộng màn hình thiết bị di động để nó có thể thay đổi phù hợp.

  • Tạo các đoạn, tiêu đề và điều hướng vừa khít với màn hình

  • Trình duyệt Sarafi không hỗ trợ hoàn toàn @font-face

  • Tham khảo CSS3 Media Querries khi thiết kế web cho thiết bị di động

  • Hãy luôn ghi nhớ yếu tố đơn giản và phù hợp cho người dùng.

Đừng ngần ngại liên hệ với chúng tôi ngay hôm nay để bắt đầu thiết kế website cho điện thoại di động của bạn.
 

VNT chúc quý khách thành công: http://vnt.net.vn
[ Quay Lại ]
Mời bạn xem thêm
thiet ke website vnt Facebook ra ứng dụng giúp truy cập Internet miễn phí
thiet ke website vnt Tăng thu nhập bằng Mobile Video Ads Network
thiet ke website vnt Bí mật thành công của Opera Mobile Store
thiet ke website vnt Có thể sử dụng tên miền tiếng Việt để phát triển thương hiệu
thiet ke website vnt Hướng dẫn khắc phục thuật toán Panda 4.1
thiet ke website vnt Làm thế nào để sử dụng Google Plus làm Social Marketing
thiet ke website vnt Google đang giảm dần traffic tự nhiên
thiet ke website vnt Tiếp cận khách hàng trên Facebook nhiều hơn với các thủ thuật hữu ích
thiet ke website vnt 5 thủ thuật tăng tốc khi duyệt web
thiet ke website vnt NHNN phản hồi thông tin tên miền 4 ngân hàng bị rao bán
thiet ke website vnt Triều Tiên có đội tin tặc giỏi nhất thế giới?
thiet ke website vnt Hé lộ đoạn mã cho thấy WhatsApp đang phát triển phiên bản web
thiet ke website vnt Bing bổ sung tính năng tìm kiếm trẻ lạc bằng AMBER
thiet ke website vnt Hơn 50% quảng cáo của Google bị “lơ”
thiet ke website vnt Các giai đoạn chính của quá trình SEO là gì?
thiet ke website vnt Sử dụng công cụ Google Webmaster để cải thiện SEO
thiet ke website vnt 10 thực hành SEO xấu sẽ “diệt” thứ hạng trên Google
thiet ke website vnt Cần bao lâu để xếp hạng trên Google?
thiet ke website vnt Top10 thủ thuật SEO Copywriting để đạt thứ hạng cao
thiet ke website vnt Giúp google index website nhanh hơn
thiet ke website vnt Làm cho trang web của bạn dễ điều hướng hơn
thiet ke website vnt Click Through Rate (CTR) – Thuật ngữ SEO
thiet ke website vnt Các thuật ngữ SEO Google thông dụng nhất
thiet ke website vnt Tìm hiểu về Backlinks cho SEO
thiet ke website vnt Hướng dẫn Xây dựng chiến dịch SEO Google Digital Marketing hiệu quả
thiet ke website vnt Hướng dẫn viết nội dung Website chất lượng SEO
thiet ke website vnt Các bước làm SEO Google Marketing Online hiệu quả nhất
thiet ke website vnt Cách Quảng cáo Social Media Marketing - Tiếp Thị Mạng Xã Hội
thiet ke website vnt Top 10 thủ thuật SEO các quản trị website cần tránh xa
thiet ke website vnt Cách khắc phục tháo gỡ tác vụ thủ công và Google Sanbox
thiet ke website vnt Phân tích đối thủ cạnh tranh khi làm SEO
thiet ke website vnt Những kỹ thuật cơ bản về SEO Onpage Website
thiet ke website vnt Cách xây dựng baclinks chất lượng cho SEO
thiet ke website vnt Cách SEO Ping Backlinks để xếp hạng cao trên Google
thiet ke website vnt Email marketing là cách tiếp cập khách hàng tốt nhất?
thiet ke website vnt Hướng dẫn cài Google Analytics cho Website
thiet ke website vnt Thiệt hại vì mất an toàn thông tin: Doanh nghiệp biết nhưng làm ngơ
thiet ke website vnt Bộ Công thương bác tin bán hàng trên Facebook phải nộp thuế
thiet ke website vnt Các bước xây dựng nội dung thân thiện với SEO Google
thiet ke website vnt Kỹ thuật SEO tăng lượt truy cập website