Tôi đã đọc qua một số nguồn mà thiết kế đầu tiên trên thiết bị di động là gần như thiết yếu, tôi không thể phủ nhận rằng nó có những lợi ích rõ ràng như thời gian tải nhanh hơn cho điện thoại di động thường có tốc độ tải xuống chậm hơn thông qua 3G và 4G.

Nhưng nếu bạn đang xây dựng một trang web nhỏ hơn với rất ít hình ảnh.

Tôi muốn nghe ý kiến ​​của người khác trong chủ đề này và liệu mọi người có nghĩ rằng có ngoại lệ hay không. Cá nhân tôi thích thiết kế / mã cho máy tính để bàn trước và thu nhỏ lại từ đó. Nhưng điều thực sự quan trọng là thiết kế / mã cho thiết bị di động trước tiên hay kết quả cuối cùng không đủ quan trọng để bận tâm trong một số tình huống nhất định?

Từ quan điểm thiết kế hoàn toàn, bắt đầu với phiên bản di động trước tiên có ý nghĩa.

Phần khó nhất của quá trình thiết kế là luôn cắt tỉa, không bao giờ thêm. Vì vậy, bất động sản màn hình càng nhỏ bạn cho phép mình, bạn sẽ càng phải suy nghĩ về những gì quan trọng trong thiết kế của bạn, những thông tin bạn thực sự cần hiển thị. Ngoài ra, bạn cũng sẽ buộc bản thân phải suy nghĩ về khả năng truy cập, vì văn bản và các mục khác sẽ nhỏ hơn.

Khi bạn đã thiết kế phiên bản 'ánh sáng', bạn có thể tiến hành thêm các thứ bổ sung như các yếu tố thiết kế và phóng to mọi thứ khi bạn có được bất động sản. Như @Django chỉ ra, bạn không bao giờ nên bỏ qua các tính năng khỏi thiết kế.

Đối với trang web của bạn, một ví dụ có thể là menu. Bạn quyết định rời khỏi các mục menu và thay thế nó bằng một biểu tượng hamburger, đó là thủ tục tiêu chuẩn. Nhưng nếu các mục menu là một trong những điều quan trọng nhất trên trang, bạn sẽ không muốn ẩn chúng sau một nhấp chuột.

sidenote: Màu đỏ trên màu xanh trên trang web của bạn thực sự không tốt cho bảng màu, vui lòng xem xét thay đổi điều này.

Điện thoại di động trước tiên là cách tốt nhất - đó không phải là luật và nếu bạn hiểu lý do tại sao bạn "nên" sử dụng nó, bạn có thể đưa ra quyết định sáng suốt về lý do tại sao bạn không muốn sử dụng nó cho một dự án cụ thể và điều đó tốt.

Điều đáng chú ý là "di động đầu tiên" liên quan đến thiết kế / UX và bản thân bản dựng. Thiết kế di động đầu tiên sẽ không tăng tốc trang web của bạn cho người dùng, nhưng phát triển di động đầu tiên sẽ .

Hãy nhìn vào cả hai.

Di động đầu tiên trong thiết kế

Thiết kế di động đầu tiên là về việc giúp bạn giảm bớt các tính năng và khả năng sử dụng cho những gì bạn cần . Suy nghĩ đằng sau nó diễn ra như sau: Thay vì thiết kế máy tính để bàn trước, sau đó đấu tranh để đưa tất cả các tính năng bạn đưa ra lên màn hình rộng 320px và giữ UX tốt, trước tiên hãy bắt đầu với thiết bị di động ...

Nếu UX bị lộn xộn hoặc bị hỏng bởi tất cả các tính năng của bạn trên thiết bị di động, thì nó sẽ khiến bạn phải đặt câu hỏi liệu người dùng có thực sự cần tất cả chúng hay không. Bạn có thể thoát khỏi một số trong số họ và thực sự cải thiện trải nghiệm? Nếu vậy, tại sao bạn có chúng? Có lẽ chúng không cần thiết cho tất cả, và có lẽ chúng không nên ở trên trang web của bạn.

