SlideShare a Scribd company logo
The Future is Mobile
Web à Québec 2012

February 23, 2012
Shannon Smith
CEO of Café Noir Design




w: www.cafenoirdesign.com
e: info@cafenoirdesign.com
t: @cafenoirdesign
Why Design for Mobile?
Cell Phone Use

Recommended for you

Mobile News Madness - March 2012
Mobile News Madness - March 2012Mobile News Madness - March 2012
Mobile News Madness - March 2012

This document summarizes the latest mobile news from March 2012. It discusses the growth of smartphones and their increasing market share over "dumb phones". It provides market share numbers for Android, iOS, and other platforms. It also summarizes new products like the new iPad and Samsung Galaxy S3, updates to platforms like Android and Windows Phone, and other miscellaneous mobile news stories from March 2012.

iosandroidmobile
AppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs NativeAppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs Native

This time AppTalk will focus on the everyday question of web applications vs hybrid applications vs native mobile applications. We'll provide guidance in making the business decision between these approaches. This will be presented through practical real-life cases. The focus will be on mobile applications rather than games. Agenda: 14:00 Welcoming words, Karl Ots / Symbio Responsive web Dedicated mobile site PhoneGap hybrid apps Native HTML5 apps Discussion & networking Speaker: Sebastian de Mel, frontend developer at Exove Oy. Sebastian has been in the web business as a entrepreneur for over 5 years until recently when he joined the ranks of Exove Oy, whose customers include: Nelonen, Fiskars Bonnier publication and others. He studied algorithms in University of Tampere and has a Media-assistant degree. Technologies he uses in his daily work are: JavaScript (Underscore, jQuery, Zepto etc.), PhoneGap, eZ Publish, Drupal, Concrete5. Event coordinator, Karl Ots: tel. 050 480 1102, email karl.ots [at] youngdevelopers.fi

html5hybird applicationmobile application development
Iphone app development
Iphone app developmentIphone app development
Iphone app development

Rapidsoft Technologies is a specialist in everything an iPhone application development can be processed for. The company has been designing and developing groundbreaking, robust and comprehensive iPhone app solutions since the launch of App Store in 2008. Like on Facebook https://www.facebook.com/RapidsoftTechno G+ https://plus.google.com/b/109035679386424718558/+Rapidsofttechnologies/posts Follow on Twitter https://twitter.com/Rapidsofttech Follow on Linkedin https://www.linkedin.com/company/rapidsoft-technologies-pvt--ltd-

Mobile Browsing


✤   8.5% of all Web browsing from smartphones and tablets, up from
    4.9% last year. 8.9% in the U.S. (Net Application/Statcounter)

✤   4.2% of U.S. Web browsing comes on the iPhone, 4.0% on Android
    devices, and 4.2% on the iPad with BlackBerry next at 0.46%. (As of Jan
    2012, Netmarketshare)

✤   The share of U.S. online retail dollars attributable to mobile devices
    has doubled from 1.87 percent in April of 2011 to 3.74 percent in
    December 2011 (RichRelevance)
Share of Canadian Non-Computer
 Device Traffic - May 2011
                                                             iPad
                                     iPod Touch              Android Tablet
                                        15%                  Other tablet
                                                      iPad
                                                      34%    iPhone
                                                             Android Phone
                          Android Phone
                               8%                            Other Smart Phone
                                                             Feature Phone
                                                             iPod Touch
                                             iPhone          Other
                                               35%




Source: comScore Device Essentials
http://bit.ly/mJVyy5
Easy Solutions
Online Services for Any Site



✤   Via RSS feed: MoFuse and
    Mippin Mobilizer,
    WireNode, Mobify,
    dotMobi

✤   Google Mobile Optimizer

Recommended for you

20131122 台北遊戲開發者論壇
20131122 台北遊戲開發者論壇20131122 台北遊戲開發者論壇
20131122 台北遊戲開發者論壇

This document discusses the Windows app market and strategies for success. It notes that the Windows Store app market is smaller than iOS and Android but growing rapidly. Key strategies mentioned include focusing on app visibility through social media, marketing, and curated exposure in the Windows Store. Monetization options like in-app purchases are also discussed. Developer resources from Microsoft like BizSpark are promoted to help developers succeed on the Windows platform.

Apps
AppsApps
Apps

Tim Westergren states that for kids, apps have become the new currency. Apps are software designed to help users perform specific tasks and are available on computers, mobile devices, and the web. Mobile apps are the newest form and there are over 500,000 available across various app stores. Apps can be used for utilities, games, news, social networking, and productivity. While apps make life easier, they also present disadvantages like costs, security issues, and the need for constant updates.

MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like
MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks LikeMOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like
MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like

The growth of mobile usage is exciting, explosive, and represents a whole new source of traffic and revenue for your business. It is critical to know your customers' mobile experience and to quantify your customers' ability to get to your mobile website or app. Whether its buying on your mobile app or surfing on your mobile website, optimizing for mobile is more critical then ever for your business. Hosted by Yottaa, join Ariel Weil (VP Products at Yottaa), Doug Sillars (Principal Architect, ARO Outreach team at AT&T) and Adrian Mendoza (Co-founder of Marlin Mobile), as they discuss how to create a better mobile user experience by using current optimization best practices in combination with metrics such as network connectivity and signal strength. In a webinar, you’ll get vital guidance on how to improve the performance of your mobile site: Explore real mobile metrics on what the profile of a mobile customer looks like (i.e. network connectivity, signal strength, mobile performance by time of day, and even battery usage). Learn how to leverage this data to better understand current optimization techniques for making your mobile app and website customers have a better mobile experience. Learn about the performance pitfalls of mobile sites Plus you'll learn the value of performance measurement tools like Marlin Mobile, a solution built specifically for mobile sites, and Yottaa, a cloud platform that drives user engagement to increase conversions and revenue. By measuring performance on real devices in the wild, you'll get the details you need to diagnose a slow mobile site and to fix it.

