wordcamp 2012 - seth carstens presentation (responsive width)

• 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">

•

• Good for mobile?• YES

• Good for desktop?• NO

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 :

wordcamp 2012 - seth carstens presentation (responsive width)

Technology