Chào các bác. Responsive design thì em cũng đã tìm hiểu về khái niệm của nó nhưng về phần thiết kế hoặc chuyển từ PSD sang HTML thì em còn chưa hiểu. Mong các bác thông não giúp em ạ.
Chuyển giao diện từ desktop sang mobi thì có 1 số thành phần không dùng đến thì phải xử lý như thế nào ạ?
Mong các bác thông não giúp
@loind có thể nói rõ sách hoặc tài liệu đang học. Và nói rõ hơn về công việc phải làm không? NHư vầy hơi ít thông tin.
Làm responsive thì có 2 cách:
1. Giao diện desktop và mobi làm chung, nhưng tùy kích thước màn hình thì hiển thị tương ứng.
Ưu điểm: code 1 lần, các vấn đề về lập trình back end không phải xử lý nhiều.
Nhược điểm: khó tùy biến chỉnh sửa về bố cục, giao diện nếu có yêu cầu sửa desktop hoặc mobi.
2. Giao diện desktop và mobi tách riêng. Khi người dùng vào bằng mobi thì detech chuyển sang một subdomain hoặc subfolder riêng biệt.
Ưu điểm: 2 giao diện là khác biệt nên chỉnh sửa một bên sẽ không ảnh hưởng gì bên kia và ngược lại
Nhược điểm: Code mất thời gian hơn, phải clone code, link hình ảnh và các thứ liên quan đến database phải lấy từ site desktop.
Các thành phần không sử dụng nếu làm cách 1 bạn có thể ẩn đi, còn làm theo cách 2 thì bỏ luôn trong code. Bạn cứ suy nghĩ đơn giản khi chuyển qua mobi mọi thành phần phải sắp xếp thẳng đứng, tuyệt đối không có scroll ngang nhưng các thành phần vẫn phải đủ lớn để người dùng thấy và click được. Các thứ không sắp xếp đc hết theo chiều ngang thì cho thành chiều dọc hết, nếu không có chỗ thì ẩn vào và cho nút bấm, main navigation là một ví dụ.
Từ psd sang html nếu có design thì design phải làm thêm 1 giao diện mobi, nếu không có kinh phí cho việc này thì cắt html phải hỏi ý khách hàng phối hợp với kinh nghiệm của mình để biết làm thế nào. Cái này bạn đưa giao diện ra chỉ chi tiết thì được, chứ nói chung chung thì chịu.
Em mới tìm hiểu về responsive design thôi ạ. Em có xem qua cái link này:
http://sinhvienit.net/forum/thiet-ke-giao-dien-responsive-trong-3-buoc.227527.html
Thì em thấy ở mobi, mẫu ở trên thì nó cho sidebar ẩn đi. Em đang thắc mắc là nếu cho sidebar ẩn đi thì có ổn không? Tại vì sidebar ấy có thể có hình ảnh hoặc thông tin lấy từ database đưa ra mà ở mobi nó vẫn load ảnh, text ra rồi mới ẩn đi thì không ổn.
Em đang suy nghĩ dùng javascript để xóa các phần tử không cần thiết nếu ở trên mobi. Liệu như vậy có ổn không ạ?
Dùng css thôi, đừng dùng js.
Mới đầu làm quen thì học cách sử dụng media query để biết cách nó hoạt động thế nào. Quen tay rồi thì cứ bootstrap mà phang. 
responsive không có khái niệm tách riêng nhé. Bản chất thiết kế responsive là tạo ra các khối không có liên kết cứng (table), khi device thay đổi thì nó sẽ tự detect được để tràn xuống phù hợp với thiết bị.
Mình cũng mới thử responsive design trên đồ án… Mình thì theo nguyên tắc là “Mobile First”… Sau đó, thêm/bớt các thanh menu. Nếu theo hướng thầy thì thấy làm theo Flat Design sẽ dễ dàng hơn trong việc thiết kế.
Còn một số chiêu nữa là detect thiết bị để tải hình ảnh về sao cho ít tốn tài nguyên nhất. Chiêu này mình đã đọc qua ở đâu đó và thấy trang Uber có sử dụng.
Đúng, nhưng thiếu, vấn đề ở đây là khi tách ra một site mobile riêng chẳng hạn m.domain.com chỉ nhận detect thiết bị di động thì vẫn còn vấn đề ở các kích thước tablet, smartphone, horizontal screen, vertical screen vẫn phải xử lý thích hợp cho từng trường hợp và đó cũng là responsive.
Về khái niệm và bản chất của nó thì mình rõ, ở đây mình chỉ nói có 2 cách làm responsive. Rất nhiều trang làm dạng này ví dụ m.facebook.com, http://m.trippy.vn/. Với những trang độ phức tạp cao về giao diện và chức năng hay làm theo dạng này.
bạn có thể tham khảo trang này về việc chuyển psd sang html
https://www.izwebz.com/video-tutorials/css-html/tu-psd-sang-html/
> Thì em thấy ở mobi, mẫu ở trên thì nó cho sidebar ẩn đi. Em đang thắc mắc là nếu cho sidebar ẩn đi thì có ổn không?
anh thấy cái này bình thường mà, thường dùng css để ẩn hiện sidebar.
Tại vì sidebar ấy có thể có hình ảnh hoặc thông tin lấy từ database đưa
ra mà ở mobi nó vẫn load ảnh, text ra rồi mới ẩn đi thì không ổn.
Hiện tại tốc độ mạng internet rất cao nên việc tải hình ảnh và thông tin từ database lúc ban đầu không còn quan trọng nữa.
nếu em cảm thấy ảnh hưởng tới tốc độ load page thì nên làm theo cách của @Trang_Tuan tách ra làm 2 page riêng biệt. 1 page về mobile, 1 page về desktop.
Em đang suy nghĩ dùng javascript để xóa các phần tử không cần thiết nếu ở trên mobi. Liệu như vậy có ổn không ạ?
anh nghĩ việc này là vổ bổ vì đã mất công tải hình ảnh và thông tin từ database lên rồi, rồi xóa đi, làm mất đi tốc độc tải trang web.
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?