mobile review: 2012
DESCRIPTION
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.TRANSCRIPT
![Page 1: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/1.jpg)
Mobile Review 2012
JULY 25, 2012
michael stowe
Twin Cities Software Engineers
![Page 2: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/2.jpg)
• 10+ years Web Development experience
• Published Author, Speaker, and Consultant
• Developed applications used by the medical field and law enforcement
• Software Engineer at CaringBridge.org (half a million visitors every day)
• Zend Certified PHP 5.3 Software Engineer
.com
@mikegstowe
MIKESTOWE
![Page 3: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/3.jpg)
“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
![Page 4: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/4.jpg)
TRENDING TOPICS
Some of the major topics regarding mobile development as
of late include:
• Mobile First
• Responsive Design
• RESS
• Native vs. Web Debate
• Hybrid Applications
• JavaScript Frameworks
![Page 5: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/5.jpg)
MOBILE FIRST
![Page 6: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/6.jpg)
MOBILE FIRST
Mobile First is the concept that you should develop your
website/ application for use on a mobile device first, and
then for desktop users.
The main argument against Mobile First is the realty of
desktop screens vs. mobile screens, however proponents
argue that by using the mobile first approach the most
important aspects of your application/ website are displayed
prominently regardless.
![Page 7: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/7.jpg)
“Designing for mobile first not only
prepares you for the explosive growth and
new opportunities on the mobile internet, it
forces you to focus and enables to innovate
in ways you previously couldn’t.”
- Luke Wroblewski, Mobile First
![Page 8: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/8.jpg)
RESPONSIVE DESIGN
![Page 9: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/9.jpg)
RESPONSIVE DESIGN
Responsive Design is currently all the buzz in the mobile
world. After all, why code your site more than once if
you don’t have to?
However, there are some misconceptions regarding
Responsive Design. First of all, you can still utilize RD
within your multiple platforms (mobile site, desktop
version, etc).
![Page 10: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/10.jpg)
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
![Page 11: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/11.jpg)
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>
![Page 13: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/13.jpg)
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 http://modernizr.com/
![Page 14: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/14.jpg)
“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
![Page 15: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/15.jpg)
RESPONSIVE DESIGN + SERVER SIDE
Responsive Design + Server Side, or RESS is another
emerging concept in the mobile industry, combining
server side scripts with client side CSS and JavaScript to
provide the cheapest (data wise) and best solution to
their users.
RESS helps to eliminate some of the arguments against
using Responsive Design.
![Page 16: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/16.jpg)
NATIVE VS.
WEB
![Page 17: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/17.jpg)
NATIVE VS WEB
The native vs. web debate still continues, although more
and more the train of thought is to develop for the web
first, allowing you to meet the needs of the majority of
your users, and to develop your mobile base.
However, developing for the web is not always a feasible
solution (ie Instagram).
![Page 18: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/18.jpg)
NATIVE VS WEB
Will a mobile website work? YES – then build it…
No – what about building a Hybrid App? YES – then
build 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 trying
to do???
![Page 19: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/19.jpg)
HYBRID APPS
![Page 20: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/20.jpg)
HYBRID APPS
Hybrid Applications are pseudo-applications, or
applications coded in a singular programming language
and interpreted through a native wrapper to enable to
application to run “natively” on the host device.
Hybrid Applications are designed for coding efficiency and
flexibility, allowing developers to code in their native
language for multiple platforms.
![Page 21: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/21.jpg)
POPULAR HYBRID SOLUTIONS
Popular platforms for developing Hybrid Applications
include:
• PhoneGap (HTML5/CSS/JavaScript)
• Titanium (JavaScript)
• AppMobi (HTML5/CSS/JavaScript)
• IBM Worklight (HTML5/CSS/JavaScript)
• QuickConnect (HTML5/CSS/JavaScript)
![Page 22: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/22.jpg)
JAVASCRIPT FRAMEWORKS
![Page 23: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/23.jpg)
JAVASCRIPT FRAMEWORKS
To allow web applications and hybrid applications to act
and feel as though they are a native application,
developers have created multiple JavaScript frameworks.
These frameworks provide the “effects” of the application
and allow for API/ DataCall integration to third-party web
services.
These frameworks DO NOT provide access to
native features of the device.
![Page 24: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/24.jpg)
JAVASCRIPT FRAMEWORKS
Popular JavaScript platforms for developing mobile
websites/ applications include:
• jQuery Mobile
• jQTouch
• Sencha Touch
![Page 25: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/25.jpg)
A FINAL THOUGHT
![Page 26: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/26.jpg)
“[The mobile web is a] field filled with futuristic
geolocatable, gyroscope-enabled gadgets that
get cooler every day- a field where the best
ideas and most innovative applications are still
in the future… it’s just up to us to invent them!”
- Taken from Build Mobile Websites and Apps for Smart Devices
![Page 27: Mobile Review: 2012](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c7bfef4a795931208b4696/html5/thumbnails/27.jpg)
THANK YOU. @mikegstowe