Visual explanation what's Responsive web design. Download slides: https://www.infodiagram.com/diagrams/it-icons-cloud-software-mobile-network-devices-flat-ppt-clipart.html?cp=camp7 lllustration how responsive web design works on various screen sizes and devices. An example how to do DIY animations for teaching IT concepts using only PowerPoint.

1. Responsive Website
Explaining IT

2. Explain them visually.
Use DIY presentation illustrations,
with icons and simple diagrams
Some examples…
Are you presenting or
teaching IT concepts?

3. Responsive web design
Website is delivered in different
versions, depending on the
capabilities and specs of the
end-user device.
Simple mobile
version
Full HD desktop
version

4. Responsive web design
Simple mobile
version
Full HD desktop
version
Limited content with limited functionality
for small resolution touchscreens

5. Responsive web design
Simple mobile
version
Full HD desktop
version
Limited content with limited functionality
for small resolution touchscreens
Limited content with full functionality
for medium resolution touchscreens

6. Responsive web design
Simple mobile
version
Full HD desktop
version
Limited content with limited functionality
for small resolution touchscreens
Limited content with full functionality
for medium resolution touchscreens
Full content with full functionality
for high resolution screens

7. Need to optimize for variety of devices!
various screen size, various interactions
(touch, scroll, mouse, keyboard…)

8. Small mobile devices
Mobile phone Business phone Smart phone
Need to optimize for variety of devices!
various screen size, various interactions
(touch, scroll, mouse, keyboard…)

9. Small mobile devices
Mobile phone Business phone Smart phone
Big mobile devices
Pad (Tablet) E-book reader
Need to optimize for variety of devices!
various screen size, various interactions
(touch, scroll, mouse, keyboard…)

10. Small mobile devices
Mobile phone Business phone Smart phone
Big mobile devices
Pad (Tablet) E-book reader Notebook (laptop) Desktop PC
(workstation)
Personal computers
Need to optimize for variety of devices!
various screen size, various interactions
(touch, scroll, mouse, keyboard…)

11. Responsive website layouts
Desktop layout
for large screens

12. Responsive website layouts
LOGO | PRODUCTS | BRANDS | NEWS | CONTATCT
Lorem ipsum
Dolor sit amet, consectetur
adipiscing elit. Mauris
tristique sit amet ante et
aliquam.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Mauris tristique sit amet ante
et aliquam. Proin quis diam
dignissim, facilisisquam at,
Curabitur accumsan nisl
ipsum, sed feugiat neque
convallis id. Nulla eleifend
lorem id hendrerit
condimentum. Aliquam
In urna mauris:
» tincidunt a mattis sed,
» cursus sed augue
» aliquam erat volutpat
» in sollicitudin, enim vitae
Desktop layout
for large screens
…search

13. Responsive website layouts
LOGO | PRODUCTS | BRANDS | NEWS | CONTATCT
Lorem ipsum
Dolor sit amet, consectetur
adipiscing elit. Mauris
tristique sit amet ante et
aliquam.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Mauris tristique sit amet ante
et aliquam. Proin quis diam
dignissim, facilisisquam at,
Curabitur accumsan nisl
ipsum, sed feugiat neque
convallis id. Nulla eleifend
lorem id hendrerit
condimentum. Aliquam
In urna mauris:
» tincidunt a mattis sed,
» cursus sed augue
» aliquam erat volutpat
» in sollicitudin, enim vitae
Desktop layout
for large screens
Mobile layout
for touch screens
…search

14. Responsive website layouts
LOGO | PRODUCTS | BRANDS | NEWS | CONTATCT
Lorem ipsum
Dolor sit amet, consectetur
adipiscing elit. Mauris
tristique sit amet ante et
aliquam.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Mauris tristique sit amet ante
et aliquam. Proin quis diam
dignissim, facilisisquam at,
Curabitur accumsan nisl
ipsum, sed feugiat neque
convallis id. Nulla eleifend
lorem id hendrerit
condimentum. Aliquam
In urna mauris:
» tincidunt a mattis sed,
» cursus sed augue
» aliquam erat volutpat
» in sollicitudin, enim vitae
LOGO
Lorem ipsum
Dolor sit amet, consectetur
adipiscing elit. Mauris
tristique sit amet ante et
aliquam.
Desktop layout
for large screens
Mobile layout
for touch screens
…search

15. Explaining IT visually can be fun & easy.

16. Explaining IT visually can be fun & easy.
Use simple diagram, illustrate with icon
symbols, their colors and location.

17. Download these slides
at infoDiagram.com
(click to open)
Explaining IT visually can be fun & easy.
Use simple diagram, illustrate with icon
symbols, their colors and location.

18. For more presentations,
hit FOLLOW on slideshare.net/infodiagramFollow
Download these slides
at infoDiagram.com
(click to open)