SlideShare a Scribd company logo
Overview
 ‣ The Power and Future of Mobile
 ‣ Mobile Browsers and Engines (WebKit/HTML5)

 ‣ CBC Mobile Services (Apps/Sites)

 ‣ Web Apps, Native Apps and Hybrid Apps

 ‣ Mobile Web Information Architecture

 ‣ Enabling Your Site for Mobile Web

 ‣ Optimization / Best Practices / (Debugging) Tools

 ‣ Links/Literature Resources
Who has developed a website before?
Why develop for mobile web?
6.8 billion people in the world




http://www.robert-alonso-photos.com/wp-content/uploads/2009/08/3ConeyIslandBeach.jpg

Recommended for you

Backend & Frontend architecture scalability & websockets
Backend & Frontend architecture scalability & websocketsBackend & Frontend architecture scalability & websockets
Backend & Frontend architecture scalability & websockets

Scalable and interactive web-apps can be achieved easily with the help of Redis, NodeJS, RxJS and your favourite backend language and database.

webcodearchitecture
Word press theme and plugins WordCamp Presentation
Word press theme and plugins WordCamp PresentationWord press theme and plugins WordCamp Presentation
Word press theme and plugins WordCamp Presentation

This document profiles Angela Samuels, a technology educator. It outlines her areas of expertise including WordPress, social media, and internet marketing. She has an Associate's degree from Henry Ford Community College, a Bachelor's from Eastern Michigan University, and a Master's from Wayne State University. Her experience includes work at GM and Chrysler, and she has been a freelance trainer for authors and small businesses since 2008. Her clients include web developers and small business owners seeking training.

wordpressweb design and developmentsmall business
Zurb foundation
Zurb foundationZurb foundation
Zurb foundation

Zurb Foundation 5 is a front-end framework for building responsive web pages that integrates easily with Ruby on Rails applications. It provides a grid system, global styles, and prebuilt components to quickly design pages, as well as Sass, JavaScript widgets, and simple configuration. Developers can add Foundation to a Rails app by adding the foundation-rails gem, running bundle install, and generating the Foundation install files.

softwarezurbruby
3.4 billion people with mobile devices

                                Flickr: Batikart
Mobile is the 7th Mass Media
Print        Recordings


Radio        Television


Cinema      The Internet



        Mobile
Print        Recordings


            Radio        Television


            Cinema      The Internet



                    Mobile

Mobile is the only mass media that can do
   everything the previous six can do
                                       Source: http://en.wikipedia.org/wiki/Seven_mass_media

Recommended for you

One day WordPress workshop
One day WordPress workshopOne day WordPress workshop
One day WordPress workshop

WordPress is a content management system initially used for blogging that has become a popular framework for building various websites. It powers 27% of the internet and has over 19 million downloads of version 4.7. WordPress is available in over 50 languages and has many career opportunities associated with it such as web development, design, and content management. It is preferred due to being user friendly, easy to work with, secure, SEO friendly, and customizable through thousands of free and paid plugins and themes. WordPress can be used freely through WordPress.org or with added features through WordPress.com.

wordpressismartmandurashna
PAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark TomlinsonPAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark Tomlinson

This document discusses web performance optimization techniques. It is a summary of rules for web performance by Mark Tomlinson, who has 27 years of experience in performance. Some of the key techniques discussed include reducing HTTP requests, optimizing file compression, minimizing code, improving web font and image performance, prefetching resources, avoiding unnecessary redirects, and optimizing infrastructure and databases. The document emphasizes measuring performance through load testing and monitoring to identify bottlenecks.

Untangling the web week 2 - SEO
Untangling the web week 2 - SEOUntangling the web week 2 - SEO
Untangling the web week 2 - SEO

The second class in the untangling the web series. The main topic of this class is search engine optimization.

search enginesweb developmentseo
Unique Benefits
First truly personal mass media                                                                      Permanently carried


    First “always on” mass media                                                                 Built-in payment channel


                                                                                      Most accurate audience measurement


http://www.flickr.com/photos/blogumentary/3947228410/sizes/o/in/faves-caseymckinnon/                Source: http://en.wikipedia.org/wiki/Seven_mass_media
Desktop vs. Mobile Browsing
http://www.motivationalmemo.com/wp-content/uploads/2010/06/change.jpg
Mobile Users vs. Desktop Users




          Source: Morgan Stanley Research, http://gigaom.com/2010/04/12/mary-meeker-mobile-internet-will-soon-overtake-fixed-internet/

Recommended for you

Working local
Working localWorking local
Working local

This document provides information about the author and discusses how to set up a local development environment for WordPress websites. It recommends creating a source folder, adding entries to the hosts file and Apache virtual hosts file, creating a database and user, uploading WordPress files and configuring the site, and restarting web and database services. Finally, it suggests avoiding the built-in WordPress editor and provides contact information for the author.

Easy computer for bds10 entrance for website
Easy computer for bds10 entrance for websiteEasy computer for bds10 entrance for website
Easy computer for bds10 entrance for website

This document discusses three ways to publish content online: 1. Using Instant WordPress which allows website creation directly from a computer without an internet connection. 2. Using free versions of WordPress or Weebly which require an internet connection to set up and publish a website with WordPress providing 1GB of storage and Weebly providing 500MB. 3. The standard way which involves getting a domain, hosting server, designing the site, uploading content, and publishing. It recommends first checking the plans and features of WordPress and Weebly.

web designbodhisukha schoolhow to create website
Untangling the web - week 3
Untangling the web - week 3Untangling the web - week 3
Untangling the web - week 3

This document provides an agenda and notes for a class on web business. It discusses homework assignments, visits from a webmaster and entrepreneur, revenue models like SaaS and advertising. It introduces the Lean Launchpad methodology and Business Model Canvas for planning web businesses. Students participate in exercises applying these concepts to a nonprofit marketing campaign, social media for a cleaning company, and sketching canvases for a toy reseller business.

Enough Reasons to go mobile?


               ...but what mobile platform should you target?




Let’s look at mobile browsers and engines




                                            http://bunkadefresh.com/wp-content/uploads/2010/07/evophones2.jpg
What browsers should you develop for?




                 Source: http://gs.statcounter.com/#mobile_browser-na-yearly-2009-2011-bar
Mobile Grade Browsers
               A
               A browser that’s capable of, at minimum,
               utilizing media queries, support HTML5,
               WebKit Engine, CSS, JavaScript



               B
               A browser that’s capable of minimum
               CSS and JavaScript



               C
               A browser that is not capable of utilizing
               media queries. Watch out for complicated
               JS, CSS — they DON’T support them


                    Source: JQuery Mobile, http://jquerymobile.com/gbs/
Device vs. Browser

Feature Phones                        Smart Phones                                    Touch Phones
 FlipPhone, e.g. Samsung   e.g. most BlackBerry’s before Torch (i.e. Bold, Curve)   e.g. Google Nexus, BB Torch, iPhone




           C                         B                        A                                   A


                                    http://gizmodo.com/5090988/mobile-browser-battlemodo-which-phones-deliver-the-real-web

Recommended for you

Php Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSSPhp Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSS

This document summarizes Irfan Maulana's presentation on architecting scalable CSS at his company Blibli.com. It discusses how they moved to using Sass and implemented the BEM methodology to modularize their CSS and make it more maintainable as their codebase grew. Some challenges included building out their own BEM libraries and integrating it with JavaScript frameworks, but overall it improved collaboration and allowed safe refactoring of CSS without side effects. The presentation concludes that scalable CSS is achievable through preprocessors like Sass and strict conventions like BEM.

cssscalable csscss convention
Optimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get thereOptimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get there

Learn why you should improve your WordPress site's loading speed, and what steps to take to load your site in under two seconds.

cachingwordpressresponsive images
Accessible ePub3 Features
Accessible ePub3 FeaturesAccessible ePub3 Features
Accessible ePub3 Features

ePub3 has extensive features that are intuitive and accessible. Some features are Media Overlay "Read Aloud", MathML, Accessible Video and SVG. This presentation explores the nuances of these features through illustrations, videos and sound clips

mathmlmediaoverlayidpf
Browser Engines


‣ WebKit (BlackBerry 6.0, Android, iOS)
‣ Presto (Opera Mini)
‣ NetFront (Playstation)
‣ Gecko (Camino, Firefox, SeaMonkey)
‣ and more
Go with WebKit

‣ WebKit (BlackBerry 6.0, Android, iOS)
‣ Presto (Opera Mini)
‣ NetFront (Playstation)
‣ Gecko (Camino, Firefox, SeaMonkey)
‣ and more
WebKit and HTML5



‣ WebKit is not a browser, it’s an engine
‣ Most A-Grade mobile browsers are based on WebKit
  and support HTML5
HTML5



‣ Why you want to make use of HTML5 features
  in your web app/site

Recommended for you

Why it's not your host's fault
Why it's not your host's faultWhy it's not your host's fault
Why it's not your host's fault

WordCamp Milwaukee 2016 Why it's not your host's fault Chad Mowery - chad@chadmow.com - @ChadMow03 - chadmow.com

