Những lời khuyên khi thiết kế web responsive tương thích di động

Những lời khuyên khi thiết kế web responsive tương thích di động

UX Design Trends 2015 & 2016, thiết kế Web tương thích theo kiểu Responsive đáp ứng nhiều thiết bị di động đã trở thành cách tiếp cận của nhiều doanh nghiệp cá nhân hỗ trợ nhiều kích cỡ màn hình và các thiết bị. Nhưng không phải tất cả các trang web đáp ứng được tạo ra đều tốt cả.

Cho dù bạn đang thiết kế một trang web cho công ty nào đo hay làm lại một nền tảng thương mại điện tử, chúng ta hãy cùng khám phá một số sai lầm mà bạn chắc chắn muốn tránh vào dự án thiết kế cho trang web của bạn.

 



1. Tập trung vào các thiết bị thay vì màn hình

 

Theo số liệu được cung cấp bởi OpenSignal, hiện nay có 24.093 thiết bị Android khác biệt trên thị trường, tăng từ 18.796 năm vừa qua (và điều này không phải là thậm chí đếm trên các thiết bị iOS và các thiết bị khác). Sự đa dạng đáng kinh ngạc này làm cho nó không thể không nhắm đến mục tiêu các thiết bị cá nhân. Thay vào đó, bạn phải tập trung vào màn hình.

Các loại thiết bị phổ biến như:

     - Wearables
     - điện thoại
     - Máy tính bảng
     - Máy tính để bàn

Thay vào đó, bạn nên thiết kế cho kích cỡ màn hình, bao gồm cả

     Micro-màn hình
     màn hình nhỏ
     Mid-range
     lớn
     Extra-lớn

2. Sử dụng Auto Sizes Device như Breakpoints

Khi các thiết bị mới vào thị trường, kích thước màn hình mới sẽ không tránh khỏi bị sai xót về hình ảnh

Nếu bạn chỉ sử dụng kích cỡ thiết bị hiện nay như breakpoint, trang web của bạn sẽ cảm thấy cứng ngắt. Để đáp ứng thách thức này, bạn có thể sử dụng một phương pháp tôi gọi là "xây dựng để thiết kế, không phải là thiết bị".

Bắt đầu với các phương pháp tiếp cận di động đầu tiên và xây dựng trang web của bạn với màn hình nhỏ nhất là điều liên quan cho người dùng của bạn. Trong hầu hết các trường hợp, một chiếc điện thoại sẽ được kích thước màn hình nhỏ nhất. Độ phân giải của màn hình iPhone (trong chế độ chân dung) là 320 pixels.

Tiếp tục quá trình này cho đến khi bạn đạt đến kích thước màn hình lớn nhất mà bạn đang thiết kế. Một tối đa 2000 pixel rộng sẽ bao gồm tất cả, cho màn hình lớn nhất hiện nay. Theo số liệu thống kê mới nhất của trình duyệt từ W3Schools, 99 phần trăm du khách có đề nghị đó thuộc kích thước 2000 pixel.

3. Chỉ Suy nghĩ nhỏ

Tầm quan trọng của màn hình nhỏ, thiết kế đáp ứng cho rằng cả lớn và nhỏ cho các bố trí.
Sử dụng Internet di động đã được phát triển trong nhiều năm. Trên toàn thế giới, bây giờ nó chiếm phần lớn khi sử dụng Internet, nhưng 42% lượng truy cập vẫn còn tới từ khách truy cập máy tính để bàn. Đó không phải là một số lượng không đáng kể, một nhà thiết kế người đáp ứng hoàn toàn.

4. Ẩn Nội dung

Trong các trang web điện thoại di động, suy nghĩ thường du khách đã vội vàng và chỉ đang tìm kiếm một mẫu nhỏ của nội dung mà các "trang web" đã cung cấp.



Nội dung như thông tin liên lạc và hướng được ưu tiên trong khi nội dung khác đã được ẩn trên những phiên bản điện thoại di động. Điều này gây ra một vấn đề cho những ai muốn truy cập vào tất cả các nội dung và các tính năng tương tự được tìm thấy trên các trang web bình thường, nhưng được trình bày trong một định dạng phù hợp với màn hình họ đang sử dụng tại thời điểm đó.

Các nghiên cứu gần đây đã chỉ ra rằng điều này "đổ xô truy cập di động" điều này một huyền thoại. Trong thực tế, một báo cáo mới đây của Inmobi thấy rằng "61% người sử dụng Internet di động trên thiết bị của họ trong khi xem TV."

 

5. Nhấn mạnh vào Navigation để phù hợp

Kích thước màn hình khác nhau và các yếu tố thiết bị đòi hỏi các loại khác nhau cho điều hướng trang web. Đó là một sai lầm để nhấn mạnh vào tính nhất quán tuyệt đối qua các bố cục khác nhau của một trang web đáp ứng.

Trên máy tính để bàn, FiveSimpleSteps sử dụng điều hướng nằm ngang.

 

 

Khi bạn thu nhỏ để các khung nhìn nhỏ nhất, chuyển hướng thay đổi để đơn giản nút "MENU"mở rộng ra.

Khi thiết kế chuyển hướng cần đáp ứng, các mục sau đây nên vẫn còn phù hợp:

     Liên kết hoặc nút nhãn
     kiểu chữ
     phương pháp điều trị màu

