device aware web frameworks for better programming
TRANSCRIPT
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
Trend: From Segmented Web to One Web
3
Mobile Web API PC Web API
Data Source
Segmented Web separate UIs and source code
Web Server Web Server
Mobile Handler
Web API
Data Source
One Web Unified UI and source code
Web Server
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.
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
Many, many web technology components
6
Screen size-‐aware vs Device-‐aware
7
vs
?
?
Screen size-‐aware: Responsive Design
8
Screen size-‐aware: Responsive Design
9
Screen widths à Breakpoints & grids, flexible images à Media Queries..
10
What about other cool gadgets ?
Is screen sized-based content adaptation enough?
Screen size and Device CharacterisHcs
11
Screen size… is only ONE of MANY device characteris<cs.
For a TRUE mulH-‐device web experience, developers need intelligence on the full characterisHcs of the target device.
Browers Device types OS Pixel density Supported features
12
SIMPLEST way to build for One Web
FASTEST load Hme
MAXIMUM reuse of exisHng code
SNOW Framework
13
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 Device- Awareness Engine • Device library & detection • Device classification • High-speed HTML/CSS parser • Server-side post-processing
adaptation
Performance Optimization • Reduced page load • Image optimization • Caching and CDN
support
Add tags
<HTML> <Body> <Img src=“Banner.jpg” data-‐tg-‐tablet-‐src=“tabletBanner.jpg” data-‐tg-‐phone-‐src=“phoneBanner.jpg” /> </Body> </HTML>
<HTML> <Body> <Img src=“phoneBanner.jpg”/> </Body> </HTML>
<HTML> <Body> <Img src=“tabletBanner.jpg”/> </Body> </HTML>
<HTML> <Body> <Img src=“Banner.jpg”/> </Body> </HTML>
SNOW
Web Server/CMS System
<HTML> <Body> <Img src=“Banner.jpg”/> </Body> </HTML>
Device TargeHng with SNOW: Simple and IntuiHve Your HTML code
Add SNOW to web server to solve the mulH-‐device web problem
Device Library
Device ClassificaHon
Device DetecHon
High speed HTML/CSS Parser
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.)
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” />
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.)
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; }
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”
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>
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);
}
Device Tagging: Target Device 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
Use 40+ predefined groups:
Create custom groups: Example: <Group name=“ChromeOnPhone”>
<Category name=“browser” value=“chrome”/> <Category name=“os” value=“ios_or_android”/> <Category name=“devicetype” value=“phone”/>
</Group>
Using familiar operators: Operators: equal, greater than, less than, less, greater, not, and, or, range, series
Examples: data-‐tg-‐ios4; data-‐tg-‐ios4X; data-‐tg-‐ios_ge_5; data-‐tg-‐ios_or_android; data-‐tg-‐ios_and_chrome
22
MulH-‐device emulator
23
hvp://www.codewithsnow.com/emulator
MulH-‐device Emulator
24
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
SNOW: Performance OpHmizaHon
25
§ Performance Op<miza<on ß Image Op<miza<on ß CDN Caching
SNOW: Performance OpHmizaHon
26
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/
27
Client-‐side vs Server-‐side
RWD: client-side adaptation
Same code delivered to all devices
Server-side adaptation
Code is optimized for target device
28
Image optimization is critical to delivering fast loading web content to mobile users.
Load time
Signal Strength
Fact 3: Load times are highly sensitive to network signal strength.
Load time
Page weight
Fact 2: Load time is directly proportional to page weight.
Fact 1: Images are a single most contributor to page weight.
79%
Why Image OpHmizaHon?
Step 1. Image Processing
29
SNOW Image OpHmizer
panther_snow_phone.jpg
panther_snow_tablet.jpg
panther_snow_desktop.jpg (118kb)
(75kb)
(61kb)
Image folder (One Web-ready)
panther.jpg (168kb)
Op<miza<on Rules
• Compression level • Image path • w/h constraints • Image format
Image folder
panther.jpg (168kb)
Step 2. Intelligent Image Delivery
SNOW automaHcally chooses and delivers the correct image file that is op<mized for the target device.
30
<HTML> <Body> <Img src=“panther_snow_phone.jpg”/> </Body> </HTML>
<HTML> <Body> <Img src=“panther_snow_tablet.jpg”/> </Body> </HTML>
<HTML> <Body> <Img src=“panther_snow_desktop.jpg”/> </Body> </HTML>
One Web-ready images
<HTML> <Body> <Img src=“panther.jpg”/> </Body> </HTML>
(118kb) (75kb) (61kb) (168kb original)
panther.jpg panther_snow_desktop.jpg panther_snow_tablet.jpg panther_snow_phone.jpg
SNOW
Web Server/CMS System
Device detecHon
HTML/CSS Parser
Case Study – mobilewebdevconference.com
31
Case Study: www.tampabay.com
32
Case Study: www.tampabay.com
33
Before Optimization After Optimization
Desktop
20% saving
50% saving
53% saving
20% saving
Mobile
Case Study: html.adobe.com
34
Case Study: html.adobe.com
35
Before Optimization After Optimization
Desktop
2% saving
2% saving
55% saving
42% saving
Mobile
MulH-‐device caching and CDN
36
SNOW Tags
ESI-‐SNOW Enabled
Webserver
Akamai Edge Device
No round trips Fast Op<mized ESI-‐SNOW
Server-‐side adaptaHon using SNOW
37
Server-‐side adaptaHon using SNOW
38
Retrofiwng desktop web to mulH-‐web in 5 steps
39
1. Horizontal menu to dropdown list 2. Re-‐style body
ß Mul<-‐column → single column ß Fixed width → 100% width w/padding ß Image & font size ß Hide unnecessary content, show relevant content
3. Replace desktop ads with mobile ads 4. Convert Flash videos to HTML5 5. Simplify Footer
Responsive Design Approach vs. SNOW Approach
40
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
SNOW Summary
41
§ 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
Suntae Kim VP, Professional Services
E-‐mail: [email protected] Mobile: (650) 350-‐9251 hdp://www.trilibis.com
Download SNOW
hdp://www.codewithsnow.com/portal/
Thank you!
42