Thiết kế web phù hợp với các loại thiết bị và cách áp dụng?

Hầu hết mọi khách hàng mới ngày nay đều muốn có một phiên bản di động cho trang web của họ. Xét cho cùng, nó thực sự cần thiết: một thiết kế cho BlackBerry, một thiết kế khác cho iPhone, iPad, netbook, Kindle — và tất cả các độ phân giải màn hình cũng phải tương thích. Trong 5 năm tới, chúng ta có thể sẽ cần thiết kế cho một số phát minh bổ sung. Khi nào sự điên rồ sẽ dừng lại? Tất nhiên là không.

Trong lĩnh vực thiết kế và phát triển Web, chúng ta nhanh chóng đi đến chỗ không thể theo kịp các độ phân giải và thiết bị mới vô tận. Đối với nhiều trang web, việc tạo phiên bản trang web cho từng độ phân giải và thiết bị mới là không thể hoặc ít nhất là không thực tế. Chúng ta có nên chịu hậu quả của việc mất khách truy cập từ một thiết bị, vì lợi ích của việc có được khách truy cập từ thiết bị khác không? Hoặc là có một lựa chọn khác?

Thiết kế web responsive là gì?

Thiết kế Web đáp ứng là phương pháp gợi ý rằng thiết kế và phát triển nên đáp ứng với hành vi và môi trường của người dùng dựa trên kích thước màn hình, nền tảng và định hướng.

Phương pháp này bao gồm sự kết hợp giữa lưới và bố cục linh hoạt, hình ảnh và cách sử dụng thông minh các truy vấn phương tiện CSS. Khi người dùng chuyển từ máy tính xách tay của họ sang iPad, trang web sẽ tự động chuyển đổi để phù hợp với độ phân giải, kích thước hình ảnh và khả năng viết kịch bản.

Người ta cũng có thể phải xem xét cài đặt trên thiết bị của họ; chẳng hạn như nếu họ có VPN dành cho iOS trên iPad của họ, thì trang web không được chặn quyền truy cập của người dùng vào trang. Nói cách khác, trang web nên có công nghệ tự động đáp ứng các tùy chọn của người dùng. Điều này sẽ loại bỏ nhu cầu về một giai đoạn thiết kế và phát triển khác nhau cho mỗi thiết bị mới trên thị trường.

Chuyển nguyên tắc này sang thiết kế Web, và chúng ta có một ý tưởng tương tự nhưng hoàn toàn mới. Tại sao chúng ta nên tạo một thiết kế Web tùy chỉnh cho từng nhóm người dùng; xét cho cùng, các kiến trúc sư không thiết kế một tòa nhà cho từng quy mô và loại nhóm đi qua nó? Giống như kiến trúc đáp ứng, thiết kế Web sẽ tự động điều chỉnh. Nó không nên yêu cầu vô số giải pháp tùy chỉnh cho từng loại người dùng mới.

Rõ ràng, chúng ta không thể sử dụng các cảm biến chuyển động và robot để thực hiện điều này theo cách mà một tòa nhà sẽ làm. Thiết kế web đáp ứng yêu cầu một cách suy nghĩ trừu tượng hơn. Tuy nhiên, một số ý tưởng đã được thực hiện: bố cục linh hoạt, truy vấn phương tiện và tập lệnh có thể định dạng lại trang Web và đánh dấu dễ dàng (hoặc tự động).

Nhưng thiết kế Web đáp ứng không chỉ là về độ phân giải màn hình có thể điều chỉnh và hình ảnh có thể thay đổi kích thước tự động, mà còn là một cách suy nghĩ hoàn toàn mới về thiết kế. Hãy nói về tất cả các tính năng này, cùng với các ý tưởng bổ sung đang được thực hiện.

1. Phù hợp với nhiều kích thước màn hình

Với nhiều thiết bị hơn, độ phân giải, định nghĩa và hướng màn hình khác nhau. Các thiết bị mới với kích thước màn hình mới đang được phát triển hàng ngày và mỗi thiết bị này có thể xử lý các biến thể về kích thước, chức năng và thậm chí cả màu sắc.

