![âą Why? iPhones think they are smarter than you.
âą <meta name="viewport" content="width=device-width, initial-
scale=1.0">
âą <!--[if lt IE 9]> <script src="http://css3-mediaqueries-
js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <!
[endif]-->](https://image.slidesharecdn.com/13314081-120613150408-phpapp02/85/WordCamp-2012-Seth-Carstens-Presentation-Responsive-Width-4-320.jpg)
![[Discussion]
âą Performance
âą Usability
âą Quality Assurance
âą Conversion / Website Purpose
âą Uniformity
âą Time Investment](https://image.slidesharecdn.com/13314081-120613150408-phpapp02/85/WordCamp-2012-Seth-Carstens-Presentation-Responsive-Width-15-320.jpg)
WordCamp 2012 - Seth Carstens Presentation (Responsive Width)
- 1. âą WCPHX.com (whats going on now?) âą Tweet with #WCPHX âą Register for Saturday WordCamp, you must be registered with a ticket to get in! âą Sunday, WordCamp for Kids, register at 2102.phoenix.wordcamp.com âą Break for lunch at 12:30, speakers will break as needed. âą WP-Engine Giveaway @ bit.ly/wpe-for-phx âą Water and Snacks in the back
- 2. Smartphones and Tablets and Bears, OH MY! Responsive Width Presentation by: Seth Carstens
- 3. âą Mobile Scale <Meta> Tag âą CSS3, HTML5, JS, && !Flash o Know whatâs supported (and whatâs not) âą Using CSS3 Media Queries o UIX requires real planning âą Understand the Grid (960.gs or Blueprint) âą jQuery Mobile âą Testing and Monitoring (MITE AND KITE) âą Clone or Custom Mobile Content Debate
- 4. âą Why? iPhones think they are smarter than you. âą <meta name="viewport" content="width=device-width, initial- scale=1.0"> âą <!--[if lt IE 9]> <script src="http://css3-mediaqueries- js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <! [endif]-->
- 5. âą Good for mobile? âą YES âą Good for desktop? âą NO
- 9. âą 960.gs o 960 is additive. It provides a grid and the design elements are added to your CSS. o Everything you need in 1 download âą BluePrintCss.org o Blueprint is subtractive. Extensive feature set allows you to simply disable what you donât need. o Open Source Community = lots of add-ons âą Bottom Line, use a grid system
- 11. âą Pros o jQuery! o Fast and efficient o Helps with forms âą Cons o New and buggy o Defaults can cause issues o Updated all the time âą Example: wcphx.com
- 12. Things to consider: âą Performance âą Usability âą Quality Assurance âą Conversion / Website Purpose âą Uniformity âą Time Investment
- 13. âą Tons of devices, do we test them all? o No, consult GA (Google Analytics) âą Monitoring? o Make sure your sites are online 24/7/365 ï§ Ping, Status 200 o Loading correctly ï§ True Browser load testing and app testing ï§ Online with a WSOD is not really online
- 14. KITE MITE Keynote Internet Testing Environment Mobile Internet Testing Environment âą Sophisticated recording and analysis tool âą 2,000 emulated devices / 12,000 device âą Real (TxP) and emulated (ApP) browser profiles support âą Verify content device compatibility, certify âą Provides instant global testing from 5 cities content, conduct performance diagnostics Testing, Scripting, Monitoring of Testing, Scripting, Monitoring Websites and Applications of Mobile Websites
- 15. [Discussion] âą Performance âą Usability âą Quality Assurance âą Conversion / Website Purpose âą Uniformity âą Time Investment
- 16. âą Quick plug â âWho knows what a QR code is?â âą Qr.IsAWhat.com
- 17. ⹠Scanning Apps: o Not all apps were made equal o QuickMark ($$$) o Google Goggles o iPhone? ⹠Testing QR from Projection⊠Qr.IsAWhat.com
- 18. âą Lets get hands on and modify the 2011 theme to use some Responsive Widths âą We will generate CSS3 media queries âą Lets try it out. I will be using: wp401.sethmatics.com
- 19. 5 Keys to Mobile Success âą <Meta> Tag + CSS3 Media Queries âą Responsive UIX Requires Planning âą Use a Grid âą Test Your Sites! âą Market with QR Presentation By: Seth Carstens @sethmatics : E:[email protected] : Sethmatics.com :
- 20. âą http://mite.keynote.com âą Lessframework.com (by attendee) Presentation By: Seth Carstens @sethmatics : E:[email protected] : Sethmatics.com :
Editor's Notes
- #15: Keynote provides free tools to test, script and monitor websites and mobile websites from your desktop. KITE allows you to record, script and analyze the performance of multi-page web transactions. You can record transactions on real or emulated browsers and upload them for 24x7 monitoring in Transaction Perspective or Application Perspective. You can also run an instant performance test from 5 cities around the globe. MITE records, scripts and analyses the performance of mobile website transactions on any of 2000 emulated devices and 11,000 devices profiles. MITE provides a score that grades your performance across devices, and you can compare the appearance of content across devices to verify the compatibility of your mobile site. You can upload scripts for 24x7 monitoring in Mobile Web Perspective.