

Responsive design and JavaScript - tbassetto
http://www.quirksmode.org/blog/archives/2011/09/responsive_desi.html

======
thaumaturgy
I'll stick my neck out here and say:

No.

"Graceful degradation" and "progressive enhancement" have mostly been utter
failures. Yes, they're possible, and a few sites and designers even manage to
do them well without spending wads of money. But, for everyone else, it just
represents an additional layer of effort without any direct benefit to
themselves.

There's a point at which we should accept that our pontifications about the
"ideal" design, engineered for every conceivable device and screen resolution
and software platform, is just completely impractical for the majority of
designers and developers.

Developers already are expected to make sites work:

\- with and without Javascript;

\- with IE 6 - 8, Firefox 2 - 7, Safari, Opera, Chrome, and every other two-
bit browser out there;

\- with readable text and fonts on systems that may or may not have particular
or even common fonts installed, including Linux which can render even decent
fonts nearly illegible and including the font-weight differences between MacOS
and Windows;

\- on screen resolutions varying from 800 x 600 to OMG x AreYouKiddingMe,
without horizontal scrolling or wasting lots of screen real estate;

\- without compromising people with disabilities or screen readers.

Did I miss anything?

I think these are unrealistic expectations, and I submit as evidence the great
majority of websites online -- including the professionally-designed ones --
which fail catastrophically on at least one of those points.

Now, we're to be expected to make these same sites, using the same general
design, work on devices with ittybitty screens and radically different
physical interfaces?

No.

Here's what I hope happens instead: I hope that the concept of the CMS gets
extended a little bit and begins to do a better job of abstracting the content
from the design, so that sites can easily manage two or more completely
different presentations designed for specific devices. (I understand Wordpress
already does something like this?)

You'll have your blog or what-have-you, and your blog will have a mobile
version, and a desktop version, and they will be completely and totally 100%
separated from and independent of each-other.

Because any attempts to make a desktop design work at all on mobile devices
without compromising the advantages of the desktop is going to result in much
gnashing of teeth.

edit: I meant to add that I think the "right" way to do this is to continue to
make the desktop version of a site the default, at least for now, and then
check the user-agent of the request _on the server_. Let the server handle
which layout to serve up, not Javascript, and if a mobile user changes the
user-agent on their mobile browser to something which will break sites, then
they should expect to get broken sites.

~~~
rimantas

      > Now, we're to be expected to make these same sites, using the same general design,
      > work on devices with ittybitty screens and radically different physical interfaces?
    

No, we are not expected that. However you can have the same theme for your
desktop, tablet, mobile version and _the same_ content.

    
    
      > You'll have your blog or what-have-you, and your blog will have a mobile version,
      > and a desktop version, and they will be completely and totally 100% separated from
      > and independent of each-other.
    

Oh no. This failed miserably with "accessible versions" of sites before. In
most cases the moment you start to separate your content you already blew it.
We already have tools to separate content and markup from design. We have CSS
media queries. There are some problems (e.g. images), but otherwise we can
already make it work. Google for responsive web design, adaptive web design:
there is something to learn.

    
    
      > I think the "right" way to do this is to continue to make the desktop version of a site
      > the default
    

Take a look: <http://www.lukew.com/ff/entry.asp?933>

    
    
      > and then check the user-agent of the request on the server
    

Sometimes useful, bet generally a bad idea.

    
    
      > Let the server handle which layout to serve up, not Javascript
    

That's CSS job, not Javascript's:
<http://www.alistapart.com/articles/responsive-web-design/>

~~~
thaumaturgy
Thanks, I somehow didn't know about css media queries. That _almost_ makes CSS
an appropriate solution to this problem.

Almost.

------
joeybaker
One thing the OP overlooks is that high res images allow for resolution to be
maintained when the user does pinch-to-zoom. Perhaps, downloading these larger
images is actually a necessity.

~~~
stephenhandley
Really great point. Maybe load the low res version initially and then
predictively load higher resolutions as the gesture proceeds and fade between
them to compensate for the latency.

------
stephenhandley
I prefer designing desktop and mobile in parallel rather than one before the
other. Cycling between the two seems to bring up the constraints on the ui and
compromises that need to be made more quickly than proceeding one to the
other. Wrote more here: <http://tldr.person.sh/resource-limited-responsive-
design>

------
rwolf
I like the sound of this, but I'm stuck on: "Are we OK with serving noscript
desktop users what is essentially the mobile version of our site, small images
and all?"

~~~
sudont
Small/low-res images? Possibly.

Mobile-only? No. There are media selectors for device widths.

~~~
rwolf
Interesting! Thanks for pointing out screen-size media selectors. Given how on
top of CSS quirksmode usually is, I wonder if there is some problem with using
screen-size media selectors on mobile devices.

------
brokentone
Ethan Marcotte and PPK going back and forth about responsive design? Our
children will look back at this post in awe.