wordcamp milwaukeewordpresssecurity
2015 - Introduction to building enterprise web applications using Angular.js
2015 - Introduction to building enterprise web applications using Angular.js2015 - Introduction to building enterprise web applications using Angular.js
2015 - Introduction to building enterprise web applications using Angular.js

Introduction presentation for workshop - Building Enterprise Web applications using Angular.js. It gives a quick 10 minutes overview of what it means to build an enterprise web app.

 
by WebF
webfdevelopmentweb front-end
Responsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen GridsResponsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen Grids

Slides presented at DrupalCamp Montreal 2013. Walks through the features of the Zen theme, how to use Sass and Compass, and finally, how to use Zen Grids to change the layout. Conclusion: Zen Grids simplifies the process of changing the layout, so makes responsive design a lot easier to implement.

drupalresponsivezen
HTML5 Rocks!
‣ Easy Markup / new semantic elements
   <video src="movie.mp4" controls="controls">
   your browser does not support the video tag
   </video>



‣ New, smarter form controls, i.e. placeholder, date, number, url
   <input   type="email" placeholder="Enter your email address"/>
   <input   type=”date”/>
   <input   type="number" min="1" value="4" name="2" size="2"/>
   <input   type=”url”/>


‣ Client-Side database, SQLite

‣ Offline Storage via cache.manifest file
   <html manifest=”cache.manifest”>            CACHE MANIFEST
                                               index.html
                                               css/basic.css
                                               images/logo.png
                                               images/footer.png
‣ and...
HTML5 - Location Based
Services
‣ W3C Specification: http://dev.w3.org/geo/api/spec-source.html
CBC Mobile Services

      More under cbc.ca/mobile/services
CBC Mobile Site Strategy



‣ To cover A, B and C grade mobile browsers by
  creating three main mobile sites that encompass the
  different features and limitations of those browsers.

Recommended for you

More Multisite for the Masses
More Multisite for the MassesMore Multisite for the Masses
More Multisite for the Masses

This document introduces WordPress multisite, which allows one WordPress installation to host multiple sites. Key features include being able to update all sites with one click, share plugins and themes across sites, and manage clients' sites from a single dashboard. Instructions are provided on how to set up a WordPress multisite network by modifying wp-config.php and .htaccess files, adding sites, and mapping custom domains. Useful plugins for multisite networks are also listed.

wordpresswordcampmultisite
Blogging for Business
Blogging for BusinessBlogging for Business
Blogging for Business

This document provides an introduction to blogging for business purposes. It defines what a blog is, explains why businesses should blog, and discusses how much time blogging takes. It also lists popular blogging platforms and provides tips on what topics to blog about, best practices for blogging, what makes a great blog post, using keywords and images effectively, adding metadata, proofreading, and publishing posts. The goal is to help businesses understand how to start and maintain an effective blog.

Red de redes. internet
Red de redes. internetRed de redes. internet
Red de redes. internet

Internet es una red descentralizada de redes interconectadas que utilizan protocolos TCP/IP para funcionar como una red lógica única a nivel mundial. Sus orígenes se remontan a 1969 con la conexión entre universidades en EE.UU. Las personas que navegan por internet se conocen como internautas. Aunque a veces se usan como sinónimos, internet no es lo mismo que la World Wide Web, pero esta herramienta permite visualizar páginas con información alojadas en otros servidores a través de hipervínculos.

CBC Mobile Sites
                     TOUCH                          RICH                               TEXT
                 cbc.ca/m/touch                 cbc.ca/m/rich                      cbc.ca/m/text

  Device         Touch Devices               Mostly BB devices                   Feature Phones

 Browser               A-Grade                     B/C-Grade                           C-Grade
              ‣Extended use of JavaScript    ‣Simple CSS and JavaScript     ‣ No images/photos
               and Ajax                      ‣Simple Media (Story images,   ‣ Simple navigation, less links
              ‣WebKit based, CSS3, CSS        Photo Galleries)              ‣ No complicated JavaScript, simple
 Features      sprites, conditional CSS      ‣Use of resized story images    CSS
              ‣Photo galleries and videos     (prefix s_)
              ‣Use of resized story images
               (prefix t_)




Site/Device
Web App, Native App and Hybrid App




‣ Why would you want to have a web app in addition to/
  instead of a native app?
Web vs. Native vs. Hybrid Apps
                   Web Apps                                            Native Apps

‣   Easy distribution/installation                 ‣      Possible complicated distribution trough app
‣   Native Look & Feel                                    stores, fees/charges
‣   Works on all platforms                         ‣      Strict UI Guidelines
‣   Single click using HTML5,Ajax                  ‣      Easy attention through app store
‣   Offline Storage                                 ‣      Platform-dependent
‣   No advertisement restrictions                  ‣      New app for each platform (knowledge of
‣   Fast development time, any web developer              language, Objective-C, Java etc)
    can create web app                             ‣      Full Access to native APIs, features, i.e.
‣   BUT Cannot access all native features, i.e            camera, calendar, address book, push
    compass, camera etc.                                  notification

Example: Google Gmail



                                            Hybrid Apps

‣   Web app wrapped around native app
‣   Access to native APIs

    Example: BlackBerry WebWorks, iOS/Android with webviews
What do you have to do to enable your website for mobile?

Recommended for you

Technical Debt Management
Technical Debt ManagementTechnical Debt Management
Technical Debt Management

For every short-cut taken technical debt is added to a project. Taking that path may come from one of many factors, including inexperience, time constraints, scope creep, or lack of resources. Managing technical debt with a professional approach can reduce the high interest rate you may be currently experiencing and lower team stress. That technical burden can be properly managed by giving proper attention, time, and resources to paying down the debt on a regular basis. Explore ways to consistently reduce technical debt and discuss best practices with fellow debtors. Learn how your code score can improve and how you can avoid going bankrupt from a proper technical debt management approach.

#techdebt
Portfolio
PortfolioPortfolio
Portfolio

This document summarizes the introductions and areas of research focus for several new faculty members joining the School of Education at UMass Amherst. Jennifer Randall has joined the department of Educational Policy, Research, and Administration with a focus on educational measurement, teacher grading practices, and social studies education. Christina Ortmeier-Hooper graduated from UMass Amherst and returns to the department of Teacher Education and Curriculum Studies with research interests in adolescent literacy, writing, and second language writing. Laura A. Valdiviezo joins the same department with a focus on indigenous education, language policy, and intercultural education. Cristine Smith returns to the department of Educational Policy, Research, and Administration to work on

Tushar_Vaidya1
Tushar_Vaidya1Tushar_Vaidya1
Tushar_Vaidya1

Tushar Vaidya is a telecom professional with over 15 years of experience in telecom operations management, pre-sales technical support, and post-sales service support. He has worked as an Area Manager for Planetcast Media Communications and in several roles for other telecom companies providing VSAT, CCTV, microwave, and satellite network solutions.

Mobile Information Architecture
"If you design for mobile first, you can create agreement
first on what matters most."
               — Luke Wroblewski, previous Chief Design Architect at Yahoo!
Mobile Information Architecture


 ‣ Touch phones: big buttons, most of the real-estate
   should be clickable
 ‣ Smart phones: track ball, avoid too many links as
   user has to scroll down, use easy navigation items,
   i.e. anchors
Mobile Information Architecture

Guidelines for Mobile URLs:
Make it easy for user to type in your mobile site URL
  ‣ m.cbc.ca
  ‣ touch.facebook.com
  ‣ mobile.twitter.com


and enable auto redirection ...
Redirect to Mobile
    ‣ Decide on user agent strings

Mozilla/5.0 (webOS/1.0; U; en-US)   Mozilla/5.0 (BlackBerry; U;         SAMSUNG-D900E/D900EXAIC1
AppleWebKit/525.27.1 (KHTML, like   BlackBerry 9800; en) AppleWebKit/   NetFront/3.5 Profile/MIDP-2.0
Gecko) Version/1.0 Safari/          534.1+ (KHTML, like Gecko)          Configuration/CLDC-1.1
525.27.1 Pre/1.0                    Version/6.0.0.135 Mobile Safari/
                                    534.1+




               v                                   v                                   v

Recommended for you

Emc expoesymposium
Emc expoesymposiumEmc expoesymposium
Emc expoesymposium

This document discusses EMC and its business focus on enabling customer's business agility through cloud services. It highlights EMC's global presence with over 53,500 employees in 85 countries. It then discusses EMC's partnership with Exponential-e to provide cooperative cloud services including infrastructure assessments, migration services, and ongoing performance management for customers' virtual and physical environments. The document emphasizes that the right IT services can create efficiency while allowing customers to retain control, trust and security over their environments and data.

Mesa redonda UNIMET mayo 24
Mesa redonda UNIMET mayo 24Mesa redonda UNIMET mayo 24
Mesa redonda UNIMET mayo 24

Este documento trata sobre los Recursos Educativos Abiertos (REA) y su uso en los procesos de enseñanza y aprendizaje en el ámbito escolar. Se discuten cuatro retos principales: 1) la formación de docentes en el diseño y uso de REA, 2) crear una cultura institucional que apoye los REA, 3) desarrollar la infraestructura tecnológica necesaria, y 4) promover la innovación educativa mediante los REA. El documento provee definiciones de REA y describe sus tipos y

