Thiết kế website tại Mỹý

A. Tổng quát

Tất cả trang web do Myy xây dựng đều có những đặc tính chung như:

CHUẨN RESPONSIVE (BOOTSTRAP)

CHỨC NĂNG ĐẦY ĐỦ - KHÔNG DƯ THỪA, DỄ NÂNG CẤP

CÓ HƯỚNG DẪN SỬ DỤNG CHI TIẾT

TÙY CHỈNH PHÙ HỢP THEO MỌI MÔ HÌNH

BẢO TRÌ MIỄN PHÍ - NÂNG CẤP LIÊN TỤC.

Chuẩn Responsive có thể hiểu là giao diện trang web của bạn sẽ tự co giãn, và luôn hiển thị đẹp mắt trên mọi thiết bị (kích thước màn hình), từ điện thoại, máy tính bản và trên máy vi tính. Ngoài việc đảm bảo tính năng hoạt động chính xác, cách hiển thị cũng được cân nhắc và bố trí và kiểm nghiệm đối với mọi điều kiện khác nhau, để chọn ra cách phù hợp nhất. Có rất nhiều trang web lớn hiện nay vẫn còn phải sử dụng công nghệ cũ (3 loại kích cỡ màn hình mobile/tablet/PC thì sẽ cần làm 3 trang web khác nhau) gây tốn rất nhiều chi phí cho thiết kế, vận hành và bảo trì. Quan trọng hơn, là chúng ta ở đây để sẵn sàng đón nhận cái mới và thôi không nghĩ đến những công nghệ lạc hậu nữa.

Chúng tôi, là một trong số rất ít nhà cung cấp dịch vụ website chủ động về nền tảng công nghệ. Do không sử dụng mã nguồn mở, nên bất kỳ mọi nhu cầu nào của khách hàng đều có nhiều giải pháp để chọn lựa ra giải pháp phù hợp, tiết kiệm và luôn đặt hiệu quả là tiêu chí hàng đầu. Chúng tôi nỗi ngày đều trau chuốt mọi vấn đề công nghệ - mỹ thuật cho bộ mã nguồn nền tảng trang web của bạn, tạo ra nhiều công cụ hơn. Từng công cụ hướng tới sự đơn giản, dễ và thoải mái khi sử dụng.  

B. Cách kiểm tra trang web có Responsive hay không

Nếu bạn dùng trình duyệt trên PC (Firefox, Chrome, Safari,...)

Thay vì bạn có thể lấy điện thoại, ipad, máy tính bảng ra để truy cập trang web và đối chiếu, bạn có thể test bằng cách sau:
 Sau khi truy cập trang web, bạn bấm nút ô vuông [ ] ở góc phải - bên trên của trình duyệt (nút Maximize/ Restore) để hiện ra mép lề phải của trình duyệt web. Rồi bạn sẽ thu nhỏ dần (hoặc giãn lớn dần ) chiều rộng của trình duyệt web, bạn sẽ thấy giao diện của trang web sẽ thay đổi theo chiều rộng của trang web. 
(Mời xem video)

Nếu bạn truy cập ở màn hình nhỏ, có trường hợp không co giãn gây vỡ khung (hiển thị xấu), bạn phải biết rằng đó là do nội dung bài viết của admin tạo ra trong quá trình sử dụng. (Vì khung sườn, kết cấu của trang web chúng tôi cung cấp cho bạn đạt chuẩn Responsive trước đó). Gặp trường hợp như vậy, hãy thông báo cho chúng tôi đường link, nhân viên chúng tôi sẽ hỗ trợ chỉ cho bạn cách sửa bài viết đó đúng chuẩn.

C. Hiểu về cấu trúc trang web của bạn

Trang web của bạn sẽ gồm có trang chủ, các trang giới thiệu và nhiều nhóm trang chức năng khác (tin tức, sản phẩm, tìm kiềm, đặt hàng...)... Mỗi nhóm chức năng đều có thiết kế theo quy trình chuẩn giúp cho bất kỳ ai khi sử dụng trang web đều thấy rõ ràng, quen thuộc, dễ dàng. Còn cụ thể cách thiết kế nó như thế nào, nếu bạn cần điều chỉnh, chúng tôi luôn sẵn sàng bổ sung - thay thế cho từng nhu cầu đặc thù một cách dễ dàng.

