mobile review: 2012

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>  <link rel="stylesheet" media="screen and (max-width: 1024px)" rel="stylesheet" href="example.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

http://www.studiopress.com/design/flexible-grid.htm

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


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.


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