mobilemobile web4g
Mobile Landing Page




✤   http://buildinternet.com/2011/01/add-a-mobile-
    landing-page-to-your-site/
WordPress Solutions

✤   Mobile-Ready Themes (Mobius, iPhonista)

✤   Mobile Frameworks (Obox, JQTouch)

✤   Free Plugins (MobilePress, WPTouch, WordPress Mobile Edition,
    WPTap, WordPress Mobile Pack, BuddyPress Mobile)

✤   Premium Plugins (WPTouch Pro)

✤   Plugins for online services

✤   Tools for Admins (WordPress for iPhone, Blackberry, and Android, and
    WPhone)
WPTouch
Custom Mobile Site

Recommended for you

Mobile Pharma: When 'Go Mobile' Goes Wrong - Top 9 Mistakes
Mobile Pharma: When 'Go Mobile' Goes Wrong - Top 9 MistakesMobile Pharma: When 'Go Mobile' Goes Wrong - Top 9 Mistakes
Mobile Pharma: When 'Go Mobile' Goes Wrong - Top 9 Mistakes

* Drawn from real-life examples, this session will explore strategy and technology pitfalls in mobile that pharma and life sciences companies must avoid * Scenarios will cover app development, design, governance and business strategy topics as they relate to both external and internal mobility initiatives

biotechnology and pharmaceuticalslife sciencesmobile strategy
Fortumo droidcon 2012
Fortumo droidcon 2012Fortumo droidcon 2012
Fortumo droidcon 2012

Stanislav Gurba discusses various platforms and monetization strategies for mobile apps. He notes that Android has the largest market share of any platform at over 50% of new smartphone sales. However, iOS generates the majority of app revenue, with nearly 83% of app store revenues coming from the iOS app store. Gurba advocates using freemium models rather than premium pricing, as freemium allows developers to earn money from free games through in-app purchases, mobile ads, offers, and sponsorships. He provides tips for implementing these strategies effectively.

QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10

The document provides an overview of mobile design and development. It discusses types of mobile applications, platforms and tools including Flash Lite, Flash Player 10.1 and Adobe Air. It covers considerations for designing mobile user interfaces like screen size and user input. It also discusses best practices for mobile development including performance optimization and testing.

iosquicksoftmobile
Planning & Testing
What are we designing for?


✤   OS

✤   Browser

✤   Screen resolution

✤   Screen aspect ratio

✤   Special capabilities
Design for iOS



✤   iPhone (landscape and portrait)

✤   iPad (portrait)
Other OSs?


✤   Android: which one?

✤   Blackberry: market share? OS?

✤   Windows: market share?

✤   OS, resolution, screen dimensions

Recommended for you

How many types of mobile apps
How many types of mobile appsHow many types of mobile apps
How many types of mobile apps

The four common types of mobile apps are- native, hybrid, web, and progressive web apps. In the end, I have also discussed the top 5 future trends of the mobile app that are going to change the world.

mobile app development company usa
AppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs NativeAppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs Native

This time AppTalk will focus on the everyday question of web applications vs hybrid applications vs native mobile applications. We'll provide guidance in making the business decision between these approaches. This will be presented through practical real-life cases. The focus will be on mobile applications rather than games.

appshtml5native
Mobile 101 For the Education Industry
Mobile 101 For the Education IndustryMobile 101 For the Education Industry
Mobile 101 For the Education Industry

This is a presentation I delivered to a group of university marketers at a 2010 conference. Some stats are a little dated, but still some good concepts.

mobilemobile application developmentmobile apps
How are we serving this?


✤   Server-side methods & the UA string

✤   Client-side methods & media queries

✤   Measuring screen size with javascript
    http://css-tricks.com/snippets/javascript/redirect-mobile-devices/


✤   PHP function to detect mobile user agents & browsers
    http://detectmobilebrowsers.mobi/
Serving with WordPress


✤      Theme Switch plugin
       http://digwp.com/2009/12/redirect-
       mobile-users-to-mobile-theme/


✤      Built in conditional tags
<?php	
  if	
  (	
  $is_iphone	
  )	
  {?>
	
  	
  	
  	
  	
  <?php	
  include(	
  TEMPLATEPATH	
  .	
  '/mobile/
single.php'	
  );	
  ?>
<?php	
  }	
  else	
  {	
  ?>
	
  	
  	
  	
  	
  //	
  entire	
  contents	
  of	
  your	
  regular	
  single.php	
  
template
<?php	
  }	
  ?>
What needs to change

✤   Dimensions

✤   Bandwidth

✤   Font-size

✤   Features

✤   Floated elements

✤   Mouseover states

✤   Flash
Tools


✤   Browser testing tools

✤   Emulators iOS SDK, Android SDK, Online Opera Mini Emulator

✤   Screen Capture Tools (iPhone-Simulator Cropper)

✤   Validators (W3C mobileOK Checker)

Recommended for you

