Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
BE RESPONSIVE WITH YOUR SITE 
@koombea #BeResponsive
Speakers 
David Bohorquez 
Front End Lead 
Koombea 
Rick Nelson 
Technical Solutions Architect 
NGINX 
@koombea #BeRespons...
DAVID: 
Agenda 
- What is responsive & why? 
- Which option should you choose? 
- Web responsive Design Strategy 
- Ways t...
What is responsive & why? 
- Came out a couple of years ago. 
- Designing a website or web enabled app that can adjust and...
Responsive VS Mobile VS Native App 
@koombea #BeResponsive
90% of people use multiple screens 
sequentially. (Source: uberflip) 
66% of smartphone & tablet users are 
frustrated wit...
When responsive? 
@koombea #BeResponsive
Mobile Version 
Pro’s: 
- Dedicated Mobile Version. Requires you to build 
a separate site. 
- Optimize for mobile. 
- Les...
Native App 
Pro’s: 
- Dedicated marketplace. Ex: App Store or 
Google Play. 
- Makes better use of device hardware & new 
...
Responsive 
Pro’s: 
- Requires you to build only one site. 
- Lower dev cost. 
- Long run: Is future-friendlier. 
- Less m...
Should you build for responsive? 
1. Marketing Site (Usually yes). 
2. Web App (Depends). 
3. E-commerce (Usually yes). 
@...
Shopify, Zappos, Amazon, eBay
My Artisan Ink Responsive Case 
Study 
Click here to see the Responsive Site built by Koombea- have fun!
Web Responsive Design Strategies 
- Graceful degradation. 
- Mobile last 
- Progressive enhancement 
- Mobile first 
- Con...
Responsive strategies 
Graceful Degradation 
Progressive Enhancement 
@koombea #BeResponsive
Ways to build for Responsive 
Detection tactics: 
- Device/OS/Browser detection (unreliable). 
- Feature detection. 
- Wha...
Building Responsive Websites 
Rick Nelson 
Technical Solutions Architect 
@koombea #BeResponsive 
Click here to email Rick
Web performance matters
Your users are in charge 
• You may own the content and features, but your users are the ones in charge 
• They alone deci...
Every user counts 
It doesn’t matter how busy your site is: 
- Flash Crowd 
- HTTP Post Attack, Slow Read Attack 
… they d...
The Impact of Mobile Users 
• More Users 
• With the ability to access your app at any time from anywhere 
• Events can ex...
Mobile Apps vs. Mobile Web 
• Mobile apps use API calls not web pages 
• More short requests 
• More connections 
• Suppor...
What can you do?
No Silver Bullet
4 opportunities to optimize 
Internet 
Python 
Ruby 
node.js 
Java 
Client Device Network Application Stack Code
Improve performance on Client Device 
• Reduce HTTP GETs and bandwidth: 
– Merge and reduce resources 
– Smart control of ...
Improve performance on the Network 
• Faster resource downloads: 
– Content Delivery Network 
– Google SPDY 
– OCSP stapli...
Improve performance of the Application 
Stack 
• What do we mean? 
Internet 
• The ‘Application Stack’ bridges HTTP traffi...
Four steps to a faster application 
Optimize HTTP processing 
Scale the backend servers 
Cache common responses 
Be smart ...
What is the challenge with HTTP? 
Hundreds of 
concurrent 
connections… 
require hundreds of 
heavyweight threads or 
proc...
Hundreds of 
concurrent 
connections… 
handed by a small number of 
multiplexing processes,… 
typically one process 
per c...
NGINX transforms application 
performance 
Internet Slow, high-concurrency N 
internet-side traffic 
Fast, efficient 
loca...
Scale the Backend Servers 
Load Balancing 
Internet N 
þ 
Improved 
Applica@on 
Availability 
þ 
Management 
þ 
Increas...
Cache common responses 
GET 
/logo.png 
GET 
/logo.png 
Hybrid 
on-­‐disk 
and 
in-­‐memory 
cache 
N+
What about dynamic content? 
• Some 
content 
appears 
to 
be 
un-­‐cacheable 
• But 
oMen 
even 
dynamic 
content 
can 
b...
Be smart with your traffic 
• Priori@ze 
and 
rate-­‐limit 
requests 
and 
responses 
– Queues, 
Rate-­‐limits, 
Honeypots...
A NGINX Mobile Example 
• Rou@ng 
desktop 
and 
mobile 
clients 
differently 
– Present 
different 
pages 
to 
mobile 
cli...
NGINX Plus 
• NGINX 
Open 
Source 
+ 
Advanced 
Features 
– For 
Example: 
• Applica@on 
Health 
Checks 
• Session 
Persis...
Closing thoughts 
• Applica@on 
Performance 
is 
key 
to 
Applica@on 
Success 
• Four 
areas 
you 
should 
focus 
on: 
– T...
Find out more 
• hep://nginx.com 
– Webinars, 
The links are clickable! 
Documenta@on, 
Free 
Trial 
• hep://nginx.org 
– ...
@koombea 
Tweet us out! We'd appreciate it! 
386 Park Ave South, 10th Floor 
New York, NY 10016 
625 2nd St., Suite 280 
S...
How to be Successful with Responsive Sites (Koombea & NGINX) - English
Prochain SlideShare
Chargement dans…5
×

