![Device
Tagging:
Target
Device
Groups
Use
40+
predefined
groups:
Device
Type
phone,
nontouchphone,
touchphone,
iphone,
desktop,
tablet,
ipad,
androidtablet,
androidphone,
largetablet,
smalltablet,
iostablet,
androidtablet,
windowstablet,
phablets,
nonphablets,
windowsphone,
iosphone,
blackberryphone
OS
Ios*,
android*,
blackberry*,
windows*,
bada,
webos,
symbian
Screen
width[number]
(e.g.
width32)
Browser
safari,
chrome,
firefox,
skyfire,
ie,
operamini,
operamobile,
bolt,
openwave,
obigo,
telca,
nefront,
blazer,
polaris,
dolphin,
ucweb,
silk
Supported
Features
css3,
offlinestorage,
gps,
fileupload,
flash,
cookies,
camera,
mul<lingual,
webkit,
jssupport,
advancedjssupport,
basicjssupport,
html5,
touch
Pixel
Density
dpiveryhigh
(i.e.
421
and
above),
dpire<na(i.e.
261-‐420),
dpimedium(i.e.
131-‐260),
dpilow(i.e.
130
and
below)
Media
format
mp3,
mp4,
m4a,
wmv,
ogg,
wav,
mpeg,
mov,
flv,
webm,
h264,
png,
gif,
jpg,
jpeg,
svg
Using
familiar
operators:
Create
custom
groups:
Operators:
equal,
greater
than,
less
than,
less,
greater,
not,
and,
or,
range,
series
Example:
<Group
name=“ChromeOnPhone”>
<Category
name=“browser”
value=“chrome”/>
<Category
name=“os”
value=“ios_or_android”/>
<Category
name=“devicetype”
value=“phone”/>
</Group>
Examples:
data-‐tg-‐ios4;
data-‐tg-‐ios4X;
data-‐tg-‐ios_ge_5;
data-‐tg-‐ios_or_android;
data-‐tg-‐ios_and_chrome
22](https://image.slidesharecdn.com/device-awarewebframeworksforbetterprogramming-140206002628-phpapp02/85/Device-aware-web-frameworks-for-better-programming-22-320.jpg)
![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](https://image.slidesharecdn.com/device-awarewebframeworksforbetterprogramming-140206002628-phpapp02/85/Device-aware-web-frameworks-for-better-programming-26-320.jpg)
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
- 6. Many, many web technology components 6
- 7. Screen size-‐aware vs Device-‐aware ? vs ? 7
- 8. Screen size-‐aware: Responsive Design 8
- 9. Screen size-‐aware: Responsive Design Screen widths à Breakpoints & grids, flexible images à Media Queries.. 9
- 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
- 13. SNOW Framework Simple Device-Tagging Framework • • • • HTML Attribute Override CSS Property Override Hide/Show HTML blocks Templates – custom macros/widgets Multi-Device Emulator • • • • • Real-time validation 30+ pre-defined devices Pre-, post-processed HTML Cloud-based Customizable Extensible DeviceAwareness Engine Performance Optimization • • • • • Reduced page load • Image optimization • Caching and CDN support Device library & detection Device classification High-speed HTML/CSS parser Server-side post-processing adaptation 13
- 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.)
- 18. Device Tagging Rule 2: Override CSS ProperHes Examples: <!-‐-‐ Adjust lek margin for tablets and phones -‐-‐> .myMargin { margin-‐lek: 40px; -‐tg-‐tablet-‐margin-‐lek: 20px; -‐tg-‐phone-‐margin-‐lek: 10px; } #mydivId { float: lek; -‐tg-‐phone-‐float: right; }
- 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); }
- 22. Device Tagging: Target Device Groups Use 40+ predefined groups: Device Type phone, nontouchphone, touchphone, iphone, desktop, tablet, ipad, androidtablet, androidphone, largetablet, smalltablet, iostablet, androidtablet, windowstablet, phablets, nonphablets, windowsphone, iosphone, blackberryphone OS Ios*, android*, blackberry*, windows*, bada, webos, symbian Screen width[number] (e.g. width32) Browser safari, chrome, firefox, skyfire, ie, operamini, operamobile, bolt, openwave, obigo, telca, nefront, blazer, polaris, dolphin, ucweb, silk Supported Features css3, offlinestorage, gps, fileupload, flash, cookies, camera, mul<lingual, webkit, jssupport, advancedjssupport, basicjssupport, html5, touch Pixel Density dpiveryhigh (i.e. 421 and above), dpire<na(i.e. 261-‐420), dpimedium(i.e. 131-‐260), dpilow(i.e. 130 and below) Media format mp3, mp4, m4a, wmv, ogg, wav, mpeg, mov, flv, webm, h264, png, gif, jpg, jpeg, svg Using familiar operators: Create custom groups: Operators: equal, greater than, less than, less, greater, not, and, or, range, series Example: <Group name=“ChromeOnPhone”> <Category name=“browser” value=“chrome”/> <Category name=“os” value=“ios_or_android”/> <Category name=“devicetype” value=“phone”/> </Group> Examples: data-‐tg-‐ios4; data-‐tg-‐ios4X; data-‐tg-‐ios_ge_5; data-‐tg-‐ios_or_android; data-‐tg-‐ios_and_chrome 22
- 23. MulH-‐device emulator hvp://www.codewithsnow.com/emulator 23
- 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
- 25. SNOW: Performance OpHmizaHon § Performance Op<miza<on ß Image Op<miza<on ß CDN Caching 25
- 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
- 29. Step 1. Image Processing Image folder (One Web-ready) Image folder panther.jpg panther.jpg (168kb) (168kb) SNOW Image OpHmizer panther_snow_desktop.jpg (118kb) panther_snow_tablet.jpg • • • • Op<miza<on Rules Compression level Image path w/h constraints Image format (75kb) panther_snow_phone.jpg (61kb) 29
- 30. Step 2. Intelligent Image Delivery SNOW automaHcally chooses and delivers the correct image file that is op<mized for the target device. <HTML> <HTML> Body> <Body> < <Img src=“panther_snow_desktop.jpg”/> </Body> </HTML> <Img src=“panther.jpg”/> </Body> </HTML> <HTML> <Body> <Img src=“panther_snow_tablet.jpg”/> </Body> </HTML> SNOW Device detecHon HTML/CSS Parser <HTML> <Body> <Img src=“panther_snow_phone.jpg”/> </Body> </HTML> Web Server/CMS System One Webready images (168kb original) panther.jpg (118kb) (75kb) panther_snow_desktop.jpg panther_snow_tablet.jpg (61kb) panther_snow_phone.jpg 30
- 31. Case Study – mobilewebdevconference.com 31
- 32. Case Study: www.tampabay.com 32
- 33. Case Study: www.tampabay.com Before Optimization After Optimization Desktop 20% saving 50% saving Mobile 20% saving 53% saving 33
- 34. Case Study: html.adobe.com 34
- 35. Case Study: html.adobe.com Before Optimization After Optimization Desktop 2% saving 2% saving Mobile 42% saving 55% saving 35
- 36. MulH-‐device caching and CDN SNOW Tags Akamai Edge Device Op<mized Fast ESI-‐SNOW Enabled Webserver No round trips ESI-‐SNOW 36
- 37. Server-‐side adaptaHon using SNOW 37
- 38. Server-‐side adaptaHon using SNOW 38
- 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: [email protected] Mobile: (650) 350-‐9251 hdp://www.trilibis.com Download SNOW hdp://www.codewithsnow.com/portal/ 42