I Like iPhone & Android But I am .NET Developer
I Like iPhone & Android But I am .NET DeveloperI Like iPhone & Android But I am .NET Developer
I Like iPhone & Android But I am .NET Developer

This document discusses options for developing mobile applications using .NET and C#, including developing native applications for iOS and Android using MonoTouch and MonoDroid, creating hybrid applications using technologies like PhoneGap that combine web technologies with native platforms, and developing HTML5 web applications. It also provides an overview of JavaScript frameworks for mobile development and considerations for choosing an approach.

Mobile OS and Mobile Browser Trends and Prediction
Mobile OS and Mobile Browser Trends and PredictionMobile OS and Mobile Browser Trends and Prediction
Mobile OS and Mobile Browser Trends and Prediction

The document provides an overview of the mobile browsing landscape in Australia and recommendations for a mobile web app strategy. It analyzes the current state of mobile operating systems and browsers, trends toward web applications, and challenges of testing across devices. It recommends focusing web development on the five largest platforms and taking a staged approach from basic mobile websites to optimized apps for specific devices.

nokiaandroidsmart phone
Dispelling the myths about hotel mobile apps
Dispelling the myths about hotel mobile appsDispelling the myths about hotel mobile apps
Dispelling the myths about hotel mobile apps

Mobile apps present a new and unique channel that all hotels must consider if they are serious about a comprehensive mobile marketing strategy. This webinar will clear up many of the myths that exist out there and that are incorrectly spreading through the hospitality industry.

Images for Mobile
Icons


✤   iPhone icon (rel="apple-touch-icon")

    114x114 pixels

✤   Opera browser icon (rel="icon")

    195x195px

✤   Precomposed icons
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />
Images


✤   Double image dimensions, then resize

✤   Individual component caching: iOS 3.x will only cache HTML pages
    under 25k , iOS 4 102.4 kb per item

✤   Total component caching: Android and iOS 4 set limit at 2MB

✤   gzip has no effect on cache-ability on any device
✤   http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

Recommended for you

MobilityCMS
MobilityCMSMobilityCMS
MobilityCMS

The document summarizes the opportunity for mobile apps and content management systems. It notes that audiences want relevant mobile content through pull marketing. The MobilityCMS combines a cross-platform mobile app with a content management system to provide dynamic content updates and a consistent experience across devices. It then reviews mobile market trends and the MobilityCMS features, benefits, process and pricing.

mobile cmsandorid appandroid
Hot house istrategy_presentation_february_2012_original-1
Hot house istrategy_presentation_february_2012_original-1Hot house istrategy_presentation_february_2012_original-1
Hot house istrategy_presentation_february_2012_original-1

The document discusses how consumer usage of mobile devices for internet access and social media is growing rapidly, surpassing desktop usage. It notes that nearly half of smartphone users have Android devices, so brands need to support Android as well as iOS to reach the majority of mobile users. The document also provides tips on developing an effective mobile marketing strategy, such as understanding consumer mobile behaviors and choosing technologies like SMS that are widely used.

Vacunah!N! Taller Interior Gaiano
Vacunah!N! Taller Interior GaianoVacunah!N! Taller Interior Gaiano
Vacunah!N! Taller Interior Gaiano

El documento resume las características del virus de la influenza, las vacunas antigripales pandémicas disponibles y sus componentes. Describe los tipos de vacuna, adyuvantes como el MF59 y AS03, y presentaciones. Explica brevemente la epidemiología, transmisión, grupos de riesgo y prevención de la influenza.

HTML for Mobile
Targeting Viewport Dimensions &
   Orientation



   ✤   Hardboiled CSS3
       Media Queries
       (Andy Clarke)




http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
HTML Head



✤   Icon links

✤   Viewport meta tag or 980
    pixels?
Accessibility

✤   Pinch to zoom: body {-webkit-
    text-size-adjust:100%;}

✤   Disable user zoom: Accessibility
    and maximum-scale=1.0

✤   “auto-zoom when changing
    orientation” feature
✤   http://mattgemmell.com/2010/12/19/accessibility-for-
    iphone-and-ipad-apps


✤   http://www.456bereastreet.com/archive/201012/
    controlling_text_size_in_safari_for_ios_without_disablin
    g_user_zoom/

Recommended for you

Lessons from TuAnalyze: January 2011
Lessons from TuAnalyze: January 2011Lessons from TuAnalyze: January 2011
Lessons from TuAnalyze: January 2011

Enter/update your A1c data: http://tud4.us/TuAnalyzeProfile Take the TuAnalyze survey: http://tud4.us/TuSurvey Video excerpt: http://www.youtube.com/watch?v=Pmez7PWANws

appdiabetestudiabetes
Boletim focus 5 de abril
Boletim focus 5 de abrilBoletim focus 5 de abril
Boletim focus 5 de abril

O relatório apresenta as expectativas de mercado para os principais indicadores econômicos brasileiros nos próximos 12 meses e anos de 2013 e 2014. As projeções apontam para uma inflação em torno de 5,5% nos próximos anos e manutenção da meta da taxa Selic em 8,5% ao ano em 2014. O crescimento esperado para o PIB é de 3% em 2013 e 3,5% em 2014.

Rio Claro na internet
Rio Claro na internetRio Claro na internet
Rio Claro na internet

