Thử nghiệm giao diện mới của blog Yêu Chạy Bộ - v5.0


(Thuận Bùi) #1

Hiện tại mình đang thiết kế giao diện mới cho blog Yêu Chạy Bộ, v5.0. Dự kiến nếu không có gì trực trặc sẽ thay áo mới cho blog vào khoảng cuối tháng 4. Giao diện mới hiện đang được thử nghiệm ở http://beta.yeuchaybo.com.

Giao diện mới sẽ theo xu hướng tối giản - minimalism: Đơn giản hơn, trực quan hơn.
Các bạn vô xem thử, nếu phát hiện lỗi gì thì báo dùm mình ở đây nhé.


(Nhan TD) #2

Em dùng Chrome 49 và Firefox 45 trên Windows (1600 x 900) và Chrome trên Android 5.1.1.
Kết quả trên PC đều giống nhau ở cả 2 trình duyệt.

Anh xem screenshot em chụp ở dưới nhé.

[PC] Hình ở phần này bị lệch

[PC] Từ vị trí ở trên, khi kéo xuống một chút thì hình “Giày chạy bộ” bị nhảy lên phía trên

[Mobile dọc]

[Mobile dọc] Không canh giữa nội dung

[Mobile ngang] Như trên

[Mobile] Khoảng cách giữa các phần nội dung khá dư thừa, nhìn chung trong cả trang web luôn

Cuối cùng và khá quan trọng, trên mobile không có nút menu (hamburger menu) như giao diện hiện tại.

Em test sơ sơ được nhiêu đó đó anh. :sweat_smile:


(Thuận Bùi) #3

Cám ơn đã test nhiệt tình. Không ngờ em chịu khó test trên cả PC, Tablet và Phone luôn.

Anh sẽ sửa lỗi trong vài ngày tới và cập nhật. Rãnh rồi em check thêm giúp anh nha.


(Thuận Bùi) #4

Mới đại tu lại cái giao diện 5.0. Rãnh rồi xem lại giúp anh coi có bị lỗi nào nữa không nha em


(Nhan TD) #5

Sáng nay em cũng rảnh nên test tiếp, mà chỉ mới có mobile thôi, còn PC để chiều em tiếp tục.

Ở cuối bài viết, hình này không canh giữa

[Mobile dọc] Trang chủ - sản phẩm chưa canh giữa

[Mobile ngang] Trang chủ - bề ngang mỗi sản phẩm nên giảm lại để vừa đủ 3 sp một hàng, mà em thấy người dùng thường xem mobile dọc, ý kiến vậy thôi anh.

[Mobile dọc] Sự kiện chạy bộ - nên cho nội dung thành một cột thôi anh, vì dọc nên nó sẽ rất hẹp, xoay ngang thì không sao

[Mobie dọc] Bài viết - nên giảm khoảng cách hai bên, nội dung nhìn có vẻ khá hẹp (đặc biệt là phần bình luận ở dưới), nếu xoay máy ngang thì cũng thấy hơi bị hẹp, nhưng đỡ hơn một chút.
Và nội dung kiểu trích dẫn “…” bị ép lại luôn


Trang này cũng vậy http://beta.yeuchaybo.com/gioi-thieu-yeu-chay-bo/

[PC, Mobile ngang] Bình luận dưới bài viết - chữ bị canh phải

[Mobile] Ở trang http://beta.yeuchaybo.com/blog/, phía dưới phần Bài viết mới nhất - em thấy có đường ngang (horizontal line) để tách biệt từng dòng ra, dễ nhìn hơn, nhưng ở những trang khác thì không có.
Và giảm khoảng cách ở bên trên mỗi tên bài.


Nên thêm một chút khoảng cách ở bên trái hamburger menu, vì hiện tại em thấy nó nằm dính sát bên trái của trang luôn.

[Mobile ngang] Bài viết - bị mất cả phần tiêu đề

Lúc nãy em vừa test mà anh cũng đang sửa phải không, một chút lại thấy giao diện đổi khác đi :smiley:
Nhiều quá không biết em có bỏ sót chỗ nào không nữa, để chiều em sẽ xem browser trên PC.


(Thuận Bùi) #6

Đúng là sáng nay anh có ngồi sửa :smiley:
Đã fix hết các lỗi em kể ra ở trên.
Hóng lỗi trên PC tiếp :slight_smile:


