To capitalize on the explosion of multi-device web access, companies need to unify their web-based properties for desktop, tablets and mobile and implement a holistic, One Web approach. When evaluating solutions that support One Web, it is important to select technologies that support single code-base, offer seamless device-based optimization and deliver fast load times.
Device aware web frameworks for better programming
1.
So#ware
eNabling
One
Web
Device-aware Web Frameworks for Better
Programming
Suntae
Kim
VP,
Professional
Services
Trilibis
Mobile
2.
Table
of
Contents
§
§
§
Understanding
mul<-‐web
development
ß Trend:
From
segmented
Web
to
One
Web
ß Key
factors
for
building
for
One
Web
Exploring
SNOW
ß Fundamentals
-‐
Device
awareness
&
tagging
ß Using
the
Emulator
ß Performance
ß RWD
vs
SNOW
Q&A
2
3.
Trend:
From
Segmented
Web
to
One
Web
Segmented
Web
separate
UIs
and
source
code
One
Web
Unified
UI
and
source
code
Mobile
Handler
Web
Server
Web
Server
Web
Server
Mobile
Web
API
PC
Web
API
Web
API
Data
Source
Data
Source
3
4.
One Web
The
idea
that
a
website
should
be
designed
to
work
on
mulHple
devices
through
CSS
styles
and
HTML,
without
redesigning
the
site
or
changing
the
content
for
different
devices.
4
5.
Key
factors
when
building
for
One
Web
§
Single
code
base
§
Time
to
market,
ease
of
programming
&
tes<ng,
code
re-‐use
§
Mobile
context
§
Site
and
content
parity
§
Performance
§
Coverage
(high-‐end,
low-‐end
devices)
§
Future
proof
–
Support
for
future
devices
5
10.
What
about
other
cool
gadgets
?
Is screen sized-based
content adaptation enough?
10
11.
Screen
size
and
Device
CharacterisHcs
Screen
size…
is
only
ONE
of
MANY
device
characteris<cs.
Browers
Device
types
OS
Pixel
density
Supported
features
For
a
TRUE
mulH-‐device
web
experience,
developers
need
intelligence
on
the
full
characterisHcs
of
the
target
device.
11
12.
SIMPLEST
way
to
build
for
One
Web
FASTEST
load
Hme
MAXIMUM
reuse
of
exisHng
code
12
14.
Device
TargeHng
with
SNOW:
Simple
and
IntuiHve
Your
HTML
code
<HTML>
<Body>
<Img
src=“Banner.jpg”/>
</Body>
</HTML>
<HTML>
<Body>
<Img
src=“Banner.jpg”/>
</Body>
</HTML>
Add
tags
Device
Library
<HTML>
<Body>
Device
ClassificaHon
<Img
src=“Banner.jpg”
Device
data-‐tg-‐tablet-‐src=“tabletBanner.jpg”
DetecHon
data-‐tg-‐phone-‐src=“phoneBanner.jpg”
/>
High
speed
</Body>
HTML/CSS
Parser
</HTML>
SNOW
Web
Server/CMS
System
<HTML>
<Body>
<Img
src=“tabletBanner.jpg”/>
</Body>
</HTML>
<HTML>
<Body>
<Img
src=“phoneBanner.jpg”/>
</Body>
</HTML>
Add
SNOW
to
web
server
to
solve
the
mulH-‐device
web
problem
15.
Device
Tagging
Rule
1:
Override
HTML
adributes
Syntax:
data-‐tg-‐groupname-‐adribute=”value”
where..
groupname
is
name
of
target
device
group.
(iphone,
touchphone,
tablet,
dpireHna,
etc.)
adribute
is
any
valid
HTML
adribute.
(src,
href,
style,
etc.)
value
is
any
valid
HTML
adribute
value.
(image,
url,
etc.)
16.
Device
Tagging
Rule
1:
Override
HTML
adributes
Examples:
<div
style=“font-‐size:
medium”>Hello</div>
<!-‐-‐
Increase
font
size
for
tablets
-‐-‐>
<div
style=“font-‐size:
medium”
data-‐tg-‐tablet-‐style=“font-‐size:
large”
>Hello</div>
<!-‐-‐
Swap
images
based
on
device
type
-‐-‐>
<img
src=”desktopbanner.jpg”
data-‐tg-‐iphone-‐src=”appstore.jpg”
data-‐tg-‐android-‐src=”googleplay.jpg”
/>
17.
Device
Tagging
Rule
2:
Override
CSS
ProperHes
Syntax:
-‐tg-‐groupname-‐property:
value
where..
groupname
is
name
of
target
device
group.
(iphone,
touchphone,
tablet,
dpireHna,
etc.)
property
is
any
valid
CSS
property.
(float,
color,
margin,
etc.)
value
is
any
valid
CSS
property
value.
(lek,
red,
20px,
etc.)
19.
Device
Tagging
Rule
3:
Hide/Show
HTML
blocks
Syntax:
data-‐tg-‐groupname=”value”
where..
groupname
is
name
of
target
device
group.
(iphone,
touchphone,
tablet,
dpireHna,
etc.)
value
is
either
“SHOW”
or
“HIDE”
20.
Device
Tagging
Rule
3:
Hide/Show
HTML
blocks
Examples:
<div
data-‐tg-‐iphone=“show”>
Hello
iPhone
user!</div>
<script
data-‐tg-‐android=“show”>
alert(”Hello
Android
user”);</script>
<link
rel=“stylesheet”
href=“style-‐phone.css”
data-‐tg-‐tablet-‐href=“style-‐tablet.css”
data-‐tg-‐desktop=“hide”/>
<div
data-‐tg-‐ios5x_and_chrome=“show”>
You
are
using
Chrome
browser
running
on
iOS
5
or
higher
!</div>
21.
Device
Tagging
Example:
AlternaHve
to
media
queries
/*
display
different
background
images
based
on
screen
width
*/
@media
all
and
(max-‐width:
640px)
{
body
{
background-‐image:
url(phone.jpg);
}
}
@media
all
and
(max-‐width:
729px)
and
(min-‐width:
641px)
{
body
{
background-‐image:
url(tablet.jpg);
}
}
@media
all
and
(min-‐width:
730px)
{
body
{
background-‐image:
url(desktop.jpg);
}
}
/*
display
different
background
images
based
on
device
type
using
SNOW
*/
.body
{
-‐tg-‐desktop-‐background-‐image:
url(desktop.jpg);
-‐tg-‐tablet-‐background-‐image:
url(tablet.jpg);
-‐tg-‐phone-‐background-‐image:
url(phone.jpg);
}
24.
MulH-‐device
Emulator
Benefits
§
§
§
§
Shorten
development
&
QA
<me
Immediate
feedback
on
your
code
changes
on
mul<ple
devices
Cloud
based
(free)
30+
popular
devices
out-‐of-‐the-‐box,
and
growing
24
26.
SNOW:
Performance
OpHmizaHon
WYSIWYG
?
86%
of
the
[responsive]
websites
“weighed”
roughly
the
same
when
loaded
in
the
smallest
window..
they
are
s<ll
downloading
the
full
website
content,
and
are
thus
painfully
slow.
-‐
Guy
Podjarny,
hvp://www.guypo.com/mobile/performance-‐implica<ons-‐of-‐responsive-‐design-‐book-‐contribu<on/
26
27.
Client-‐side
vs
Server-‐side
RWD: client-side adaptation
Same code delivered to all devices
Code is optimized for target device
Server-side adaptation
27
28.
Why
Image
OpHmizaHon?
Fact 1: Images are a single most
contributor to page weight.
Fact 2: Load time is directly
proportional to page weight.
Load time
79%
Fact 3: Load times are highly
sensitive to network signal strength.
Load time
Signal Strength
Page weight
Image optimization is
critical to delivering fast
loading web content to
mobile users.
28
39.
Retrofiwng
desktop
web
to
mulH-‐web
in
5
steps
1.
2.
3.
4.
5.
Horizontal
menu
to
dropdown
list
Re-‐style
body
ß Mul<-‐column
→
single
column
ß Fixed
width
→
100%
width
w/padding
ß Image
&
font
size
ß Hide
unnecessary
content,
show
relevant
content
Replace
desktop
ads
with
mobile
ads
Convert
Flash
videos
to
HTML5
Simplify
Footer
39
40.
Responsive
Design
Approach
vs.
SNOW
Approach
Responsive
Design
SNOW
One
code
base
Common
UI
across
devices
Supports
new
devices
automa<cally
Screen
size-‐based
adapta<on
Device/browser-‐based
adapta<on
CSS
media
query
HTML/CSS
post
processing
UI
adapta<on
occurs
on
the
client
UI
adapta<on
occurs
on
the
server
Bloated
code
&
all
assets
sent
to
device
Op<mized
code
sent
to
device
Livle
control
over
load
<me
Faster
load
<me
Requires
re-‐design/re-‐build
Enables
full
re-‐use
of
exis<ng
code
40
41.
SNOW
Summary
§
§
§
§
§
§
§
One
source
code,
one
domain
Device-‐aware
site
vs
screen
size-‐aware
site
Simplified
coding
ß Built-‐in
device
detec<on
and
device
classifica<on
ß Extensible
HTML5
Tag
library
Add
server-‐side
controls
to
RWD
sites
for
op<mized
user
experience
and
performance
Future-‐proof
your
site
using
extensible
device
detec<on
capability
Improve
produc<vity
using
web-‐based
emulator
Fast-‐loading,
high-‐performance
sites
41
42.
Thank
you!
Suntae
Kim
VP,
Professional
Services
E-‐mail:
skim@trilibis.com
Mobile:
(650)
350-‐9251
hdp://www.trilibis.com
Download
SNOW
hdp://www.codewithsnow.com/portal/
42