responsive web, website linh hoạt

12
DigiVision Nhà cung cấp giải pháp Marketing Online toàn diện cho Doanh nghiệp Tham khảo thêm tại: http://www.digivision.com.vn/ Responsive web à? Nó là cái gì vậy? To bé tròn méo ra sao? Tại sao nó lại có nhiều người yêu thế? Responsive website = website linh hoạt. Nó linh hoạt với tất cả các thiết bị truy cập. Hãy thử tưởng tượng một trang web quá cỡ so với màn hình điện thoại hay tablet giống như một thân hình quá cỡ cố ních vào chiếc áo chật chội chỉ dành cho các model, bạn sẽ thấy rất bất tiện khi cứ phải kéo đi kéo lại màn hình để đọc được hết một đoạn tin hay xem đầy đủ hình ảnh trên đó. Mất tập trung, mất thời gian và mất hứng thú chính là trạng thái của bạn và hầu hết mọi người đã từng trải qua khi dùng di động để xem một trang web chỉ dành cho PC Đó chính là lý do tuyệt vời cho sự ra đời của Responsive. Không chỉ có vậy, Responsive còn là một xu hướng đang rất được ưa chuộng trên thế giới mà chúng ta không nên bỏ qua… Các nhà thiết kế web, các doanh nghiệp, các tờ báo danh tiếng… trên thế giới lúc này đều thảo luận về Web linh hoạt (responsive website) và dần dần Responsive hóa toàn bộ cho website của họ. Cho dù có người không thích nó, nhưng xu hướng này sẽ vẫn tiếp tục duy trì trong vài năm tới, cùng với sự phát triển đa dạng của các thiết bị di động. Để kiểm tra ngay trên PC một trang web có "linh hoạt" hay không, bạn có thể dùng chuột kéo chiều trang của trình duyệt hẹp lại. Nếu các yếu tố tự sắp xếp lại khi chiều ngang bị hẹp lại, nó đã được thiết kế "linh hoạt". Tuy nhiên một số trang chỉ thay đổi theo thiết bị khi bạn dùng chính các thiết bị đó để truy cập. Cho những ai còn nghi ngờ về xu hướng này thì chúng ta hãy cùng xem những trang web quen thuộc nhất sử dụng reponsive tuyệt vời thế nào nhé. (Nhấp chuột vào hình để đi tới liên kết) 1. BBC Trang web tin tức lớn nhất thế giới BBC đã chọn xu hướng này cho thiết kế của mình. Điều này giúp BBC có thể được đọc trên mọi thiết bị, từ điện thoại tới máy tính bảng của tất cả các loại nhãn nhiệu. Thiết kế tối giản giúp trang web trình bày những hình ảnh đẹp mắt, nội dung sáng sủa. 2. Disney

Upload: digivision123

Post on 18-Dec-2014

232 views

Category:

Documents


0 download

DESCRIPTION

Responsive web linh hoạt với mọi loại màn hình di động

TRANSCRIPT

Page 1: Responsive web, website linh hoạt

DigiVision – Nhà cung cấp giải pháp Marketing Online toàn diện cho Doanh nghiệp Tham khảo thêm tại: http://www.digivision.com.vn/