Tất cả các trang trong trang web của bạn (như đề cập bên trên) đều có 03 khối, chúng tôi tạm chia: HEADER (đầu), BODY (giữa), FOOTER (chân)

  

HEADER: Gồm phần Menu ngang trở lên

FOOTER: Phần phía dưới cùng trang web

BODY: Tùy vào mỗi đường link, mà chỗ BODY này có nội dung thay đổi theo

Phần HEADER/FOOTER: ít thay đổi - Phần BODY thay đổi tùy đường link.

D. PHẦN HEADER

Trong phần header, ở giao diện mobile sẽ bao gồm logo, 1 nút Menu, kế bên là ô tìm kiếm.
Trên giao diện lớn hơn mobile, bạn sẽ thấy có nhiều thay đổi hơn.
Cụ thể bạn sẽ thấy có 4 thành phần là: Logo / Menu / Searchbox / Đoạn Slogan, lúc thì ở vị trí này, lúc ở vị trí khác. Thường thì việc tùy chỉnh các vị trí này dành cho Developver.

Cách tùy chỉnh (từ trang admin)

Vị trí Logo/Slogan/Searcbox nằm trong nội dung html=top-with-logo. Nội dung của top-with-logo chúng tôi để sẵn giá trị mặc định, bạn cũng có thể chỉnh lại nếu cần. 

Về logo: Để thay đổi logo mới, làm theo các bước sau: Chuẩn bị sẵn 1 file logo.png, dùng công cụ uploads trên admin với nội dung là file logo.png. Sau khi uploads, kiểm tra lại bằng cách truy cập trang web, nhấn Ctrl+F5 sẽ thấy logo đã được đổi.

Slogan: là một đoạn TEXT có bên trong html=top-with-logo, có đặc tính là ẩn / hiện một số từ ngữ đối với các cỡ màn hình (xs: siêu nhỏ, sm: nhỏ, md: trung bình, lg: lớn) để cho trang web gọn gàng cân đối.

Menu ngang: N - cấp. Nội dung của Menu này có thể chỉnh ở mục Nav. Trên mobile (xs) thì sẽ hiển thị dạng 1 icon Menu, bấm là xổ ra toàn bộ. Trên sm (màn hình nhỏ) và lớn  thì thanh menu sẽ có dạng hàng ngang.
Màu trên thanh menu gồm màu nền, màu font chữ: có thể chỉnh ở trên mục CSS.

Ô search / tìm kiếm: nếu như trên giao diện desktop bạn muốn hiển thị ô tìm kiếm nằm ngoài menu ngang thì bạn chỉnh config--search_in_nav=0. Trường hợp config--search_in_nav=1 tức là ô tìm kiếm luôn nằm chung trên thanh menu ngang vậy.
Ô search có thể hoạt động với 3 cơ chế khác nhau: Search AI (với trí tuệ nhân tạo), Search SQL, Google Search. Mặc định là Search SQL như hầu hết các trang web và công nghệ phổ biến xưa nay (kiểu tìm kiếm so trùng chính xác một cụm từ). Với cách Search AI thì có hỗ trợ Predictive search (tức là gõ đến đâu hiện ra kết quả gợi ý đến đó). Cách search AI hoặc Google search đều cần Developer cài đặt cho, admin không tự cài được vì 2 dịch vụ này cần lấy mã từ nhà cung cấp thứ ba. Admin có thể bật chuyển từ chế độ search này sang chế độ search khác dễ dàng.
Cách search AI và Search SQL đều có thể lọc kết quả theo chuyên mục giúp cho khách truy cập tìm được cái họ cần một cách đơn giản và nhanh nhất. Nếu cần can thiệp chuyên sâu về nội dung tìm kiếm, xin đọc bài: 
Chức năng của ô tìm kiếm Search Box trên website .