Regarding Responsive Design (Extremely important)

Started by Jade Elizabeth, January 02, 2015, 08:40:15 AM

Previous topic - Next topic

Antechinus

Well I had to re-think my toggle thingy anyway. Spans no good. Forgot about keyboard a11y, I did. :D So that means going to anchors, and they need a href for keyboard a11y (even if it's just "#"), and that makes teh page go jumpy when you clicken das anchoren, so that means teh js needs event.preventDefault(); as well, which I did know but had forgotten y'see.

Haz keyboard a11y now. :)

Antechinus

Hey regarding this extremely important responsive design thing, there's a factor that's going to be all sorts of fun. Portals. How the hell are people going to accommodate the possibilities of one or two portal sidebars, which can be shown on some pages and not others, and can be toggled on and off by the users, and can be set to custom width via admin settings, and will be shoved into the theme wrapper when enabled, and will therefore totally send your responsive design break points all the way to hell.

I have given this some thought, and it is possible to work around it. Options like additional body classes called on the fly by javascript, based on page loaded and toggle state or admin state of sidebars, etc. The caveat is that, in some ways, there is probably going to have to be less flexibility for admins than is traditionally offered. This is simply because setting up the required media queries is going to be a wheels-within-wheels nightmare, and the result is only likely to function within fairly narrow limits.

The traditional idea has been that it's good to get the n00bs doing everything with CSS coz CSS is easy and safe. I'm thinking those days are gone, and that really production CSS should be divided into "Stuff n00bs can play around with" (colours would be a good example) and "Stuff you absolutely should not touch unless you really know what you're doing" (which in some cases can even include a 1px change in border width).

Arantor

I'd argue that none of that is the core dev's problem. SMF doesn't come with a portal out of the box, therefore SMF is required to do absolutely nothing to support it. Surely this would be up to the portal devs to make a decision about?

Antechinus

Oh sure. I agree with that. I can just see it being all sorts of fun to try and support. Although the division between "Stuff n00bs can play around with" and "Stuff you absolutely should not touch unless you really know what you're doing" is probably still going to apply to core CSS, just because of how complex CSS is getting these days.

Arantor

The 'stuff newbies can play around with' went down an order of magnitude with 2.1 :( I don't like touching it at this point.

Antechinus

Yeah there are probably some things that could done to simplify that a bit. One example would be keeping all sprites as one horizontal row, which will make things a bit easier to deal with. I think they're more likely to do people's heads in if they're moving in two directions. It doesn't really matter from the software's point of view, since you won't save any bytes on the image and you wont save any CSS by making sprites into a patchwork quilt.

Jade Elizabeth

Grr with the sidebar set to 200px and the other one set to auto the floated boxes in there go under the sidebar when they clear it. I wanted to avoid that without margins/padding.

And yes this topic is basically directly related to portals lol.
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring career: Color With Jade/Patreon.

Antechinus

Ok so you want to avoid using CSS to fix basic problems? No worries. :P

Put a wrapper div around your "other one". This will keep it all in shape if it gets deeper than the sidebar.

And if you want portals with responsive you're in for a whole lot of work, unless you place strict limits on what the portal does.

Antes


vbgamer45

Community Suite for SMF - Take your forum to the next level built for SMF, Gallery,Store,Classifieds,Downloads,more!

SMFHacks.com -  Paid Modifications for SMF

Mods:
EzPortal - Portal System for SMF
SMF Gallery Pro
SMF Store SMF Classifieds Ad Seller Pro

Antechinus

Yeah that bit is easy. The fun starts when people want to toggle sidebars on and off, or change their width, or display them on some pages but not others, etc. This is all stuff they are used to doing with the old non-responsive sites, but which is going to be a lot of work for front end devs when trying to support full responsive. ;)

vbgamer: You just use floats or display: table-cell; for your portal, instead of the old tables. Then you just change the css via media query. You can even use absolute and relative positioning if you like. That can be good for turning sidebars into flyouts on phones (done that before).

Antes

#51
Quote from: vbgamer45 on January 08, 2015, 05:23:26 PM
I would like to see that code I like it!

Since you asked nicely :P

Features
- integrate_default_action

(Some bits stolen from Suki ;D )
I don't want to cause any hesitations, I'm very unlikely to release this as modification, but I still want this to be used by other people and licensed it under MIT.