O documento discute as tendências da cidade de Rio Claro no uso da internet, incluindo a cobertura gratuita de 100%, o desenvolvimento de serviços públicos online e o potencial das redes sociais e mecanismos de busca para promover empresas locais. No entanto, observa que poucas empresas de Rio Claro aproveitam plenamente essas oportunidades digitais.

internetrio clarosite
CSS for Mobile
CSS Reset
Fancy fonts


✤   SVG and fancy fonts
    http://www.fontsquirrel.com/


✤   Other font-face generator tools

✤   Licensing

✤   Google font API

✤   MIME type for SVG to "image/
    svg+xml" in the server settings
Bulletproof font-face syntax




http://www.fontspring.com/blog/further-hardening-
of-the-bulletproof-syntax by Ethan Dunham

Recommended for you

Lecture 4 a practice economics
Lecture 4 a practice economicsLecture 4 a practice economics
Lecture 4 a practice economics

The document provides an introduction to economics and accounting concepts for an optometry practice. It discusses key terms like entrepreneurship, specialization, revenue, costs, profit and loss accounting. It explains the difference between fixed and variable costs, direct and indirect costs, product costs and period costs. It also provides examples of calculating costs of goods sold, gross profit, net profit and break-even analysis for an optometry business.

lpb
Aug 2009 H I V Int Med Noon Lecture
Aug 2009  H I V Int Med Noon LectureAug 2009  H I V Int Med Noon Lecture
Aug 2009 H I V Int Med Noon Lecture

This document discusses the management of treatment-naive HIV patients. It presents scenarios for two patients - ST and RW - who are being evaluated for initiation of antiretroviral therapy (ART). It addresses factors to consider in recommending ART, choosing initial regimens, and indications for starting treatment.

noonconfjacobi
Medicina y Cirugia Estetica, Plastica Vaginal
Medicina y Cirugia Estetica, Plastica VaginalMedicina y Cirugia Estetica, Plastica Vaginal
Medicina y Cirugia Estetica, Plastica Vaginal

La búsqueda de belleza, estética y armonía generan inquietudes y demandas en nuestros pacientes, que se ponen de manifiesto en la consulta médica cotidiana. Gracias a una atención personalizada e integral, contando con un equipo médico de alto nivel de profesionalidad y experiencia; brindamos a todos nuestros pacientes: • procedimientos quirúrgicos con máxima seguridad, profesionalidad y excelencia en los resultados • Técnicas de mínimo riesgo • Recuperación rápida y ambulatoria Estos detalles son los que nos permiten lograr cambios sutiles con simetría y equilibrio de las proporciones en cada procedimiento que realizamos, signos de belleza natural en las mujeres y hombres actuales. • Implantes mamarios • Pexia Mamaria (Mastopexia o Levantamiento Mamario) • Reducción mamaria • Lipoescultura Laser o Laserlipolisis • Dermolipectomía o Abdominoplastía • Ginecomastia en hombres (tratamiento por reducción laser) • Hilos tensores glúteos • Aumento Glúteo mediante autotransferencia de grasa, con agregado de Plasma Rico en Plaquetas • Protesis glúteas

blanqueamiento analrejuvenecimiento vaginallabioplastia
Fluid Layout


✤   Width 100%

✤   Float none

✤   Stack elements

✤   Remove elements
Interactive Mobile
Fluid YouTube Videos




✤   http://css-tricks.com/7066-fluid-width-
    youtube-videos/
Trouble with Javascripts




✤   Fluid width and
    missing tags

Recommended for you

Developing for Mobility
Developing for MobilityDeveloping for Mobility
Developing for Mobility

This document discusses designing websites for mobility. It provides an overview of mobile web usage statistics and trends. It also covers various design considerations for mobile websites such as responsive design, progressive enhancement, and performance optimization techniques like image resizing and testing on actual devices. The document promotes a mobile-first approach to design and outlines Stanford's mobile aware web project.

mobilewebsuitoh11
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | OxiemGet Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem

Why marketers should care about mobile marketing now. Includes statistics on mobile device proliferation, responsive website design, mobile websites vs. mobile apps, and how the market will continue to change. Presentation given at Interact13 conference in January 2013, Springfield Ohio.

mobile designmobile devicesandroid apps
Mobile web apps
Mobile web appsMobile web apps
Mobile web apps

Patrick Crowley dives into the world of mobile app development and shows how to use the new jQTouch framework to quickly build awesome mobile-optimized web apps.

appandroidmobile
Content for Mobile
Hide Content
✤   Why hide content?

✤   What to hide?

✤   “no-mobile” and “mobile-
    only” tags

✤   “display: none;” is bad for
    SEO

✤   Another way to hide content

✤   Skip to content links
Add Content

✤   Clickable Phone Numbers with
    class="phone-link"

✤   Special Input Types with HTML5

     type="tel"
         ✤




     type="email"
     type="url"
     type="number"
     type="range"
     type="search"
     type="date"
Alternative Strategies



✤   Mobile First

✤   Mobile Boilerplate

✤   Completely fluid design

Recommended for you

Jonathan snook - fake-it
Jonathan snook - fake-itJonathan snook - fake-it
Jonathan snook - fake-it

This document provides information about developing mobile web applications that mimic native apps. It discusses techniques like using CSS for animations and transitions to improve performance, detecting standalone mode, adding home screen icons and startup images, and various HTML5 features supported in Mobile Safari like geolocation. It also covers frameworks like jQTouch, jQuery Mobile and Sencha Touch that make the mobile web feel more like native apps. Testing strategies are discussed, noting emulators are good for version testing but actual devices are best. Potential app ideas that could work as mobile web apps are listed, like games, calculators and productivity apps. Examples of successful mobile web apps developed with frameworks in just a few hours are highlighted.

