News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Are there any portals that are responsive?

Started by Biology Forums, August 14, 2015, 01:58:08 PM

Previous topic - Next topic

Biology Forums

^^ I believe that's how it should be as well.

lurkalot

Quote from: br360 on April 18, 2016, 10:41:38 PM
Quote from: lurkalot on April 18, 2016, 04:00:08 AM
Anyway, have you got a working example you can point me to please?

I have simple portal working on a site where Diego from SMF tricks helped make the theme/portal responsive. Basically the right side blocks go beneath the forum, left side blocks would go above the categories/boards, etc.

Here's a link- http://genxcommunity.com/index.php

Thanks, that's a nice example.  Looks very neat, even when zoomed into the max.  Looks like we have our work cut out then. ;)

Wellwisher

@br360 method is the responsive standard on most themes and CMS. Whereby the sidebar simply collapses and repositions itself underneath the main content. The trouble with this is if you have "forever scrolling main-content", users are forced to scroll to the bottom to look at the SP sidebar.

A better solution would be to include SP sidebar into an expanding nav or toggle sidebar menu. This way, as soon as the user clicks on the the sidebar/ nav the sp content is there. Here's a bad example, but I found it on the net so u guys can understand what I am conveying:


Antechinus

^ ^ Done that before, with an old version of TP. ;)

Biology Forums

If you've put an ad in the left left column though, it is not a practical solution, as the ad will be hidden unless the end user decides to click the x.

Wellwisher

Quote from: Shuban on April 20, 2016, 11:21:43 AM
If you've put an ad in the left left column though, it is not a practical solution, as the ad will be hidden unless the end user decides to click the x.

@Shuban I'd just hide the sidebar ads altogether tbh'o and use css media queries to either relocate/ place them underneath the main content.

Antes

Quote from: Wellwisher on April 20, 2016, 03:52:19 PM
Quote from: Shuban on April 20, 2016, 11:21:43 AM
If you've put an ad in the left left column though, it is not a practical solution, as the ad will be hidden unless the end user decides to click the x.

@Shuban I'd just hide the sidebar ads altogether tbh'o and use css media queries to either relocate/ place them underneath the main content.


that's not possible via CSS afaik. Code needs to be altered. So your code basicly needs to look like

top blocks code
main(center) blocks code
left blocks code
right blocks code
bottom blocks code

with that when you float none the elements they automaticly lane with code loading squence. I saw this within ezPortal which I'll change as well, when it comes to main (left-center-right) blocks, it actually coded as like it (left - center - right), right version* is (center - left - right), in the end you are floating those elements to left and right.

* its right version when div based / css based table system used, if you are using table (non-CSS) version right loading/writing squence for code is left-center-right.

Wellwisher

Quote from: Antes on April 20, 2016, 04:56:12 PM
Quote from: Wellwisher on April 20, 2016, 03:52:19 PM
Quote from: Shuban on April 20, 2016, 11:21:43 AM
If you've put an ad in the left left column though, it is not a practical solution, as the ad will be hidden unless the end user decides to click the x.

@Shuban I'd just hide the sidebar ads altogether tbh'o and use css media queries to either relocate/ place them underneath the main content.


that's not possible via CSS afaik. Code needs to be altered. So your code basicly needs to look like

top blocks code
main(center) blocks code
left blocks code
right blocks code
bottom blocks code

with that when you float none the elements they automaticly lane with code loading squence. I saw this within ezPortal which I'll change as well, when it comes to main (left-center-right) blocks, it actually coded as like it (left - center - right), right version* is (center - left - right), in the end you are floating those elements to left and right.

* its right version when div based / css based table system used, if you are using table (non-CSS) version right loading/writing squence for code is left-center-right.

On SP you can hide individual blocks with css since SP, by default, assigns individual #div id's to each block. Then in your index.template.php you simply create new div classes (which contain your ad-units) and trigger them with media queries. Devs over-think everything, keep it simple tbh'o. :P This is the solution I will be implementing on my production forums.  ;)

Biology Forums

If you hide a block, for instance, the content is still being loaded and this could affect loading times and server loading times contingent on whether queries are being loaded in that block

Wellwisher

Quote from: Shuban on April 20, 2016, 10:42:45 PM
If you hide a block, for instance, the content is still being loaded and this could affect loading times and server loading times contingent on whether queries are being loaded in that block

@Shuban the content you want to hide are ad-units so it won't make a huge difference. On my SP sidebar I have around 2-3 ad-units.

Switch to "responsive ad-uints"; Ad-sense, and bigger ad-publishers have them. The reason is that you are you are allowed to "hide" these ads and it will not violate any of their TOS. These "responsive ads" will not load the content until triggered by a media query and if they do, it's basically more money in your pocket.  ;)