Responsive web à? Nó là cái gì vậy? To bé tròn méo ra sao? Tại sao nó lại có nhiều người yêu thế? Responsive website = website linh hoạt. Nó linh hoạt với tất cả các thiết bị truy cập. Hãy thử tưởng tượng một trang web quá cỡ so với màn hình điện thoại hay tablet giống như một thân hình quá cỡ cố ních vào chiếc áo chật chội chỉ dành cho các model, bạn sẽ thấy rất bất tiện khi cứ phải kéo đi kéo lại màn hình để đọc được hết một đoạn tin hay xem đầy đủ hình ảnh trên đó. Mất tập trung, mất thời gian và mất hứng thú chính là trạng thái của bạn và hầu hết mọi người đã từng trải qua khi dùng di động để xem một trang web chỉ dành cho PC Đó chính là lý do tuyệt vời cho sự ra đời của Responsive. Không chỉ có vậy, Responsive còn là một xu hướng đang rất được ưa chuộng trên thế giới mà chúng ta không nên bỏ qua… Các nhà thiết kế web, các doanh nghiệp, các tờ báo danh tiếng… trên thế giới lúc này đều thảo luận về Web linh hoạt (responsive website) và dần dần Responsive hóa toàn bộ cho website của họ. Cho dù có người không thích nó, nhưng xu hướng này sẽ vẫn tiếp tục duy trì trong vài năm tới, cùng với sự phát triển đa dạng của các thiết bị di động. Để kiểm tra ngay trên PC một trang web có "linh hoạt" hay không, bạn có thể dùng chuột kéo chiều trang của trình duyệt hẹp lại. Nếu các yếu tố tự sắp xếp lại khi chiều ngang bị hẹp lại, nó đã được thiết kế "linh hoạt". Tuy nhiên một số trang chỉ thay đổi theo thiết bị khi bạn dùng chính các thiết bị đó để truy cập. Cho những ai còn nghi ngờ về xu hướng này thì chúng ta hãy cùng xem những trang web quen thuộc nhất sử dụng reponsive tuyệt vời thế nào nhé. (Nhấp chuột vào hình để đi tới liên kết) 1. BBC

Trang web tin tức lớn nhất thế giới BBC đã chọn xu hướng này cho thiết kế của mình. Điều này giúp BBC có thể được đọc trên mọi thiết bị, từ điện thoại tới máy tính bảng của tất cả các loại nhãn nhiệu. Thiết kế tối giản giúp trang web trình bày những hình ảnh đẹp mắt, nội dung sáng sủa. 2. Disney

Page 2: Responsive web, website linh hoạt

DigiVision – Nhà cung cấp giải pháp Marketing Online toàn diện cho Doanh nghiệp Tham khảo thêm tại: http://www.digivision.com.vn/

Đại gia đình huyền ảo đã phát triển thiết kế responsive web với một nhóm "nhỏ" 30 lập trình viên và tung ra trang web vào tháng 10. Thiết kế cho phép thu lại nội dung website và những hình ảnh lớn, video mà không bị mất đi chất lượng. 3. Zurb

Một số công ty trình bày những bố cục thiết kế web linh hoạt rất tối ưu, đồng thời vẫn đáp ứng yêu cầu kinh doanh. Minh chứng rõ nhất là xưởng thiết kế Zurb tại thung lũng Silicon. Bố cục tổng thể đã giải quyết vấn đề thường gặp khi có quá nhiều khoảng trống (white space) trong quá trình chuyển các yếu tố đồ hoạ từ máy để bàn tới thiết bị di động. Kết quả là một bố cục chặt chẽ và hoàn hoảo với mọi kích thước. 4. Design Week Polrtland

Page 3: Responsive web, website linh hoạt

DigiVision – Nhà cung cấp giải pháp Marketing Online toàn diện cho Doanh nghiệp Tham khảo thêm tại: http://www.digivision.com.vn/

Được ủng hộ của xưởng chữ Scribble Tone từ lúc bắt đầu tới khi kết thúc, trang web của Design Week Portland xác định ý nghĩa của sự "Thực hiện đầy đủ". Toàn bộ bố cụ trang là một khoá học đánh đổ những xu hướng thiết kế thông thường – Bao gồm, nhưng không giới hạn với một trang web đơn và một kiểu web typography tuỳ chỉnh – Nhưng bạn không hề cảm thấy rối rắm. Bố cụ trang trẻ trung, đem tới thương hiệu đơn vị tổ chức và của một công ty thiết kế tuyệt vời. 5. The Next Web

Làm sao bạn có thể nói về web linh hoạt mà không hiểu gì về nó. The Next Web thay đổi từ cuối năm 2012 để theo kịp xu hướng này – người dùng có thể đọc trên điện thoại dễ dàng và luôn cảm thấy sự thống nhất trên mọi thiết bị. Đó cũng là một trong những lý do quan trọng của Web Linh Hoạt: Nó nhìn đẹp ở khắp mọi nơi.