startechconf
Mobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPMobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIP

Mobile devices such as smartphones and tablets are increasingly becoming people's primary means of accessing the internet. By 2013, the number of mobile internet accessing devices is projected to surpass the number of personal computers. Websites and applications need to be optimized for mobile to provide good user experiences on small screens. Developers have options like responsive design, mobile websites, or native apps to create engaging mobile experiences for their audiences.

mobile webmobilehtml5 apps
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...

This document discusses the options for developing mobile applications: native, mobile web, and hybrid. Native apps are built using platform-specific languages and have the richest user experience but require developing for each platform. Mobile web apps use web technologies and have the broadest reach but limited access to device capabilities. Hybrid apps combine web technologies with native wrappers for full capabilities across platforms but native interactions are not perfect. The document provides examples and guidance on selecting the right approach based on user needs, capabilities required, and platforms to support.

iosandroidmobile web
Additional Reading




✤   WordPress Mobile Tutorials
    http://speckyboy.com/2011/03/17/mobile-toollbox-for-wordpress-tutorials-plugins-and-themes/
Slides and Download

✤   Slides:

    http://www.slideshare.net/cafenoirdesign

✤   Theme download:

    http://cafenoirthemes.com

✤   More details:

    http://chroni.ca/42/the-future-is-mobile-part-i/
Shannon Smith
CEO of Café Noir Design




w: www.chroni.ca
w: www.cafenoirdesign.com
e: info@cafenoirdesign.com
t: @cafenoirdesign
Thank You

Recommended for you

Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development

The mobile landscape is incredibly fragmented with a huge pool of devices and operating systems. This presentation shares tips and guidelines on how to navigate this maze and help design/develop better mobile applications.

mobile development iphone android experience ios a
Using HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile AppsUsing HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile Apps

Native apps are great, but if you want your app to reach as many people as possible, HTML5 is your ticket. In this session, we'll explore the different ways HTML5 can be used to build and deploy mobile apps, as well as the tools that can make the job easier.

kendouihtml5mobile application development
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

What is the Future of Mobile Web Application ? Mobile Web could be the final winner of the Mobile App Race ?

open web storeweb app storeoma

More Related Content

What's hot

Distimo Mobile World Congress 2010 Presentation - Mobile Application Stores S...
Distimo Mobile World Congress 2010 Presentation - Mobile Application Stores S...Distimo Mobile World Congress 2010 Presentation - Mobile Application Stores S...
Distimo Mobile World Congress 2010 Presentation - Mobile Application Stores S...
Distimo
 
The mobile browser world
The mobile browser worldThe mobile browser world
The mobile browser world
Peter-Paul Koch
 
Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?
Effective
 
Mobile News Madness - March 2012
Mobile News Madness - March 2012Mobile News Madness - March 2012
Mobile News Madness - March 2012
Jeff Bollinger
 
AppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs NativeAppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs Native
Sebastian de Mel
 
Iphone app development
Iphone app developmentIphone app development
Iphone app development
Rapidsoft Technologies
 
20131122 台北遊戲開發者論壇
20131122 台北遊戲開發者論壇20131122 台北遊戲開發者論壇
20131122 台北遊戲開發者論壇
Meng-Ru (Raymond) Tsai
 
Apps
AppsApps
Apps
mnavei01
 
MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like
MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks LikeMOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like
MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like
Adrian Mendoza
 
Mobile Pharma: When 'Go Mobile' Goes Wrong - Top 9 Mistakes
Mobile Pharma: When 'Go Mobile' Goes Wrong - Top 9 MistakesMobile Pharma: When 'Go Mobile' Goes Wrong - Top 9 Mistakes
Mobile Pharma: When 'Go Mobile' Goes Wrong - Top 9 Mistakes
yonster
 
Fortumo droidcon 2012
Fortumo droidcon 2012Fortumo droidcon 2012
Fortumo droidcon 2012
Droidcon Berlin
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10
Almog Koren
 
How many types of mobile apps
How many types of mobile appsHow many types of mobile apps
How many types of mobile apps
Quantum Innovation
 
AppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs NativeAppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs Native
Exove
 
Mobile 101 For the Education Industry
Mobile 101 For the Education IndustryMobile 101 For the Education Industry
Mobile 101 For the Education Industry
Signal
 
I Like iPhone & Android But I am .NET Developer
I Like iPhone & Android But I am .NET DeveloperI Like iPhone & Android But I am .NET Developer
I Like iPhone & Android But I am .NET Developer
Tellago
 
Mobile OS and Mobile Browser Trends and Prediction
Mobile OS and Mobile Browser Trends and PredictionMobile OS and Mobile Browser Trends and Prediction
Mobile OS and Mobile Browser Trends and Prediction
jTribe
 
Dispelling the myths about hotel mobile apps
Dispelling the myths about hotel mobile appsDispelling the myths about hotel mobile apps
Dispelling the myths about hotel mobile apps
Mobile Media Applications
 
MobilityCMS
MobilityCMSMobilityCMS
MobilityCMS
7thMedia
 
Hot house istrategy_presentation_february_2012_original-1
Hot house istrategy_presentation_february_2012_original-1Hot house istrategy_presentation_february_2012_original-1
Hot house istrategy_presentation_february_2012_original-1
iStrategy
 

