Know any websites that serve the same content successfully on big desktop monitors and on hand-held devices?
Asked by
ETpro (
34605
)
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.
Observing members:
0
Composing members:
0
9 Answers
None spring to mind, but I’m curious if others have encountered such sites.
It’s an interesting concept, and you could probably make a mint if you build such a service!
We’re an OSX/iOS household, if you need beta testers.
@hearkat I’ll definitely take you up on that. Busy as I am, this will take awhile, but I’m going to do the first test bed on a Yahoo! Store site of my own.
A lot of sites now-a-days are using mobile versions. Such a practice is ideal because you can present the site exactly as you want it to appear on a mobile device, as well as stripping out elements that wouldn’t help small-screen visitors find the content you want them to jump to quickly. Smartphone users are used to a menu-based and tab-based interface. So in essence, you can really steer customers through your navigation more easily in a mobile version. It’s simply more appealing than scaling a full website designed for a big monitor to be functional on a mobile platform, it simply doesn’t meet the usability conventions optimally.
You can find good examples of this in most of the major websites, and the geeky ones (such as Woot, Engadget, Reddit, etc).
@gambitking I am well aware of the 2-site or multiple site approach using browser sniffing and reading screen resolution to determine which site to serve. But, for all the reasons I listed in the question details, I don’t think that’s the direction for the future for most sites. For some, it is the only reasonable solution. But for most, I think the direction of the future will be flkuid design and uniting, rather dividing.
@silverfly southwest.com and the other 3 are not liquid design. They appear to be using browser sniffing to dilever optimized content depending on what they think your setup is. But re-size your browser window and they stay fixed width and content gets pushed off the right side, requiring deadly horizontal scrolling. LukeW.com is liquid design, but pretty darn spartan in its appearance.
Here’s one of my designs that I did ages ago, but that squeezes down at least to fit a palmtop. Re-size the browser window on http://www.softsert.com/ and watch how it adapts in liquid fashion. We were not trying to fit cell phones with that one, but for the target devices, I think it escapes the super-spartan look that makes liquid design and narrow viewing panes easy to accommodate.
@ETpro Ah, gotcha… Yes, yours is fluid. You might want to look into doing media queries to serve up different CSS when your viewport becomes smaller than a certain amount. At some point, you’ll want to break up softsert into one column. Four Kitchens does the liquid design well.
@silverfly I might float that idea by the site owner. That site was done back in 2005 and targeting cell phones wasn’t a big issue then. But I could do that now and make accessible across the full spectrum from small handheld up through wide screen.
A search for responsive design should probably turn up something. It’s not fluid design in the sense that the size of things adapts to screen size, but it adapts the layout (and also to some extent size) to the screen size. I did something for a site I made a while ago for a small event: http://www.ragstock.nl/
It was a bit tacked on though, so it does not degrade well to the smallest of screen sizes, i.e. not every smartphone is large enough (also, it does not really work well in IE 8 and earlier). However, it is based on HTML 5 Boilerplate, which includes support for it by default, so I guess their site is responsive as well: http://html5boilerplate.com/
@Vincentt Thanks for the links. HTML 5 Boilerplate does an awesome job of scaling. Of course, it isn’t anything like what the typical eCommerce site owner wants for a look. But for just delivering technical data, it’s truly device independent.
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