congresounimetrea
PROCON DATA Field Services Cloud Persönliche Zählerablesung
PROCON DATA Field Services Cloud Persönliche ZählerablesungPROCON DATA Field Services Cloud Persönliche Zählerablesung
PROCON DATA Field Services Cloud Persönliche Zählerablesung

System zur Organisation der pünktlichen und persönlichen Zählerablesung in Zeiten schneller Netzveränderung durch Smart Meter

zählerablesersmart meterableser
Redirect to Mobile

‣ Server-side
  ‣ Webserver: http.conf
           # Catch iPhone-users first
           RewriteCond %{HTTP_USER_AGENT} .*Mobile.*Safari
           RewriteRule ^[./](.*)$ http://www.cbc.ca/m/touch

  ‣ SSI
           
               <meta http-equiv="refresh" content="0; url=www.cbc.ca/m/rich">
Redirect to Mobile

‣ Edge Side Include
      <esi:eval src="mobileuseragents.esi" dca="none" />

       <esi:choose>
           <esi:when test="$(HTTP_USER_AGENT) matches_i $(touch)" matchname="touchmatch">
                    $set_redirect('http://www.cbc.ca/m/touch/')
           </esi:when>
           <esi:when test="$(HTTP_USER_AGENT) matches_i $(rich)" matchname="richmatch">
                      $set_redirect('http://www.cbc.ca/m/rich/')
           </esi:when>
           <esi:otherwise>
               <esi:include src="index.html"/>
           </esi:otherwise>
       </esi:choose>



‣ Client-side: JavaScript
      if (navigator.userAgent.indexOf("iPod") != -1 ||
          navigator.userAgent.indexOf("iPhone") != -1){
          window.location.href = “http://www.cbc.ca/m/touch”;
      }
Redirect to Mobile

‣ But don’t limit user to full site access
Customizing for Devices/
Platforms


‣ Create the best user experience possible based on
  user’s platform/device
‣ Know device/browser specific features and take
  advantage of them

Recommended for you

Ar Tmarketing 3 Bpix
Ar Tmarketing 3 BpixAr Tmarketing 3 Bpix
Ar Tmarketing 3 Bpix

Art_marketing, művészet üzlet

Kraft and DiagSoft
Kraft and DiagSoft Kraft and DiagSoft
Kraft and DiagSoft

This document appears to be about the ancestry and family history of someone with the last name Kraft. It mentions several individuals with the last name Kraft throughout history, including Adam Kraft who was a master builder, and links them to notable figures such as William the Conqueror. It also references researching ancestry and links to Scottish and German ancestry. The document has a section about the potential for global communication using technologies like the internet, cell networks, and instant messaging applications.

diagsoftgkraftkraft family
Estudio la Migración y Municipio AMUCH
Estudio la Migración y Municipio AMUCHEstudio la Migración y Municipio AMUCH
Estudio la Migración y Municipio AMUCH

La migración en Chile,ha aumentado de manera ascendente en este último decenio, lo cual ha involucrado que diversos municipios hayan dispuesto oficinas y direcciones para vincular a los migrantes con la acción comunal.

Customizing for Devices/OS

‣ Using JavaScript to detect user agent and show content only based on that:
      if (navigator.userAgent.indexOf("iPod") != -1 ||
      navigator.userAgent.indexOf("iPhone") != -1){
        // do device specific stuff, e.g. show QT videos or show menu items
      }




‣ Using Media Queries, e.g. calling an iPhone/Mobile stylesheet:

     <link media="only screen and (max-device-width: 480px)" href="mobile.css"
       type= "text/css" rel="stylesheet">

     <link media="screen and (min-device-width: 481px)" href="other.css"
       type="text/css" rel="stylesheet"/>
Customizing for Devices/OS

‣ BlackBerry users get extra information presented

   
    <div class="wspromo">
       <a href="/m/rich/websignal.html"
        title=”Subscribe to WebSignal Alert”>
        Get CBC's Websignal Alert</a>
    </div>
   




‣ iOS: Disable automatic phone number detection

   <meta name = "format-detection" content ="telephone=no"/>
Customizing for Devices/OS

‣ Fallbacks

    ‣ CSS
     
         
             <div class="nocss">You don't have CSS enabled. To have a better experience,
             please turn on background images and CSS on your device.</div>
         
     




    ‣ JavaScript
    <noscript>To access the site with all its functionality, please enable JavaScript.</noscript>
Make it a Web App

‣ iPhone: Full screen without browser bar
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta names="apple-mobile-web-app-status-bar-style"
        content="black-translucent" />




‣ iPhone: Add to Home Screen Box



‣ iPhone: Home Screen Icon
     <link rel="apple-touch-icon" href="img/cbc-touch-icon.png"/>

Recommended for you

Driving User Adoption for SharePoint
Driving User Adoption for SharePointDriving User Adoption for SharePoint
Driving User Adoption for SharePoint

The document provides guidance on driving sustainable user adoption of SharePoint and Office 365 through a 5 step approach: 1) Secure stakeholder buy-in by aligning the SharePoint vision with business goals; 2) Map SharePoint capabilities to business value through prioritized use cases; 3) Facilitate purposeful collaboration around key use cases; 4) Drive success through governance, training and support; 5) Continuously evaluate and adapt the approach through feedback and measurement of outcomes. The overall goal is to minimize disruption from changes and encourage an organizational culture that embraces ongoing evolution with SharePoint.

office 365sharepointuser adoption
Revista Boa Vontade - Edição 240
Revista Boa Vontade - Edição 240Revista Boa Vontade - Edição 240
Revista Boa Vontade - Edição 240

Revista Boa Vontade tem por objetivo levar informações por meio de matérias que abordam temas voltados à cultura, educação, política, saúde, meio ambiente, tecnologia, sempre aliados à Espiritualidade como ferramenta de esclarecimento, auxílio, entendimento e compreensão.

Menu enero
Menu eneroMenu enero
Menu enero

El documento presenta el menú de comidas de una institución para el mes de enero. Incluye las opciones de primer y segundo plato, así como fruta y postre para cada día del mes. Al final se indican las frutas de temporada para enero y una advertencia sobre alergias e intolerancias.

Optimization



‣ Reduce the page load / page weight as much as
  possible
Optimization

‣ Minimize HTTP requests

‣ Put CSS at top of page

‣ Put JavaScript scripts at bottom of page

