1

I've noticed some websites are frequently using a very specific semi-responsive technique but I'm not sure what to call it. Here are 2 examples:

Example 1: http://www.firestonetire.com

Example 2: http://www.bridgestonetire.com and http://m.bridgestonetire.com/

In both examples they have a "fixed width" desktop site, but at mobile sizes they have a fluid design. In example 1, it's all the same site, whereas in example 2, it's a separate site for mobile.

Is there a name for this? Essentially they are recognizing that mobile phones have a variety of sizes but are not really addressing screens in the mid-size tablet range very well. I've been asked by others if this is responsive and I can't really give a good answer other than "not really, but sort of."

  • 2
    I would say the name for the first one is still 'responsive' design, just not done very well. (responsive design is a technical implementation for CSS media queries detecting a certain viewport width and presenting content differently, nothing more than that. In that case it triggers a liquid layout at a certain breakpoint. RWD is just one technique in the bigger picture that is Adaptive Design, but that's a bigger topic really). The other version is just a website and a separate mobile site. Nothing responsive or adaptive there at all. – JonW May 28 '14 at 15:31
  • Based on your site traffic, is it okay or acceptable to focus RWD on mobile and desktop first and then increment to tablets? If my tablet (7 inch portrait will be the worst experience) viewers are say 0.1%, mobile 29.1%, desktop 70%, is it okay if I do example 1 first? – Balaji Natarajan Sep 26 '14 at 18:23
  • Answering your question in one word: Adaptive layout. – Infiniteloop Nov 25 '14 at 15:44
  • If my answer was helpful to you, please accept it :-) – SwankyLegg Dec 3 '14 at 17:36
1

They're both still responsive design (thanks John).

I'd like to expand, noting that Bridgestone's site does a mobile redirect. The advantage to this technique is that you can serve entirely different content. By doing so, you can decrease the page load significantly.

The potential risk is, as you mentioned, an issue with tablets and 'in-between' devices.

A really UI-minded developer will be cognizant of both the usability and technical considerations of mobile.

If you'd like me to expand upon the nuts and bolts of responsive, I'd be happy to update my answer. Hope this helps.

  • Thanks -- I personally understand the technical background, I'm just looking for a short-hand way to describe this to people/clients who don't know the tech side. Most people I work with understand responsive to mean a site that flexes to be optimized for all sizes, as opposed to being optimized only for certain sizes. – Michael Histen May 28 '14 at 17:57
  • 1
    Ah. Semantics. The most common distinction I hear is "mobile optimized" vs. "responsive design." Depends on the picture you want to paint. – SwankyLegg May 28 '14 at 23:20
  • Yeah, I was leaning toward something that was like "mobile optimized" (although again that meant something else to people here not too long ago). – Michael Histen May 29 '14 at 14:50
  • I would say mobile-adapted if you're just speaking of CSS breakpoints, because optimised might make your interlocutors imagine the website is performance-optimised (as mentioned above redirected to a lighter version that loads faster). – Steve Dodier-Lazaro Jun 27 '14 at 16:29
  • 1
    Mobile sites are lighter if the desktop version wasn't terribly well-designed and implemented. Mobile redirects are bad practice. – SwankyLegg Jun 27 '14 at 19:33
0

This quickly turns into a bit of a fight over words, but as I see it these sites are "only" adaptive (AWD).

As you see in the Brad Frost article RWD is a subset of AWD. Ethan Marcotte defines the core ingredients of RWD to be fluid grids, flexible media and media queries. These sites don't have fluid grids (at least not on their desktop viewport sizes). Thus, they don't qualify to be RWD and must be AWD.

But in the end, who cares what it is called. The major thing to understand is that adaptive design is the discipline of serving tailored layouts to different devices and browser sizes (which is awesome and absolutely a must today). It could be by serving up an entirely separate mobile site, not reusing any of the markup or it could be by reusing the markup, but setting different fixed widths for different viewports. RWD is just one specific way to implement AWD, using fluid grids and may not necessarily always be the right way.

In these examples, however, I don't see any reason why they would not implement the desktop versions as fluid width, excepts for cost concerns.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.