chicago tech day jan 2015: rwd
TRANSCRIPT
![Page 1: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/1.jpg)
Responsive Web Design and Responsive Server Side
![Page 2: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/2.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Agenda
• Design Strategies
• What are common problems with RWD?
• Solving these issues with Akamai
![Page 3: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/3.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
1/3 of Mobile Traffic is from Mobile Devices
Source: KPCB Internet Trends, 2014
![Page 4: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/4.jpg)
©2015 AKAMAI | FASTER FORWARDTM
The Browser/Client Landscape has become very diverse!
AOLNetscape
IE
Chrome
iPhone iPad
Android
Phones and
Tablets
FireFox
Windows Mac OSiOS
AndroidWindows 8Windows
Phones and
Tablets
www.www.
m.
www.
m.
t.
TodayDevice x
Version x
Screen Sizes x
OS x
Browsers x
Connectivity
TomorrowDevice x
Version x
Screen Sizes x
OS x
Browsers x
Connectivity x
The next big thing
Responsive Web DesignBack to www.
time
Facebook reports
7,000 different
devices (2012)
Massive
proliferation of
devices
begins
![Page 5: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/5.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Responsive Web Design
• Web site design aimed at provide an optimal viewing
experience independent of the device.
• Provides easy reading and navigation with a minimum of
resizing, panning and scrolling across a wide range of
devices.
• “One Web”
• Preserve the User Experience
• Focus dev efforts; reduce duplication
• “Future Friendly”
![Page 6: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/6.jpg)
Design Strategies
![Page 7: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/7.jpg)
©2015 AKAMAI | FASTER FORWARDTM
RWD Strategies
• Adaptive Delivery
• Multiple origins (m., www) served from one URL
• Using CDN/Edge to serve appropriate site origin to the client
• Relatively easy to implement if you have m., www sites already created
www-origin.example.com
m-origin.example.com
www.example.com
![Page 8: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/8.jpg)
©2015 AKAMAI | FASTER FORWARDTM
RWD Strategies
• Responsive Client Side (RWD)
• A single website that responds to the current client and changes its design
according to the device/client
• Three primary building blocks
• Fluid grids - page element sizing to be in relative units like percentages, rather
than absolutes like pixels.
• Flexible images – are sized using relative units or percentages to prevent them
from displaying outside of their container element
• Media queries - Media queries allow the page to use different CSS style rules
based on display characteristics of the device the site is being rendered on.
![Page 9: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/9.jpg)
©2015 AKAMAI | FASTER FORWARDTM
RWD Strategies
• Responsive with Server Side (RESS)
• Serving different content to different clients
• Content delivered to device/client is specific to that client type
• For example, www.example.com sends a mobile layout to an android phone and
client side script sizes elements appropriate to dimensions of the device. A
desktop application would receive code appropriate for that representation
Mobile
ContentDesktop
Content
![Page 10: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/10.jpg)
©2015 AKAMAI | FASTER FORWARDTM
RWD Strategies
• Server Side (RESS)
![Page 11: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/11.jpg)
Performance Issues with RWD
![Page 12: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/12.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Over-Downloading
• Average site has 120 reqs/page
• display: none only hides images but bytes still
transferred
• All permutations are downloaded
(jpg/css/js/html)
• Only 6% of Fluid/Flex RWD sites tackle Over-
Downloading
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
![Page 13: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/13.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Over-Downloading: Bytes Per Pixel Served
Average RWD Bytes Served Per PixelFrom testing ~500 live RWD sites
Source: http://goo.gl/0C0tLD
![Page 14: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/14.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Image Related Issues
• Images are handled a number of ways in RWD, not all of which are
optimal
• Sharing large images between representation types
• Resizing images client-side
• Hiding images non-relevant to the current layout
• Downloading large of images for mobile
• Downloading images at a much higher quality than is necessary for a small screen
![Page 15: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/15.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Problem: Same Image, Different Size
http://c.s-microsoft.com/en-us/CMSImages/SpringPromo_LastFrameBG_1600x540_EN_US.jpg?version=f77413db-c3db-675e-1ff8-faa31c3d5c30
![Page 16: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/16.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Problem: Images Below the Fold Not Shown
![Page 17: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/17.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Media queries do not prevent CSS downloads
Resolution:
320x480
“Wrong” CSS loaded
“Right” CSS loaded
![Page 18: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/18.jpg)
©2015 AKAMAI | FASTER FORWARDTM
DOM/CSS/JS Bloating
• RWD websites contain client side code directing the client on what
representation to show, how to size elements, code for how each
element should work with each representation, and widgets that may
only appear in certain representations.
![Page 19: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/19.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Problem: Hidden DOM impacts download
![Page 20: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/20.jpg)
RWD and Akamai SolutionsION Features
![Page 21: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/21.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Akamai Solutions – Adaptive Delivery
•Edge Device Characterization• Akamai maintains the device/network database
•Forward Rewriting• Change the destination server based on device
• Or add or remove the /m/ or m.
•Flexible Cache Key• Add other facets to the URL
• example.com/path/to/site.html?id=123 [device=phone]
![Page 22: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/22.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Akamai Solutions – Just In Time Images
• Prevents downloading of images
not visible in the browser window.
• Prevents downloading of hidden
images.
• Images only downloaded when
they become visible.
![Page 23: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/23.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Akamai Solutions – Browser Specific Image Formats
WebP
JXR
Jpg2000
Jpg
Jpg
![Page 24: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/24.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Akamai Solutions – Adaptive Images
• Adaptive Image Compression (AIC)
• Converting images based on network conditions
• Applies to JPEG images
• Configured through Akamai Portal.
• No code changes required.
Example
Quality:
100%
Size: 101KB
Average
Throughput: HighSize: 85KB (Q: 90)
Throughput: MedSize: 35KB (Q: 40)
Throughput: LowSize: 13KB (Q: 20)
![Page 25: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/25.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Akamai Solutions – Adaptive Images
• Image Converter
• APIs are available to assist with image management
• Customers implementing adaptive image strategies can utilize this API
• Deliver a browser specific version of a requested image
• Resize images to the screen
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source media="(min-width: 801px)” srcset=“2880411400_2_1_1.jpg?resize=600:*"/>
<source media="(min-width: 641px)” srcset=“2880411400_2_1_1.jpg?resize=500:*">
<!--[if IE 9]></video><![endif]-->
<img id="image-main" class="gallery-image visible"
src="2880411400_2_1_1.jpg?resize=400:*" alt="Linen Blazer" title="Linen Blazer” data-
zoom-image="2880411400_2_1_1.jpg?resize=1200:*" />
</picture>
![Page 26: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/26.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Akamai Solutions – Responsive Images
![Page 27: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/27.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Akamai Solutions – Responsive Images
![Page 28: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/28.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Akamai Solutions - RESS
• Edge Server Includes (ESI)
• conditionally assembles (remove / add) design response
• Device Characterization
• Allows you to detect devices and characteristics at the edge
• http://edc.edgesuite.net
• Use this with ESI and other Akamai features to define behaviors
![Page 29: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/29.jpg)
©2015 AKAMAI | FASTER FORWARDTM
ESI Blog Post by Colin Bendell
For more information and detailed technical examples:
https://community.akamai.com/blogs/colin/2014/10/22/ress-with-esi-and-
device-characteristics
![Page 30: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/30.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
The result - RESS can reduce DOM complexity
![Page 31: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/31.jpg)
©2015 AKAMAI | FASTER FORWARDTM
The Result - RESS User Experience difference
RESS
Doc Complete: 10.1s
Fully Loaded: 17s
Original
Doc Complete: 18.9s
Fully Loaded: 28s
RESS
Original
![Page 32: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/32.jpg)
©2015 AKAMAI | FASTER FORWARDTM
Akamai Solutions – Edge Start
• Akamai Intelligent Platform responds immediately with HTML head & select
assets
• Idle browser threads begin processing CSS & JavaScript
• Akamai Intelligent Platform sends rest of response once received from originBefore
TTFB = 987ms
Start Render = 2.264s
After
TTFB = 43ms
Start Render = 1.468s
![Page 33: Chicago Tech Day Jan 2015: RWD](https://reader030.vdocuments.net/reader030/viewer/2022020116/55a796c51a28ab751f8b480c/html5/thumbnails/33.jpg)