二中院对“借名或租牌买车风险”向社会作出提示

Transcript

1. RESPONSIVELY RESPONSIVE @htmlboy @martuishere

2. ?HOLA!

3. We are Javier & Marta We are also @htmlboy &

   @martuishere

4. We work at Swwweet.com We work mostly for our cats.

5. WE DESIGN WEBSITES

6. WE DESIGN WEBSITES RESPONSIVE

7. We’ve made every mistake over the past two years.

8. Adaptive non-?uid layouts Responsive as an add-on Mobile as an

   afterthought Ignoring real devices

9. We’ve learned our lessons the hardest possible way.

10. Organizing media queries Best use of pre-processors Navigation patterns Serving

    appropriate images

11. Organizing media queries Best use of pre-processors Navigation patterns Serving

    appropriate images (not really)

12. Our work gets better as we learn all this. Or

    so we hope.

13. But we’ve struggled with one particular thing...

14. WORKFLOW

15. A B

16. Our old work?ow: mockups code wireframes

17. This is known as “waterfall” development. Because you’d want to

    put them in a barrel and throw them over a waterfall. Mike Monteiro · Design Is a Job

18. A B pain

19. Our shoehorned work?ow: sketches visuals prototype

20. A B

21. It wasn’t quite working, we needed something better…

22. RESPONSIVELY RESPONSIVE

23. Work?ows need ?exibility as much as websites do.

24. A B

25. A WARNING

26. None

27. There’s no perfect work?ow, you have to go and explore

    for yourself.

28. The time of neatly organized process charts and work?ows is

    behind us. Building for the web has become a journey with in?nite potential for forks and bumps in the road. Let’s make sure that our process and organization ready us for what lies ahead. Trent Walton · bit.ly/responsively_1

29. START WITH THE CONTENT Step #1

30. no, really no, really

31. START WITH THE CONTENT

32. No more lorem ipsum! Make a content inventory Create any

    content you need

33. No more lorem ipsum! Make a content inventory Create any

    content you need

34. What do the users want to accomplish? What do we

    have to offer them? Why would they complete this task?

35. Prioritize that content. Post-it notes are great for this!

36. None

37. Discuss with your clients, and be prepared to change everything.

38. Conversations always produce better designs

39. JUMP INTO HTML Step #2

40. Static pictures aren’t websites. And neither are static grey boxes.

41. Wireframe in the browser, simply labelling boxes to their content.

42. Go from this:

43. To this: Logo Main article Article Article

44. Start mobile ?rst and build the rest of the layouts

    from there.

45. Logo Main article Article Navigation Article Article

46. WORK THE VISUALS Step #3

47. Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance.

    Organizing blocks of text and combining them with pictures, isn’t that what graphic designers, usability specialists, information architects do? So why is it such a neglected topic? Oliver Reichestein · bit.ly/responsively_2

48. Always start with the basics: pick your fonts, scale, colors.

49. Design visual languages that you can take further than mockups.

50. A small set of visual assets can go a long

    way.

51. Styletil.es Style tiles

52. They are not a “deliverable”. They are an exploration tool.

    Abstraction can be dif?cult. Style tiles are great, but:

53. Style tiles bit.ly/responsively_3

54. Regardless of any particular process or tool we may choose,

    it’s interesting to note that our visual design explorations are now happening alongside the research and ideation phases undertaken by our UX colleagues. Having front-end developers be part of the same conversation, helps massively too. Paul Lloyd · bit.ly/responsively_3
55. None
56. None

57. On what’s best for your brand On what’s best for

    your content On what’s best for your user Base all your design decisions

58. Translate this visual language into your prototype. Yay, a website!

59. BE PREPARED TO CHANGE EVERYTHING

60. BE PREPARED TO CHANGE EVERYTHING BE FLEXIBLE

61. BE PREPARED TO CHANGE EVERYTHING BE FLEXIBLE

62. RESPONSIVELY RESPONSIVE Step #4

63. prototyping phase may change accordingly to your typographic decisions and

    visual decisions (grids, etc). Responsively responsive: The media queries you set at the

64. not work well across a variety of devices or conditions.

    The colors/sizes you chose might Responsively responsive:

65. tons of images (i.e. band width), and you might need

    to ?nd something else that you can replicate with CSS. Your visual assets might need Responsively responsive:

66. If your beautiful design requires 400 HTTP requests and weighs

    10MB, it's not designed for the web.

67. All these changes are OK! The web is alive, you

    don’t have to be afraid.

68. Don’t work in hermetic silos, best products come from collaboration.

69. content strategists designers developers REAL AWESOMENESS

70. satis?es all the user’s needs is easy and pleasant to

    use responds quickly in any context A good site is only good when it

71. ALL THE TEAM SHOULD WORRY ABOUT THESE 3 THINGS. ALL

    OF THE TIME.

72. A BRAVE NEW PROCESS Summing up

73. Our new work?ow: content prototype visuals

74. REPEAT REPEAT REPEAT

75. content strategists designers developers WORK TOGETHER

76. BE FLEXIBLE, BE...

77. RESPONSIVELY RESPONSIVE

78. THANKS! @htmlboy @martuishere

79. QUESTIONS? @htmlboy @martuishere