Page 4: Responsive web, website linh hoạt

DigiVision – Nhà cung cấp giải pháp Marketing Online toàn diện cho Doanh nghiệp Tham khảo thêm tại: http://www.digivision.com.vn/

6. A Book Apart

Một công ty viết ra những cuốn sách về thiết kế linh hoạt. A Book Apart, nơi gánh vác trác nhiệm của trang blog về web A List Apart, dễ dàng là một ví dụ tốt nhất của một trang web thương mại chọn những lợi ích của thiết kế linh hoạt. Điều này cần một sự quản lý, bố trí các yếu tố thông minh và không lộn xộn. Nó tốt về thẩm mỹ, khẳng định thương hiệu của trang. 7. AIDS

Ngay cả một trang web của chính phủ cũng hy vọng vào thiết kế linh hoạt, aids.gov cân bằng giữa thông điệp mạnh mẽ và một thiết kế tốt. Theo như những người chọn kiểu thiết kế này; "Xây dựng AIDS.gov theo responsive cho phép chúng tôi tập trung vào tất cả các đối tượng, ở khắp nơi, với mọi thiết bị họ có thể truy cập."

Page 5: Responsive web, website linh hoạt

DigiVision – Nhà cung cấp giải pháp Marketing Online toàn diện cho Doanh nghiệp Tham khảo thêm tại: http://www.digivision.com.vn/

8. Tattly

Một hình xăm tạm thời? Ai mà biết được rằng một trang web thiết kế linh hoạt có thể tạo ra một sản phẩm lập dị nhưng đẹp. Tattly đã tận dụng lợi thế của web linh hoạt để tạo ra một trang web cung cấp những hình xăm tạm thời. 9. Harvard University

Thiết kế reponsive của Harvard sạch sẽ và cổ điển, không mất đi hàng thập kỷ xây dựng thương hiệu trực tuyến. Kết quả là một bố cục trực quan, không quá hiện đại. Trang web là một ví dụ tuyệt hảo của sự khác biệt giữa bố cục (layout) và thiết kế. 10. TIme

Page 6: Responsive web, website linh hoạt

DigiVision – Nhà cung cấp giải pháp Marketing Online toàn diện cho Doanh nghiệp Tham khảo thêm tại: http://www.digivision.com.vn/

Với quyết định thay đổi thiết kế vào tháng 10, Time trình bày mục tiêu của họ là cung cấp những trải nghiệm đồng nhất tới độc giả: "Bởi vì một số thiết bị sẽ mang lại những kết quả khác nhau, trong khi đó thiết bị di động sẽ là phương tiện mà người dùng truy cập đầu tiên để xem nội dung." Thiết kế của Time tối giản, dễ đọc, và đương nhiên là trang web tin tức toàn cầu sẽ đồng nhất trên mọi thiết bị. 11. This is Responsive

Đứa con tinh thần của Github. Trang web là một công cụ khác để chỉ ra các kích thước trong Web linh hoạt. Tính năng tốt nhất của web là các hình dạng chuyển động linh hoạt hoàn hảo nằm ở giữa trang, và tất nhiên là tuỳ biến với mọi nền tảng. Chuyển động linh hoạt thực sự là ý tưởng độc đáo, trang web hứa hẹn sẽ tạo nên một làn sóng mới trong tương lai.

Page 7: Responsive web, website linh hoạt

DigiVision – Nhà cung cấp giải pháp Marketing Online toàn diện cho Doanh nghiệp Tham khảo thêm tại: http://www.digivision.com.vn/

12. An Event Apart

Những chuyên gia tại A List Apart không ngừng phô diễn thế mạnh về web linh hoạt của họ – Họ tiếp tục trình diễn khả năng của mình với An Event Apart. 13. Happy Cog

Rõ ràng, sắc nét và kỳ quái, thiết kế của xưởng phim Happy Cog cho thấy một cách tốt nhất để trình bày sự tài năng của mình. Công ty có thể cho thấy rất nhiều bảng màu và cá tính trên trang – và đương nhiên nó nhìn hoàn hảo ở mọi kích thước. 14. Spigot

