Mobile Review 2012
JULY 25, 2012
michael stowe
Twin Cities Software Engineers
• 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
“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
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
MOBILE FIRST
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.
“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
RESPONSIVE DESIGN
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).
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
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>
Image © StudioPress.com | Article
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/
“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
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.
NATIVE VS.
WEB
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).
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???
HYBRID APPS
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.
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)
JAVASCRIPT FRAMEWORKS
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.
JAVASCRIPT FRAMEWORKS
Popular JavaScript platforms for developing mobile
websites/ applications include:
• jQuery Mobile
• jQTouch
• Sencha Touch
A FINAL THOUGHT
“[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
THANK YOU. @mikegstowe