Một số ở chế độ ngang, số khác ở chế độ dọc, số khác thậm chí còn hoàn toàn vuông. Như chúng ta đã biết từ sự phổ biến ngày càng tăng của iPhone, iPad và điện thoại thông minh tiên tiến, nhiều thiết bị mới có thể chuyển từ chế độ dọc sang chế độ ngang theo ý muốn của người dùng. Làm thế nào là một để thiết kế cho những tình huống này?



Ngoài việc thiết kế cho cả ngang và dọc (và cho phép các hướng đó có thể chuyển đổi ngay lập tức khi tải trang), chúng ta phải xem xét hàng trăm kích thước màn hình khác nhau. Có, có thể nhóm chúng thành các loại chính, thiết kế cho từng loại và làm cho mỗi thiết kế trở nên linh hoạt khi cần thiết. Nhưng điều đó có thể khiến bạn choáng ngợp và ai biết được số liệu sử dụng sẽ như thế nào sau 5 năm nữa? Bên cạnh đó, nhiều người dùng không tối đa hóa trình duyệt của họ, chính điều này đã để lại quá nhiều chỗ cho sự đa dạng giữa các kích thước màn hình.

Morten Hjerde và một số đồng nghiệp của ông đã xác định số liệu thống kê về khoảng 400 thiết bị được bán từ năm 2005 đến 2008. Dưới đây là một số thiết bị phổ biến nhất:



Kể từ đó, thậm chí nhiều thiết bị đã ra đời. Rõ ràng là chúng tôi không thể tiếp tục tạo các giải pháp tùy chỉnh cho từng giải pháp. Vì vậy, làm thế nào để chúng ta đối phó với tình hình?

2. Các thành phần linh hoạt

Một vài năm trước, khi bố cục linh hoạt gần như là một thứ “xa xỉ” đối với các trang web, thứ duy nhất linh hoạt trong thiết kế là các cột bố cục (yếu tố cấu trúc) và văn bản. Hình ảnh có thể dễ dàng phá vỡ bố cục và thậm chí các yếu tố cấu trúc linh hoạt đã phá vỡ hình thức của bố cục khi được đẩy đủ. Thiết kế linh hoạt không thực sự linh hoạt; chúng có thể cho hoặc lấy vài trăm pixel, nhưng chúng thường không thể điều chỉnh từ màn hình máy tính lớn sang netbook.

Bây giờ chúng ta có thể làm cho mọi thứ linh hoạt hơn. Hình ảnh có thể được điều chỉnh tự động và chúng tôi có các giải pháp thay thế để bố cục không bao giờ bị vỡ (mặc dù chúng có thể bị nhòe và khó đọc trong quá trình này).

Mặc dù đây không phải là cách khắc phục hoàn toàn nhưng giải pháp này mang đến cho chúng tôi nhiều tùy chọn hơn. Nó hoàn hảo cho các thiết bị chuyển từ hướng dọc sang hướng ngang ngay lập tức hoặc khi người dùng chuyển từ màn hình máy tính lớn sang iPad.

Trong bài viết của Ethan Marcotte, anh ấy đã tạo một thiết kế Web mẫu có bố cục linh hoạt tốt hơn này. Toàn bộ thiết kế là sự kết hợp đáng yêu giữa lưới linh hoạt, hình ảnh linh hoạt và đánh dấu thông minh khi cần thiết. Tạo lưới chất lỏng là một phương pháp khá phổ biến và có một số kỹ thuật để tạo hình ảnh chất lỏng:

• Ẩn và hiển thị các phần của hình ảnh
• Tạo hình ảnh tổng hợp trượt
• Hình ảnh tiền cảnh có tỷ lệ với bố cục

Để biết thêm thông tin về cách tạo trang web linh hoạt, hãy nhớ xem cuốn sách “Thiết kế web linh hoạt: Tạo bố cục lỏng và đàn hồi bằng CSS” của Zoe Mickley Gillenwater và tải xuống chương mẫu “Tạo hình ảnh linh hoạt”. Ngoài ra, Zoe còn cung cấp danh sách đầy đủ các hướng dẫn, tài nguyên, nguồn cảm hứng và các phương pháp hay nhất về cách tạo lưới và bố cục linh hoạt: “Tài nguyên cần thiết để tạo bố cục dạng lỏng và đàn hồi”.

