The Next Step in Responsive Design:
RESS
A Bit About Me
 Web Developer - Resource Associates Corp
 Adjunct Instructor
 Designer/Dev for several marketing agenci...
What is RESS?
 Responsive Design with Server Side Components
 Originally outlined in an article by LukeW
 RESS brings t...
Server-side Techniques
 Serve device specific page layouts
 Resource compression
 Dynamic content manipulation
Server-side Techniques
 The Benefits
 Allows for a fully device-optimized site/application
 Institutes server-side logi...
Client-side Responsive
Techniques
 Flexible Grid System
 Media Queries
 Javascript Libraries**
Client-side Responsive
Techniques
 The Benefits:
 Maintainability - Single code base
 SEO Benefit - Single Site URL hie...
Improvements of RESS
 Allows device driven content
 Relies on the server to construct the page prior to
rendering
 Main...
User-agent Detection
 Uses both the browser string and OS string to determine
what device is being used.
 PHP inherently...
PHP Mobile Class
 Project by Serban Ghita(Github)
 Uses User-Agent String along with specific HTTP headers
to detect use...
PHP Mobile Class
PHP Mobile Class
Isn’t User Agent Detection
Bad?
 Depends
 Historically used to workaround browser bugs
 User Agent Detection is not a s...
GZIP
 Enables file compression from the server.
 Most, but not all, modern browsers accept compressed
file – but must be...
GZIP - HTACCESS
GZIP - PHP
 ob_start()
 Enable Output buffering – when turned on, nothing is sent
from the script other than headers, in...
GZIP - PHP
RESS.io
 Currently in private BETA
 Adds common Server Side components
 Provides an API for integrating with your code
RESS.io
 Components Include:
 Really Simple Device Detection API
 GZIP compression
 HTTP Request Reduction – semi-inte...
Conclusion
 RESS marries the flexible layout of client-side with device
driven content of server-side
 Benefits the dev ...
Resources
 LukeW Article: http://www.lukew.com/ff/entry.asp?1392
 Image Art Direction - http://blog.cloudfour.com/a-fram...
Questions?
 Anthony Laurence
 http://www.anthonylaurence.net
 Email: anthony@anthonylaurence.net
 Twitter: @anthonylweb
Upcoming SlideShare
Loading in …5
×

The Next Step in Responsive - RESS

1,301 views

Published on

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

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,301
On SlideShare
0
From Embeds
0
Number of Embeds
178
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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/
  • 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

    ×