(Nhan TD) #7

Em vừa xem xong. Trên máy tính vẫn còn một số điểm nhỏ sau đây:

Hình ở đầu trang


Anh để ý những trang với kiểu cấu trúc đường dẫn như ở dưới, ở trên là có hình, khi bấm next sang trang 2 và những trang sau thì mất. Kéo xuống một chút thì sẽ thấy chữ trở lại.

http://beta.yeuchaybo.com/blog/
http://beta.yeuchaybo.com/blog/page/2/

http://beta.yeuchaybo.com/category/giay-va-phu-kien/
http://beta.yeuchaybo.com/category/giay-va-phu-kien/page/2/

http://beta.yeuchaybo.com/category/giay-va-phu-kien/giay-chay-bo/
http://beta.yeuchaybo.com/category/giay-va-phu-kien/giay-chay-bo/page/2/

Trường hợp này như nhau
http://beta.yeuchaybo.com/glossary/
http://beta.yeuchaybo.com/glossary/5k/


Góp ý thêm mobile:
Lỗi bình luận canh bên phải hồi sáng em có nói, trên desktop thì canh trái rồi, còn mobile cả ngang và dọc giờ nhảy hết qua phải luôn.

Giải chạy bộ trên mobile bị sót, anh chưa sửa thì phải.

The end!


(Thuận Bùi) #8

Đã sửa máy cái lỗi ở trang Event và lỗi header như em nói. Rãnh check thêm dùm anh nha


(Nhan TD) #9

Haha, fix được cái này thì nó lòi ra cái khác anh ơi.

Em đi lòng vòng thì thấy xuất hiện thêm lỗi này:
Tag [su_…], những chỗ em highlight trong hình.
Nút ‘Liên hệ’ trong trang Giới thiệu, chỗ nào xài nút đó là bị hết.

Và dưới đây là những ví dụ tiêu biểu:

http://beta.yeuchaybo.com/giao-an-chay-bo-5k-danh-cho-cac-ban-moi/

http://beta.yeuchaybo.com/tong-hop-cac-bai-viet-danh-cho-cac-ban-moi-bat-dau-chay-bo/

http://beta.yeuchaybo.com/gioi-thieu-yeu-chay-bo/

http://beta.yeuchaybo.com/lien-he/

Còn trên mobile thì mất tiêu nút hamburger menu luôn rồi.


(Thuận Bùi) #10

Ah mấy cái đó do anh táy máy tắt plugins rồi quên mở lại thôi. Nếu chỉ có mấy cái lỗi đó thì coi như ngon lành rồi. Đã mở lại plugins và hoạt động ngon lành.


(Nhan TD) #11

Vậy là good rồi anh! :v:


(Thuận Bùi) #12

Blog đã được nâng cấp lên giao diện 5.0 mới từ sáng nay. Cám ơn @nhan đã nhiệt tình kiểm tra và báo lỗi trong giai đoạn thử nghiệm. :blush:

Các bạn còn thấy lỗi gì kì quái thì thông báo ở đây giúp để mình sửa lỗi nha.


(Nguyễn Quốc Bảo) #13

Không biết có phải là lỗi của phiên bản mới hay do mạng nhà em mà load trang hơi lâu. Thêm nữa là phần bình luận nó bị lỗi như này nè anh.


(Thuận Bùi) #14

Đang đứt cáp quang biển nữa rồi em nên mạng sẽ chập chờn.
Còn để anh kiểm tra lại cái vụ khung bình luận


(Nguyễn Quốc Bảo) #15

Hèn gì mấy bữa nay em thấy vào mạng hơi chậm. :grin:


(Nguyễn Quốc Bảo) #16

Anh ơi xem lại cái quảng cáo chèn ở đầu trang đi anh. Nó che gần hết cả màn hình rồi.


(Thuận Bùi) #17

Ở trang chủ đâu có cái banner quảng cáo nào đâu em.
Em xem lại cái trình duyệt Cốc Cốc, nhiều khi nó chèn quảng cáo vô bậy bạ đó. Thử chuyển qua Chrome hay Firefox xem nó còn xuất hiện không.


(Nhan TD) #18

Mình dùng Chrome, và đúng là không có quảng cáo nào hết.


(Nguyễn Quốc Bảo) #19

Hèn gì lâu lâu tự dưng lại thấy có cái quảng cáo ở đâu chạy ra. :joy: