4

I am working on a small Drupal site that needs to be mobile and desktop optimized. Tablets are not a large part of the anticipated usage. The process has not been ideal. We are planning on taking a responsive approach, but due to some time and budget constraints, the account manager is suggesting taking the approach of a two-layout (desktop and mobile) responsive design.

All examples of responsive design and adaptive design and various frameworks for such approaches that I have seen have three or more stylesheets (typically to support desktop, tablet, and mobile screen widths).

  1. Will only two layouts be able to sufficiently handle a responsive design (without introducing an awkward layout for browser widths in the middle range)?
  2. Will using only two layouts actually save design and development time?
Improve this question
2
  • I'm not sure the cause of your question is clear outside of time and budget constraint as per all projects! Does the account manager want two-layouts to get 'sign-off' for the creative look and feels or two-break points for the production of the code? These are two quite different questions, the first being possible (the reality unless you are designing in the browser), with the second not really ideal or truly a 'responsive' end result - however this might just be semantics.
    – Adam Fellowes
    Dec 3, 2012 at 15:14
  • @AdamFellowes That directive from the account manager was not a concern about sign-off. It was based on the idea that fewer layout breakpoints would mean lower cost of development.
    – Mike Eng
    Dec 3, 2012 at 16:59

4 Answers 4

Reset to default
5

Re: Will only two layouts be able to sufficiently handle a responsive design (without introducing an awkward layout for browser widths in the middle range)?

The answer is usually yes. The main problem is that you will end up with really wide line lengths on wider devices (typically tablets but also certain larger phones). There is however no reason you can't add some media query based tweaks once you get to that uncomfortable point (the first issues will probably appear around the 550 px mark). How much you can tweak is of course dependant on the design but sometimes adjusting the font size a bit or positioning images a bit differently can make the layout feel more balanced even if the line length is technically too long.

If your site is lightweight, and if the entire thing has been optimised for touch (e.g. replacing with content that appears on hover, ensuring buttons and controls are large enough to tap) you may also consider setting your "big/desktop" breakpoint to a value that is low enough for it to include larger tablets like the iPad (at least in portrait orientation). I would recommend testing this well of course but many tablets can handle a "desktop" layout, so long as all the touch and performance related trouble spots have been accounted for. It's not ideal but may still be superior to serving a super-wide phone layout.

Improve this answer
3

Yes to both of your questions. If you take Goldilocks approach to responsive design, you just need to create regular, narrow, and wide screen layouts. That will save you time in development and testing. Sure, it won't be like Smashing Magazine's multi-resolution design but it'll get the job done.

Improve this answer
6
  • Hmm, I'm not sure I understand. You seem to say "yes" to "will only two layouts be able to sufficiently handle a responsive design?". But you also say "you just need to create regular, narrow, and wide screen layouts", which is three layouts.
    – Mike Eng
    Jan 20, 2012 at 14:39
  • 1
    Heh. Goldilocks approach is three layouts. However, you can get away with just two (one-column and multi-column) using the core principles.
    – dnbrv
    Jan 20, 2012 at 14:48
  • Simon Foster's portfolio site is based on two layouts.
    – Mike Eng
    Jan 20, 2012 at 17:47
  • @MikeEng: Despite Simon Foster's portfolio having media queries, it acts as if it has only 1 layout that scales to the width of the screen. The point of responsive design is to adapt the layout without building a separate mobile property.
    – dnbrv
    Jan 20, 2012 at 18:32
  • simon foster's site has two distinct layouts. It is two columns at desktop size and one column at mobile size.
    – Mike Eng
    Jan 21, 2012 at 21:15
1

Personally, I think putting down a number of required designs or layouts is the wrong approach to responsiveness.

You will need as many designs as you have differently layouted views of your website, which ideally is infinite. Much more important is to have designs that either via examples or annotations show how the website behaves on different screen sizes and devices, meaning you can do one layout, if it is clear how the content shapes up in different sizes, or you need to do ten, if you have very differentiated use and layout scenarios in mind.

If the responsive design of a website means having views for one, two or three column layout and you want to show each case make three layouts. However, think of pintrest.com as an example - they hardly designed 15 different layouts for different widths, but they had a design that showcases how the websites fits as many fixed-width column into the screen as will fit.

In the end, responsive design means the layout will adapt to any viewing scenario, and it is already a restrictive decision on your part as designer to limit this to two, or three, or four, corner-case layouts.

Improve this answer
0

Quite frankly I really think it depends on the site design. If we're talking a fully responsive scalable site with a boat lot of content that hides and shifts in certain areas, which you're simply passing to a developer, I would hope for a little bit more. I usually like to do one for several screen resolutions such as 1024, 768, 480, and 320. However of course if little to no content is changing from one to another than by all means skip it.

Improve this answer

Your Answer

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

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