Mặc dù từ góc độ kỹ thuật, điều này hoàn toàn có thể thực hiện được một cách dễ dàng, nhưng nó không chỉ là cắm các tính năng này vào là xong. Nhìn vào logo trong thiết kế này, ví dụ:

Ví dụ về logo là hình ảnh được chia làm hai: nền, được đặt để cắt và giữ nguyên kích thước của nó, và hình ảnh còn lại được thay đổi kích thước theo tỷ lệ.

Nếu thay đổi kích thước quá nhỏ, hình ảnh sẽ có chất lượng thấp, nhưng việc giữ cho tên của trang web hiển thị và không cắt xén nó là rất quan trọng. Vì vậy, hình ảnh được chia thành hai: một (của hình minh họa) được đặt làm nền, được cắt và giữ nguyên kích thước của nó, và hình kia (của tên) được thay đổi kích thước theo tỷ lệ.
Tìm hiểu thêm Tầm quan trọng của thiết kế và phát triển web trong kinh doanh

3. Hình ảnh linh hoạt

Một vấn đề lớn cần được giải quyết với thiết kế Web đáp ứng là làm việc với hình ảnh. Có một số kỹ thuật để thay đổi kích thước hình ảnh theo tỷ lệ và nhiều kỹ thuật được thực hiện dễ dàng. Tùy chọn phổ biến nhất, được lưu ý trong bài viết của Ethan Marcotte về hình ảnh linh hoạt nhưng được thử nghiệm lần đầu tiên bởi Richard Rutter, là sử dụng độ rộng tối đa của CSS để khắc phục dễ dàng.

img { độ rộng tối đa: 100%; }

Miễn là không có kiểu hình ảnh dựa trên chiều rộng nào khác ghi đè quy tắc này, mọi hình ảnh sẽ tải ở kích thước ban đầu, trừ khi khu vực xem trở nên hẹp hơn chiều rộng ban đầu của hình ảnh. Chiều rộng tối đa của hình ảnh được đặt thành 100% chiều rộng của màn hình hoặc trình duyệt, do đó, khi 100% đó trở nên hẹp hơn, thì hình ảnh cũng vậy.

Về cơ bản, như Jason Grigsby đã lưu ý, “Ý tưởng đằng sau hình ảnh linh hoạt là bạn cung cấp hình ảnh ở kích thước tối đa mà chúng sẽ được sử dụng. Bạn không khai báo chiều cao và chiều rộng trong mã của mình mà thay vào đó, hãy để trình duyệt thay đổi kích thước hình ảnh khi cần trong khi sử dụng CSS để hướng dẫn kích thước tương đối của chúng”. Đó là một kỹ thuật tuyệt vời và đơn giản để thay đổi kích thước hình ảnh đẹp mắt.

Lưu ý rằng chiều rộng tối đa không được hỗ trợ trong IE, nhưng việc sử dụng tốt chiều rộng: 100% sẽ giải quyết vấn đề một cách gọn gàng trong biểu định kiểu dành riêng cho IE. Một vấn đề nữa là khi một hình ảnh được thay đổi kích thước quá nhỏ trong một số trình duyệt cũ hơn trong Windows, kết xuất không rõ ràng như mong muốn. Tuy nhiên, có một JavaScript để khắc phục sự cố này được tìm thấy trong bài viết của Ethan Marcotte.

Mặc dù ở trên là một cách khắc phục nhanh tuyệt vời và khởi đầu tốt cho hình ảnh phản hồi, nhưng độ phân giải hình ảnh và thời gian tải xuống nên là những cân nhắc chính. Mặc dù thay đổi kích thước hình ảnh cho thiết bị di động có thể rất đơn giản, nhưng nếu kích thước hình ảnh gốc dành cho các thiết bị lớn, nó có thể làm chậm đáng kể thời gian tải xuống và chiếm dung lượng không cần thiết.