Edit: Its so interesting even 7 download nobody noticed that pack was just empty useless thingy (which i uploaded wrong one kinda).

stmaxx

#52
Quote from: Arantor on January 05, 2015, 01:35:08 PM
I'd argue that none of that is the core dev's problem. SMF doesn't come with a portal out of the box, therefore SMF is required to do absolutely nothing to support it. Surely this would be up to the portal devs to make a decision about?

I know of One portal for 2.0.9 that has a mobile detect that will turn the side panels off, and is set in the portal settings. I really think allot ( Not all) of the side bar stuff is just over kill anyway, and to many links in phone may even get somewhat  annoying to the user/visitor, SMF has an info Center at the bottom. JMHO. I like the responsive direction, the SMF 2.1 is going for att. So I feel this is a Portal issue, also for the SMF 2.1 versions.

regards,
Maxx

Antechinus

And I know of people who demanded a portal sidebar even on their phones, which is why I came up with the idea of using CSS to turn portal sidebars into flyout overlay on phones via absolute positioning. It works very well. i also set a conditional that automatically changes the javascript on the sidebar toggle when browsing on a phone, so the sidebar will always collapse on page load if you are using a phone. This makes it accessible on a phone, without it getting in the way, while still leaving it as normal on desktop.

stmaxx

Well that's sounds very interesting cool as well :)

regards,
maxx

stmaxx


Jade Elizabeth

Quote from: Antechinus on January 08, 2015, 05:29:19 AM
Ok so you want to avoid using CSS to fix basic problems? No worries. :P

Put a wrapper div around your "other one". This will keep it all in shape if it gets deeper than the sidebar.

And if you want portals with responsive you're in for a whole lot of work, unless you place strict limits on what the portal does.

I'm worried putting a margin of 200px will make it not be nice responsively.

Quote from: Antes on January 08, 2015, 05:07:45 PM
One of the days i iz doin' evil stuff again...

That looks great! :D
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring career: Color With Jade/Patreon.

Antechinus

#57
But you shouldn't need a margin. If the left column is floated and the central panel isn't, the latter should just sit next to the former. Do it the same way it's handled in 2.0.x for the sidebar menu.

That has the parent div #main_container wrapping all content (ie: sidebar plus central). This is set to position: relative; and the sidebar is just floated with a width set in px. The central panel is also set to position: relative; with both left and right positioning set to 0. This makes it all behave. Even if the sidebar is shorter than the central panel, the content of the latter won't wrap under the sidebar. The relative positioning of the central parent keeps it all in line - at 0 left and right relative to the top of the parent.

Example from the theme file I have open:

#main_container {
position: relative;
}
#main_admsection {
position: relative;
left: 0;
right: 0;
overflow: auto;
margin: 15px 0 0 0;
}

#left_admsection {
float: left;
margin: 0 10px 0 0;
width: 196px;
}


This means that if you suddenly collapse the sidebar, or change it to float: none; or change it to position: absolute; there are no corrections needed to the other panel, because there is no margin on it. It will simply expand to full width.

This is stable in all browsers I've ever tried, which is why I went for it as the solution back in 2.0.x dev. It exists. It works. It has worked for years, on forums you already have. Use it. :)

stmaxx

#58
I hope I'm not out line here, but I did notice on the  2.1 with a portal installed, that if you adjust the width of the side panels, to certain widths, that the center of the forum will start to collapse inwards (Board.Index)., witch does nor bother me, because I know the default theme is responsive, but some may not like this ( don't know ) so the portal will be a big factor, in viewing with the normal monitors, and I do understand that the side panels can be set to move under each other or the content. So I would say this would be better left to the portal maker to deal with, although the ideas are great, the challenge may set things way back. This could be something to deal with for 3.0 and maybe using bootstrap or something similar.

Now this just my feelings, but I feel, that SMF could go in another direction after 2.1 and for simpler forum structure. lighter and toward the now internet trends. then the plug-ins or the module could be made to suite it better. or should I say expand the system.

I feel making it more complicated is the opposite direction to go, it should be going for a less complicated forum system... I said this many times, I like SMF and there is nothing like for me, but it time for change, and I am!

Please don't get upset it only my opinion nothing else!

regards,
Maxx

Antes


Advertisement: