Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Swift for back end: A new generation of full stack languages?
Download to read offline and view in fullscreen.



Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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; server; } Upstream mobile { server; server; } 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:// – Webinars, The links are clickable! Documenta@on, Free Trial • hep:// – Open Source, Community, Documenta@on • @nginx, @nginxorg • hep://
  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 #BeResponsive You can click here!
  • LydiaCrestani1

    Jul. 9, 2017
  • ChenBirdie

    Mar. 24, 2017
  • giannipolito

    Mar. 13, 2016
  • KayChang9

    Jan. 14, 2016
  • JunshanHe

    Dec. 17, 2015
  • ruo91

    Jul. 21, 2015
  • ssuser6b53da

    Jul. 8, 2015
  • manjeetsinghverma6

    Jan. 15, 2015
  • luciaabe

    Dec. 1, 2014
  • toti77

    Nov. 26, 2014
  • diospyrosfuentes

    Nov. 13, 2014
  • rankingbyseo

    Nov. 13, 2014
  • moonjeehye3

    Nov. 6, 2014
  • GiihBastos

    Nov. 5, 2014
  • zeroants

    Oct. 30, 2014
  • gkgkgkgk11

    Oct. 26, 2014
  • Gonnector

    Oct. 19, 2014
  • gedwarp

    Oct. 19, 2014
  • ssuser20ef88

    Oct. 17, 2014
  • NoopurTripathi

    Oct. 16, 2014

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


Total views


On Slideshare


From embeds


Number of embeds