‣ Avoid images where possible and/or optimize images

      ‣ Use CSS3 features instead of images, i.e. border radius, gradient



    border-radius: 10px;                /* gecko based browsers */
    -moz-border-radius: 10px;           background: -moz-linear-gradient(top, #55aaee, #003366);
    -webkit-border-radius: 10px;        /* webkit based browsers */
                                        background: -webkit-gradient(linear, left top, left
                                        bottom, from(#55aaee), to(#000000));
Optimization
‣ Use image sprites

‣ Image optimization via Smush.it

‣ Consider mobile image resizer solutions: Resizing images
  for all major device widths via device detection

‣ Don’t scale images in HTML

‣ Use minified scripts, i.e. js, css (YSlow)

‣ Reduce number of DOM Element

    //avoid
    var divArr = document.getElementByClassName(“story-images”);
    //The number of DOM elements is easy to test, just type in Firebug's console:
    document.getElementsByTagName('*').length



‣ Read more under http://developer.yahoo.com/performance/rules.html
CBC Full-site vs. CBC mobile sites
  cbcnews.ca        cbc.ca/m/touch/news                cbc.ca/m/rich/news
                     (including Canada Votes)            (including Canada Votes)



          837.5 K                        72.1 K                             28.9 K




                                  cbc.ca/m/text/news >> HTTP Requests - 8, Total Weight:
                                                         4.2K

Recommended for you

Presentación Colaboradores 5as Jornadas de Ergonomía y Psicosociología 'Buena...
Presentación Colaboradores 5as Jornadas de Ergonomía y Psicosociología 'Buena...Presentación Colaboradores 5as Jornadas de Ergonomía y Psicosociología 'Buena...
Presentación Colaboradores 5as Jornadas de Ergonomía y Psicosociología 'Buena...

Os presentamos los colaboradores que hicieron posible la realización de las 5as Jornadas de Ergonomía y Psicosociología que bajo el título de 'Buenas Prácticas en Ergonomía y Psicosociología' reunió a expertos académicos y profesionales de la Ergonomia el pasado 12-13 diciembre 2013 en Universidad Miguel Hernández Campus de San Juan de Alicante,

ergonomíaprácticasinvestigación
The curse of the mummy chapter 6
The curse of the mummy   chapter 6The curse of the mummy   chapter 6
The curse of the mummy chapter 6

the curse of the mummy chapter 6

Tesis - validación
Tesis -  validaciónTesis -  validación
Tesis - validación

Este documento presenta el diseño y validación de un instrumento para medir el clima escolar en instituciones educativas de Bogotá desde la percepción de los docentes. Se proponen seis dimensiones para medir el clima: estructura y procesos, infraestructura, toma de decisiones, relaciones interpersonales, compensación y sentido de pertenencia. El instrumento, aplicado a 432 docentes, muestra alta confiabilidad y explica el 48% de la varianza para siete factores correspondientes a las seis dimensiones. El estudio concluye que

validaciónconfiabilidadalfa
Things to Consider

 ‣ If you’re going to target C-grade browsers
   avoid CSS(3) and JavaScript where possible
 ‣ Don’t think only because your site looks good on
   iPhone, it will also look good on old BlackBerry
   browsers (< OS 5.0)
 ‣ Compatibility Mobile Table by Peter-Paul Koch
   (ppk): http://www.quirksmode.org/mobile/
Mobile Compatibility Table




                   Source: http://www.quirksmode.org/mobile/
Mobile Tools & Frameworks


‣ Frameworks:                              iUi,
  JQTouch, JQuery Mobile. Sencha
    ‣ Kitchen Sink:
      http://dev.sencha.com/deploy/touch
      /examples/kitchensink/
Mobile Tools & Frameworks

‣ WURLF: Wireless Universal Resource File

     ‣ Open Source project
     ‣ XML configuration file containing information about features
       and capabilities of many mobile devices (~14000)

     ‣ Website offers many optimization tools/apps
  “The main scope of the file is to collect as much information as we can
  about all the existing mobile devices that access WAP pages so that
  developers will be able to build better applications and better services for
  the users.” (wurfl.sourceforge.net)

Recommended for you

BUDAYA BALI
BUDAYA BALIBUDAYA BALI
BUDAYA BALI

Dokumen tersebut membahas berbagai aspek kebudayaan Bali, mulai dari adat istiadat pernikahan, pakaian adat, makanan khas, rumah adat, tarian tradisional seperti pendet, dan beberapa mitos yang berkembang di Bali.

mira sandrana
Física clásica
Física clásicaFísica clásica
Física clásica

La física clásica se divide en nueve disciplinas principales: cinemática, mecánica clásica, hidrostática, hidrodinámica, óptica, electromagnetismo, termodinámica, ondas y la descomposición de la luz por difracción. Cubre temas como las leyes del movimiento, la mecánica de fluidos, la difracción de la luz, las ondas electromagnéticas y las leyes de la termodinámica.

fisica clásica
The impact of Recruitment and Selection process on candidates' intention to a...
The impact of Recruitment and Selection process on candidates' intention to a...The impact of Recruitment and Selection process on candidates' intention to a...
The impact of Recruitment and Selection process on candidates' intention to a...

Negli ultimi decenni la competizione per attrarre e trattenere in azienda i talenti, la cosiddetta “War For Talent” (Michaels, Handfield-Jones & Axerold, 2001) è aumentata costantemente. Diventa quindi fondamentale per le aziende trovare le modalità di Recruitment più efficaci per raggiungere i migliori e portarli dalla loro parte.

researchcandidatiquali-quanti research
WURLF XML
                      <device id="blackberry9800_ver1" user_agent="Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+

‣ Example:           (KHTML, like Gecko) Version/6.0.0.135 Mobile Safari/534.1+" fall_back="blackberry_generic_ver6"
                     actual_device_root="true">
                         <group id="product_info">

  BlackBerry Torch         <capability name="pointing_method" value="touchscreen"/>
                           <capability name="uaprof" value="http://www.blackberry.net/go/mobile/profiles/uaprof/9800_edge/6.0.0.rdf"/>
                           <capability name="model_name" value="BlackBerry 9800"/>
                           <capability name="uaprof2" value="http://www.blackberry.net/go/mobile/profiles/uaprof/9800_umts/6.0.0.rdf"/>
                           <capability name="brand_name" value="RIM"/>
                           <capability name="marketing_name" value="Torch"/>
                           <capability name="release_date" value="2010_august"/>
                         </group>
                         <group id="wml_ui">
                           <capability name="table_support" value="true"/>
                         </group>               <device id="blackberry9800_ver1" user_agent="Mozilla/5.0 (BlackBe
                                  (KHTML, like Gecko) Version/6.0.0.135 Mobile Safari/534.1+" fall_b
                         <group id="display">
                                              actual_device_root="true">
                           <capability name="physical_screen_height" value="70"/>
                                                    <group id="product_info">
                           <capability name="columns" value="36"/>
                           <capability name="dual_orientation" value="true"/>
                                                       <capability name="pointing_method" value="touchscreen"/>
                           <capability name="physical_screen_width" value="50"/>
                                                       <capability name="uaprof" value="http://www.blackberry.net/g
                           <capability name="max_image_width" value="360"/>
                           <capability name="rows" value="32"/>
                                                       <capability name="model_name" value="BlackBerry 9800"/>
                           <capability name="resolution_width" value="360"/>
                                                       <capability name="uaprof2" value="http://www.blackberry.net/
                           <capability name="resolution_height" value="480"/>
                           <capability name="max_image_height" value="400"/>
                         </group>                      <capability name="brand_name" value="RIM"/>
                         <group id="image_format">     <capability name="marketing_name" value="Torch"/>
                           <capability name="jpg" value="true"/>
                                                       <capability name="release_date" value="2010_august"/>
                           <capability name="gif" value="true"/>
                                                    </group>
                           <capability name="bmp" value="true"/>
                           <capability name="wbmp" value="true"/>
                                                    <group id="wml_ui">
                           <capability name="png" value="true"/>
                                                       <capability name="table_support" value="true"/>
                           <capability name="colors" value="65536"/>
                           <capability name="tiff" value="true"/>
                                                    </group>
                         </group>
                         <group id="storage">      
                           <capability name="max_deck_size" value="32768"/>
                                                    <group id="display">
                         </group>
                         <group id="streaming">        <capability name="physical_screen_height" value="70"/>
                                                       <capability name="columns" value="36"/>
                           <capability name="streaming_vcodec_h263_0" value="10"/>
                           <capability name="streaming_vcodec_h264_bp" value="1"/>
                                                       <capability name="dual_orientation" value="true"/>
                           <capability name="streaming_vcodec_mpeg4_sp" value="0"/>
                         </group>                      <capability name="physical_screen_width" value="50"/>
                      
                        <group id="sound_format">      <capability name="max_image_width" value="360"/>
                                                       <capability name="rows" value="32"/>
                           <capability name="wav" value="true"/>
                           <capability name="sp_midi" value="true"/>
                                                       <capability name="resolution_width" value="360"/>
                           <capability name="amr" value="true"/>
                                                       <capability name="resolution_height" value="480"/>
                           <capability name="midi_monophonic" value="true"/>
                         </group>
                         <group id="bearer">           <capability name="max_image_height" value="400"/>
                                                    </group>
                           <capability name="wifi" value="true"/>
                           <capability name="max_data_rate" value="384"/>
                         </group>                   <group id="image_format">
                                          <capability name="jpg" value="true"/>
                     </device>
                                                    <capability name="gif" value="true"/>
What should your development
   environment look like?
Setting up your dev
environment
‣ Eclipse or any other choice of text editor

‣ Webserver / Apache

‣ Firefox/Firebug for Debugging

   ‣ Web Development PlugIn

   ‣ YSlow integrated into Firebug

   ‣ User agent Switcher

‣ Emulators/Simulators (Watch out!)

   ‣ Available for Palm Pre, iPhone (Mac only),
     Android, BlackBerry Simulator (PC only)
Links/Literature
‣ O’Reilly, Brian Fling: Mobile Design and Development

‣ Mobile First: http://www.youtube.com/watch?v=NjE_Or4VIlU

‣ Device Atlas: http://deviceatlas.com/

‣ W3C mobileOK Checker: http://validator.w3.org/mobile/

‣ W3C Mobile Best Practices: http://www.w3.org/TR/mobile-bp/

‣ Design Principles for the Mobile Web: http://articles.sitepoint.com/article/
  designing-for-mobile-web

‣ Safari Web Apps: http://developer.apple.com

‣ Nokia Mobile Design Patterns: http://wiki.forum.nokia.com/index.php/
  Category:Mobile_Design_Patterns

Recommended for you

Reduce Costs Through Printer Consolidation
Reduce Costs Through Printer ConsolidationReduce Costs Through Printer Consolidation
Reduce Costs Through Printer Consolidation

Most organizations are unaware of the savings potential of printer consolidation. Most have no aggregate view of the total costs and no one responsible for managing it. Without this visibility it is difficult to muster exectuive commitment and support.

The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife

Caridy Patiño presented on the challenges of building mobile HTML5 applications. Some key challenges include browser fragmentation across devices, network failures, and the need to optimize applications for different runtime environments and adapt them for varying screen sizes and features. Patiño advocated writing applications using a single language, JavaScript, and customizing output per runtime and context while adapting the UI per form factor and feature detection. The goal is to build flexible applications that can run on multiple platforms.

mobilejavascriptfrontend
Jason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.FinalJason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.Final

The document summarizes the state of mobile web development and the advantages of using HTML5. It discusses how HTML5, CSS3, and JavaScript now allow mobile web apps to have native-like features without needing native app development. It also presents examples of using geolocation, CSS3 effects, transformations, web databases and offline caching to build powerful mobile web experiences. Finally, it discusses hybrid frameworks that combine mobile web delivery with native capabilities and app store deployment.

Developing for Mobile Web

More Related Content

What's hot

The Often Useful Somewhat Annoying World of WordPress Multisite
The Often Useful Somewhat Annoying World of WordPress MultisiteThe Often Useful Somewhat Annoying World of WordPress Multisite
The Often Useful Somewhat Annoying World of WordPress Multisite
James Bundey
 
Two Stack CMS – code.talks Hamburg 2015
Two Stack CMS – code.talks Hamburg 2015Two Stack CMS – code.talks Hamburg 2015
Two Stack CMS – code.talks Hamburg 2015
Robert Lemke
 
Spca2014 introduction responsive master page niaulin
Spca2014 introduction responsive master page niaulinSpca2014 introduction responsive master page niaulin
Spca2014 introduction responsive master page niaulin
NCCOMMS
 
Backend & Frontend architecture scalability & websockets
Backend & Frontend architecture scalability & websocketsBackend & Frontend architecture scalability & websockets
Backend & Frontend architecture scalability & websockets
Anne Jan Brouwer
 
Word press theme and plugins WordCamp Presentation
Word press theme and plugins WordCamp PresentationWord press theme and plugins WordCamp Presentation
Word press theme and plugins WordCamp Presentation
Angela Samuels
 
Zurb foundation
Zurb foundationZurb foundation
Zurb foundation
sean_todd
 
One day WordPress workshop
One day WordPress workshopOne day WordPress workshop
One day WordPress workshop
Rashna Maharjan
 
PAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark TomlinsonPAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark Tomlinson
Neotys
 
Untangling the web week 2 - SEO
Untangling the web week 2 - SEOUntangling the web week 2 - SEO
Untangling the web week 2 - SEO
Derek Jacoby
 
Working local
Working localWorking local
Easy computer for bds10 entrance for website
Easy computer for bds10 entrance for websiteEasy computer for bds10 entrance for website
Easy computer for bds10 entrance for website
Satoru Hoshiba
 
Untangling the web - week 3
Untangling the web - week 3Untangling the web - week 3
Untangling the web - week 3
Derek Jacoby
 
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSSPhp Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
Irfan Maulana
 
Optimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get thereOptimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get there
Stephen Bell
 
Accessible ePub3 Features
Accessible ePub3 FeaturesAccessible ePub3 Features
Accessible ePub3 Features
Vithya Vijayakumare
 
Why it's not your host's fault
Why it's not your host's faultWhy it's not your host's fault
Why it's not your host's fault
chadmow03
 
2015 - Introduction to building enterprise web applications using Angular.js
2015 - Introduction to building enterprise web applications using Angular.js2015 - Introduction to building enterprise web applications using Angular.js
2015 - Introduction to building enterprise web applications using Angular.js
WebF
 
Responsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen GridsResponsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen Grids
Suzanne Dergacheva
 
More Multisite for the Masses
More Multisite for the MassesMore Multisite for the Masses
More Multisite for the Masses
Richard Archambault
 
Blogging for Business
Blogging for BusinessBlogging for Business
Blogging for Business
Jacqueline Wolven
 

What's hot (20)

The Often Useful Somewhat Annoying World of WordPress Multisite
The Often Useful Somewhat Annoying World of WordPress MultisiteThe Often Useful Somewhat Annoying World of WordPress Multisite
The Often Useful Somewhat Annoying World of WordPress Multisite
 
Two Stack CMS – code.talks Hamburg 2015
Two Stack CMS – code.talks Hamburg 2015Two Stack CMS – code.talks Hamburg 2015
Two Stack CMS – code.talks Hamburg 2015
 
Spca2014 introduction responsive master page niaulin
Spca2014 introduction responsive master page niaulinSpca2014 introduction responsive master page niaulin
Spca2014 introduction responsive master page niaulin
 
Backend & Frontend architecture scalability & websockets
Backend & Frontend architecture scalability & websocketsBackend & Frontend architecture scalability & websockets
Backend & Frontend architecture scalability & websockets
 
Word press theme and plugins WordCamp Presentation
Word press theme and plugins WordCamp PresentationWord press theme and plugins WordCamp Presentation
Word press theme and plugins WordCamp Presentation
 
Zurb foundation
Zurb foundationZurb foundation
Zurb foundation
 
One day WordPress workshop
One day WordPress workshopOne day WordPress workshop
One day WordPress workshop
 
PAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark TomlinsonPAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark Tomlinson
 
Untangling the web week 2 - SEO
Untangling the web week 2 - SEOUntangling the web week 2 - SEO
Untangling the web week 2 - SEO
 
Working local
Working localWorking local
Working local
 
Easy computer for bds10 entrance for website
Easy computer for bds10 entrance for websiteEasy computer for bds10 entrance for website
Easy computer for bds10 entrance for website
 
Untangling the web - week 3
Untangling the web - week 3Untangling the web - week 3
Untangling the web - week 3
 
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSSPhp Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
 
Optimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get thereOptimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get there
 
Accessible ePub3 Features
Accessible ePub3 FeaturesAccessible ePub3 Features
Accessible ePub3 Features
 
Why it's not your host's fault
Why it's not your host's faultWhy it's not your host's fault
Why it's not your host's fault
 
2015 - Introduction to building enterprise web applications using Angular.js
2015 - Introduction to building enterprise web applications using Angular.js2015 - Introduction to building enterprise web applications using Angular.js
2015 - Introduction to building enterprise web applications using Angular.js
 
Responsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen GridsResponsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen Grids
 
More Multisite for the Masses
More Multisite for the MassesMore Multisite for the Masses
More Multisite for the Masses
 
Blogging for Business
Blogging for BusinessBlogging for Business
Blogging for Business
 

Viewers also liked

Red de redes. internet
Red de redes. internetRed de redes. internet
Red de redes. internet
Lucas Rial
 
Technical Debt Management
Technical Debt ManagementTechnical Debt Management
Technical Debt Management
Mark Niebergall
 
Portfolio
PortfolioPortfolio
Portfolio
William Sweet
 
Tushar_Vaidya1
Tushar_Vaidya1Tushar_Vaidya1
Tushar_Vaidya1
Tushar Vaidya
 
Emc expoesymposium
Emc expoesymposiumEmc expoesymposium
Emc expoesymposium
Exponential_e
 
Mesa redonda UNIMET mayo 24
Mesa redonda UNIMET mayo 24Mesa redonda UNIMET mayo 24
Mesa redonda UNIMET mayo 24
Raymond Marquina
 
PROCON DATA Field Services Cloud Persönliche Zählerablesung
PROCON DATA Field Services Cloud Persönliche ZählerablesungPROCON DATA Field Services Cloud Persönliche Zählerablesung
PROCON DATA Field Services Cloud Persönliche Zählerablesung
PROCON DATA Ges.m.b.H:
 
Ar Tmarketing 3 Bpix
Ar Tmarketing 3 BpixAr Tmarketing 3 Bpix
Ar Tmarketing 3 Bpix
Lajos Golovics
 
Kraft and DiagSoft
Kraft and DiagSoft Kraft and DiagSoft
Kraft and DiagSoft
Gordon Kraft
 
Estudio la Migración y Municipio AMUCH
Estudio la Migración y Municipio AMUCHEstudio la Migración y Municipio AMUCH
Estudio la Migración y Municipio AMUCH
Nelson Leiva®
 
Driving User Adoption for SharePoint
Driving User Adoption for SharePointDriving User Adoption for SharePoint
Driving User Adoption for SharePoint
WinWire Technologies Inc
 
Revista Boa Vontade - Edição 240
Revista Boa Vontade - Edição 240Revista Boa Vontade - Edição 240
Revista Boa Vontade - Edição 240
Boa Vontade
 
Menu enero
Menu eneroMenu enero
Menu enero
lolilillo
 
Presentación Colaboradores 5as Jornadas de Ergonomía y Psicosociología 'Buena...
Presentación Colaboradores 5as Jornadas de Ergonomía y Psicosociología 'Buena...Presentación Colaboradores 5as Jornadas de Ergonomía y Psicosociología 'Buena...
Presentación Colaboradores 5as Jornadas de Ergonomía y Psicosociología 'Buena...
ErgoCV
 
The curse of the mummy chapter 6
The curse of the mummy   chapter 6The curse of the mummy   chapter 6
The curse of the mummy chapter 6
MrErwin
 
Tesis - validación
Tesis -  validaciónTesis -  validación
Tesis - validación
Angel Bautista
 
BUDAYA BALI
BUDAYA BALIBUDAYA BALI
BUDAYA BALI
Mira Sandrana
 
Física clásica
Física clásicaFísica clásica
Física clásica
Benito Santiago
 
The impact of Recruitment and Selection process on candidates' intention to a...
The impact of Recruitment and Selection process on candidates' intention to a...The impact of Recruitment and Selection process on candidates' intention to a...
The impact of Recruitment and Selection process on candidates' intention to a...
Target Research
 
Reduce Costs Through Printer Consolidation
Reduce Costs Through Printer ConsolidationReduce Costs Through Printer Consolidation
Reduce Costs Through Printer Consolidation
Larry Levine
 

Viewers also liked (20)

Red de redes. internet
Red de redes. internetRed de redes. internet
Red de redes. internet
 
Technical Debt Management
Technical Debt ManagementTechnical Debt Management
Technical Debt Management
 
Portfolio
PortfolioPortfolio
Portfolio
 
Tushar_Vaidya1
Tushar_Vaidya1Tushar_Vaidya1
Tushar_Vaidya1
 
Emc expoesymposium
Emc expoesymposiumEmc expoesymposium
Emc expoesymposium
 
Mesa redonda UNIMET mayo 24
Mesa redonda UNIMET mayo 24Mesa redonda UNIMET mayo 24
Mesa redonda UNIMET mayo 24
 
PROCON DATA Field Services Cloud Persönliche Zählerablesung
PROCON DATA Field Services Cloud Persönliche ZählerablesungPROCON DATA Field Services Cloud Persönliche Zählerablesung
PROCON DATA Field Services Cloud Persönliche Zählerablesung
 
Ar Tmarketing 3 Bpix
Ar Tmarketing 3 BpixAr Tmarketing 3 Bpix
Ar Tmarketing 3 Bpix
 
Kraft and DiagSoft
Kraft and DiagSoft Kraft and DiagSoft
Kraft and DiagSoft
 
Estudio la Migración y Municipio AMUCH
Estudio la Migración y Municipio AMUCHEstudio la Migración y Municipio AMUCH
Estudio la Migración y Municipio AMUCH
 
Driving User Adoption for SharePoint
Driving User Adoption for SharePointDriving User Adoption for SharePoint
Driving User Adoption for SharePoint
 
Revista Boa Vontade - Edição 240
Revista Boa Vontade - Edição 240Revista Boa Vontade - Edição 240
Revista Boa Vontade - Edição 240
 
Menu enero
Menu eneroMenu enero
Menu enero
 
Presentación Colaboradores 5as Jornadas de Ergonomía y Psicosociología 'Buena...
Presentación Colaboradores 5as Jornadas de Ergonomía y Psicosociología 'Buena...Presentación Colaboradores 5as Jornadas de Ergonomía y Psicosociología 'Buena...
Presentación Colaboradores 5as Jornadas de Ergonomía y Psicosociología 'Buena...
 
The curse of the mummy chapter 6
The curse of the mummy   chapter 6The curse of the mummy   chapter 6
The curse of the mummy chapter 6
 
Tesis - validación
Tesis -  validaciónTesis -  validación
Tesis - validación
 
BUDAYA BALI
BUDAYA BALIBUDAYA BALI
BUDAYA BALI
 
Física clásica
Física clásicaFísica clásica
Física clásica
 
The impact of Recruitment and Selection process on candidates' intention to a...
The impact of Recruitment and Selection process on candidates' intention to a...The impact of Recruitment and Selection process on candidates' intention to a...
The impact of Recruitment and Selection process on candidates' intention to a...
 
Reduce Costs Through Printer Consolidation
Reduce Costs Through Printer ConsolidationReduce Costs Through Printer Consolidation
Reduce Costs Through Printer Consolidation
 

Similar to Developing for Mobile Web

The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
Caridy Patino
 
Jason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.FinalJason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.Final
Ajax Experience 2009
 
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Jack Zheng
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
brucelawson
 
Best Practices for Mobile Web Design
Best Practices for Mobile Web DesignBest Practices for Mobile Web Design
Best Practices for Mobile Web Design
St. Petersburg College
 
2011 08-24 mobile web app
2011 08-24  mobile web app2011 08-24  mobile web app
2011 08-24 mobile web app
Sholto Maud
 
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMIBACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
bacmove
 
Building Mobile Websites with Joomla
Building Mobile Websites with JoomlaBuilding Mobile Websites with Joomla
Building Mobile Websites with Joomla
Tom Deryckere
 
10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer
Tellago
 
10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer
Chris Love
 
10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer
Tellago
 
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery MobileBuilding Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Jon Cortez
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
Chris Morrell
 
FEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoFEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing Mojito
Caridy Patino
 
Optimizing content for the "mobile web"
Optimizing content for the "mobile web"Optimizing content for the "mobile web"
Optimizing content for the "mobile web"
Chris Mills
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
St. Petersburg College
 
Fragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fictionFragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fiction
Belen Barros Pena
 
HTML5 vs Native Android: Smart Enterprises for the Future
HTML5 vs Native Android: Smart Enterprises for the FutureHTML5 vs Native Android: Smart Enterprises for the Future
HTML5 vs Native Android: Smart Enterprises for the Future
Motorola Mobility - MOTODEV
 
Future of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App StoreFuture of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App Store
Jonathan Jeon
 
Mobile web application development
Mobile web application developmentMobile web application development
Mobile web application development
Vince Aggrippino
 

Similar to Developing for Mobile Web (20)

The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
 
Jason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.FinalJason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.Final
 
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
Best Practices for Mobile Web Design
Best Practices for Mobile Web DesignBest Practices for Mobile Web Design
Best Practices for Mobile Web Design
 
2011 08-24 mobile web app
2011 08-24  mobile web app2011 08-24  mobile web app
2011 08-24 mobile web app
 
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMIBACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
 
Building Mobile Websites with Joomla
Building Mobile Websites with JoomlaBuilding Mobile Websites with Joomla
Building Mobile Websites with Joomla
 
10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer
 
10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer
 
10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer
 
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery MobileBuilding Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
 
FEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoFEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing Mojito
 
Optimizing content for the "mobile web"
Optimizing content for the "mobile web"Optimizing content for the "mobile web"
Optimizing content for the "mobile web"
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
 
Fragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fictionFragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fiction
 
HTML5 vs Native Android: Smart Enterprises for the Future
HTML5 vs Native Android: Smart Enterprises for the FutureHTML5 vs Native Android: Smart Enterprises for the Future
HTML5 vs Native Android: Smart Enterprises for the Future
 
Future of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App StoreFuture of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App Store
 
Mobile web application development
Mobile web application developmentMobile web application development
Mobile web application development
 

More from Barbara Bermes

3rd Party Footprint @ Webrebels
3rd Party Footprint @ Webrebels3rd Party Footprint @ Webrebels
3rd Party Footprint @ Webrebels
Barbara Bermes
 
Third Party Footprint: Evaluating the Performance of External Scripts
Third Party Footprint: Evaluating the Performance of External ScriptsThird Party Footprint: Evaluating the Performance of External Scripts
Third Party Footprint: Evaluating the Performance of External Scripts
Barbara Bermes
 
3rd party footprint - A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS
3rd party footprint - A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS3rd party footprint - A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS
3rd party footprint - A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS
Barbara Bermes
 
The Canadian Public Broadcaster on a Diet: Slimming down for a whole nation
The Canadian Public Broadcaster on a Diet: Slimming down for a whole nationThe Canadian Public Broadcaster on a Diet: Slimming down for a whole nation
The Canadian Public Broadcaster on a Diet: Slimming down for a whole nation
Barbara Bermes
 
The CBC on a diet - Slimming down for a whole nation
The CBC on a diet - Slimming down for a whole nationThe CBC on a diet - Slimming down for a whole nation
The CBC on a diet - Slimming down for a whole nation
Barbara Bermes
 
Smartphones in Today's World
Smartphones in Today's WorldSmartphones in Today's World
Smartphones in Today's World
Barbara Bermes
 
Building Energy-Efficient Websites
Building Energy-Efficient WebsitesBuilding Energy-Efficient Websites
Building Energy-Efficient Websites
Barbara Bermes
 
Business Analysis - Essentials
Business Analysis - EssentialsBusiness Analysis - Essentials
Business Analysis - Essentials
Barbara Bermes
 
Mobile Web Performance - Velocity 2011
Mobile Web Performance - Velocity 2011Mobile Web Performance - Velocity 2011
Mobile Web Performance - Velocity 2011
Barbara Bermes
 

More from Barbara Bermes (9)

3rd Party Footprint @ Webrebels
3rd Party Footprint @ Webrebels3rd Party Footprint @ Webrebels
3rd Party Footprint @ Webrebels
 
Third Party Footprint: Evaluating the Performance of External Scripts
Third Party Footprint: Evaluating the Performance of External ScriptsThird Party Footprint: Evaluating the Performance of External Scripts
Third Party Footprint: Evaluating the Performance of External Scripts
 
3rd party footprint - A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS
3rd party footprint - A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS3rd party footprint - A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS
3rd party footprint - A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS
 
The Canadian Public Broadcaster on a Diet: Slimming down for a whole nation
The Canadian Public Broadcaster on a Diet: Slimming down for a whole nationThe Canadian Public Broadcaster on a Diet: Slimming down for a whole nation
The Canadian Public Broadcaster on a Diet: Slimming down for a whole nation
 
The CBC on a diet - Slimming down for a whole nation
The CBC on a diet - Slimming down for a whole nationThe CBC on a diet - Slimming down for a whole nation
The CBC on a diet - Slimming down for a whole nation
 
Smartphones in Today's World
Smartphones in Today's WorldSmartphones in Today's World
Smartphones in Today's World
 
Building Energy-Efficient Websites
Building Energy-Efficient WebsitesBuilding Energy-Efficient Websites
Building Energy-Efficient Websites
 
Business Analysis - Essentials
Business Analysis - EssentialsBusiness Analysis - Essentials
Business Analysis - Essentials
 
Mobile Web Performance - Velocity 2011
Mobile Web Performance - Velocity 2011Mobile Web Performance - Velocity 2011
Mobile Web Performance - Velocity 2011
 

Recently uploaded

UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 

Recently uploaded (20)

UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 

Developing for Mobile Web

  • 1. Overview ‣ The Power and Future of Mobile ‣ Mobile Browsers and Engines (WebKit/HTML5) ‣ CBC Mobile Services (Apps/Sites) ‣ Web Apps, Native Apps and Hybrid Apps ‣ Mobile Web Information Architecture ‣ Enabling Your Site for Mobile Web ‣ Optimization / Best Practices / (Debugging) Tools ‣ Links/Literature Resources
  • 2. Who has developed a website before?
  • 3. Why develop for mobile web?
  • 4. 6.8 billion people in the world http://www.robert-alonso-photos.com/wp-content/uploads/2009/08/3ConeyIslandBeach.jpg
  • 5. 3.4 billion people with mobile devices Flickr: Batikart
  • 6. Mobile is the 7th Mass Media
  • 7. Print Recordings Radio Television Cinema The Internet Mobile
  • 8. Print Recordings Radio Television Cinema The Internet Mobile Mobile is the only mass media that can do everything the previous six can do Source: http://en.wikipedia.org/wiki/Seven_mass_media
  • 10. First truly personal mass media Permanently carried First “always on” mass media Built-in payment channel Most accurate audience measurement http://www.flickr.com/photos/blogumentary/3947228410/sizes/o/in/faves-caseymckinnon/ Source: http://en.wikipedia.org/wiki/Seven_mass_media
  • 11. Desktop vs. Mobile Browsing http://www.motivationalmemo.com/wp-content/uploads/2010/06/change.jpg
  • 12. Mobile Users vs. Desktop Users Source: Morgan Stanley Research, http://gigaom.com/2010/04/12/mary-meeker-mobile-internet-will-soon-overtake-fixed-internet/
  • 13. Enough Reasons to go mobile? ...but what mobile platform should you target? Let’s look at mobile browsers and engines http://bunkadefresh.com/wp-content/uploads/2010/07/evophones2.jpg
  • 14. What browsers should you develop for? Source: http://gs.statcounter.com/#mobile_browser-na-yearly-2009-2011-bar
  • 15. Mobile Grade Browsers A A browser that’s capable of, at minimum, utilizing media queries, support HTML5, WebKit Engine, CSS, JavaScript B A browser that’s capable of minimum CSS and JavaScript C A browser that is not capable of utilizing media queries. Watch out for complicated JS, CSS — they DON’T support them Source: JQuery Mobile, http://jquerymobile.com/gbs/
  • 16. Device vs. Browser Feature Phones Smart Phones Touch Phones FlipPhone, e.g. Samsung e.g. most BlackBerry’s before Torch (i.e. Bold, Curve) e.g. Google Nexus, BB Torch, iPhone C B A A http://gizmodo.com/5090988/mobile-browser-battlemodo-which-phones-deliver-the-real-web
  • 17. Browser Engines ‣ WebKit (BlackBerry 6.0, Android, iOS) ‣ Presto (Opera Mini) ‣ NetFront (Playstation) ‣ Gecko (Camino, Firefox, SeaMonkey) ‣ and more
  • 18. Go with WebKit ‣ WebKit (BlackBerry 6.0, Android, iOS) ‣ Presto (Opera Mini) ‣ NetFront (Playstation) ‣ Gecko (Camino, Firefox, SeaMonkey) ‣ and more
  • 19. WebKit and HTML5 ‣ WebKit is not a browser, it’s an engine ‣ Most A-Grade mobile browsers are based on WebKit and support HTML5
  • 20. HTML5 ‣ Why you want to make use of HTML5 features in your web app/site
  • 21. HTML5 Rocks! ‣ Easy Markup / new semantic elements <video src="movie.mp4" controls="controls"> your browser does not support the video tag </video> ‣ New, smarter form controls, i.e. placeholder, date, number, url <input type="email" placeholder="Enter your email address"/> <input type=”date”/> <input type="number" min="1" value="4" name="2" size="2"/> <input type=”url”/> ‣ Client-Side database, SQLite ‣ Offline Storage via cache.manifest file <html manifest=”cache.manifest”> CACHE MANIFEST index.html css/basic.css images/logo.png images/footer.png ‣ and...
  • 22. HTML5 - Location Based Services ‣ W3C Specification: http://dev.w3.org/geo/api/spec-source.html
  • 23. CBC Mobile Services More under cbc.ca/mobile/services
  • 24. CBC Mobile Site Strategy ‣ To cover A, B and C grade mobile browsers by creating three main mobile sites that encompass the different features and limitations of those browsers.
  • 25. CBC Mobile Sites TOUCH RICH TEXT cbc.ca/m/touch cbc.ca/m/rich cbc.ca/m/text Device Touch Devices Mostly BB devices Feature Phones Browser A-Grade B/C-Grade C-Grade ‣Extended use of JavaScript ‣Simple CSS and JavaScript ‣ No images/photos and Ajax ‣Simple Media (Story images, ‣ Simple navigation, less links ‣WebKit based, CSS3, CSS Photo Galleries) ‣ No complicated JavaScript, simple Features sprites, conditional CSS ‣Use of resized story images CSS ‣Photo galleries and videos (prefix s_) ‣Use of resized story images (prefix t_) Site/Device
  • 26. Web App, Native App and Hybrid App ‣ Why would you want to have a web app in addition to/ instead of a native app?
  • 27. Web vs. Native vs. Hybrid Apps Web Apps Native Apps ‣ Easy distribution/installation ‣ Possible complicated distribution trough app ‣ Native Look & Feel stores, fees/charges ‣ Works on all platforms ‣ Strict UI Guidelines ‣ Single click using HTML5,Ajax ‣ Easy attention through app store ‣ Offline Storage ‣ Platform-dependent ‣ No advertisement restrictions ‣ New app for each platform (knowledge of ‣ Fast development time, any web developer language, Objective-C, Java etc) can create web app ‣ Full Access to native APIs, features, i.e. ‣ BUT Cannot access all native features, i.e camera, calendar, address book, push compass, camera etc. notification Example: Google Gmail Hybrid Apps ‣ Web app wrapped around native app ‣ Access to native APIs Example: BlackBerry WebWorks, iOS/Android with webviews
  • 28. What do you have to do to enable your website for mobile?
  • 29. Mobile Information Architecture "If you design for mobile first, you can create agreement first on what matters most." — Luke Wroblewski, previous Chief Design Architect at Yahoo!
  • 30. Mobile Information Architecture ‣ Touch phones: big buttons, most of the real-estate should be clickable ‣ Smart phones: track ball, avoid too many links as user has to scroll down, use easy navigation items, i.e. anchors
  • 31. Mobile Information Architecture Guidelines for Mobile URLs: Make it easy for user to type in your mobile site URL ‣ m.cbc.ca ‣ touch.facebook.com ‣ mobile.twitter.com and enable auto redirection ...
  • 32. Redirect to Mobile ‣ Decide on user agent strings Mozilla/5.0 (webOS/1.0; U; en-US) Mozilla/5.0 (BlackBerry; U; SAMSUNG-D900E/D900EXAIC1 AppleWebKit/525.27.1 (KHTML, like BlackBerry 9800; en) AppleWebKit/ NetFront/3.5 Profile/MIDP-2.0 Gecko) Version/1.0 Safari/ 534.1+ (KHTML, like Gecko) Configuration/CLDC-1.1 525.27.1 Pre/1.0 Version/6.0.0.135 Mobile Safari/ 534.1+ v v v
  • 33. Redirect to Mobile ‣ Server-side ‣ Webserver: http.conf # Catch iPhone-users first RewriteCond %{HTTP_USER_AGENT} .*Mobile.*Safari RewriteRule ^[./](.*)$ http://www.cbc.ca/m/touch ‣ SSI <!--#if expr="$HTTP_USER_AGENT = /BlackBerry/" --> <meta http-equiv="refresh" content="0; url=www.cbc.ca/m/rich"> <!--#endif -->
  • 34. Redirect to Mobile ‣ Edge Side Include <esi:eval src="mobileuseragents.esi" dca="none" /> <esi:choose> <esi:when test="$(HTTP_USER_AGENT) matches_i $(touch)" matchname="touchmatch"> $set_redirect('http://www.cbc.ca/m/touch/') </esi:when> <esi:when test="$(HTTP_USER_AGENT) matches_i $(rich)" matchname="richmatch"> $set_redirect('http://www.cbc.ca/m/rich/') </esi:when> <esi:otherwise> <esi:include src="index.html"/> </esi:otherwise> </esi:choose> ‣ Client-side: JavaScript if (navigator.userAgent.indexOf("iPod") != -1 || navigator.userAgent.indexOf("iPhone") != -1){ window.location.href = “http://www.cbc.ca/m/touch”; }
  • 35. Redirect to Mobile ‣ But don’t limit user to full site access
  • 36. Customizing for Devices/ Platforms ‣ Create the best user experience possible based on user’s platform/device ‣ Know device/browser specific features and take advantage of them
  • 37. Customizing for Devices/OS ‣ Using JavaScript to detect user agent and show content only based on that: if (navigator.userAgent.indexOf("iPod") != -1 || navigator.userAgent.indexOf("iPhone") != -1){ // do device specific stuff, e.g. show QT videos or show menu items } ‣ Using Media Queries, e.g. calling an iPhone/Mobile stylesheet: <link media="only screen and (max-device-width: 480px)" href="mobile.css" type= "text/css" rel="stylesheet"> <link media="screen and (min-device-width: 481px)" href="other.css" type="text/css" rel="stylesheet"/>
  • 38. Customizing for Devices/OS ‣ BlackBerry users get extra information presented <!--#if expr="$HTTP_USER_AGENT = /BlackBerry/" --> <div class="wspromo"> <a href="/m/rich/websignal.html" title=”Subscribe to WebSignal Alert”> Get CBC's Websignal Alert</a> </div> <!--#endif --> ‣ iOS: Disable automatic phone number detection <meta name = "format-detection" content ="telephone=no"/>
  • 39. Customizing for Devices/OS ‣ Fallbacks ‣ CSS <!--#if expr="$HTTP_USER_AGENT = /BlackBerry/" --> <!--#if expr="$osversion != /4.2([^&]*)/" --> <div class="nocss">You don't have CSS enabled. To have a better experience, please turn on background images and CSS on your device.</div> <!--#endif --> <!--#endif --> ‣ JavaScript <noscript>To access the site with all its functionality, please enable JavaScript.</noscript>
  • 40. Make it a Web App ‣ iPhone: Full screen without browser bar <meta name="apple-mobile-web-app-capable" content="yes" /> <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" /> ‣ iPhone: Add to Home Screen Box ‣ iPhone: Home Screen Icon <link rel="apple-touch-icon" href="img/cbc-touch-icon.png"/>
  • 41. Optimization ‣ Reduce the page load / page weight as much as possible
  • 42. Optimization ‣ Minimize HTTP requests ‣ Put CSS at top of page ‣ Put JavaScript scripts at bottom of page ‣ Avoid images where possible and/or optimize images ‣ Use CSS3 features instead of images, i.e. border radius, gradient border-radius: 10px; /* gecko based browsers */ -moz-border-radius: 10px; background: -moz-linear-gradient(top, #55aaee, #003366); -webkit-border-radius: 10px; /* webkit based browsers */ background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#000000));
  • 43. Optimization ‣ Use image sprites ‣ Image optimization via Smush.it ‣ Consider mobile image resizer solutions: Resizing images for all major device widths via device detection ‣ Don’t scale images in HTML ‣ Use minified scripts, i.e. js, css (YSlow) ‣ Reduce number of DOM Element //avoid var divArr = document.getElementByClassName(“story-images”); //The number of DOM elements is easy to test, just type in Firebug's console: document.getElementsByTagName('*').length ‣ Read more under http://developer.yahoo.com/performance/rules.html
  • 44. CBC Full-site vs. CBC mobile sites cbcnews.ca cbc.ca/m/touch/news cbc.ca/m/rich/news (including Canada Votes) (including Canada Votes) 837.5 K 72.1 K 28.9 K cbc.ca/m/text/news >> HTTP Requests - 8, Total Weight: 4.2K
  • 45. Things to Consider ‣ If you’re going to target C-grade browsers avoid CSS(3) and JavaScript where possible ‣ Don’t think only because your site looks good on iPhone, it will also look good on old BlackBerry browsers (< OS 5.0) ‣ Compatibility Mobile Table by Peter-Paul Koch (ppk): http://www.quirksmode.org/mobile/
  • 46. Mobile Compatibility Table Source: http://www.quirksmode.org/mobile/
  • 47. Mobile Tools & Frameworks ‣ Frameworks: iUi, JQTouch, JQuery Mobile. Sencha ‣ Kitchen Sink: http://dev.sencha.com/deploy/touch /examples/kitchensink/
  • 48. Mobile Tools & Frameworks ‣ WURLF: Wireless Universal Resource File ‣ Open Source project ‣ XML configuration file containing information about features and capabilities of many mobile devices (~14000) ‣ Website offers many optimization tools/apps “The main scope of the file is to collect as much information as we can about all the existing mobile devices that access WAP pages so that developers will be able to build better applications and better services for the users.” (wurfl.sourceforge.net)
  • 49. WURLF XML <device id="blackberry9800_ver1" user_agent="Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ ‣ Example: (KHTML, like Gecko) Version/6.0.0.135 Mobile Safari/534.1+" fall_back="blackberry_generic_ver6" actual_device_root="true"> <group id="product_info"> BlackBerry Torch <capability name="pointing_method" value="touchscreen"/> <capability name="uaprof" value="http://www.blackberry.net/go/mobile/profiles/uaprof/9800_edge/6.0.0.rdf"/> <capability name="model_name" value="BlackBerry 9800"/> <capability name="uaprof2" value="http://www.blackberry.net/go/mobile/profiles/uaprof/9800_umts/6.0.0.rdf"/> <capability name="brand_name" value="RIM"/> <capability name="marketing_name" value="Torch"/> <capability name="release_date" value="2010_august"/> </group> <group id="wml_ui"> <capability name="table_support" value="true"/> </group> <device id="blackberry9800_ver1" user_agent="Mozilla/5.0 (BlackBe <!-- ... --> (KHTML, like Gecko) Version/6.0.0.135 Mobile Safari/534.1+" fall_b <group id="display"> actual_device_root="true"> <capability name="physical_screen_height" value="70"/> <group id="product_info"> <capability name="columns" value="36"/> <capability name="dual_orientation" value="true"/> <capability name="pointing_method" value="touchscreen"/> <capability name="physical_screen_width" value="50"/> <capability name="uaprof" value="http://www.blackberry.net/g <capability name="max_image_width" value="360"/> <capability name="rows" value="32"/> <capability name="model_name" value="BlackBerry 9800"/> <capability name="resolution_width" value="360"/> <capability name="uaprof2" value="http://www.blackberry.net/ <capability name="resolution_height" value="480"/> <capability name="max_image_height" value="400"/> </group> <capability name="brand_name" value="RIM"/> <group id="image_format"> <capability name="marketing_name" value="Torch"/> <capability name="jpg" value="true"/> <capability name="release_date" value="2010_august"/> <capability name="gif" value="true"/> </group> <capability name="bmp" value="true"/> <capability name="wbmp" value="true"/> <group id="wml_ui"> <capability name="png" value="true"/> <capability name="table_support" value="true"/> <capability name="colors" value="65536"/> <capability name="tiff" value="true"/> </group> </group> <group id="storage"> <!-- ... --> <capability name="max_deck_size" value="32768"/> <group id="display"> </group> <group id="streaming"> <capability name="physical_screen_height" value="70"/> <capability name="columns" value="36"/> <capability name="streaming_vcodec_h263_0" value="10"/> <capability name="streaming_vcodec_h264_bp" value="1"/> <capability name="dual_orientation" value="true"/> <capability name="streaming_vcodec_mpeg4_sp" value="0"/> </group> <capability name="physical_screen_width" value="50"/> <!-- ... ---> <group id="sound_format"> <capability name="max_image_width" value="360"/> <capability name="rows" value="32"/> <capability name="wav" value="true"/> <capability name="sp_midi" value="true"/> <capability name="resolution_width" value="360"/> <capability name="amr" value="true"/> <capability name="resolution_height" value="480"/> <capability name="midi_monophonic" value="true"/> </group> <group id="bearer"> <capability name="max_image_height" value="400"/> </group> <capability name="wifi" value="true"/> <capability name="max_data_rate" value="384"/> </group> <group id="image_format"> <!-- ... ---> <capability name="jpg" value="true"/> </device> <capability name="gif" value="true"/>
  • 50. What should your development environment look like?
  • 51. Setting up your dev environment ‣ Eclipse or any other choice of text editor ‣ Webserver / Apache ‣ Firefox/Firebug for Debugging ‣ Web Development PlugIn ‣ YSlow integrated into Firebug ‣ User agent Switcher ‣ Emulators/Simulators (Watch out!) ‣ Available for Palm Pre, iPhone (Mac only), Android, BlackBerry Simulator (PC only)
  • 52. Links/Literature ‣ O’Reilly, Brian Fling: Mobile Design and Development ‣ Mobile First: http://www.youtube.com/watch?v=NjE_Or4VIlU ‣ Device Atlas: http://deviceatlas.com/ ‣ W3C mobileOK Checker: http://validator.w3.org/mobile/ ‣ W3C Mobile Best Practices: http://www.w3.org/TR/mobile-bp/ ‣ Design Principles for the Mobile Web: http://articles.sitepoint.com/article/ designing-for-mobile-web ‣ Safari Web Apps: http://developer.apple.com ‣ Nokia Mobile Design Patterns: http://wiki.forum.nokia.com/index.php/ Category:Mobile_Design_Patterns