Boffi là ai?
Boffi là một công ty chuyên thiết kế nhà bếp cao cấp. Thế mạnh là nhiều năm kinh nghiệm trong nghề và tính sáng tạo cao. Trong hơn 80 năm kinh doanh, Boffi đã trở thành một trong những thương hiệu thiết kế Ý danh tiếng. Họ ngày càng thu hút được các tệp khách hàng tinh tế và có gu thẩm mỹ cao. Trong đó có cả các kiến trúc sư nổi tiếng quốc tế như Zaha Hadid.
Những thách thức của chúng tôi
Biến boffi.com thành một nền tảng thương hiệu có thể truyền tải thế giới của những thứ xuất sắc mà Boffi đại diện: đó là những sản phẩm, câu chuyện, sáng kiến và dự án của họ. Website thương hiệu này sẽ là phương tiện truyền thông chiến lược cho các hoạt động marketing và phát triển kinh doanh, để thu thập và phân phối nội dung cho đúng đối tượng. Thông qua giao diện đồ họa hiện đại và các chức năng nhằm thể hiện sự đổi mới, sáng tạo để xứng tầm với nhận diện website thương hiệu của họ.
Concept: Một nền tảng toàn cầu, với từng trải nghiệm được “may đo” cẩn thận
Mọi khía cạnh của dự án, từ kiến trúc nội dung đến phát triển công nghệ, đều được thiết kế để cung cấp trải nghiệm quý giá cho các đối tượng mục tiêu khác nhau. Hệ thống cung cấp nội dung thích ứng tự động dựa trên vị trí địa lý của người dùng với mục đích cung cấp trải nghiệm liền mạch giữa nội dung toàn cầu và kênh chuyển đổi tùy chỉnh, nhằm điều hướng đến mạng lưới bán hàng.
Tiếp cận về mặt kỹ thuật
Dự án được phát triển dưới dạng ứng dụng trang đơn (One-Page) để tạo trải nghiệm mượt mà, liền mạch. Chúng tôi đặc biệt quan tâm đến các hiệu ứng hiển thị như hình ảnh động và chuyển trang trong chế độ xem, để gia tăng tương tác từ tổng quan đến thông tin chi tiết và ngược lại.
Một số Module và các thành phần nhỏ gọn được điều khiển bằng JSON nhằm giúp tốc độ tải trang được diễn ra dễ dàng và nhanh chóng, tận dụng mô hình flex-box layout ở cấp CSS và kế thừa ES6 Class ở JavaScript.
Để phù hợp với nhu cầu, chúng tôi đã tạo ra một framework JS-ES.next. Mục đích nhằm tối giản, hiệu chỉnh và để quản lý các chức năng cốt lõi và cao cấp như:
- Data fetching;
- Routing;
- Templating;
- Views rendering;
- Transitions;
- Components instantiation;
- Inter-communication;
- Disposal;
Thực tế, phần lớn nội dung là hình ảnh. Chúng tôi đã đầu tư một khoảng thời gian lớn để nâng cao trải nghiệm HTML:
- Mỗi hình ảnh được tạo phía máy chủ (với giao diện người dùng tùy chỉnh) theo tỷ lệ và kích thước khác nhau. Cùng với mỗi .jpeg / .png cũng được chuyển đổi ở định dạng .webp.
- Ở front-end, chúng tôi đã sử dụng 8 phương tiện truy vấn truyền thông khác nhau làm giá trị đặt trước cho ảnh <picture> với phạm vi tải định dạng, tỷ lệ khung hình và kích thước tốt nhất có thể. Mỗi phương tiện truyền thông đã được tải bằng cách sử dụng kỹ thuật tải “lazy loading”, mà ưu tiên các tài nguyên theo khoảng cách của chúng từ chế độ xem. Ngoài ra, còn việc sử dụng HTTP2. Chúng cho phép ghép tài nguyên tác động mạnh đến hiệu suất tải trang của toàn bộ website thương hiệu.
Nền tảng cũng đã được tích hợp (thông qua API). Với hệ thống CRM của khách hàng, trải nghiệm trong việc đăng ký, gửi và giám sát các chiến dịch marketing tùy chỉnh trở nên hợp lý.
Các công nghệ được ứng dụng
- Giao thức: HTTPS / HTTP2;
- Framework và thư viện Frontend: Abstract Manager (framework vi mô nội bộ), Bootstrap 4, SCSS, JS-ES.next, GreenSock, LazySizes;
- Các công nghệ backend: WordPress 4 & WordPress API, Agile CRM;
- Công cụ: Grunt, NPM, Bower, Adobe Brackets;
Về Thinking About
Thinking About ™ là một studio sáng tạo kỹ thuật số độc lập của Ý.
Chúng tôi đồng nhất linh hoạt giữa thiết kế và công nghệ. Biến những ý tưởng sáng tạo trong một trải nghiệm sản phẩm kỹ thuật số trở nên ý nghĩa. Nếu bạn chưa biết làm website thương hiệu ở đâu, hãy ghé qua đây để tham khảo và nhận được tư vấn !
Nguồn: web-savvy-marketing.com
