This document discusses responsive web design and atomic design. It notes that responsive design uses fluid grids, flexible images and media queries to provide a continuous experience across devices. Atomic design is introduced as a methodology that breaks interfaces into basic building blocks called atoms, and then combines them into larger components called molecules and organisms. Defining appropriate breakpoints is also discussed as key to responsive design. The document encourages responsive design as it allows for single development and maintenance while adapting content for different screens.

1. RESPONSIVE
DESIGN
IDAN BEN ARI

7. RWDAWD
ADAPTIVE WEB RESPONSIVE WEB

8. RESPONSIVE

10. #‫אדפטיבי‬ ‫לאתר‬ ‫דוגמא‬

12. #‫לאתר‬ ‫דוגמא‬‫רספונסיבי‬

13. AS LONG AS IT IS
THE BEST SOLUTION
FOR THEM
PEOPLE DON’T CARE
WHAT SOLUTION
YOU CHOOSE

14. RESPONSIVE
IS LIKE WATER
“BE WATER MY FRIEND”

17. SINGLE
DEVELOPMENT
SINGLE
MAINTENANCE
CONTINOUS
EXPERIENCE
THE OBVIOUS BENEFITS

28. ATOMIC DESIGN

29. “Fluid grids, Flexible Images, and media queries
are the three technical ingredients for
responsive web design. But it also requires:
A DIFFERENT WAY OF THINKING

30. A DIFFERENT WAY OF THINKING

31. ATOMIC DESIGN

32. ATOMIC
DESIGN
ATOMS

33. ATOMIC
DESIGN
MOLECULE

34. ORGANISM

35. ATOMIC
DESIGN
PAGE

36. ATOMIC DESIGN HELPS
Create a Ui language and patterns for
the products
Which Helps the multiscreen user
And also helps development team

37. RESPONSIVE
PATTERNS
HOW

39. DEFINING BREAKPOINTS
Breakpoints are the point a which your
sites content will respond to provide the
user with the best possible layout to
consume the information.

40. BREAK POINTS TYPES

41. Content often use
responsive
WHICH ?

45. Some Good Reasons
STILL NOT
CONVINCED?

50. THANK YOU :)