Mobile Review: 2012


Published on

A quick review of the buzz words and technologies for mobile development in 2012. Briefly covers the concept of Mobile First, Responsive Design/ RESS, Native vs. Web, Hybrid Applications, and lists popular JavaScript frameworks.

Published in: Technology
1 Like
  • Be the first to comment

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

No notes for slide

Mobile Review: 2012

  1. 1. Mobile Review 2012michael stowe Twin Cities Software Engineers JULY 25, 2012
  2. 2. MIKESTOWE .com• 10+ years Web Development experience• Published Author, Speaker, and Consultant• Developed applications used by the medical field and law enforcement• Software Engineer at (half a million visitors every day)• Zend Certified PHP 5.3 Software Engineer@mikegstowe
  3. 3. “The most important current trend in the software development world is, without a hint of a doubt, the mobile frontier, and in particular, the rise of the smartphone and the touch tablet.”- Adrian Kosmaczewski, Mobile JavaScript Application Development
  4. 4. TRENDING TOPICSSome of the major topics regarding mobile development asof late include: • Mobile First • Responsive Design • RESS • Native vs. Web Debate • Hybrid Applications • JavaScript Frameworks
  6. 6. MOBILE FIRSTMobile First is the concept that you should develop yourwebsite/ application for use on a mobile device first, andthen for desktop users.The main argument against Mobile First is the realty ofdesktop screens vs. mobile screens, however proponentsargue that by using the mobile first approach the mostimportant aspects of your application/ website are displayedprominently regardless.
  7. 7. “Designing for mobile first not onlyprepares you for the explosive growth andnew opportunities on the mobile internet, itforces you to focus and enables to innovate in ways you previously couldn’t.” - Luke Wroblewski, Mobile First
  9. 9. RESPONSIVE DESIGNResponsive Design is currently all the buzz in the mobileworld. After all, why code your site more than once ifyou don’t have to?However, there are some misconceptions regardingResponsive Design. First of all, you can still utilize RDwithin your multiple platforms (mobile site, desktopversion, etc).
  10. 10. RESPONSIVE DESIGN Responsive Design essentially consists of three core ingredients: • A flexible, grid-based layout • Flexible images and media • Media queries (CSS3)Ingredients taken from Responsive Web Design, Page 9
  11. 11. MEDIA QUERIES css <html> <head> <!-- Using Link HREF --> <link rel="stylesheet" media="screen and (max-width: 1024px)" rel="stylesheet" href="example.css"> <!-- Using CSS --> <style type="text/css"> /* Using Import */ @import url(example.css) screen and (max-width: 1024px) /** Not as Ideal **/ @media screen and (max-width: 320px) { /** ... **/ } </style> </head> </html>
  12. 12. Image © | Article
  13. 13. MODERNIZR Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Modernizr makes it possible for you to write conditional JavaScript and CSS to handle whether a browser supports a feature or not, allowing you to accommodate older browsers and avoid running into unsupported tags.Learn more at
  14. 14. “Because more than anything, web design is about asking the right questions.And really, that’s what responsive web design is,a possible solution, a way to more fully design for the web’s inherent flexibility.” - Ethan Marcotte, Responsive Web Design
  15. 15. RESPONSIVE DESIGN + SERVER SIDEResponsive Design + Server Side, or RESS is anotheremerging concept in the mobile industry, combiningserver side scripts with client side CSS and JavaScript toprovide the cheapest (data wise) and best solution totheir users.RESS helps to eliminate some of the arguments againstusing Responsive Design.
  16. 16. NATIVE VS. WEB
  17. 17. NATIVE VS WEBThe native vs. web debate still continues, although moreand more the train of thought is to develop for the webfirst, allowing you to meet the needs of the majority ofyour users, and to develop your mobile base.However, developing for the web is not always a feasiblesolution (ie Instagram).
  18. 18. NATIVE VS WEBWill a mobile website work? YES – then build it…No – what about building a Hybrid App? YES – thenbuild it…No – ok, you’re kind of stuck, let’s build a native app…And if you still can’t do it, what the heck are you tryingto do???
  19. 19. HYBRID APPS
  20. 20. HYBRID APPSHybrid Applications are pseudo-applications, orapplications coded in a singular programming languageand interpreted through a native wrapper to enable toapplication to run “natively” on the host device.Hybrid Applications are designed for coding efficiency andflexibility, allowing developers to code in their nativelanguage for multiple platforms.
  21. 21. POPULAR HYBRID SOLUTIONSPopular platforms for developing Hybrid Applicationsinclude: • PhoneGap (HTML5/CSS/JavaScript) • Titanium (JavaScript) • AppMobi (HTML5/CSS/JavaScript) • IBM Worklight (HTML5/CSS/JavaScript) • QuickConnect (HTML5/CSS/JavaScript)
  23. 23. JAVASCRIPT FRAMEWORKSTo allow web applications and hybrid applications to actand feel as though they are a native application,developers have created multiple JavaScript frameworks.These frameworks provide the “effects” of the applicationand allow for API/ DataCall integration to third-party webservices.These frameworks DO NOT provide access tonative features of the device.
  24. 24. JAVASCRIPT FRAMEWORKSPopular JavaScript platforms for developing mobilewebsites/ applications include: • jQuery Mobile • jQTouch • Sencha Touch
  26. 26. “[The mobile web is a] field filled with futuristicgeolocatable, gyroscope-enabled gadgets that get cooler every day- a field where the bestideas and most innovative applications are stillin the future… it’s just up to us to invent them!”- Taken from Build Mobile Websites and Apps for Smart Devices
  27. 27. THANK YOU. @mikegstowe