Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Next Step in Responsive - RESS

1,813 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

×