Being responsive

• 1. BeingResponsive Designingwebsitesthatlookgreatonphones,tablets&desktops BryanMayjor-Extension&ExperimentStationCommunications

2. NETC2014-TekkiesintheLittleApple BeingResponsive Designingwebsitesthatlookgreatonphones,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. NETC2014-TekkiesintheLittleApple MediaQueries Desktoplayout 3 4. NETC2014-TekkiesintheLittleApple MediaQueries Tabletportrait 4 5. NETC2014-TekkiesintheLittleApple MediaQueries Phoneportrait 5 6. NETC2014-TekkiesintheLittleApple Settingthewidthofimagebydevice 6 7. NETC2014-TekkiesintheLittleApple Settingimagewidthbydevice 7 8. NETC2014-TekkiesintheLittleApple Wheredidthatsidebargo? Layoutofelementsgetrearrangedwhenwidthchanges 8 9. NETC2014-TekkiesintheLittleApple Wheredidthatsidebargo? Layoutofelementsgetrearrangedwhenwidthchanges 9 10. NETC2014-TekkiesintheLittleApple Wheredidthatsidebargo? Layoutofelementsgetrearrangedwhenwidthchanges 10 11. NETC2014-TekkiesintheLittleApple Wheredidthatsidebargo? Layoutofelementsgetrearrangedwhenwidthchanges 11 12. NETC2014-TekkiesintheLittleApple Goingwiththeflow Searchpageexample 12 13. NETC2014-TekkiesintheLittleApple Goingwiththeflow Searchpageexample 13 14. NETC2014-TekkiesintheLittleApple Goingwiththeflow Searchpageexample 14 15. NETC2014-TekkiesintheLittleApple Goingwiththeflow Whatlooksgoodinportraitdoesntalwaysworkaswellinlandscape 15 16. NETC2014-TekkiesintheLittleApple Goingwiththeflow Whatlooksgoodinportraitdoesntalwaysworkaswellinlandscape 16 17. NETC2014-TekkiesintheLittleApple Goingwiththeflow Makingthetimelinelookgoodonmobiledevices 17 18. NETC2014-TekkiesintheLittleApple Goingwiththeflow Makingthetimelinelookgoodonmobiledevices 18 19. NETC2014-TekkiesintheLittleApple Goingwiththeflow Makingthetimelinelookgoodonmobiledevices 19 20. NETC2014-TekkiesintheLittleApple Goingwiththeflow Makingthetimelinelookgoodonmobiledevices 20 21. NETC2014-TekkiesintheLittleApple Goingwiththeflow Makingthetimelinelookgoodonmobiledevices 21 22. NETC2014-TekkiesintheLittleApple Goingwiththeflow Makingthetimelinelookgoodonmobiledevices 22 23. NETC2014-TekkiesintheLittleApple Goingwiththeflow Makingthetimelinelookgoodonmobiledevices 23 24. NETC2014-TekkiesintheLittleApple Goingwiththeflow Makingvideopop-upslookgoodonmobiledevices 24 25. NETC2014-TekkiesintheLittleApple Goingwiththeflow Attemptingtomakethevideopop-upslookgoodonmobiledevices 25 26. NETC2014-TekkiesintheLittleApple Goingwiththeflow Attemptingtomakethevideopop-upslookgoodonmobiledevices 26 27. NETC2014-TekkiesintheLittleApple DontReinventtheWheel Startwitharesponsiveframeworklike BootstraporFoundation 27 28. NETC2014-TekkiesintheLittleApple WebsitesReferenced OregonsAgriculturalProgress http://oregonprogress.oregonstate.edu ! PacificNorthwestInsectHandbook http://pnwhandbooks.org/insect 28 29. NETC2014-TekkiesintheLittleApple Bryan Mayjor [email protected] 29 Source: http://http://www.marcandangel.com