1. 1. The Next Step in Responsive Design: RESS
2. 2. A Bit About Me Web Developer - Resource Associates Corp Adjunct Instructor Designer/Dev for several marketing agencies
3. 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. 4. Server-side Techniques Serve device specific page layouts Resource compression Dynamic content manipulation
5. 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. 6. Client-side Responsive Techniques Flexible Grid System Media Queries Javascript Libraries**
7. 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. 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. 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. 10. PHP Mobile Class Project by Serban Ghita(Github) Uses User-Agent String along with specific HTTP headers to detect users device Can be installed via: Wordpress plugin Composer Coded into the functions.php file
11. 11. PHP Mobile Class
12. 12. PHP Mobile Class
13. 13. Isnt 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(Im looking at you IE!!) Modern browsers are more truthful. Issues with Win8 Laplets
14. 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. 15. GZIP - HTACCESS
16. 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. 17. GZIP - PHP
18. 18. RESS.io Currently in private BETA Adds common Server Side components Provides an API for integrating with your code
19. 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. 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. 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. 22. Questions? Anthony Laurence http://www.anthonylaurence.net Email: anthony@anthonylaurence.net Twitter: @anthonylweb