Chicago Tech Day Jan 2015: RWD

Responsive Web Design and Responsive Server Side

©2015 AKAMAI | FASTER FORWARDTM

Agenda

• Design Strategies

• What are common problems with RWD?

• Solving these issues with Akamai


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

http://www.slideshare.net/kleinerperkins/internet-trends-2014-05-28-14-pdf


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


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”

Design Strategies


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


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.


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

http://www.example.com/


RWD Strategies

• Server Side (RESS)

Performance Issues with RWD


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/


Over-Downloading: Bytes Per Pixel Served

Average RWD Bytes Served Per PixelFrom testing ~500 live RWD sites

Source: http://goo.gl/0C0tLD

http://goo.gl/0C0tLD


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


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

http://c.s-microsoft.com/en-us/CMSImages/SpringPromo_LastFrameBG_1600x540_EN_US.jpg?version=f77413db-c3db-675e-1ff8-faa31c3d5c30


Problem: Images Below the Fold Not Shown


Media queries do not prevent CSS downloads

Resolution:

320x480

“Wrong” CSS loaded

“Right” CSS loaded


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.






Problem: Hidden DOM impacts download

RWD and Akamai SolutionsION Features


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]


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.






Akamai Solutions – Browser Specific Image Formats

WebP

JXR

Jpg2000

Jpg

Jpg


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)


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>



<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:*">



<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>






Akamai Solutions – Responsive Images






Akamai Solutions – Responsive Images


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

http://edc.edgesuite.net/


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

https://community.akamai.com/blogs/colin/2014/10/22/ress-with-esi-and-device-characteristics






The result - RESS can reduce DOM complexity


The Result - RESS User Experience difference

RESS

Doc Complete: 10.1s

Fully Loaded: 17s

Original

Doc Complete: 18.9s

Fully Loaded: 28s

RESS

Original


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

Chicago Tech Day Jan 2015: RWD

Technology

different devices

mobile devices source

appropriate site origin

mobile layout

different clientscontent

current client

sophistication of web

ressserving different