What's hot (20)

Distimo Mobile World Congress 2010 Presentation - Mobile Application Stores S...
Distimo Mobile World Congress 2010 Presentation - Mobile Application Stores S...Distimo Mobile World Congress 2010 Presentation - Mobile Application Stores S...
Distimo Mobile World Congress 2010 Presentation - Mobile Application Stores S...
 
The mobile browser world
The mobile browser worldThe mobile browser world
The mobile browser world
 
Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?
 
Mobile News Madness - March 2012
Mobile News Madness - March 2012Mobile News Madness - March 2012
Mobile News Madness - March 2012
 
AppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs NativeAppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs Native
 
Iphone app development
Iphone app developmentIphone app development
Iphone app development
 
20131122 台北遊戲開發者論壇
20131122 台北遊戲開發者論壇20131122 台北遊戲開發者論壇
20131122 台北遊戲開發者論壇
 
Apps
AppsApps
Apps
 
MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like
MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks LikeMOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like
MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like
 
Mobile Pharma: When 'Go Mobile' Goes Wrong - Top 9 Mistakes
Mobile Pharma: When 'Go Mobile' Goes Wrong - Top 9 MistakesMobile Pharma: When 'Go Mobile' Goes Wrong - Top 9 Mistakes
Mobile Pharma: When 'Go Mobile' Goes Wrong - Top 9 Mistakes
 
Fortumo droidcon 2012
Fortumo droidcon 2012Fortumo droidcon 2012
Fortumo droidcon 2012
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10
 
How many types of mobile apps
How many types of mobile appsHow many types of mobile apps
How many types of mobile apps
 
AppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs NativeAppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs Native
 
Mobile 101 For the Education Industry
Mobile 101 For the Education IndustryMobile 101 For the Education Industry
Mobile 101 For the Education Industry
 
I Like iPhone & Android But I am .NET Developer
I Like iPhone & Android But I am .NET DeveloperI Like iPhone & Android But I am .NET Developer
I Like iPhone & Android But I am .NET Developer
 
Mobile OS and Mobile Browser Trends and Prediction
Mobile OS and Mobile Browser Trends and PredictionMobile OS and Mobile Browser Trends and Prediction
Mobile OS and Mobile Browser Trends and Prediction
 
Dispelling the myths about hotel mobile apps
Dispelling the myths about hotel mobile appsDispelling the myths about hotel mobile apps
Dispelling the myths about hotel mobile apps
 
MobilityCMS
MobilityCMSMobilityCMS
MobilityCMS
 
Hot house istrategy_presentation_february_2012_original-1
Hot house istrategy_presentation_february_2012_original-1Hot house istrategy_presentation_february_2012_original-1
Hot house istrategy_presentation_february_2012_original-1
 

Viewers also liked

Vacunah!N! Taller Interior Gaiano
Vacunah!N! Taller Interior GaianoVacunah!N! Taller Interior Gaiano
Vacunah!N! Taller Interior Gaiano
usapuka
 
Lessons from TuAnalyze: January 2011
Lessons from TuAnalyze: January 2011Lessons from TuAnalyze: January 2011
Lessons from TuAnalyze: January 2011
Diabetes Hands Foundation
 
Boletim focus 5 de abril
Boletim focus 5 de abrilBoletim focus 5 de abril
Boletim focus 5 de abril
Beatriz Olivon
 
Rio Claro na internet
Rio Claro na internetRio Claro na internet
Rio Claro na internet
Gabriel Mariano
 
Lecture 4 a practice economics
Lecture 4 a practice economicsLecture 4 a practice economics
Lecture 4 a practice economics
Monkey!
 
Aug 2009 H I V Int Med Noon Lecture
Aug 2009  H I V Int Med Noon LectureAug 2009  H I V Int Med Noon Lecture
Aug 2009 H I V Int Med Noon Lecture
Jason Leider
 
Medicina y Cirugia Estetica, Plastica Vaginal
Medicina y Cirugia Estetica, Plastica VaginalMedicina y Cirugia Estetica, Plastica Vaginal
Medicina y Cirugia Estetica, Plastica Vaginal
Dr Leonardo Imbriano
 

Viewers also liked (7)

Vacunah!N! Taller Interior Gaiano
Vacunah!N! Taller Interior GaianoVacunah!N! Taller Interior Gaiano
Vacunah!N! Taller Interior Gaiano
 
Lessons from TuAnalyze: January 2011
Lessons from TuAnalyze: January 2011Lessons from TuAnalyze: January 2011
Lessons from TuAnalyze: January 2011
 
Boletim focus 5 de abril
Boletim focus 5 de abrilBoletim focus 5 de abril
Boletim focus 5 de abril
 
Rio Claro na internet
Rio Claro na internetRio Claro na internet
Rio Claro na internet
 
Lecture 4 a practice economics
Lecture 4 a practice economicsLecture 4 a practice economics
Lecture 4 a practice economics
 
Aug 2009 H I V Int Med Noon Lecture
Aug 2009  H I V Int Med Noon LectureAug 2009  H I V Int Med Noon Lecture
Aug 2009 H I V Int Med Noon Lecture
 
Medicina y Cirugia Estetica, Plastica Vaginal
Medicina y Cirugia Estetica, Plastica VaginalMedicina y Cirugia Estetica, Plastica Vaginal
Medicina y Cirugia Estetica, Plastica Vaginal
 

Similar to The future is mobile