4. Hình ảnh phản hồi theo tỷ lệ

Kỹ thuật này, do Filament Group trình bày, xem xét vấn đề này và không chỉ thay đổi kích thước hình ảnh theo tỷ lệ mà còn thu nhỏ độ phân giải hình ảnh trên các thiết bị nhỏ hơn, vì vậy hình ảnh rất lớn không lãng phí dung lượng không cần thiết trên màn hình nhỏ.

Kỹ thuật này yêu cầu một số tệp, tất cả đều có sẵn trên Github. Đầu tiên, tệp JavaScript (rwd-images.js), tệp .htaccess và tệp hình ảnh (rwd.gif). Sau đó, chúng ta có thể chỉ sử dụng một chút HTML để tham chiếu cả hình ảnh có độ phân giải lớn hơn và nhỏ hơn: đầu tiên, hình ảnh nhỏ, với tiền tố .r để làm rõ rằng nó phải phản hồi nhanh, sau đó tham chiếu đến hình ảnh lớn hơn bằng cách sử dụng dữ liệu- fullsrc.

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

data-fullsrc là một thuộc tính HTML5 tùy chỉnh, được xác định trong các tệp được liên kết ở trên. Đối với bất kỳ màn hình nào rộng hơn 480 pixel, hình ảnh có độ phân giải lớn hơn (largeRes.jpg) sẽ tải; màn hình nhỏ hơn sẽ không cần tải hình ảnh lớn hơn và do đó hình ảnh nhỏ hơn (smallRes.jpg) sẽ tải.

Tệp JavaScript chèn một phần tử cơ sở cho phép trang tách các hình ảnh phản hồi khỏi các hình ảnh khác và chuyển hướng chúng khi cần. Khi trang tải, tất cả các tệp được ghi lại ở dạng ban đầu và chỉ những hình ảnh lớn hoặc nhỏ được tải khi cần thiết. Với các kỹ thuật khác, tất cả các hình ảnh có độ phân giải cao hơn sẽ phải được tải xuống, ngay cả khi các phiên bản lớn hơn sẽ không bao giờ được sử dụng. Đặc biệt đối với các trang web có nhiều hình ảnh, kỹ thuật này có thể giúp tiết kiệm băng thông và thời gian tải rất nhiều.

Kỹ thuật này được hỗ trợ đầy đủ trong các trình duyệt hiện đại, chẳng hạn như IE8+, Safari, Chrome và Opera, cũng như các thiết bị di động sử dụng cùng các trình duyệt này (iPad, iPhone, v.v.). Các trình duyệt cũ hơn và Firefox xuống cấp một cách độc đáo và vẫn thay đổi kích thước như người ta mong đợi ở một hình ảnh phản hồi, ngoại trừ việc cả hai độ phân giải đều được tải xuống cùng nhau, vì vậy lợi ích cuối cùng của việc tiết kiệm dung lượng bằng kỹ thuật này là vô hiệu.

5. Cấu trúc bố cục tùy chỉnh

Đối với những thay đổi lớn về kích thước, chúng tôi có thể muốn thay đổi hoàn toàn bố cục, thông qua một biểu định kiểu riêng biệt hoặc hiệu quả hơn là thông qua truy vấn phương tiện CSS. Điều này không cần phải rắc rối; hầu hết các kiểu có thể giữ nguyên, trong khi các biểu định kiểu cụ thể có thể kế thừa các kiểu này và di chuyển các phần tử xung quanh với số float, chiều rộng, chiều cao, v.v.

Ví dụ: chúng ta có thể có một biểu định kiểu chính (cũng sẽ là biểu định kiểu mặc định) sẽ xác định tất cả các thành phần cấu trúc chính, chẳng hạn như #wrapper, #content, #sidebar, #nav, cùng với màu sắc, hình nền và kiểu chữ. Độ rộng và số float linh hoạt mặc định cũng có thể được xác định.

