Successfully reported this slideshow.
Your SlideShare is downloading. ×

The Next Step in Responsive - RESS

The Next Step in Responsive - RESS

Download to read offline

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

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

More Related Content

The Next Step in Responsive - RESS

  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 user’s 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. 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. 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

Editor's Notes

  • Learn to read user agent strings - http://www.useragentstring.com/

  • Mobile Detect: https://github.com/serbanghita/Mobile-Detect
    http://mobiledetect.net/
  • Image Art Direction - http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/

×