Lý thuyết là điều này giúp bạn giảm bớt các tính năng của bạn theo những gì bạn thực sự cần , và sau đó bạn có thể mở rộng nó thành một trải nghiệm máy tính để bàn tuyệt đẹp.

Di động đầu tiên trong phát triển

Với sự phát triển đầu tiên trên thiết bị di động, trước tiên hãy viết phiên bản di động, sau đó đặt ngoại lệ cho màn hình lớn hơn. Lý do điều này tốt hơn (và nhanh hơn) cho người dùng di động là vì: Bạn có hai hình ảnh cho một trang web, một hình lớn cho máy tính để bàn và một hình nhỏ hơn cho thiết bị di động. Nếu bạn viết mã cho máy tính để bàn trước, CSS của bạn sẽ trông giống như thế này:

.test2 {
    background-image:url('images/verylargeimage.png');
}

// If on a smaller screen...
@media all and (max-width: 600px) {
    .test2 { 
      background-image:url('images/smallimage.png');
    }
}

Điều này có nghĩa là người dùng di động thực sự tải xuống large.jpgtrước khi CSS tắt nó. Thật tồi tệ.

Điện thoại di động đầu tiên trông như thế này:

.test2 {
     background-image:url('images/smallimage.png');
}

// If on a larger screen
@media all and (min-width: 600px) {
    .test2 { 
        background-image:url('images/verylargeimage.png');
    }
}

Người dùng di động không bao giờ tải xuống large.jpg.

Tôi hy vọng điều đó sẽ giúp mọi thứ rõ ràng hơn một chút, nếu bạn không hiểu chúng trước đây!

Nguồn gốc của "di động đầu tiên"

Ý tưởng về "thiết bị di động trước tiên" liên quan đến Thiết kế đáp ứng xuất phát từ thời điểm các trình duyệt cho thiết bị di động có khả năng kém hơn rất nhiều so với những gì bạn tìm thấy trên thiết bị máy tính để bàn. Nhiều người trong số họ hoàn toàn không hỗ trợ các truy vấn phương tiện, vì vậy ý ​​tưởng xây dựng một thiết kế máy tính để bàn lạ mắt và sau đó gắn bó với các phong cách sử dụng truy vấn phương tiện cho một khung nhìn hẹp nằm trên mặt của nó.

Sự vắng mặt của hỗ trợ cho các truy vấn phương tiện trong thực tế là truy vấn phương tiện đầu tiên.

- Bryan Rieger

Là điện thoại di động đầu tiên vẫn còn có liên quan?

Mặc dù thực tế là các trình duyệt cho thiết bị di động đã bắt kịp với các đối tác máy tính để bàn của họ, "đầu tiên trên thiết bị di động" vẫn là cách hợp lý nhất để viết các kiểu của bạn.

Tôi thích nghĩ theo nghĩa "tránh hoàn tác các tuyên bố kiểu trước đó". Một cách tiếp cận phụ gia, thay vì viết ra các kiểu và sau đó ghi đè chúng, hầu như luôn luôn dẫn đến một bản định kiểu nhỏ gọn hơn. Các kiểu phù hợp với hầu hết / tất cả các thiết bị nên được tìm thấy bên ngoài các truy vấn phương tiện, trong khi các kiểu chỉ liên quan đến một chế độ xem cụ thể sẽ nằm sau một truy vấn phương tiện.

So sánh cách tiếp cận "máy tính để bàn trước":

.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

Theo cách tiếp cận "di động trước":

@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

Kết quả là như nhau, nhưng sau này nhỏ gọn hơn. Các kiểu mẫu được sao chép một cách đáng xấu hổ từ 7 Thói quen của các câu hỏi truyền thông hiệu quả cao của Brad Frost .

Có một vài trường hợp ngoại lệ hiếm hoi trong đó "máy tính để bàn đầu tiên" phù hợp hơn so với cách khác. Đáng chú ý nhất trong số này là khi bạn đang làm những việc như bảng phản hồi. Khung nhìn rộng hơn sẽ muốn các kiểu mặc định cho các bảng, nhưng một khung nhìn hẹp sẽ muốn ghi đè tất cả các kiểu đó để các nội dung có thể được xếp chồng lên nhau theo chiều dọc.

