Being responsive
0 likes227 views
Responsive web design (RWD) creates dynamic changes to a website's appearance depending on the viewing device's screen size and orientation. The presentation discusses how RWD works using media queries to rearrange and resize website elements like images, text containers, and sidebars for different devices. It provides examples of redesigning elements like search pages, timelines, and video pop-ups to work well across desktop, tablet, and phone screen sizes and orientations. The presentation recommends starting with a responsive framework like Bootstrap or Foundation to simplify the process of building responsive websites.
Being responsive
- 1. Being Responsive Designing websites that look great on phones, tablets & desktops Bryan Mayjor -‐ Extension & Experiment Station Communications
- 2. NETC 2014 -‐ Tekkies in the Little Apple Being Responsive Designing websites that look great on phones, tablets & desktops Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. Source: http://www.nngroup.com/articles/responsive-web-design-definition/! ! 2
- 3. NETC 2014 -‐ Tekkies in the Little Apple Media Queries Desktop layout 3
- 4. NETC 2014 -‐ Tekkies in the Little Apple Media Queries Tablet portrait 4
- 5. NETC 2014 -‐ Tekkies in the Little Apple Media Queries Phone portrait 5
- 6. NETC 2014 -‐ Tekkies in the Little Apple Setting the width of image by device 6
- 7. NETC 2014 -‐ Tekkies in the Little Apple Setting image width by device 7
- 8. NETC 2014 -‐ Tekkies in the Little Apple Where did that sidebar go? Layout of elements get rearranged when width changes 8
- 9. NETC 2014 -‐ Tekkies in the Little Apple Where did that sidebar go? Layout of elements get rearranged when width changes 9
- 10. NETC 2014 -‐ Tekkies in the Little Apple Where did that sidebar go? Layout of elements get rearranged when width changes 10
- 11. NETC 2014 -‐ Tekkies in the Little Apple Where did that sidebar go? Layout of elements get rearranged when width changes 11
- 12. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow Search page example 12
- 13. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow Search page example 13
- 14. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow Search page example 14
- 15. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow What looks good in portrait doesn’t always work as well in landscape 15
- 16. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow What looks good in portrait doesn’t always work as well in landscape 16
- 17. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow Making the timeline look good on mobile devices 17
- 18. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow Making the timeline look good on mobile devices 18
- 19. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow Making the timeline look good on mobile devices 19
- 20. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow Making the timeline look good on mobile devices 20
- 21. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow Making the timeline look good on mobile devices 21
- 22. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow Making the timeline look good on mobile devices 22
- 23. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow Making the timeline look good on mobile devices 23
- 24. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow Making video pop-‐ups look good on mobile devices 24
- 25. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow Attempting to make the video pop-‐ups look good on mobile devices 25
- 26. NETC 2014 -‐ Tekkies in the Little Apple Going with the flow Attempting to make the video pop-‐ups look good on mobile devices 26
- 27. NETC 2014 -‐ Tekkies in the Little Apple Don’t Reinvent the Wheel • Start with a responsive framework like Bootstrap or Foundation 27
- 28. NETC 2014 -‐ Tekkies in the Little Apple Websites Referenced Oregon’s Agricultural Progress http://oregonprogress.oregonstate.edu ! Pacific Northwest Insect Handbook http://pnwhandbooks.org/insect 28
- 29. NETC 2014 -‐ Tekkies in the Little Apple Bryan Mayjor bryan.mayjor@oregonstate.edu 29 Source: http://http://www.marcandangel.com