Nếu một biểu định kiểu làm cho bố cục quá hẹp, ngắn, rộng hoặc cao, thì chúng tôi có thể phát hiện điều đó và chuyển sang một biểu định kiểu mới. Biểu định kiểu con mới này sẽ áp dụng mọi thứ từ biểu định kiểu mặc định và sau đó chỉ cần xác định lại cấu trúc của bố cục.

6. Truy vấn đa phương tiện

CSS3 hỗ trợ tất cả các loại phương tiện giống như CSS 2.1, chẳng hạn như màn hình, bản in và thiết bị cầm tay, nhưng đã thêm hàng chục tính năng phương tiện mới, bao gồm chiều rộng tối đa, chiều rộng thiết bị, hướng và màu sắc. Các thiết bị mới được tạo sau khi phát hành CSS3 (chẳng hạn như thiết bị iPad và Android) chắc chắn sẽ hỗ trợ các tính năng phương tiện. Vì vậy, việc gọi một truy vấn phương tiện bằng các tính năng CSS3 để nhắm mục tiêu các thiết bị này sẽ hoạt động tốt và nó sẽ bị bỏ qua nếu được truy cập bởi một trình duyệt máy tính cũ hơn không hỗ trợ CSS3.

Trong bài viết của Ethan Marcotte, chúng ta thấy một ví dụ về một media query đang hoạt động:

<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />

Truy vấn phương tiện này khá dễ hiểu: nếu trình duyệt hiển thị trang này trên màn hình (chứ không phải in, v.v.) và nếu chiều rộng của màn hình (không nhất thiết là khung nhìn) là 480 pixel trở xuống, thì hãy tải shetland. css.

Các tính năng CSS3 mới cũng bao gồm định hướng (dọc so với ngang), chiều rộng thiết bị, chiều rộng thiết bị tối thiểu, v.v. Xem “Truy vấn phương tiện định hướng” để biết thêm thông tin về cài đặt và hạn chế độ rộng dựa trên các tính năng truy vấn phương tiện này.

Người ta có thể tạo nhiều biểu định kiểu, cũng như các thay đổi bố cục cơ bản được xác định để phù hợp với phạm vi chiều rộng — ngay cả đối với hướng ngang so với hướng dọc. Hãy nhớ xem phần bài viết của Ethan Marcotte có tiêu đề “Đáp ứng truy vấn phương tiện” để biết thêm ví dụ và giải thích kỹ lưỡng hơn.

Mã ở trên là từ một mẫu miễn phí dành cho nhiều truy vấn phương tiện giữa các thiết bị phổ biến của Andy Clark. Xem sự khác biệt giữa cách tiếp cận này và bao gồm các tệp biểu định kiểu khác nhau trong phần đánh dấu như được mô tả trong cuốn sách “Thiết kế web cứng rắn” của anh ấy.

7. Truy vấn phương tiện CSS3

Trên đây là một số ví dụ về cách hoạt động của truy vấn phương tiện, cả từ CSS 2.1 và CSS3. Bây giờ chúng ta hãy xem xét một số hướng dẫn cụ thể để sử dụng các truy vấn phương tiện CSS3 để tạo các thiết kế Web đáp ứng. Nhiều cách sử dụng trong số này có liên quan đến ngày nay và tất cả chắc chắn sẽ có thể sử dụng được trong tương lai gần.

Các thuộc tính chiều rộng tối thiểu và chiều rộng tối đa thực hiện chính xác những gì chúng đề xuất. Thuộc tính chiều rộng tối thiểu đặt trình duyệt hoặc chiều rộng màn hình tối thiểu mà một bộ kiểu nhất định (hoặc biểu định kiểu riêng) sẽ áp dụng cho. Nếu bất cứ điều gì nằm dưới giới hạn này, liên kết biểu định kiểu hoặc các kiểu sẽ bị bỏ qua. Thuộc tính chiều rộng tối đa thì ngược lại. Bất cứ điều gì trên trình duyệt tối đa hoặc chiều rộng màn hình được chỉ định sẽ không áp dụng cho truy vấn phương tiện tương ứng.

