WordCamp 2012 - Seth Carstens Presentation (Responsive Width)


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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.
  • WordCamp 2012 - Seth Carstens Presentation (Responsive Width)

    1. 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. 2. Smartphones and Tablets and Bears, OH MY! Responsive WidthPresentation by: Seth Carstens
    3. 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. 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. 5. • Good for mobile?• YES• Good for desktop?• NO
    6. 6. Thanks:webdesignerwall.com
    7. 7. Thanks:webdesignerwall.com
    8. 8. Thanks:webdesignerwall.com
    9. 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
    10. 10. • 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
    11. 11. Things to consider:• Performance• Usability• Quality Assurance• Conversion / Website Purpose• Uniformity• Time Investment
    12. 12. • 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
    13. 13. 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
    14. 14. [Discussion] • Performance • Usability • Quality Assurance • Conversion / Website Purpose • Uniformity • Time Investment
    15. 15. • Quick plug – “Who knows what a QR code is?”• Qr.IsAWhat.com
    16. 16. • Scanning Apps: o Not all apps were made equal o QuickMark ($$$) o Google Goggles o iPhone?• Testing QR from Projection… Qr.IsAWhat.com
    17. 17. • 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
    18. 18. 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:seth@sethmatics.com : Sethmatics.com :
    19. 19. • http://mite.keynote.com• Lessframework.com (by attendee) Presentation By: Seth Carstens @sethmatics : E:seth@sethmatics.com : Sethmatics.com :