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."

Improve this question
5
  • 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 ♦
    Commented May 28, 2014 at 15:31
  • Brad Frost covers this off better than I could
    – JonW ♦
    Commented May 28, 2014 at 15:32
  • 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
    Commented Sep 26, 2014 at 18:23
  • Answering your question in one word: Adaptive layout.
    – Infiniteloop
    Commented Nov 25, 2014 at 15:44
  • If my answer was helpful to you, please accept it :-)
    – SwankyLegg
    Commented Dec 3, 2014 at 17:36

2 Answers 2

Reset to default
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.

Improve this answer
6
  • 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
    Commented May 28, 2014 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
    Commented May 28, 2014 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
    Commented May 29, 2014 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
    Commented Jun 27, 2014 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
    Commented Jun 27, 2014 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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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