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.

Transcript

1. How do I build a mobile website?
2. “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.
3. “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
4. http://lukew.com “Websites and applications should be designed and built for mobile first.” - Luke Wroblewski
5. “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
6. 11 Reasons Why Responsive Design Isn’t That Cool webdesignshock.com/responsive-design-problems
9. <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>
10. <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>
11. “Mobile is HARD!”
16. 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
17. Video & Audio tags Canvas tag Menu & Nav tags Improved Forms Embedded Fonts CSS3 & Transforms OpenDatabase Network Object Model
18. 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.
19. One Internet. Content First. SEO Rules! Simplify. 1 2 3 4
21. Peter Sylwester ptr@ptrdo.com delicious.com/ptrdo/mobile delicious/stacks/view/BHaNrB