Đừng phá vỡ các bảng định kiểu của bạn

Một điều bạn tuyệt đối không nên làm là chia các kiểu phản hồi của mình thành các tệp CSS riêng lẻ và sử dụng thuộc tính media trên thành phần liên kết. Điều này có hậu quả không mong muốn là tải xuống UA tất cả các bảng định kiểu được liên kết (nghĩa là không có cải thiện tốc độ để làm như vậy).

<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

Vì vậy, mã nên là điện thoại di động đầu tiên, nhưng về cách tiếp cận thiết kế?

Tôi cho rằng nó không quan trọng. Bố cục cho tất cả các khung nhìn liên quan đến thiết kế phải được thực hiện (điều này có thể liên quan đến ít nhất là 2 hoặc 5 khi bạn tính đến bất kỳ điểm dừng nhỏ nào bạn có thể cần!), Cuối cùng, thứ tự không quan trọng. Nhiều nhà thiết kế thiếu kỷ luật để bắt đầu với bố cục máy tính để bàn và thấy rằng bắt đầu từ bố trí di động dễ dàng hơn.

Nếu bạn muốn bắt đầu từ bố cục máy tính để bàn, bạn phải tránh sự cám dỗ để lấp đầy tất cả khoảng trắng vinh quang đó bằng sự lộn xộn không làm tăng nội dung cho trang đó. Bạn có thực sự cần bức ảnh chứng khoán 800x600 của một người phụ nữ đang cười cầm điện thoại không? Nó chỉ khiến người dùng di động phải trả thêm tiền để tải xuống vô dụng, và chỉ là một sự xao lãng thị giác cho người dùng máy tính để bàn bỏ qua.

Tôi đã kiểm tra trang web của bạn www.cosmosdesign.co.nz trên các kích thước màn hình khác nhau và nó hoạt động tốt trên tất cả các màn hình. Về câu hỏi của bạn cho thiết kế di động đầu tiên tôi muốn nói rằng phương pháp thiết kế của bạn phải xem xét đối tượng mục tiêu của bạn cùng với nhiều yếu tố khác như hình ảnh, nội dung, v.v ... Nếu đối tượng mục tiêu của bạn sẽ sử dụng trang web này chủ yếu trên máy tính để bàn / máy tính xách tay thì bạn có thể chắc chắn tiến hành theo cách tiếp cận của bạn nhưng nếu đó là một trang web sẽ được xem chủ yếu trên điện thoại và tab thì bạn cần phải suy nghĩ lại về chiến lược của mình.

Bạn cũng có thể xem xét việc thiết kế trang web của mình đáp ứng bằng Bootstrap (nhiều tùy chọn khác cũng có sẵn) và bạn cũng có thể tối ưu hóa hình ảnh của mình cho trang web thân thiện với thiết bị di động, điều này cũng sẽ giảm thời gian tải.

Đối với tôi, lý do chính để làm di động trước tiên là để tránh tình huống trang web di động của bạn không làm mọi thứ mà phiên bản máy tính để bàn làm. Có hàng tấn trang web mà tôi phải yêu cầu phiên bản máy tính để bàn trên điện thoại của mình để làm điều gì đó bởi vì mặc dù điện thoại có thể làm điều đó, nhưng phiên bản di động của họ thì không. Đó là lỗi tào lao ra khỏi tôi.

Điều đó nói rằng, tôi nghĩ rằng máy tính để bàn đầu tiên là tốt miễn là bạn không tiết kiệm sau này trên các tính năng di động như hầu hết các công ty làm.

Ngoài ra, rất nhiều khung thiết kế làm cho điều này khá đơn giản. Tôi đã sử dụng thiết kế vật liệu để tạo ra một ứng dụng đầu tiên trên máy tính để bàn khá phức tạp và thực sự chỉ phải thay đổi một vài điều khi tôi sửa đổi nó thành phiên bản thân thiện với thiết bị di động - hầu hết công việc đã hoàn thành.