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

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

18. Web performance matters

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!