smx milan - supercharge responsive design | idea evolver
TRANSCRIPT
![Page 1: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/1.jpg)
Supercharge Responsive Design
SMX Milan 2014
![Page 2: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/2.jpg)
2
Search Experience Op.miza.on® Evolve Responsively.
It’s about intercep(ng the most produc.ve audiences and delivering experien(al content
![Page 3: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/3.jpg)
3
Make the experience fast so it responds seamlessly throughout the day
Responsive Design Fits the Lifestyle
Commu(ng (7am – 10am)
Work Time (10am – 5pm)
Leisure Time (8pm – 12am)
Source:
![Page 4: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/4.jpg)
2.81
13.5
11.64
M. Site RWD Laptop 0
2
4
6
8
10
12
14
16
Responsive Design and Load Time
• Don’t load the same assets to web and mobile
• Use SVG images for icons and logos
• Leverage emerging standards for srcset and <picture>
• Responsive backend with “Vary: User-‐Agent” in h]p response
• Op.mize for PageSpeed best prac.ces
• Ensure videos, images, stylesheets and scripts are fully accessible
Avg. Load Times for Mobile Configura.ons (seconds)
Google’s recommended mobile configura.on is inherently slow Supercharge Responsive Design
Source: High Performance Responsive Design By Tom Barker – O'Reilly Media
![Page 5: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/5.jpg)
Responsive sites ocen serve the same high-‐res images to desktop and mobile
5
Responsive Images in a Re.na World
Both experiences serve the same heavy image
![Page 6: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/6.jpg)
Images on Responsive/Re.na Templates are Heavy
6
Avg. PageSpeed 42%
Considering the web, images account for 62% of total weight
Source: HTTP Archive – http://goo.gl/o4ucTh
![Page 7: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/7.jpg)
Don’t Serve the Same Assets to Mobile
7
Avg. Mobile PageSpeed 29%
With the same assets served to mobile, avg. PageSpeed is 13% lower
![Page 8: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/8.jpg)
SVG Images
8
SVG has strong browser compa.bility and should be used for icons and logos
![Page 9: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/9.jpg)
Scale Images Using SRCSET and SIZES
<img src="[email protected]” srcset=“
img/[email protected] 320w, img/yacht_race@wide-‐mobile.jpg 480w, img/[email protected] 768w, img/[email protected] 1024w, img/[email protected] 1280w"
sizes=“ (max-‐width: 20em) 30vw, (max-‐width: 30em) 60vw, (max-‐width: 40em) 90vw"
alt="A very exci.ng yacht race.” />
9 Source: http://goo.gl/qXGhlj
Scale images across varying viewport widths and screen resolu.ons.
• SRC serves as the fallback image • SRCSET provides alternate images for
varying widths
• SIZES provide an es.mated image layout width
• Allows media condi.ons
![Page 10: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/10.jpg)
Direct Images with PICTURE and SOURCE MEDIA
<picture> <!-‐-‐ 16:9 crop -‐-‐> <source media="(min-‐width: 36em)" srcset="quilt_2/detail/large.jpg 1920w, quilt_2/detail/medium.jpg 960w, quilt_2/detail/small.jpg 480w" /> <!-‐-‐ square crop -‐-‐> <source srcset="quilt_2/square/large.jpg 822w, quilt_2/square/medium.jpg 640w, quilt_2/square/small.jpg 320w" /> <img src="quilt_2/detail/medium.jpg" alt="Detail of the above quilt, highligh.ng the embroidery and exo.c s.tchwork." />
</picture>
10 Source: http://goo.gl/qXGhlj
The picture element allows for various image sizes at different resolu.ons.
• SOURCE uses media queries for advanced customiza.on
• Apply CSS to the IMG, not the PICTURE
![Page 11: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/11.jpg)
Desired Results from <picture>
11 Source: http://goo.gl/qXGhlj
The results show a more detailed and firng image to mobile users.
![Page 12: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/12.jpg)
Responsive Back-‐End
• WURFL Cloud is useful for server-‐side customiza.on – Serve unique mobile content (e.g. store locator) – Requires “Vary: User-‐Agent”
12
Server-‐side customiza.on is fast. Easy to retrieve device
informa.on
![Page 13: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/13.jpg)
Use “Vary: User-‐Agent” when Dynamic
• The “Vary: User-‐Agent” direc.ve should be used when the content is different on mobile vs laptop
• “Vary: User-‐Agent” let’s the ISP know to consider the user agent when serving cached assets
13
GET /page-1 HTTP/1.1 Host: www.example.com (...rest of HTTP request headers...) HTTP/1.1 200 OK Content-Type: text/html Vary: User-Agent Content-Length: 5710 (... rest of HTTP response headers...)
![Page 14: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/14.jpg)
Op.mize Load Times Purpose Minimize load .me because users and engines strongly favor pages that load within one or two seconds. Recommendations • Reduce server response .me • Leverage browser caching • Reduce the file sizes of images • Reduce the number of JavaScript includes • Reduce h]p requests by consolida.ng include files • Minify JavaScript includes to reduce file size • Move JavaScript includes to bo]om of markup
MO
BILE
48 100
Figure 1. Mobile PageSpeed score for SeroquelXR.com
![Page 15: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/15.jpg)
Make Assets Fully Accessible Purpose
Google requires access to digital assets like videos, images, stylesheets and scripts. Robots.txt
Don’t block videos, images, stylesheets or scripts. XML Sitemap
Include videos and high resolu.on images in XML sitemap.
Figure 1. 100% site saturation occurs when the number of submitted pages matches the number of indexed pages.
![Page 16: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/16.jpg)
16
![Page 17: SMX Milan - Supercharge Responsive Design | Idea Evolver](https://reader035.vdocuments.net/reader035/viewer/2022062710/55a855111a28ab52168b465c/html5/thumbnails/17.jpg)
A Supercharged Responsive Design…
17 Source: metrics for illustrative purposes only
…uses the best attributes from each of the recommended mobile configurations
Separate Dynamic Responsive
A Supercharged Responsive Design
§ Highly customized § Very fast
§ Customiza.on from client-‐side
§ Only one URL § No Redirects
5.81
9.14
1.34 1.65
0
2
4
6
8
10
Site 1 Site 2
Average Load Time in Seconds Post Op.miza.on Load Time