Disable responsive design

(bunjee) #1

Dear Discoursers,

I’m using Discourse 1.0 and it’s working nicely. GG !

I have modded my divcontainer” to be 1024px on desktop.

Now I want to disable responsive CSS completely.

I tried removing the following:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

But the CSS “@media only screen” rules are still firing up.

Is there a convenient trick to disable responsive completely ?

Thanks :heart:.

(David Maxwell) #2

Not sure why you’d really want to do that as you’re alienating potential customers (mobile and tablets just to name a few), but you’ll need to comb through all the css and remove all the media rules with the min and/or max-resolution entries in them.

What you removed only is a trigger which is used by tablets and such.

I would be very wary and careful (and even warn against it) as there may be point in there which are hooked into the codebase in other places. @awesomerobot and.or @sam would probably be the best experts to know where all the pitfalls are

(bunjee) #3

Thanks you for answering @davemaxwell !

I’m only altering the desktop CSS. Going for a static 1024px frame has a few advantages:

  • You can focus on making a single version as readable as possible.
  • You get pixels back over percents.
  • Modding the CSS is easier.

I get why discourse respond to low resolution desktop / tablet.

Honestly if the resolution is less than 1024px you should probably switch to mobile anyway.

At the end of the day I think a static frame is a valid choice on desktop.

(Kane York) #4

If I split my desktop into 2 panes, I get a width of 935px (which is less than your 1024px!),

The mobile view like that looks like this:

Hmmm… not too great.

(Luke S) #5

?!? What? I have a smaller screen than @riking, and I still use discourse in a half-window at times. (640 px) In fact, I’m using it so right now.

You are making an assumption about how people are going to interact with your site.

  • Don’t assume that people are always going to use the site full screen. At my work, it is necessary to have several applications open at once, and, for ease of switching, they all need to be visible at one time, so they each get their own little corner of the screen.
  • Don’t assume that people who work this way have really high resolution monitors. I might have 720p.
  • Fixed width sites/applications are Really annoying when working under the conditions described above.

So, my short answer to “How do I disable responsive design?” Don’t

(bunjee) #6

Thanks for the answers guys :heart:.

I have to admit 935 pixels are convenient on a 1920x1080 screen. The responsive layout works well at this size.

Sometimes scrolling is better than scaling.

You are making the one design fits all assumption.

Good design is about saying yes to a few things and no to thousands.

One of those no(s) could be a small viewport.

That said in Discourse’s case I think the layout is simple enough to resize well.

The tradeoff are quite a few adjustments. In time it could hurt usability and increase the complexity of the code.

There is no perfect choice here.

(James Milligan) #7

Actually I think (in the nicest possible way) it’s you that is making the one design fits all assumption. The reason Discourse scales and adjusts based on device is precisely because one design doesn’t fit all. It adapts to the situation you’re in.

Your static width assumes that people will always have a minimum width of 1024px, when like @Sailsman63 says many people (like myself) use panes and snapping functionality to have multiple windows visible per monitor.

(bunjee) #8

Hey @lake54.

Aha :D. The way you understand it I completely agree.

We can call it the resizable design fits all if you prefer.

To me, design is making the most with a given constraint.

I’d rather be great at a few key sizes than average on everything.

Being great from 320px to 3840px is a lot of work :-).

I respect your view though :heart: !

(James Milligan) #9

By the way, you might want to take a look at the enable mobile theme option in the admin panel:

Mobile devices use a mobile-friendly theme, with the ability to switch to the full site. Disable this if you want to use a custom stylesheet that is fully responsive.

(bunjee) #10

That’s your right as a user to do so.

That’s my right as a designer to tell you “nope that pane is too small for a good experience”.

I actually did :slight_smile: !

By the way the fact that discourse uses a hybrid theme (responsive and mobile) shows I’m not completely nuts arguing against the one resizable design fits all.