Thiết kế responsive và tương lai của tìm kiếm di động

1. THIẾT KẾ RESPONSIVE
VÀ TƢƠNG LAI
TÌM KIẾM TRÊN THIẾT BỊ
DI ĐỘNG

2. THÁCH THỨC

3. THIẾT KẾ KĨ THUẬT SỐ
Bạn không biết thiết kế
Bạn không biết wireframes và tạo mẫu
... Và bạn không biết quảng cáo bằng
nội dung

4. TÙY CHỌN
Điều bạn có thể làm hoặc nhờ giúp đỡ
tạo:
Blog posts, cuộc thi, infographics,
tính năng tƣơng tác, hình thức nội dung
dài, video, thuyết trình, ...

5. YÊU CẦU KĨ NĂNG
•Copywriting, nghiên cứu báo chí, ý tƣởng câu
chuyện
•Hồ sơ khách hàng, phân tích dữ liệu
•Tiếp cận cộng đồng và PR
•Phát triển back-end và front-end
•Sản xuất video, hình ảnh, thiết kế graphic

6. TẬP HỢP
Thiết kế tốt nghĩa là bạn có thể trình
bày mọi thứ cho khách hàng và họ sẽ
thuê bạn - ngƣời có kinh nghiệm
tuyệt vời nhất

7. VẤN ĐỀ

8. KĨ NĂNG HÌNH CHỮ T
Bạn không phải ngƣời thiết kế, bạn không
phải giám đốc dự án
Chuyên môn trong lĩnh vực duy nhất (có lẽ
là tìm kiếm kĩ thuật), với hiểu biết cơ bản
nhiều lĩnh vực sáng tạo khác

9. MỘT THÁP BABEL
Nếu bạn không thể nói ngôn ngữ của tôi, bạn
không thể lấy bất cứ thứ gì để xây dựng cách
nó làm việc tốt trong mỗi thiết bị
Nếu tôi không thể nói ngôn ngữ của bạn, tôi
sẽ xây dựng vài thứ khó tin và bạn sẽ không
tìm thấy lợi ích từ nó

10. SEO TRONG NĂM 2014?
Bạn cần thực sự hiểu biết biết cái gì
có thể tƣơng tác với lĩnh vực của bạn
Bắt đầu với thiết kế...

11. CÁC NGUYÊN TẮC CƠ BẢN

12. THIẾT KẾ TỐT LÀ ...
Đây là Dieter Rams. Ông đã đƣa ra 10
nguyên tắc trong đó xác định thiết kế tốt,
mà đã trở thành touchstones cho thiết kế
tốt trong 40 năm qua
http://en.wikipedia.org/wiki/Dieter_Rams

13. NGUYÊN TẮC CỦA MỘT
THIẾT KẾ TỐT
1. Nó sáng tạo
2. Có các mục hữu ích
3. Có thẩm mỹ
4. Có các mục dễ hiểu
5. Nó không phô trƣơng
6. Nó thân thiện
7. Nó không lỗi thời qua thời gian
8. Nó đƣợc chăm chút kĩ lƣỡng và chi tiết
9. Tôn trọng môi trƣờng
10. Không thêm chrome

14. TIỀM NĂNG

15. GẦN MÀ XA
Đây là ví dụ của nội dung tuyệt vời,
từng chút một, không xem xét trên
điện thoại di động

16. THE PIXAR THEORY

17. http://www.pixartheory.com/
•HTML5
•CSS3 layout, font inports
•jQuery, jQuery UI, smaill JS
elements

19. WINGTIP OR SADDLE

20. http://www.colehaan.com/
wingtip-or-saddle.html
•HTML5 video, audio
•CSS3 layout, font inports
•jQuery, jQuery UI, 7 jQuery plugins
•Sản xuất video, âm thanh mẫu
•Hình ảnh packshot

22. SNOWFALL

23. http://www.nytimes.com/pr
ojects/2012/snowfall/#/?part=tunnel-creek
•HTML5 video, audio
•CSS3 layout, font imports
•jQuery, jQuery UI, 3jQuery plugins,
Underscore, Orientation detection,
Modernizr, mustache, mediaelementjs
•Video, 3D graphics và sản xuất âm thanh
•Hình ảnh packshot

25. VẤN ĐỀ

27. DI ĐỘNG/ MÀN HÌNH
Đây là tất cả những ý tƣởng tuyệt vời
cho màn hình nhƣng chỉ cho màn hình
Nó vẫn ổn, nếu chúng ta chỉ có màn
hình trên thế giới, nhƣng không, chúng
ta còn nhiều thiết bị khác

28. SỬA CHỮA

29. HIỂU BIẾT
Chú ý đến những điều sau đây,
bạn sẽ ít nhất là bắt đầu hiểu các
nhà phát triển ngôn ngữ sử dụng

30. CÔNG NGHỆ

31. HTML5
Ngữ nghĩa (chủ yếu) của dữ liệu tầng
(lớp), đề xuất nội dung browser
http://en.wikipedia.org/wiki/HTML5
http://diveintohtml5.info/
http://www.html5rocks.com/en/

32. CSS3
(Tƣơng đối) nâng cấp lớp trình bày, đƣợc sử
dụng để cung cấp cho thiết kế hấp dẫn đối
với HTML. LESS/SAS/SCSS – CSS cũng tạo ra
công nghệ
http://www.css3.com/
http://lesscss.org/
http://sass-lang.com/

33. JAVASCRIPT
DOM (liên tƣởng HTML) công nghệ điều
khiển. Sử dụng cho hoạt hình, nhận dữ liệu,
và tất cả những thứ tiên tiến khác
jQuery/MooTools/Angular/Ember/CanJS/
Coffescript: JS công nghệ liên quan
http://eloquentjavascript.net/

34. SVG
Công nghệ vẽ. Thƣờng sử dụng cho
graphing, biểu đồ và những đƣờng
nhỏ/ ô phần tử cơ bản
http://d3js.org/
http://css-tricks.com/using-svg/

35. WebGL
Nâng cao công nghệ vẽ cho browser
http://learningwebgl.com/blog/?pag
e_id=1217
http://www.chromeexperiments.com
/webgl/

36. LAYOUTS

37. ADAPTIVE/RESPONSIVE
•Thay đổi phân giải khác nhau
•Sửa hoặc fluid (mềm dẻo) kích thƣớc nội dung
•Di động (mobile), tablet và màn hình (desktop)
nói chung
•Nói chung là 12/16 cột
•Sửa bố cục (fixed layout)

38. ADAPTIVE/RESPONSIVE
http://www.hellomichael.com/
http://pacelaw.com/
http://www.bostonglobe.com/

39. FRAMELESS
•Thay đổi phân giải khác nhau
•Sửa hoặc mềm dẻo kích thƣớc nội dung
•Nhiều Breakpoints (6+, SEOgadget mới sử
dụng 13)
•Không giới hạn đếm cột
•Bố cục thay đổi

40. FRAMELESS
http://seogadget.com/opendaws/
http://framelessgrid.com/

41. TƢƠNG LAI

42. KỂ MỘT CÂU CHUYỆN HAY
1. Xác định các kinh nghiệm và nội dung đầu tiên
2. Thiết kế UI cho nhiều thiết bị có kích thƣớc
khác nhau và truy cập dễ dàng nhất
3. Kiểm tra, kiểm tra và kiểm tra mọi thứ bạn có
thể nghĩ về nó
iOS (Safari), Android (browser, Chrome), Windows
và Mac (IE, Chrome và Firefox) ở mức tối thiểu

43. Vietbaiseo.net việt hóa từ
seogadget.com
THE END