Stephanie Briones

Make Better Things Part Two.

Transcript

1. MAKE BETTER THINGS part two
2. FIVE RELIABLE PRACTICES 1. Content first 2. Type is always !important; 3. Use color thoughtfully 4. Use a grid 5. Make it Responsive
3. Questions are welcome
4. Use a grid 4
5. Why use a grid?
6. Advertisement Logo Article Content Header
8. SOME THINGS GRIDS PROVIDE 1. Consistent layouts 2. More organized content 3. Clearly structured information 4. Meaningful placement
9. thinkingwithtype.com/contents/grid
12. “Any time more than one element is present, there is the suggestion of a human agenda at work, a pattern of order being imposed. Design is nothing if not order applied to disorder.” —KHOI VINH, ORDERING DISORDER
13. Start using grids
16. What I use
17. hashgrid.com
18. CSS Background Image
19. xscopeapp.com/guide
20. Ordering Disorder
21. Grid Frameworks
22. Grids don’t have to be difficult.
23. Make it Responsive 5
24. What is Responsive Web Design?
25. mediaqueri.es
26. @media all and (max-width: 699px) and (min-width: 520px){ ! ! button { ! ! width: 100%;! ! } }
27. @media all and (max-width: 699px) and (min-width: 520px){ ! ! button { ! ! width: 100%;! ! } }
28. width=device-width <meta name="viewport" content="width=device-width, initial- scale=1, maximum-scale=1">
29. Use percentages for margins, padding, widths, and images.
30. “Web design is responsive design, Responsive Web Design is web design, done right.” —ANDY CLARKE
31. My Process
34. Responsive Frameworks
35. Useful RWD Tools
36. Chrome Dev Tools
37. responsinator.com
38. iOS Simulator
39. better yet, a real mobile device
40. xscopeapp.com/guide
41. Responsive Web Design
42. Bonus Points
43. Don't forget the details Optimize for Retina
44. Use SVG and Icon Fonts when you can
45. thenounproject.com
46. css-tricks.com/examples/IconFont
47. weloveiconfonts.com
48. icomoon.io
49. fontello.com
50. SOME ADVICE 1. Don't over-think grids 2. Build things fluidly
51. Thanks.
52. Image Credits: Vintage Bike Article: classiclightweights.co.uk/designs/bastide-hs.html ✎