RESS

RESS:
An Evolution of Responsive Web Design

Dave Olsen, @dmolsen WVU University Relations - Web Refresh Pittsburgh, May 15 2012
slideshare.net/dmolsenwvu
programmer 9 years at wvu wvu has 30,000 students
What Ill Talk About
The Responsive Age What is RESS Two Server-side Solutions
The Responsive Age
Weve entered...
http://www.alistapart.com/articles/responsive-web-design/
http://ic.kr/p/9UmsCJ
TABLET WEB
DESKTOP WEB
Its All One Web
MOBILE WEB
http://modernizr.com
http://ic.kr/p/9Qp3A
The client is now in charge
Why Be Responsive
One...
http://ic.kr/p/5pGcyx
Why Be Responsive
One...
URL.
Why Be Responsive
One...
Set of Mark-up.
Why Be Responsive
One...
Deployment.
futurefriend.ly
Time to Party...
balloons
http://ic.kr/p/h6McT
Not so fast, my friends...
http://ic.kr/p/8x6b8X
RWD Challenges
Media...
Images & Video
RWD Challenges
3rd Party Content...

Ads & Social Widgets
RWD Challenges
One Set of Mark-up...

Double-edged Sword
Learned the hard way...

http://happyholidays.wvu.edu
Standards Process
Standards Process is Evolving

http://www.w3.org/community/respimg/
Bridging the Gap
Mind the Gap
http://ic.kr/p/638wPy
Existing Solutions
adaptive images website
http://adaptive-images.com/
Take a New Path
image of a path for showing RESS as a way forward
http://ic.kr/p/7cGN8g
What is RESS?
Responsive Web Design + Server Side Components

(I have no idea what becomes of the W, D, or C)
In a nutshell, RESS combines adaptive layouts with server side component (not full page) optimization. So a single set of page templates dene an entire Web site for all devices but key components within that site have device-class specic implementations that are rendered server side.
- Luke Wroblewski @lukew
http://www.lukew.com/ff/entry.asp?1392
...browser-detection can be used tohelp informan overall responsive design as opposed to being the be-allend-all for templating.
- Dave Olsen @dmolsen
http://bit.ly/wW91Ie
RESS is Good if...
If you want layout adjustments across devices. And optimization at the component level to increase performance or tune user experience. You trust server-side device detection with sensible defaults.
- Luke Wroblewski @lukew
Simple Example: Swapping a Header & Footer
Mobile View
Desktop View
<body> {{>header}} [...document content...] {{>footer}} </body>
<body> {{>header}} [...document content...] {{>footer}} </body>
index.html header.html mobile_header.html footer.html mobile_footer.html
index.html header.html mobile_header.html footer.html mobile_footer.html
M-ADVANCED
DESKTOP WEB
ress.dmolsen.com
MOBILE BASIC
RESS is in Its Infancy...
Infancy
http://ic.kr/p/7B7uyp
Untested
...and untested.
http://ic.kr/p/nNZRV
U. of Notre Dame Example
ND data
http://weedygarden.net/2012/05/a-case-for-ress/
Large Screen: 136 requests @ 2.7MB
ND data
Small Screen: 23 requests @ 291K

http://weedygarden.net/2012/05/a-case-for-ress/
bridge
We Still Need to Bridge the Gap

http://ic.kr/p/7FyCB2
Designers + Developers?
developers and designers
http://ic.kr/p/7Ma9n
How Do We Implement RESS?
So how would we implement?
http://ic.kr/p/5ATc7g
Skipping RWD
Responsive Web Design is easy
http://ic.kr/p/4YM8
Two Possible Solutions
Server-side Solutions
http://ic.kr/p/9jatna
#1 Browser Detection
Been Around a While
Old dog
http://ic.kr/p/bWQicm
Used Quite a Bit
82% of the Alexa 100 top sites use some form of server-side mobile device detection to serve content on their main website entry point.
- Ronan Cremin @xbs
http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/
Lots of Solutions
WURFL 51Degrees.mobi OpenDDR DeviceAtlas
Personal Fav*: ua-parser

node.js, Python, PHP, & Ruby libraries built upon a standard YAML le
* - I help maintain the project ;)
https://github.com/tobie/ua-parser/
Arms Race?
http://ic.kr/p/6RVLY2
Server-side Feature #2 Detection
Also in Its Infancy...
Infancy
http://ic.kr/p/7B7uyp
Untested
...and untested.
http://ic.kr/p/nNZRV
Can be Simple or Complex
Taking a Cue from Front-End Dev
Server-side Future Friendly?
Server-side Breakpoints
320px
640px
960px
Server-side Breakpoints
Simple Example: Setting a le path based on window.innerWidth

