• 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
Smartphones andTablets and
Bears, OH MY!Responsive Width
Presentation by:Seth Carstens
• 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
• 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]-->
• Good for mobile?• YES
• Good for desktop?• NO
Thanks: webdesignerwall.com
Thanks: webdesignerwall.com
Thanks: webdesignerwall.com
• 960.gso 960 is additive. It provides a grid and the design
elements are added to your CSS.o Everything you need in 1 download
• BluePrintCss.orgo 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
• Proso jQuery!o Fast and efficiento Helps with forms
• Conso New and buggyo Defaults can cause issueso Updated all the time
• Example: wcphx.com
Things to consider:• Performance• Usability• Quality Assurance• Conversion / Website Purpose• Uniformity• Time Investment
• 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 200o Loading correctly
True Browser load testing and app testing Online with a WSOD is not really online
MITEMobile Internet Testing Environment
KITEKeynote Internet Testing Environment
• Sophisticated recording and analysis tool• Real (TxP) and emulated (ApP) browser
support• Provides instant global testing from 5 cities
• 2,000 emulated devices / 12,000 device profiles
• Verify content device compatibility, certify content, conduct performance diagnostics
Testing, Scripting, Monitoring of Mobile Websites
Testing, Scripting, Monitoring ofWebsites and Applications
[Discussion]• Performance• Usability• Quality Assurance• Conversion / Website Purpose• Uniformity• Time Investment
• Quick plug – “Who knows what a QR code is?”
• Qr.IsAWhat.com
• Scanning Apps:o Not all apps were
made equalo QuickMark ($$$)o Google Goggleso iPhone?
• Testing QR from Projection…
Qr.IsAWhat.com
• 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
5 Keys to Mobile Success1.<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 :
• http://mite.keynote.com• Lessframework.com (by attendee)
Presentation By:Seth Carstens@sethmatics :
E:[email protected] :Sethmatics.com :