Developing for Mobility
Developing for MobilityDeveloping for Mobility
Developing for Mobility
Scotty Logan
 
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | OxiemGet Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Lessing-Flynn
 
Mobile web apps
Mobile web appsMobile web apps
Mobile web apps
Patrick Crowley
 
Jonathan snook - fake-it
Jonathan snook - fake-itJonathan snook - fake-it
Jonathan snook - fake-it
StarTech Conference
 
Mobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPMobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIP
RZasadzinski
 
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Shane Church
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
Ronnie Liew
 
Using HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile AppsUsing HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile Apps
Todd Anglin
 
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
 
Mobility 2012 A multi-screen organization
Mobility 2012 A multi-screen organizationMobility 2012 A multi-screen organization
Mobility 2012 A multi-screen organization
Shay Rosen (שי רוזן)
 
Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile Experience
David Drucker
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
davyjones
 
Smartphone Reporting Done Smarter
Smartphone Reporting Done SmarterSmartphone Reporting Done Smarter
Smartphone Reporting Done Smarter
Victor Hernandez
 
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseBuilding & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
Apperian
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
Dave Martin
 
Mobile Apps - The Business & Technology
Mobile Apps - The Business & TechnologyMobile Apps - The Business & Technology
Mobile Apps - The Business & Technology
Andri Yadi
 
2014 SharePoint Enterprise Mobile Strategy
2014 SharePoint Enterprise Mobile Strategy2014 SharePoint Enterprise Mobile Strategy
2014 SharePoint Enterprise Mobile Strategy
Joel Oleson
 
AppsFuel, il nuovo marketplace per mobile web app e mobile site!
AppsFuel, il nuovo marketplace per mobile web app e mobile site!AppsFuel, il nuovo marketplace per mobile web app e mobile site!
AppsFuel, il nuovo marketplace per mobile web app e mobile site!
Mobile Web Italy Meetup
 
Cyber lobe Technologies- Mobile technologies, iPhone/iPad App
Cyber lobe Technologies- Mobile technologies, iPhone/iPad AppCyber lobe Technologies- Mobile technologies, iPhone/iPad App
Cyber lobe Technologies- Mobile technologies, iPhone/iPad App
Cyberlobe Technologies
 
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
Christian Heindel
 

Similar to The future is mobile (20)

Developing for Mobility
Developing for MobilityDeveloping for Mobility
Developing for Mobility
 
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | OxiemGet Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
 
Mobile web apps
Mobile web appsMobile web apps
Mobile web apps
 
Jonathan snook - fake-it
Jonathan snook - fake-itJonathan snook - fake-it
Jonathan snook - fake-it
 
Mobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPMobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIP
 
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
 
Using HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile AppsUsing HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile Apps
 
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
 
Mobility 2012 A multi-screen organization
Mobility 2012 A multi-screen organizationMobility 2012 A multi-screen organization
Mobility 2012 A multi-screen organization
 
Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile Experience
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
 
Smartphone Reporting Done Smarter
Smartphone Reporting Done SmarterSmartphone Reporting Done Smarter
Smartphone Reporting Done Smarter
 
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseBuilding & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
 
Mobile Apps - The Business & Technology
Mobile Apps - The Business & TechnologyMobile Apps - The Business & Technology
Mobile Apps - The Business & Technology
 
2014 SharePoint Enterprise Mobile Strategy
2014 SharePoint Enterprise Mobile Strategy2014 SharePoint Enterprise Mobile Strategy
2014 SharePoint Enterprise Mobile Strategy
 
AppsFuel, il nuovo marketplace per mobile web app e mobile site!
AppsFuel, il nuovo marketplace per mobile web app e mobile site!AppsFuel, il nuovo marketplace per mobile web app e mobile site!
AppsFuel, il nuovo marketplace per mobile web app e mobile site!
 
Cyber lobe Technologies- Mobile technologies, iPhone/iPad App
Cyber lobe Technologies- Mobile technologies, iPhone/iPad AppCyber lobe Technologies- Mobile technologies, iPhone/iPad App
Cyber lobe Technologies- Mobile technologies, iPhone/iPad App
 
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
 

Recently uploaded

Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
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
 
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
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
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
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
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
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
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
 
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
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
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
 
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
 
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
 

Recently uploaded (20)

Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
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
 
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
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
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
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
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
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
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...
 
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
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
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
 
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...
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 