Page 8: Responsive web, website linh hoạt

DigiVision – Nhà cung cấp giải pháp Marketing Online toàn diện cho Doanh nghiệp Tham khảo thêm tại: http://www.digivision.com.vn/

Xưởng phát triển và thiết kế Spigot bán những thiết kế tuyệt đẹp của họ trên trang chủ – thật khó để diễn tả cảm giác tuyệt vời về thiết kế của trang. Phần tốt nhất của thiết kế là một chuỗi biểu tượng đơn giản có thể chuyển động ngang. 15. Google Cultural Institute

The Google Cultural Institute là một trong số ít những trang công nghệ lớn cho rằng Reponsive là một lựa chọn đúng đắn. 16. Starbuck

Page 9: Responsive web, website linh hoạt

DigiVision – Nhà cung cấp giải pháp Marketing Online toàn diện cho Doanh nghiệp Tham khảo thêm tại: http://www.digivision.com.vn/

Với thương hiệu vua cà phê của mình, lý do để Starbucks chọn Web linh hoạt khá đơn giản: khám phá và đang dạng hoá. Công ty thấy rằng ngày càng nhiều khách hàng truy cập trang bằng thiết bị di động, và đương nhiên Responsive là cách tốt nhất để đáp ứng điều này. 17. Illy

Kiểu dáng đẹp và mịn như một chiếc xe hơi đắt tiền, trang web của Mỹ Illy issimo chắc chắn là trang web bố trí đẹp, gợi cảm nhất ngày hôm nay. Nó cũng đáp ứng tốt khi là một trang web thương mại điện tử, đảm bảo rằng sản phẩm nổi bật và là tâm điểm trên mọi thiết bị. 18. Sony

Page 10: Responsive web, website linh hoạt

DigiVision – Nhà cung cấp giải pháp Marketing Online toàn diện cho Doanh nghiệp Tham khảo thêm tại: http://www.digivision.com.vn/

Sony là một trong những công ty lớn nhất thế giới đã gia nhập xu hướng Reponsive trong năm 2012, và nó vẫn duy trì một trang web tuyệt đẹp tới lúc này. Nổi bật và liền mạch, sẽ có thêm nhiều tín đồ yêu những thiết kế hiện đại của Sony, nó còn có thông điệp rằng Sony sẵn sàng đứng đầu trong thế giới công nghệ. 19. DConstruct

20. Grey Goose

Page 11: Responsive web, website linh hoạt

DigiVision – Nhà cung cấp giải pháp Marketing Online toàn diện cho Doanh nghiệp Tham khảo thêm tại: http://www.digivision.com.vn/

Không có thanh Bar nằm ngang – Grey Goose tuyệt đẹp và mịn màng. Một bảng màu xám và kiểu chữ hiện đại cùng với bố trí sang trọng phù hợp trên mọi thiết bị. Nó có lẽ tuyệt vời nhất khi nhìn máy tính bảng, cho dù nhiều thiết bị tập trung vào việc hiển thị trên thiết bị di động hơn. 21. Microsoft Việt Nam

Thế giới sẽ ra sao nếu không có Microsoft? Cho dù nhiều người cho rằng nó đã ở phía bên kia sườn dốc, nhưng với những thay đổi gần đây Microsoft đang dần trở lại. Lấy kiểu thiết kế hiện đại, tối giản làm chủ đạo, trang web cho thấy sự hoàn hảo khi linh hoạt với mọi thiết bị. Liên hệ với DigiVision để được tư vấn và xây dựng Responsive web: Phòng Kinh Doanh

Page 12: Responsive web, website linh hoạt

DigiVision – Nhà cung cấp giải pháp Marketing Online toàn diện cho Doanh nghiệp Tham khảo thêm tại: http://www.digivision.com.vn/

Mr Tuấn: 04 3211 5868 Email: [email protected] --------------------------------------------------------------------------------------------------- Nội dung và hình ảnh được biên tập & trang trí lại từ: DigiVision Nguồn: iDesign