Responsive Curve2 Theme

[RolandK]

* If this belongs to bug reports, feature requests, or any other category, feel free to move this topic.

Hello,

I am testing the Beta of SMF 2.1 and have noticed the page content jumping when the browser window is resized. This happens due to the responsive new theme, which is is a nice feature for mobile browsers.

2.1 is still in beta, so you may already be aware of this behaviour, but you may also be open for suggestions:

• On a forum with a fixed width, when the browser window is resized, the width of the posts does not shrink, but other functions of the responsive theme still work (the date above the menu bar disappears, the menu bar turns into a vertical menu, causing the above mentioned jumping). Either the width of the posts should shrink as well, or the fixed width shouldn't be responsive.
• This brings up the next suggestion: how about a "maximum width" for the forum, that can be used as an alternative to fixed forum width? So you don't have to use a width with % (IMHO it is really hard to read with these layouts on widescreen) and still have the benefits of the responsive theme
• Allow to enable the responsive theme feature for mobile browsers only
• Allow to completely disable the responsive theme feature

Looking forward for 2.1 stable. Keep up the good work!

[Antes]

Hmm... Fixed width must die that's for sure :/ because to get maximum value for small screens we use 100% for wrapper.

You cannot enable/disable the responsive theme for mobile only... its a purely CSS work (you need to use checks to see if its mobile etc...), we choose the responsive because of not having that type of work on us. You can disable it completely by removing index.responsive.css. I'm not fan of adding yet another setting.

[Arantor]

Allow to enable the responsive theme feature for mobile browsers only

The entire point of 'responsive' is that it responds to what the user is using - one theme for everything.

[Kindred]

A responsive theme should never ever have a fixed width.

And as Arantor says, responsive means that you use one theme and it properly resizes down when viewed on different devices/screen widths...   Making it mobile only would defeat the very purpose of making it responsive...   And mobile only themes are outdated and outmoded...   Responsive it the way forward.


And no...   Disabling the responsive design would essentially mean a different theme. If you want that, then use a different, fixed theme. The default theme will remain responsive by design.

[stmaxx]

I like the Default theme the way it is! responsive, and I'm working on a darker theme to go with mine, and then maybe a responsive main menu, that will, go to the menu like narrow icon, for the drop down.

Give it time, and after SMF starts reviewing the MODs ) I guess when in the RC stages, someone may come up with a mobile detect mod and theme, I have seen them on other projects that work nicely. ( I'm not fan of these apps )

But, please keep in mine that..there are some issues with using mobile detect scripts and mods, that force people to get or buy and app, to view 3rd party content, that you may want on your site and keep your visitor there! One example is youtube, if your videos on some "How to" ( 3rd party networks ) subjects or news, they will only show a link in the window to view this content on youtube, thus taking your visitors away. ( not good). Some phones will take them to the source anyway and try force the app on you or them. (when do we get free information back to Net?)....just saying!

Now whenever, I view my site, ( responsive in the windowz phone) , it will show the video on my site, in the typical phone browser and it fits in the little phone perfectly! Tablets even better!

I have toyed with the responsive stuff for a few years now, and other ways as well.

I feel SMF is moving in the right direction, I'm liking it as stated before!

New app, How to pay for all this stuff you'll need?  lol

Below plz find the menu I'm working on, the screen shows it open or dropped own!

[Arantor]

Of course there are issues with mobile detection... which is PRECISELY WHY 2.1 DOESN'T.

[stmaxx]

I'm agreeing! as I said I like it!

I was just speaking in general, I know you guys know! It's So the newer users know!
some that read this may not already know!

[RolandK]

I didn't intend to deny the benefits of responsive themes. In my case, I prefer my forum to look like the remaining pages of my website, which are 950px in width. If the forum is still easily readable with screen resolutions below 950px, nicely done! But the forum should not expand beyond 950px, no matter how high the screen resolution may be.



Instead I wanted to encourage some more options that perhaps may be useful (or more convenient ), while the development still is in beta. For example defining the (min&max) width of the responsive theme, since there already exists a dedicated section for the layout in the administration center. Or point out the jumpy transition when resizing the browser window.
It is your choise to claim it just depends on the css files. Then again, if users have to edit these css files, some will give up at this point.




So, if anyone is interested in how to limit the maximum width of the responsive theme by editing the index.css file:

Replace:

Code Select Expand

/* These divisions wrap the forum sections when a forum width is set. */
#wrapper, .frame {
   margin: 0 auto;
   min-width: 760px;
}

With this:

Code Select Expand

/* These divisions wrap the forum sections when a forum width is set. */
#wrapper, .frame {
   margin: 0 auto;
   min-width: 760px;
   max-width: 950px;
}

[Arantor]

That would not be how I'd limit it since that would affect most tablets as well as desktops...

[Bloc]

And not to mention high DPI phones. Every device should really be utilizing full width - except maybe for high resolution desktops. The problem is that pages are built primary for rather narrow widths, the page is aways much longer than wide(if it contains any content to speak of). If that content was presented utilizing also the width available on for example desktops, you would never need 960px fixed width...

I have tried to make themes that adress this somewhat by being 100% up to about 1200px - but if the device have higher dpi(meaning smaller actual surface) they get treated like the smaller desktop sizes.

I only wish img tag had support for multiple sources, that could be targeted by media queries...

[Arantor]

Actually, img does support multiple sources in HTML5, see the srcset attribute.

[Bloc]

Yes, but its not supported widely yet, as seen on this page: http://caniuse.com/#feat=srcset

But it is exactly the thing thats needed though so heres hoping it will be supported by all major soon. It seems way better than the <picture> scheme.

[Arantor]

I know

[Bloc]

In the meantime..I am trying right now a more hackish way of showing optimal images for "blog" posts, involving background-image,background-size and id's to set specific images using media queries. Using display:table/table-cell solves the problem of having to set a height that might or might not fit the text next to it. It doesn't grow any bigger than the text height though, which is a little better.

Still not so easy as it would be with srcset I would imagine, but sort of mimicking it. And of course theres no *image* in the sens of a dedicated image tag..but it does allow me to create optimal images to be used on different resolutions instead of a single image + a thumb of one-size-fits-all. 

This is not that crucial on (image)attachments in SMF, but very useful on illustrative images following the width at hand.

[Arantor]

*nods* That's certainly a workable solution

[devalt]

The top menu remains on the screen when viewed on a small device.  Attached is a screenshot from my phone showing the menu along with a more responsive design.  The menu should move to the "hamburger" icon in the top right hand corner of the screen.

[Antes]

New version of SuperFish is compatible with all range of devices, one-tap to open the menu second tap to follow the link (tested on Galaxy S3/4 - Lumia 520 - iPhone 5/6).