The future is mobile

  • 1. The Future is Mobile Web à Québec 2012 February 23, 2012
  • 2. Shannon Smith CEO of Café Noir Design w: www.cafenoirdesign.com e: info@cafenoirdesign.com t: @cafenoirdesign
  • 3. Why Design for Mobile?
  • 5. Mobile Browsing ✤ 8.5% of all Web browsing from smartphones and tablets, up from 4.9% last year. 8.9% in the U.S. (Net Application/Statcounter) ✤ 4.2% of U.S. Web browsing comes on the iPhone, 4.0% on Android devices, and 4.2% on the iPad with BlackBerry next at 0.46%. (As of Jan 2012, Netmarketshare) ✤ The share of U.S. online retail dollars attributable to mobile devices has doubled from 1.87 percent in April of 2011 to 3.74 percent in December 2011 (RichRelevance)
  • 6. Share of Canadian Non-Computer Device Traffic - May 2011 iPad iPod Touch Android Tablet 15% Other tablet iPad 34% iPhone Android Phone Android Phone 8% Other Smart Phone Feature Phone iPod Touch iPhone Other 35% Source: comScore Device Essentials http://bit.ly/mJVyy5
  • 8. Online Services for Any Site ✤ Via RSS feed: MoFuse and Mippin Mobilizer, WireNode, Mobify, dotMobi ✤ Google Mobile Optimizer
  • 9. Mobile Landing Page ✤ http://buildinternet.com/2011/01/add-a-mobile- landing-page-to-your-site/
  • 10. WordPress Solutions ✤ Mobile-Ready Themes (Mobius, iPhonista) ✤ Mobile Frameworks (Obox, JQTouch) ✤ Free Plugins (MobilePress, WPTouch, WordPress Mobile Edition, WPTap, WordPress Mobile Pack, BuddyPress Mobile) ✤ Premium Plugins (WPTouch Pro) ✤ Plugins for online services ✤ Tools for Admins (WordPress for iPhone, Blackberry, and Android, and WPhone)
  • 14. What are we designing for? ✤ OS ✤ Browser ✤ Screen resolution ✤ Screen aspect ratio ✤ Special capabilities
  • 15. Design for iOS ✤ iPhone (landscape and portrait) ✤ iPad (portrait)
  • 16. Other OSs? ✤ Android: which one? ✤ Blackberry: market share? OS? ✤ Windows: market share? ✤ OS, resolution, screen dimensions
  • 17. How are we serving this? ✤ Server-side methods & the UA string ✤ Client-side methods & media queries ✤ Measuring screen size with javascript http://css-tricks.com/snippets/javascript/redirect-mobile-devices/ ✤ PHP function to detect mobile user agents & browsers http://detectmobilebrowsers.mobi/
  • 18. Serving with WordPress ✤ Theme Switch plugin http://digwp.com/2009/12/redirect- mobile-users-to-mobile-theme/ ✤ Built in conditional tags <?php  if  (  $is_iphone  )  {?>          <?php  include(  TEMPLATEPATH  .  '/mobile/ single.php'  );  ?> <?php  }  else  {  ?>          //  entire  contents  of  your  regular  single.php   template <?php  }  ?>
  • 19. What needs to change ✤ Dimensions ✤ Bandwidth ✤ Font-size ✤ Features ✤ Floated elements ✤ Mouseover states ✤ Flash
  • 20. Tools ✤ Browser testing tools ✤ Emulators iOS SDK, Android SDK, Online Opera Mini Emulator ✤ Screen Capture Tools (iPhone-Simulator Cropper) ✤ Validators (W3C mobileOK Checker)
  • 22. Icons ✤ iPhone icon (rel="apple-touch-icon") 114x114 pixels ✤ Opera browser icon (rel="icon") 195x195px ✤ Precomposed icons
  • 23. <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />
  • 24. Images ✤ Double image dimensions, then resize ✤ Individual component caching: iOS 3.x will only cache HTML pages under 25k , iOS 4 102.4 kb per item ✤ Total component caching: Android and iOS 4 set limit at 2MB ✤ gzip has no effect on cache-ability on any device ✤ http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/
  • 26. Targeting Viewport Dimensions & Orientation ✤ Hardboiled CSS3 Media Queries (Andy Clarke) http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
  • 27. HTML Head ✤ Icon links ✤ Viewport meta tag or 980 pixels?
  • 28. Accessibility ✤ Pinch to zoom: body {-webkit- text-size-adjust:100%;} ✤ Disable user zoom: Accessibility and maximum-scale=1.0 ✤ “auto-zoom when changing orientation” feature ✤ http://mattgemmell.com/2010/12/19/accessibility-for- iphone-and-ipad-apps ✤ http://www.456bereastreet.com/archive/201012/ controlling_text_size_in_safari_for_ios_without_disablin g_user_zoom/
  • 31. Fancy fonts ✤ SVG and fancy fonts http://www.fontsquirrel.com/ ✤ Other font-face generator tools ✤ Licensing ✤ Google font API ✤ MIME type for SVG to "image/ svg+xml" in the server settings
  • 33. Fluid Layout ✤ Width 100% ✤ Float none ✤ Stack elements ✤ Remove elements
  • 35. Fluid YouTube Videos ✤ http://css-tricks.com/7066-fluid-width- youtube-videos/
  • 36. Trouble with Javascripts ✤ Fluid width and missing tags
  • 38. Hide Content ✤ Why hide content? ✤ What to hide? ✤ “no-mobile” and “mobile- only” tags ✤ “display: none;” is bad for SEO ✤ Another way to hide content ✤ Skip to content links
  • 39. Add Content ✤ Clickable Phone Numbers with class="phone-link" ✤ Special Input Types with HTML5 type="tel" ✤ type="email" type="url" type="number" type="range" type="search" type="date"
  • 40. Alternative Strategies ✤ Mobile First ✤ Mobile Boilerplate ✤ Completely fluid design
  • 41. Additional Reading ✤ WordPress Mobile Tutorials http://speckyboy.com/2011/03/17/mobile-toollbox-for-wordpress-tutorials-plugins-and-themes/
  • 42. Slides and Download ✤ Slides: http://www.slideshare.net/cafenoirdesign ✤ Theme download: http://cafenoirthemes.com ✤ More details: http://chroni.ca/42/the-future-is-mobile-part-i/
  • 43. Shannon Smith CEO of Café Noir Design w: www.chroni.ca w: www.cafenoirdesign.com e: info@cafenoirdesign.com t: @cafenoirdesign