Using Responsive Design while utilizing server side components for a more maintainable site and a better user experience.

1. The Next Step in Responsive Design:
RESS

2. A Bit About Me
 Web Developer - Resource Associates Corp
 Adjunct Instructor
 Designer/Dev for several marketing agencies

3. What is RESS?
 Responsive Design with Server Side Components
 Originally outlined in an article by LukeW
 RESS brings together the best of client-side and server-
side responsive solutions
 Combines responsive layouts with server side components
for device optimization
 Only serve the appropriate content as determined by the
device

4. Server-side Techniques
 Serve device specific page layouts
 Resource compression
 Dynamic content manipulation

5. Server-side Techniques
 The Benefits
 Allows for a fully device-optimized site/application
 Institutes server-side logic instead of client-side
 The Deficiencies
 Relies on URL redirects
 Poor Maintainability – duplicative code base
 Multiple URL Hierarchies can create poor SEO performance

6. Client-side Responsive
Techniques
 Flexible Grid System
 Media Queries
 Javascript Libraries**

7. Client-side Responsive
Techniques
 The Benefits:
 Maintainability - Single code base
 SEO Benefit - Single Site URL hierarchy
 The Deficiencies:
 Can be very resource intensive
 Relies on browser/device to construct the page

8. Improvements of RESS
 Allows device driven content
 Relies on the server to construct the page prior to
rendering
 Maintains a single code base and URL structure
 All this allows for increased site performance and a more
consistent user experience

9. User-agent Detection
 Uses both the browser string and OS string to determine
what device is being used.
 PHP inherently comes with get_browser(), but will only
work if browscap.ini is set up in your php.ini file – not
normally the case!

10. PHP Mobile Class
 Project by Serban Ghita(Github)
 Uses User-Agent String along with specific HTTP headers
to detect user’s device
 Can be installed via:
 Wordpress plugin
 Composer
 Coded into the functions.php file

11. PHP Mobile Class

12. PHP Mobile Class

13. Isn’t User Agent Detection
Bad?
 Depends
 Historically used to workaround browser bugs
 User Agent Detection is not a science
 Yesteryear, some browsers changed their UA strings to look
like other browsers(I’m looking at you IE!!)
 Modern browsers are more truthful.
 Issues with Win8 Laplets

14. GZIP
 Enables file compression from the server.
 Most, but not all, modern browsers accept compressed
file – but must be told to do so.
 If browser does not, mod is ignored.
 Two ways to implement: HTACCESS and PHP

15. GZIP - HTACCESS

16. GZIP - PHP
 ob_start()
 Enable Output buffering – when turned on, nothing is sent
from the script other than headers, instead output is stored in
an internal buffer
 Use the ob_gzhandler callback to gz-encoded
data(compressed data) to the browser. Automatically
determines what content encoding is accepted by browser and
sends
 Ob_gzhandler cannot be used with
zlib.output_compression(which is preferable but must be
enable in the php.ini file or Apache config.)

17. GZIP - PHP

18. RESS.io
 Currently in private BETA
 Adds common Server Side components
 Provides an API for integrating with your code

19. RESS.io
 Components Include:
 Really Simple Device Detection API
 GZIP compression
 HTTP Request Reduction – semi-intelligently combines
CSS and JS files
 Images – auto-scales images on the server and serves the
appropriate image to the device as well as display different
images to different devices(Image Art Direction)

20. Conclusion
 RESS marries the flexible layout of client-side with device
driven content of server-side
 Benefits the dev by allowing a single codebase as well as
single URL structure for improved SEO
 Benefits the user by providing a site with increased
performance as well as a more consistent user experience

21. Resources
 LukeW Article: http://www.lukew.com/ff/entry.asp?1392
 Image Art Direction - http://blog.cloudfour.com/a-framework-for-
discussing-responsive-images-solutions/
 Mobile Detect:
 https://github.com/serbanghita/Mobile-Detect
 http://mobiledetect.net/
 Learn to read user agent strings - http://www.useragentstring.com/
 PHP get_browser - http://php.net/manual/en/function.get-browser.php
 PHP GZIP - http://php.net/manual/en/function.ob-gzhandler.php

22. Questions?
 Anthony Laurence
 http://www.anthonylaurence.net
 Email: anthony@anthonylaurence.net
 Twitter: @anthonylweb