Các yếu tố sau đây không còn phù hợp vì chúng chứa các sắc thái của các kích cỡ màn hình cụ thể:

     kích thước nút
     bố trí trực quan
     Làm thế nào chuyển hướng hoạt động, bao gồm cả sự khác biệt cần thiết cho màn hình cảm ứng. Ví dụ, một chuyển hướng máy tính để bàn có thể ngồi tĩnh ở phía trên của màn hình. Khi bạn làm lại cách bố trí cho màn hình điện thoại di động, bạn có thể làm cho chuyển hướng liên tục và thu nhỏ kích thước để có được ra khỏi con đường.

6. Không để thiết kế đối với cảm ứng

Màn hình khác nhau cho phép các phương pháp đầu vào khác nhau cho thiết bị cảm ứng.

Một sai lầm phổ biến mà các nhà thiết kế thực hiện với các trang web đáp ứng được không thể thiết kế cho chức năng cảm ứng bao gồm:

Sử dụng các góc: Trên màn hình rất nhỏ, góc dưới bên trái là nơi dễ dàng nhất cho người dùng truy cập, thường xuyên nhất với ngón tay cái của họ. Trên máy tính bảng, được tổ chức một cách khác nhau hơn so với điện thoại, các góc trên cùng là thủ touch. Khi thiết kế bố trí màn hình nhỏ của bạn, đặt nút CTA hay liên kết quan trọng khác ở góc dưới bên trái để đảm bảo dễ dàng truy cập. Đối với màn hình tầm trung, đó là nơi mà hầu hết các máy tính bảng sẽ giảm, đặt các nút quan trọng và liên kết trong các góc trên.

7. Liên kết để  trong Mobile thân thiện với nội dung

Khả năng dễ dàng liên kết khách truy cập vào các trang hoặc nội dung khác, hoặc trên trang web của bạn hoặc các nơi khác trên Internet, là một trong những yếu tố quan trọng mà làm cho Web mạnh mẽ như vậy. Vấn đề đối với kinh nghiệm đáp ứng khi trang thiết bị-agnostic của bạn liên kết đến các trang web không đáp ứng khác.

Đôi khi, điều này không thể tránh khỏi. Nếu trang web đáp ứng của bạn liên kết đến các trang web khác mà bạn không kiểm soát, bạn sẽ không có khả năng để làm cho các trang web đa thiết bị thân thiện. Trong những trường hợp này, thay vào đó bạn có thể muốn tìm kiếm một trang web khác liên kết đến.

Nếu bạn đang liên kết đến các trang web và các nguồn lực mà bạn làm điều khiển, bao gồm cả vi các trang web hoặc các trang web đối tác, bạn muốn đảm bảo rằng tất cả trong số họ cung cấp một kinh nghiệm đáp ứng nhất quán tích cực.

8. Bỏ qua Performance

Trong Tương tác eBook miễn phí Thiết kế Thực tiễn tốt nhất của các hợp tác ứng dụng tạo mẫu UXPin, họ giải quyết thực tế rằng thời gian kỹ thuật số và thời gian thực là không giống nhau.

Một số cách để tối ưu hóa cho hiệu suất nhanh hơn trên di động:

   
- Hạn chế hình ảnh để chỉ những hình cần thiết
    -
Tối ưu hóa bất kỳ hình ảnh được sử dụng trên các trang web
    -
Loại bỏ các phụ thuộc không cần thiết, như các thư viện Javascript hoặc công cụ của bên thứ 3 khác
    
Lợi dụng trình duyệt bộ nhớ đệm. Điều này cho phép các tập tin thường được sử dụng trên trang web của bạn, bao gồm HTML, CSS, Javascript, vv, để được lưu trữ cục bộ. Điều này sẽ tăng tốc độ tải trang cho du khách trở lại.
    
Giảm bớt CSS sẽ loại bỏ khoảng trắng không cần thiết trong stylesheet của bạn và nén kích thước tập tin của nó để download nhanh hơn.
    
Giảm tổng số yêu cầu HTTP. Mỗi tập tin hoặc tài nguyên một trang web cần, bao gồm mỗi hình ảnh, cộng với CSS và các tập tin Javascript, yêu cầu trình duyệt lấy chúng từ một máy chủ Web. Các chuyến đi nhiều hơn đến máy chủ mà được yêu cầu, tải trang chậm. Giảm số lượng các chuyến đi này là một cách khác để tăng tốc độ tải trang chung.

9. Đừng quên trải nghiệm thiết kế cho trang web của bạn

  Chạy thử nghiệm khả năng sử dụng cho các trang web đáp ứng với người sử dụng thật trên các thiết bị thực tế sẽ cho phép bạn để phát hiện ra các vấn đề UX để giải quyết trước khi ra một phiên bản hoàn chỉnh cho khách hàng tham khảo.

Thiết kế web Đà Nẵng

Công ty Web360
Chúng tôi luôn nỗ lực đem lại cho khách hàng những sản phẩm và dịch vụ tốt nhất với một mức giá hợp lý nhất !
Địa chỉ : 44 Ngô Chi Lan, P. Thuận Phước, Q. Hải Châu, TP. Đà Nẵng
Điện thoại tư vấn: 0935 535 286 / 0905 252 360 / 05113 899 395
 
  • Thiết kế web LightHouse
  • Thiết kế web bamboogreen riverside
  • Thiết kế web vé máy bay
  • Thiết kế web khách sạn orchid
  • Công Ty TNHH Du Lịch Lữ Hành Và Kinh Doanh Bất Động Sản
  • Nhà hàng Venus
  • Công Ty TNHH Điện Tử Hoàn Kiếm
  • Công ty TNHH Nam Hồng
  • Công ty Bất động sản Minh Quang
  • City Home Co., Ltd