How to be Successful with Responsive Sites (Koombea & NGINX) - English
46 likes5,163 views
The document discusses the importance of responsive web design, comparing it with mobile and native apps, highlighting their pros and cons. It stresses the necessity of optimizing websites and applications for various devices due to the increasing mobile usage and performance demands from users. Strategies for building responsive designs and improving website performance are also outlined, emphasizing the significance of technologies like nginx in enhancing application efficiency.
How to be Successful with Responsive Sites (Koombea & NGINX) - English
- 1. BE RESPONSIVE WITH YOUR SITE @koombea #BeResponsive
- 2. Speakers David Bohorquez Front End Lead Koombea Rick Nelson Technical Solutions Architect NGINX @koombea #BeResponsive
- 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. 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. Responsive VS Mobile VS Native App @koombea #BeResponsive
- 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. When responsive? @koombea #BeResponsive
- 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. 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. 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. Should you build for responsive? 1. Marketing Site (Usually yes). 2. Web App (Depends). 3. E-commerce (Usually yes). @koombea #BeResponsive
- 12. Shopify, Zappos, Amazon, eBay
- 13. My Artisan Ink Responsive Case Study Click here to see the Responsive Site built by Koombea- have fun!
- 14. Web Responsive Design Strategies - Graceful degradation. - Mobile last - Progressive enhancement - Mobile first - Content first @koombea #BeResponsive
- 15. Responsive strategies Graceful Degradation Progressive Enhancement @koombea #BeResponsive
- 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. Building Responsive Websites Rick Nelson Technical Solutions Architect @koombea #BeResponsive Click here to email Rick
- 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. 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. 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. 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. What can you do?
- 24. No Silver Bullet
- 25. 4 opportunities to optimize Internet Python Ruby node.js Java Client Device Network Application Stack Code
- 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. Improve performance on the Network • Faster resource downloads: – Content Delivery Network – Google SPDY – OCSP stapling • Your options: – Use a CDN – Use NGINX+
- 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. Four steps to a faster application Optimize HTTP processing Scale the backend servers Cache common responses Be smart with your traffic
- 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. Hundreds of concurrent connections… handed by a small number of multiplexing processes,… typically one process per core NGINX architecture
- 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. 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. Cache common responses GET /logo.png GET /logo.png Hybrid on-‐disk and in-‐memory cache N+
- 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. 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. 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; } }
- 39. 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
- 40. 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
- 41. 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/
- 42. @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!