Realistic responsive design - Awwwards 2016

Awwwards conference, Amsterdam, 28 January 2016

Transcript

1. Realistic responsive design by Inayaili de León Persson Awwwards, Amsterdam, 2016
2. 1. Define a project leader
3. flic.kr/p/8JJDer
4. 2. Buy lots of sticky notes
6. 3. Involve all the right people
7. flic.kr/p/dMpken
8. 4. Make a wishlist and plan from there
9. flic.kr/p/oRsPbM
10. 5. Deprioritise other projects
11. flic.kr/p/oepoQQ
12. 6. Aim for a date, but be flexible
13. flic.kr/p/odGXUV
14. 7. Prioritise what you want to do first
16. 8. Write down everything you will NOT do
17. flic.kr/p/a3KRS4
18. 9. List all your pages
20. 10. Allow plenty of time for device testing
21. flic.kr/p/bu2gfG
22. 11. Get test devices based on analytics
23. 14% APPLE IPHONE 11% APPLE IPAD 2% MICROSOFT SURFACE 1% GOOGLE NEXUS 5 1% GOOGLE NEXUS 7 1% SONY READER PRS-T1 1% SAMSUNG GALAXY S5 …
24. 12. Create a document with initial rules
25. flic.kr/p/65C7c3
26. 13. Make a component inventory
28. 14. Have a style guide
30. 15. Clean up your CSS
31. flic.kr/p/ovrq1Y
32. 16. Have a solid grid
33. https://flic.kr/p/do6BHg
34. 17. Convert grid to percentages
36. 18. Evolve instead of change
37. flic.kr/p/oeJcBM
38. 19. Don’t be afraid to copy
40. 20. Don’t use everyone at once,
 and use everyone at once
41. flic.kr/p/xNXbL1
42. 21. Show your prototypes
43. flic.kr/p/bB7EAF
44. 22. Quick and dirty UX
46. 23. Experiment on smaller projects
48. 24. What can we do in 1 hour?
49. flic.kr/p/oy4MFD
50. 25. Make an image inventory
52. 26. Optimise your images
53. flic.kr/p/5ZU8DZ
54. 27. Adjust type based on real devices
55. flic.kr/p/uCVKGp
56. 28. Don't keep two code bases for longer than you need to
57. flic.kr/p/i6PjYM
58. 29. Keep a record of all decisions
60. 30. Talk and write about it
61. flic.kr/p/9MhxcX
62. Read more at design.canonical.com
63. Thank you.
 @yaili bit.ly/viewsource2015