Web Device Troubleshooting with Inspect

Troubleshooting with Adobe Edge Inspect

Suzette Franck will explain Adobe Edge Inspect, an essential application for WordPress web developers and designers who need to preview their content across multiple mobile devices, be it iOS, Android, Kindle, or PC. Wirelessly pair multiple iOS and Android devices to your computer, grab screenshots from any connected device, and see real-time results from changes to HTML, CSS, and JavaScript. Inspect allows you to synchronize browsing, remotely view code using Chrome's Developer Tools, easily grab screenshots from different devices, and it integrates seamlessly with the other Adobe Edge products, such as Code CC and Reflow CC. For developers, extensibility can be added using the Edge Inspect API. This session will cover the basics of setting up Adobe Edge Inspect along with tips on how to improve your responsive workflow and using the integrated code view when troubleshooting issues when designing across multiple devices.

Transcript

1. Web Device Troubleshooting with Adobe Inspect Suzette Franck So Cal WordPress, Chinatown Tuesday, July 16, 2013 Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
2. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” ★(mt) Media Temple WordPress Evangelist ★18+ years Web Dev, Intranet, Training & Docs ★Reg. Speaker: WordCamps & Meetups ★Reg. Contributor:WPwatercooler.com ★DradCast Host, Episode 17: DradCast.com ★Blogs Weekly: suzettefranck.com ★Twitter: @mt_Suzette ★Slides: speakerdeck.com/suzettefranck
3. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What We Will Cover
4. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Who is Your Audience? ★The Scientific Approach to Device Testing ★Using Adobe Edge Inspect Cross Device Testing Using Inspect
5. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Who is your audience? Nothing beats good old fashioned market research!
6. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What is important to your audience? ★Consider your competition ★Consider which mobile devices ★Consider past metrics if available ★Current trends in mobile http://www.inc.com/guides/2010/06/defining-your-target-market.html
7. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Major Mobile Devices iPad, iPod, iPhone, Mac iOS, Android, Windows 7 or 8
8. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Google Analytics
9. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple WordPress.com Stats
10. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Alexa.com
11. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Current Mobile Trends ★Agile Design (Design to Fit Content) ★Responsive Web Design (Mobile First) ★Progressive Enhancement (Graceful Degradation) ★None - Mobile Devices Don’t Exist
12. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Devices??? So many devices, so little time!
13. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Major Mobile Devices iPad, iPod, iPhone, Mac iOS, Android, Windows 7 or 8
14. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What to look for? ★Appearance across devices ★Basic functionality across devices ★Usability across devices ★Tedious, time consuming
15. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Before Performing Configurations “Science, my boy, is made up of mistakes, but they are mistakes which it is useful to make, because they lead little by little to the truth.” - Jules Verne, Journey to the Center of the Earth
16. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Adopt a Scientific Approach ★First back everything up ★Make sure to log out of Admin ★Check after each incremental change ★Create a repeatable procedure for testing ★Record results with dates and times ★Note environment and device
17. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What is the Adobe Edge Suite? Awesome Suite of web development tools by Adobe
18. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Edge Inspect ★Synchronized browsing and refreshing ★Remote code inspection ★Screenshots ★Integration Edge Reflow CC & Edge Code CC ★http://en.wikipedia.org/wiki/Adobe_Edge
19. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Define your target audience ★Make correction, test, repeat ★Be organized and systematic ★Use shortcuts like Adobe Inspect when you can Next Inspect Demo... but let’s review so far
20. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Questions? Suzette Franck sfranck@mediatemple.net https://speakerdeck.com/suzettefranck @mt_Suzette Tweet Me!