Send to a Friend

ETpro's avatar

Know any websites that serve the same content successfully on big desktop monitors and on hand-held devices?

Asked by ETpro (34605points) May 30th, 2012

The basic design technique is called liquid design, or fluid design. A drastic oversimplification is to say it’s done by declaring HTML element widths in percentages instead of fixed widths for block-level elements. There is much more to it in practice. For instance, the postage-stamp sized image that might be the best fit for a smart-phone is going to look lost in space on a giant, wide-screen desktop monitor.

But the basic idea is straightforward and packs powerful benefits. It’s head and shoulders easier to maintain and update than two separate sites, one for desktops and the other for hand-helds. And it even can adapt to mobile devices that can be rotated 90% with position sensing, thus switching the aspect ratio of the display window. There is never any risk of content on the desktop and hand-held sites getting out of sync, since they are one and the same. Often, mobile-site designs restrict content such that what’s available to desktops isn’t always available on a palmtop or hand-held device. The drive of the Web is toward accessibility across all devices. Technology should be aimed at uniting, not dividing.

Can you point me to any sites that you have visited that look nice and seem to provide the same content on a big desktop monitor or a cell phone? I’m beginning to design for this demand, and I’d love to see some examples of sites that manage true liquid design while preserving a rich Web experience that’s graphically compelling.

Using Fluther

or

Using Email

Separate multiple emails with commas.
We’ll only use these emails for this message.