Lưu ý trong các ví dụ bên dưới rằng chúng tôi đang sử dụng cú pháp cho các truy vấn phương tiện có thể được sử dụng tất cả trong một biểu định kiểu. Như đã đề cập ở trên, cách hiệu quả nhất để sử dụng các truy vấn phương tiện là đặt tất cả chúng trong một biểu định kiểu CSS, với các kiểu còn lại dành cho trang web. Bằng cách này, không cần phải thực hiện nhiều yêu cầu cho nhiều biểu định kiểu.

8. JavaScript

Một phương pháp khác có thể được sử dụng là JavaScript, đặc biệt là phương pháp sao lưu cho các thiết bị không hỗ trợ tất cả các tùy chọn truy vấn phương tiện CSS3. May mắn thay, đã có một thư viện JavaScript được tạo sẵn giúp các trình duyệt cũ hơn (IE 5+, Firefox 1+, Safari 2) hỗ trợ các truy vấn phương tiện CSS3. Nếu bạn đã sử dụng các truy vấn này, chỉ cần lấy một bản sao của thư viện và đưa nó vào phần đánh dấu: css3-mediaqueries.js.

9. Hiển thị hoặc ẩn nội dung

Có thể thu nhỏ mọi thứ theo tỷ lệ và sắp xếp lại các yếu tố khi cần thiết để làm cho mọi thứ phù hợp (hợp lý tốt) khi màn hình trở nên nhỏ hơn. Thật tuyệt khi điều đó có thể thực hiện được, nhưng việc cung cấp mọi nội dung từ màn hình lớn trên màn hình nhỏ hơn hoặc thiết bị di động không phải lúc nào cũng là câu trả lời tốt nhất. Chúng tôi có các phương pháp hay nhất cho môi trường di động: điều hướng đơn giản hơn, nội dung tập trung hơn, danh sách hoặc hàng thay vì nhiều cột.

Thiết kế web đáp ứng không chỉ là về cách tạo bố cục linh hoạt trên nhiều nền tảng và kích thước màn hình. Nó cũng nên nói về việc người dùng có thể chọn và chọn nội dung. May mắn thay, CSS đã cho phép chúng tôi hiển thị và ẩn nội dung một cách dễ dàng trong nhiều năm!

Hoặc khai báo display: none cho thành phần khối HTML cần được ẩn trong một biểu định kiểu cụ thể hoặc phát hiện chiều rộng của trình duyệt và thực hiện điều đó thông qua JavaScript. Ngoài việc ẩn nội dung trên màn hình nhỏ hơn, chúng tôi cũng có thể ẩn nội dung trong biểu định kiểu mặc định (dành cho màn hình lớn hơn) chỉ khả dụng trong phiên bản di động hoặc trên thiết bị nhỏ hơn. Ví dụ: khi chúng tôi ẩn các phần nội dung chính, chúng tôi có thể thay thế chúng bằng điều hướng đến nội dung đó hoặc bằng một cấu trúc điều hướng khác hoàn toàn.



Lưu ý rằng chúng tôi chưa sử dụng khả năng hiển thị: ẩn ở đây; điều này chỉ ẩn nội dung (mặc dù nó vẫn ở đó), trong khi thuộc tính hiển thị sẽ loại bỏ hoàn toàn nội dung đó. Đối với các thiết bị nhỏ hơn, không cần phải tiếp tục đánh dấu trên trang — nó chỉ chiếm tài nguyên và thậm chí có thể gây ra hiện tượng cuộn không cần thiết hoặc phá vỡ bố cục.

10. Màn hình cảm ứng so với con trỏ

Màn hình cảm ứng ngày càng trở nên phổ biến. Giả sử rằng các thiết bị nhỏ hơn có nhiều khả năng được cung cấp chức năng màn hình cảm ứng thì dễ, nhưng đừng vội như vậy. Hiện tại, màn hình cảm ứng chủ yếu có trên các thiết bị nhỏ hơn, nhưng nhiều máy tính xách tay và máy tính để bàn trên thị trường cũng có khả năng cảm ứng. Ví dụ: HP Touchsmart tm2t là máy tính xách tay màn hình cảm ứng cơ bản với bàn phím và chuột truyền thống có thể biến thành máy tính bảng.