Biology Forums

I think you missed my point. I was saying that if the advertisement is inside the left column, and we follow your suggestion by hiding the whole left column while in mobile view, the ad will be hidden automatically. Right?

I know about responsive ads, etc.

lurkalot

Quote from: Stylus on August 14, 2015, 01:58:08 PM
Curious if there are any built portal softwares (like TinyPortal) that are responsive in design and work with smaller screens.

Just a quick update.  We are testing a responsive version of Tinyportal now.  If you'd like to see how it's going, I have it installed here, http://guitaristguild.com

And on one of my test sites, http://cctestsite.info/testsite2/index.php

It's responsive, and passes the google mobile friendly test.  Also @Antechinus this version also has the tables removed. ;)

Antechinus

Generally looks good on the test site. I think it would be better to give each block a distinct ID, just to give more targeting possibilities. I notice you have a div with an ID wrapping the block content, but not wrapping the header bar. IMO it'd be much better to wrap both. This would make it easy to drop individual blocks via media queries if desired, among other things.

There's also far too much inline CSS, but I assume that's still WIP. At a quick glance, I think the markup could be leaner overall too.

lurkalot

Quote from: Antechinus on May 26, 2016, 05:16:15 PM
Generally looks good on the test site. I think it would be better to give each block a distinct ID, just to give more targeting possibilities. I notice you have a div with an ID wrapping the block content, but not wrapping the header bar. IMO it'd be much better to wrap both. This would make it easy to drop individual blocks via media queries if desired, among other things.

There's also far too much inline CSS, but I assume that's still WIP. At a quick glance, I think the markup could be leaner overall too.

Thanks for the pointers.  ;) I'll mention them to the "team" and see if its doable.

lurkalot

Quote from: Antechinus on May 26, 2016, 05:16:15 PM

Generally looks good on the test site. I think it would be better to give each block a distinct ID, just to give more targeting possibilities. I notice you have a div with an ID wrapping the block content, but not wrapping the header bar. IMO it'd be much better to wrap both. This would make it easy to drop individual blocks via media queries if desired, among other things.


I have passed on these notes to the team,  Could you explain to me what you mean about "just to give more targeting possibilities" and "This would make it easy to drop individual blocks via media queries if desired, among other things."

Sorry, but I'm not clued up on this stuff at all.

Also,

Quote from: Antechinus on May 26, 2016, 05:16:15 PM

There's also far too much inline CSS, but I assume that's still WIP. At a quick glance, I think the markup could be leaner overall too.

This wasn't a WIP in particular, but it could be.  ;) When you say, "far too much inline CSS" could you expand on this a bit please.  Reasons we shouldn't use it. Or where we should or shouldn't use it etc.

Kindred

CSS, these days, should be 99% loaded by class or ID. Calling for styling inline means that it is much more difficult to change and requires changes to source rather than a simple css file upate/refresh.

what he means by targeting and dropping...
with modern CSS, you can opt to re-position or even not show by targeted ID/Class based on the resolution of the screen viewing the page. EVERY block of content should have an ID and/or class at the parent level of the block... (for portal blocks, this includes the "box/border", title, and block content.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antechinus

Basically, what he said. :)

In more detail, inline styles require people to know enough PHP to make changes to PHP templates if they want something to look a bit different. It's easier if they can just do a basic CSS tweak in a CSS file.

There's no advantage in inline styles anyway. You may have less CSS in the CSS file, but you have more bloated markup in your templating. Since CSS is cached and HTML isn't, the result is more resource usage. This may not be a massive factor that will kill teh interwebz, but it's definitely not a bonus either.

So that's the "reasons we shouldn't use it". The short answer to "where we should or shouldn't use it" is "don't use it anywhere, unless you have no alternative".

The targetting possibilities thing is partly to be able to hide individual block via media queries, as Kindred mentioned. If you have a block that is basically just extra shiz for screens that have the space, but not in any way essential content, you might want to hide it on a small screen. However, if you can do that it would also allow individual styling of blocks if anyone wanted that. It would also allow individual positioning of blocks, if anyone wanted that too.

Admittedly this is getting into more advanced CSS than most beginners would probably want to know about, but it's never a bad thing to build in extra flexibility if it can be done with no more code. You might think that nobody would ever want to do this stuff, but I can pretty much guarantee that somebody will want to do it, sooner or later.

lurkalot

Thanks Kindred & Antechinus for explaining this.  Once again I'll point the team to these posts, and see if (at some point) we can make those adjustments.

Advertisement: