Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web To Go, Part 2

Web To Go, Part 2

Presentation about mobile trends and technologies delivered to Greater Seattle NetSquared (Nov 15, 2011), a Meetup group of non-profits and tech volunteers.

Peter Sylwester

November 15, 2011

More Decks by Peter Sylwester

Other Decks in Technology


  1. “If you think you need a browser detect to solve

    a CSS problem, you’re wrong. Always.” Peter-Paul Koch, Quirksmode.org A typical mobile device’s user-agent string looks like this: Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0; HTC; HD7) zytrax.com lists 100s of such strings. Every version of every device.
  2. “Rather than creating disconnected designs, each tailored to a particular

    device or browser, we should instead treat them as facets of the same experience.” - Ethan Marcotte http://unstoppablerobotninja.com
  3. “If you don’t have the content, I’m sorry, you can’t

    make a website. You have to have the content. First.” - Jeremy Keith, “One Web” http://adactio.com/journal/4940 progressive enhancement
  4. <style> #container { /* "desktop" rules go here */ width:

    400px; margin: 2em auto; } @media all and (max-width: 720px) { #container { /* "mobile" rules go here */ width: 100%; } } </style>
  5. <script> window.addEventListener("resize", function(e) { var tipPoint = {min:721, max:721}; var

    isMobile = = (window.screen.width < tipPoint.min && window.screen.height < tipPoint.max) || (window.screen.width < tipPoint.max && window.screen.height < tipPoint.min); }, false); <script>
  6. What’s Old is New Again Demands  Deficiencies  Inventions

     Consensus  Adaptation  Repeat 2004 Ecommerce Security SEO AJAX Semantics JavaScript Frameworks Web 2.0 2011 Mobile Display Sizes Network, Touch Responsiveness Mobile First Platform Frameworks HTML5
  7. Video & Audio tags Canvas tag Menu & Nav tags

    Improved Forms Embedded Fonts CSS3 & Transforms OpenDatabase Network Object Model
  8. Most people regularly browse the Internet every day on their

    mobile device(s). People have a tendency to distrust Internet content on mobile. Wonkiness and not-for-mobile layouts/forms/pop-ups contribute to distrust. Many people dislike being “cheated” with mobile-optimized content. Many people expect “mobile” version to closely align with “desktop” version. Many people prefer “zoomability” of pages, but dislike horizontal scrolling. Most people do NOT save bookmarks on their mobile browser. The entry-point for almost all browsing is via a search. Increased network speed doesn’t necessarily improve browsing experience. People seemed to have zero concept of what “mobile optimized” means. No one expects mobile devices (even tablet) will fully replace desktop/laptop.