How to be Successful with Responsive Sites (Koombea & NGINX) - English

4 693 vues

Publié le

Can't decide if your organization should build a mobile app or responsive website? Do you interact with consumer-facing products or large scale developments?

This guide gives you an idea of what Responsive is, why you should use it, and then DIGS deep into the technical aspect and how to optimize for performance.

By: David Bohorquez & Rick Nelson

Publié dans : Design, Internet, Logiciels
  • Relationship guru Justin Sinclair reveals his secret tactics to help get your Ex back! Learn how ▲▲▲ http://t.cn/R50e2MX
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • How to use "The Scrambler" ot get a girl obsessed with BANGING you... ♣♣♣ https://tinyurl.com/y52uv4vq
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

How to be Successful with Responsive Sites (Koombea & NGINX) - English

  1. 1. BE RESPONSIVE WITH YOUR SITE @koombea #BeResponsive
  2. 2. Speakers David Bohorquez Front End Lead Koombea Rick Nelson Technical Solutions Architect NGINX @koombea #BeResponsive
  3. 3. DAVID: Agenda - What is responsive & why? - Which option should you choose? - Web responsive Design Strategy - Ways to build for responsive RICK: - Why performance matters - The impact of mobile - Optimizing for performance @koombea #BeResponsive
  4. 4. What is responsive & why? - Came out a couple of years ago. - Designing a website or web enabled app that can adjust and perform optimally for whichever device accesses it. - Mobile usage increased & became a necessity. @koombea #BeResponsive
  5. 5. Responsive VS Mobile VS Native App @koombea #BeResponsive
  6. 6. 90% of people use multiple screens sequentially. (Source: uberflip) 66% of smartphone & tablet users are frustrated with page load times. (Source SEO social) Click here to tweet it! @koombea #BeResponsive Click here for the stat!
  7. 7. When responsive? @koombea #BeResponsive
  8. 8. Mobile Version Pro’s: - Dedicated Mobile Version. Requires you to build a separate site. - Optimize for mobile. - Less/Simpler work. Better for rapid mobile presence. Con’s: - Maintain 2 separates sites. - 2 URLs duplicates SEO (good or bad). @koombea #BeResponsive
  9. 9. Native App Pro’s: - Dedicated marketplace. Ex: App Store or Google Play. - Makes better use of device hardware & new features. Better performance. Con’s: - Requires one App for each different platform. - Process of submission (takes a long time). - More money.
  10. 10. Responsive Pro’s: - Requires you to build only one site. - Lower dev cost. - Long run: Is future-friendlier. - Less maintenance. - Only worry about one site. - Faster deploy Con’s: - Requires more complex work. - Because you have to build for every device it is accessed from.
  11. 11. Should you build for responsive? 1. Marketing Site (Usually yes). 2. Web App (Depends). 3. E-commerce (Usually yes). @koombea #BeResponsive
  12. 12. Shopify, Zappos, Amazon, eBay
  13. 13. My Artisan Ink Responsive Case Study Click here to see the Responsive Site built by Koombea- have fun!
  14. 14. Web Responsive Design Strategies - Graceful degradation. - Mobile last - Progressive enhancement - Mobile first - Content first @koombea #BeResponsive
  15. 15. Responsive strategies Graceful Degradation Progressive Enhancement @koombea #BeResponsive
  16. 16. Ways to build for Responsive Detection tactics: - Device/OS/Browser detection (unreliable). - Feature detection. - What the device detection should be identifying are the capabilities of the device that is being used to access the website so that the appropriate elements of the site can be returned to the user. @koombea #BeResponsive Click here to check out Modernizr!
  17. 17. Building Responsive Websites Rick Nelson Technical Solutions Architect @koombea #BeResponsive Click here to email Rick
  18. 18. Web performance matters
  19. 19. Your users are in charge • You may own the content and features, but your users are the ones in charge • They alone decide: Which sites they visit The apps they need • If you can’t provide your users with what they need, when they need it, they will go elsewhere. • If your page has not loaded within 3 seconds, up to 40% of your users will give up on you. The performance they’ll tolerate When to give up Click here to read more stats.
  20. 20. Every user counts It doesn’t matter how busy your site is: - Flash Crowd - HTTP Post Attack, Slow Read Attack … they don’t know or care! “We want you to be able to flick from one page to another as quickly as you can flick a page on a book. So we’re really aiming very, very high here… at something like 100 milliseconds.” Urs Hölzle, Senior VP Operations, Google
  21. 21. The Impact of Mobile Users • More Users • With the ability to access your app at any time from anywhere • Events can explode and cause massive spikes – App upgrade – News event • Slower connections • Lower Bandwidth
  22. 22. Mobile Apps vs. Mobile Web • Mobile apps use API calls not web pages • More short requests • More connections • Support for Multiple App versions Your server needs to handle millions of connections delivering short responses very quickly
  23. 23. What can you do?
  24. 24. No Silver Bullet
  25. 25. 4 opportunities to optimize Internet Python Ruby node.js Java Client Device Network Application Stack Code
  26. 26. Improve performance on Client Device • Reduce HTTP GETs and bandwidth: – Merge and reduce resources – Smart control of client caching • Rearrange resources to speed up rendering • Your options: – Preprocess in Asset Pipeline – In-app (Google Pagespeed) – As-a-Service
  27. 27. Improve performance on the Network • Faster resource downloads: – Content Delivery Network – Google SPDY – OCSP stapling • Your options: – Use a CDN – Use NGINX+
  28. 28. Improve performance of the Application Stack • What do we mean? Internet • The ‘Application Stack’ bridges HTTP traffic to your code, APIs and Static content Your code: • Python, Ruby, node.js, Java APIs • Internal and External APIs “Static” Content • On disk • In database HTTP
  29. 29. Four steps to a faster application Optimize HTTP processing Scale the backend servers Cache common responses Be smart with your traffic
  30. 30. What is the challenge with HTTP? Hundreds of concurrent connections… require hundreds of heavyweight threads or processes… competing for limited CPU and memory Client-side: Slow network Multiple connections HTTP Keepalives Server-side: Limited concurrency
  31. 31. Hundreds of concurrent connections… handed by a small number of multiplexing processes,… typically one process per core NGINX architecture
  32. 32. NGINX transforms application performance Internet Slow, high-concurrency N internet-side traffic Fast, efficient local-side traffic • NGINX has almost-unlimited concurrency – Transforms worst-case traffic to best-case – Maximizes application utilization
  33. 33. Scale the Backend Servers Load Balancing Internet N þ Improved Applica@on Availability þ Management þ Increased Capacity þ Advanced techniques e.g. A|B tes@ng Why? þ DNS Round Robin þ Hardware L4 load balancer þ SoMware Reverse Proxy LB þ Cloud solu@on How?
  34. 34. Cache common responses GET /logo.png GET /logo.png Hybrid on-­‐disk and in-­‐memory cache N+
  35. 35. What about dynamic content? • Some content appears to be un-­‐cacheable • But oMen even dynamic content can be cached – Use cache purging – Use fast cache @mes
  36. 36. Be smart with your traffic • Priori@ze and rate-­‐limit requests and responses – Queues, Rate-­‐limits, Honeypots, ACLs • Use NGINX Plus to its full poten@al
  37. 37. A NGINX Mobile Example • Rou@ng desktop and mobile clients differently – Present different pages to mobile clients map $http_user_agent $whichUpstream { ~iPhone mobile; ~Android mobile; default desktop; } Upstream mobile { server 192.168.100.100:8080; server 192.168.100.101:8080; } Upstream mobile { server 192.168.100.100:80; server 192.168.100.101:80; } server { listen 80; location / { proxy_pass http://$whichUpstream; } }
  38. 38. NGINX Plus • NGINX Open Source + Advanced Features – For Example: • Applica@on Health Checks • Session Persistence (S@cky Sessions) • Advanced Monitoring and Sta@s@cs • Cache Purge • HLS & HDS Video
  39. 39. Closing thoughts • Applica@on Performance is key to Applica@on Success • Four areas you should focus on: – The Applica@on – The Client – The Network – The Applica@on Stack • NGINX accelerates the Mobile Web and Mobile Apps • NGINX is used by 40% of the top 10,000 sites
  40. 40. Find out more • hep://nginx.com – Webinars, The links are clickable! Documenta@on, Free Trial • hep://nginx.org – Open Source, Community, Documenta@on • @nginx, @nginxorg • hep://nginx.com/nginxconf/
  41. 41. @koombea Tweet us out! We'd appreciate it! 386 Park Ave South, 10th Floor New York, NY 10016 625 2nd St., Suite 280 San Francisco, CA 94107 Cra 53 # 79-01 L-301 Barranquilla, Colombia Have questions? We are here to help. Email us at mvp@koombea.com #BeResponsive You can click here!

×