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
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 users
device Can be installed via: Wordpress plugin Composer Coded into
the functions.php file
11. PHP Mobile Class
12. PHP Mobile Class
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. 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: [email protected] Twitter: @anthonylweb