<script type="text/javascript"> function writeCookie(name, value) { //cookie code } // store the innerWidth of the window in a cookie writeCookie("RESS", window.innerWidth); </script>
http://www.netmagazine.com/tutorials/getting-started-ress
Simple Example: Setting a le path based on window.innerWidth

<?php // grab the cookie value $screenWidth = $_COOKIE[RESS]; // set the img path var if ($screenWidth <= 320) { $imgPath = 320; } else if ($screenWidth < 960) { $imgPath = 640; } else { $imgPath = 960; } // print out our image link print <img src=/rwd/images/.$imgPath./car.jpg alt=Car />; ?>
http://www.netmagazine.com/tutorials/getting-started-ress
Robust Feature Detection
http://detector.dmolsen.com
Simple Example: Inserting a video link

<?php
// require Detector to identify browser & populate $ua require("lib/Detector/Detector.php"); $html5Embed = "<iframe {...} ></iframe>"; $simpleLink = "Your browser doesn't appear to support HTML5. {...}"; // use the $ua properties to switch if ($ua->video->h264 || $ua->video->webm) { print $html5Embed; } else { print $simpleLink; }
! ! !
?>
http://detector.dmolsen.com/demo/ytembed/
Complicated Example: Templates Using Detector & Mustache
http://ress.dmolsen.com & click Learn more...
RESS Challenges
RESS isnt a silver bullet.

(anymore than RWD is)
RESS Challenges
Server-side feature detection can be spoofed.
RESS Challenges
Requires server-side languages.
RESS Challenges
Data needs to be separated from layout.
RESS Challenges
It is not only thedesignof the web site and thelayoutof content that needs to be adapted or enhanced; the idea of being responsive, adaptive and enhancing, must be implemented in the whole value chain.
- Jon Arnes Sters @jonarnes
http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/
The
The evolution of web development continues...
of Web Development Continues

http://ic.kr/p/3Q4To4
Questions or comments?
On Twitter @dmolsen...
Or at dmolsen.com...
Thank You

RESS

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

RESS

Hochgeladen von

Copyright:

Verfügbare Formate

RESS:

An Evolution of Responsive Web Design

programmer 9 years at wvu wvu has 30,000 students

What Ill Talk About

The Responsive Age What is RESS Two Server-side Solutions

The Responsive Age

Its All One Web

The client is now in charge

Not so fast, my friends...

3rd Party Content...

One Set of Mark-up...

Learned the hard way...

Standards Process is Evolving

Bridging the Gap

Mind the Gap

adaptive images website

Take a New Path

image of a path for showing RESS as a way forward

Responsive Web Design + Server Side Components

RESS is Good if...

Simple Example: Swapping a Header & Footer

Simple Example: Swapping a Header & Footer

<body> {{>header}} [...document content...] {{>footer}} </body>

Simple Example: Swapping a Header & Footer

<body> {{>header}} [...document content...] {{>footer}} </body>

Simple Example: Swapping a Header & Footer

index.html header.html mobile_header.html footer.html mobile_footer.html

Simple Example: Swapping a Header & Footer

index.html header.html mobile_header.html footer.html mobile_footer.html

RESS is in Its Infancy...

U. of Notre Dame Example

Large Screen: 136 requests @ 2.7MB

Small Screen: 23 requests @ 291K

We Still Need to Bridge the Gap

developers and designers

How Do We Implement RESS?

So how would we implement?

Responsive Web Design is easy

Two Possible Solutions

Been Around a While

Used Quite a Bit

WURFL 51Degrees.mobi OpenDDR DeviceAtlas

Personal Fav*: ua-parser

* - I help maintain the project ;)

Server-side Feature #2 Detection

Also in Its Infancy...

Can be Simple or Complex

Taking a Cue from Front-End Dev

Server-side Future Friendly?

Simple Example: Setting a le path based on window.innerWidth

Simple Example: Setting a le path based on window.innerWidth

Robust Feature Detection

Robust Feature Detection

Simple Example: Inserting a video link

Robust Feature Detection

Complicated Example: Templates Using Detector & Mustache

http://ress.dmolsen.com & click Learn more...

RESS isnt a silver bullet.

Server-side feature detection can be spoofed.

Requires server-side languages.

Data needs to be separated from layout.

The evolution of web development continues...

of Web Development Continues

Das könnte Ihnen auch gefallen