Màn hình cảm ứng rõ ràng đi kèm với các nguyên tắc thiết kế khác với tương tác thuần túy dựa trên con trỏ và cả hai cũng có các khả năng khác nhau. May mắn thay, việc tạo ra một thiết kế phù hợp với cả hai không tốn nhiều công sức. Màn hình cảm ứng không có khả năng hiển thị CSS do không có con trỏ; khi người dùng chạm vào màn hình, họ nhấp vào. Vì vậy, đừng dựa vào CSS hovers để xác định liên kết; chúng nên được coi là một tính năng bổ sung chỉ dành cho các thiết bị dựa trên con trỏ.

Hãy xem bài viết “Thiết kế cho màn hình cảm ứng” để có thêm ý tưởng. Nhiều đề xuất thiết kế trong đó là tốt nhất cho màn hình cảm ứng, nhưng chúng cũng không nhất thiết làm giảm khả năng sử dụng dựa trên con trỏ. Ví dụ: điều hướng phụ ở phía bên phải của trang sẽ thân thiện hơn đối với người dùng màn hình cảm ứng vì hầu hết mọi người đều thuận tay phải;

Do đó, họ sẽ không vô tình va chạm hoặc lướt qua phần điều hướng khi cầm thiết bị trên tay trái. Điều này sẽ không tạo ra sự khác biệt nào đối với người dùng con trỏ, vì vậy chúng tôi cũng có thể tuân theo nguyên tắc thiết kế màn hình cảm ứng trong trường hợp này. Nhiều hướng dẫn khác thuộc loại này có thể được rút ra từ khả năng sử dụng dựa trên màn hình cảm ứng.

Kết luận

Chúng ta thực sự đang bước vào một thời đại mới của thiết kế và phát triển Web. Hiện có quá nhiều tùy chọn và sẽ có quá nhiều tùy chọn trong tương lai để tiếp tục điều chỉnh và tạo các giải pháp tùy chỉnh cho từng kích thước màn hình, thiết bị và sự tiến bộ trong công nghệ.

Thay vào đó, chúng ta nên bắt đầu một kỷ nguyên mới ngay hôm nay: tạo các trang web sẵn sàng cho tương lai ngay bây giờ. Hiểu cách làm cho một thiết kế đáp ứng được người dùng không đòi hỏi phải học quá nhiều và nó chắc chắn sẽ ít căng thẳng hơn và hiệu quả hơn nhiều so với việc học cách thiết kế và viết mã phù hợp cho từng thiết bị có sẵn.

Thiết kế web đáp ứng và các kỹ thuật được thảo luận ở trên không phải là câu trả lời cuối cùng cho thế giới di động luôn thay đổi. Thiết kế Web đáp ứng chỉ là một khái niệm mà khi được triển khai đúng cách có thể cải thiện trải nghiệm người dùng, nhưng không giải quyết hoàn toàn cho mọi người dùng, thiết bị và nền tảng. Chúng tôi sẽ cần liên tục làm việc với các thiết bị, độ phân giải và công nghệ mới để liên tục cải thiện trải nghiệm người dùng khi công nghệ phát triển trong những năm tới.

Bên cạnh việc cứu chúng ta khỏi sự thất vọng, thiết kế Web đáp ứng cũng tốt nhất cho người dùng. Mọi giải pháp tùy chỉnh đều mang lại trải nghiệm người dùng tốt hơn. Với thiết kế Web đáp ứng, chúng tôi có thể tạo các giải pháp tùy chỉnh cho nhiều người dùng hơn, trên nhiều loại thiết bị hơn.

Một trang web cũng có thể được tùy chỉnh cho những người sử dụng máy tính xách tay hoặc thiết bị cũ cũng như có thể phù hợp với đại đa số mọi người dùng. Thiết kế web đáp ứng tạo ra trải nghiệm tùy chỉnh tuyệt vời cho mọi người. Là nhà thiết kế Web, tất cả chúng ta đều cố gắng đạt được điều đó mỗi ngày trong mọi dự án, phải không?