Curious if there are any built portal softwares (like TinyPortal) that are responsive in design and work with smaller screens.
As far as I know, no...
That's surprising given the way the internet and technology is moving. Not criticizing the coders but if I were one of the portal authors, I would jump at the opportunity because it's a niche that hasn't been occupied yet and I'm sure a lot of SMF users would jump at the opportunity to implement it into their community. I for one would jump ships if I knew for example simple portals had this and tiny portals, which is what I'm using now doesn't.
I think with the mod (http://custom.simplemachines.org/mods/index.php?mod=4040), SP becomes responsive.
I have to add myself some kind of responsiveness to SimplePortal by adding more CSS rules by screen size and change the items display properties. Also I have to change most of the rules for responsive view in my theme to unify the changes by screen resolution.
For SimplePortal depends mostly in the configuration of the portal, because in my site I have only Right side bocks, that way the change is simply change the display to show the right side block under the main content, but if you have block on the left side, that blocks will be above the main content, so you can leave them there or hide them in responsive view.
The configuration for a responsive view of a portal is merely subjective to every ones taste, so I just put the Right side blocks under and that's it.
Being responsive is possible with portals if the theme is constructed that way. As long as default theme isn't, its harder to accomplish.
Custom themes however, is a different matter. All the freedom to undo what default theme does.
I agree. I guess most developer are waiting for SMF 2.1 to leave its beta stage since it's a better platform for responsiveness to work on.
Thanks for the input.
Quote from: Bloc on August 15, 2015, 02:34:21 AM
Being responsive is possible with portals if the theme is constructed that way. As long as default theme isn't, its harder to accomplish.
Custom themes however, is a different matter. All the freedom to undo what default theme does.
Actually that's false, you can code your own responsive.css only for portal and its pages. When integrated inside the theme as sideblock you can make it go bottom of the page. Yes rest of the page won't be responsive but that's not portals problem.
Quote. When integrated inside the theme as sideblock you can make it go bottom of the page
Which side, right or left? I don't know of a way to make the left side go to the bottom...
Quote from: Antes on August 15, 2015, 10:23:00 AM
Quote from: Bloc on August 15, 2015, 02:34:21 AM
Being responsive is possible with portals if the theme is constructed that way. As long as default theme isn't, its harder to accomplish.
Custom themes however, is a different matter. All the freedom to undo what default theme does.
Actually that's false, you can code your own responsive.css only for portal and its pages. When integrated inside the theme as sideblock you can make it go bottom of the page. Yes rest of the page won't be responsive but that's not portals problem.
In what way is what I wrote "false"? :) I wrote its harder - not impossible.
@Bloc
Responsive themes makes easier to make addons/mods responsive. But you don't need a responsive theme to create responsive mods. You can code more (and yes you need to code) to make your mod responsive.
Quote from: live627 on August 15, 2015, 10:57:13 AM
Quote. When integrated inside the theme as sideblock you can make it go bottom of the page
Which side, right or left? I don't know of a way to make the left side go to the bottom...
You need to add your code after the main template (which you want to show at top). Rest can be done by floatleft/right and display: inline-block.
I coded something very basic before and attached here (http://www.simplemachines.org/community/index.php?topic=531878.msg3780752#msg3780752).
Shuban: it's actually quite easy to make most portals responsive. The problem is that they were all coded back in the days when tables were necessary for stability. These days you can easily use divs or whatever. If you simply drop the table from the portal template and substitute divs to do the same job, getting it all responsive isn't that big a deal. It requires writing a bit of custom CSS of course, but it's not terribly complex stuff.
Quote from: Antes on August 14, 2015, 04:10:22 PM
I think with the mod (http://custom.simplemachines.org/mods/index.php?mod=4040), SP becomes responsive.
Simple portal (http://custom.simplemachines.org/mods/index.php?mod=1104) is responsive with responsive curve (Mod) on the home page of the portal (default theme). My dev. team is tested.
Quote from: Antechinus on August 26, 2015, 04:01:07 AM
Shuban: it's actually quite easy to make most portals responsive. The problem is that they were all coded back in the days when tables were necessary for stability. These days you can easily use divs or whatever. If you simply drop the table from the portal template and substitute divs to do the same job, getting it all responsive isn't that big a deal. It requires writing a bit of custom CSS of course, but it's not terribly complex stuff.
Yup.
I like the idea of a custom theme to take control of that, thats why I created ShelfLife with significant changes in the SP templates. But, not everyone likes that and not everyone likes total rewrites of the CSS either. For them its quite ok to use the Curve mod.
Quote from: Antechinus on August 26, 2015, 04:01:07 AM
Shuban: it's actually quite easy to make most portals responsive. The problem is that they were all coded back in the days when tables were necessary for stability. These days you can easily use divs or whatever. If you simply drop the table from the portal template and substitute divs to do the same job, getting it all responsive isn't that big a deal. It requires writing a bit of custom CSS of course, but it's not terribly complex stuff.
True. I'm thinking of going portal-less from now on (if I start a new community) - probably have one column on the right OR left, and that's it. I used portals back in the day because I didn't know basic PHP coding. Now that I'm more comfortable with both PHP and styling, I can go without, making it easier to make things responsive.
QuoteI like the idea of a custom theme to take control of that, thats why I created ShelfLife with significant changes in the SP templates. But, not everyone likes that and not everyone likes total rewrites of the CSS either. For them its quite ok to use the Curve mod.
The responsive curve mod is not refined and looks unprofessional. Besides that, it's only in Beta mod.
PortaMx works with a special theme for mobile devices.
You can try a look at that .. here http://portamx.com (http://portamx.com)
Quote from: feline on August 26, 2015, 07:35:42 PM
PortaMx works with a special theme for mobile devices.
You can try a look at that .. here http://portamx.com (http://portamx.com)
Do you have a demo?
Some official responsive theme would be great.
I'm sure the SMF team would be looking deeper into this wish, if there is any empty space on their "do to" list. ;)
-Offering a responsive theme is a must have in year 2015.
All the best folks;
There *IS* a responsive theme for 2.0.x -- it requires the installation of the Responsive Curve mod - which Suban poo-pooed (although I feel that he is distinctly mistaken in his dismissal of that mod)
2.1 has a responsive theme as the default (Curve2)
lol I didn't poo on it, I was just expressing my opinion. I think most designers will agree that it's not refined. Things are out of place and I find it reduces functionality - a forum *shouldn't* lose functionality while in mobile mode.
Quote from: Shuban on August 27, 2015, 12:04:09 PM
lol I didn't poo on it, I was just expressing my opinion. I think most designers will agree that it's not refined. Things are out of place and I find it reduces functionality - a forum *shouldn't* lose functionality while in mobile mode.
example which function you cannot use while you have the modification ? and false, forum should lose functionality while in responsive mode. So you dont have to overwhelm the UI with dozens of not really necessary elements. I'm not even saying SMF 2.0's limitations on template.
actually, I disagree, Many sites reduce direct access to functions when accessed via mobile devices
Plus you are incorrect... The forum itself does not LOSE any functionality in mobile-view - some of the options may not be DIOSPLAYED, but the functionality is still present - additionally, things are often MOVED between mobile and desktop. That is exactly AS INTENDED on all of those other sites... so, why is it wrong for SMF?
As for "not refined" that is really a matter of taste and opinion. I happen to disagree with you -- and - unless you have ACTUAL statements from "most designers" I would appreciate you not claiming to speak for them.
Basically, your contention may be your opinion, but I believe your opinion to me either misinformed, based on misunderstandings or just plain wrong...
While the responsive curve is no here near "perfect" (nor is it "as good" as SOME of the purposeful built responsive themes), it is reasonable, decent and gets the job done for folks who NEED a responsive theme and like the basic SMF Curve design.
BTW: "poo-poo" does not mean what you posted... (it should have been pooh-pooh)
http://www.merriam-webster.com/dictionary/pooh-pooh
The captures speak for themselves.
I don't need a whole spiel as to why it's God's gift to mankind. Please, hold the rhetoric...
I see things differently than others. We all know this is a *temporary fix* to a much larger problem.
I included no rhetoric... nor did I say anything about "god's gift" -- Now who is using exaggeration and rhetoric?
As for your screen shots... You obviously didn't even bother to READ what Antes and I posted - since we clearly stated that removing the direct access to some functions is ACTUALLY EXPECTED AND INTENDED (and follows standard design of UX for responsive designs. Just because you don't understand the basic standard designs or don't agree with them does not make them WRONG)
As for the icons... yup...that, too, is intentional, and is also follows the basic standard for responsive designs. Many sites do exactly that - words with icons at smaller screen sizes.
So, the more you speak on the subject, the more you prove that you don't actually understand the concepts behind repsonsive design....
Now, you can say that you don't like the curve responsive design, but the moment you start trying to "prove that your opinion is "right" - you had better have ACTUAL standards and FACTS to back it up...
Quote
Basically, your contention may be your opinion, but I believe your opinion to be either misinformed, based on misunderstandings or just plain wrong...
1) no... but its not limiting anything you don't really have much choice here unless you list all menu items one by one (this solved with SuperFish on SMF 2.1)
2/3/4) Bug why didn't you report them before? or am i missed it ?
QuoteJust because you don't understand the basic standard designs or don't agree with them does not make them WRONG)
And you do? lol
Okay...
@Antes, I'm reporting them now because you asked. By the way, I appreciate your internet etiquette a lot more than kindred. You
asked why I don't like the mod instead of belligerently defending it with your life. You take a learning approach to life, which is always good.
Notice no loss of functionality when going from regular theme to responsive - https://theadminzone.com/
A great example.
actually, yes... part of my (nonSMF, everyday) job is dealing with corporate websites and the standards involved with websites, networking and deisgn
And I am not being belligerent. :P I am TRYING to get a point across to you that you seem unwilling to accept...
As for "no loss of functionality" would you PLEASE stop calling it functionality. Functionality is something very different from direct access to functions via links.
However, to address the point, that is the choice of each individual site owner on how they want to implement the repsonsive design -- but the STANDARD *IS* actually to reduce the accessible/listed actions on a smaller screen, regardless of whether YOU think it is a good idea or not.
(as the other folks on this site said to me when I complained about my disagreements with Microsoft's decisions)
side note: interestingly, those 2/3/4 screens show differently on my phone.
You should supply phone's size (in inc), resolution and the browser you are using.
Yes, I realise this is an old topic.
But on this subject, can anyone point me to a live example of a responsive portal in use please. I'm curious as to how they should look and respond to certain browser zoom levels, and responsive views in Firefox and Chrome web dev tools.
SimplePortal can be made responsive, you can add either a percentage-based or fixed width to all SP blocks (from SP settings). It's nothing special, basically all "percentage based tables" and "css".
Quote from: Wellwisher on April 18, 2016, 03:54:23 AM
SimplePortal can be made responsive, you can add either a percentage-based or fixed width to all SP blocks (from SP settings). It's nothing special, basically all "percentage based tables" and "css".
I should have started a new topic for this methinks. :)
Anyway, have you got a working example you can point me to please?
Wish I could help, but I currently don't have online set-ups using percentage based widths but seriously it's nothing special. Any portal system can easily be turned into a percentage based layout using css. :P
I don't know about portals, but responsiveness should be a set of rules for different viewports. Those saying to hide stuff or disabling aspects due to viewport or device do not get responsiveness and their mindset is stuck on the old mobile web model.
Say for instance when you have a large viewport your divs are float left with percentage widths. This should give the portal column look.
When the viewport gets too small you want to unfloat those divs and disable their widths so they gain the whole viewport giving a vertical layout.
Also you don't want to have margins or padding on your responsive containers while setting percentage widths.
I don't use a portal myself, find them useless, however most my sites have a portal feel. The key on my responsiveness is use something minimalistic and planning. You have to plan where and what is going to happen when the viewport changes.
There is really no straight forward answer as how the site should behave, it is really up to you.
On the portal topic though, stay away from anything using tables as their foundation to divide columns. Tables are supposedly for data, I say if that because there are better options than tables for that too.
For SMF 2.0.x Antes made and is included in ezPortal the responsive version. It is an option under settings. Requires the SMF responsive mod installed.
Quote from: Wellwisher on April 18, 2016, 05:03:59 AM
Wish I could help, but I currently don't have online set-ups using percentage based widths but seriously it's nothing special. Any portal system can easily be turned into a percentage based layout using css. :P
No problem. I'd have thought someone would come up with a live example, perhaps they will given a bit more time.
Quote from: nend on April 18, 2016, 11:06:05 AM
I don't know about portals, but responsiveness should be a set of rules for different viewports. Those saying to hide stuff or disabling aspects due to viewport or device do not get responsiveness and their mindset is stuck on the old mobile web model.
Say for instance when you have a large viewport your divs are float left with percentage widths. This should give the portal column look.
When the viewport gets too small you want to unfloat those divs and disable their widths so they gain the whole viewport giving a vertical layout.
Also you don't want to have margins or padding on your responsive containers while setting percentage widths.
I don't use a portal myself, find them useless, however most my sites have a portal feel. The key on my responsiveness is use something minimalistic and planning. You have to plan where and what is going to happen when the viewport changes.
There is really no straight forward answer as how the site should behave, it is really up to you.
On the portal topic though, stay away from anything using tables as their foundation to divide columns. Tables are supposedly for data, I say if that because there are better options than tables for that too.
Thanks. some good info there. We have got around to removing all the tables from TP, just need to make sure it's behaving as it should, and knowing exactly how it should respond to page zooming and different screen sizes is where I get stuck. This responsive stuff is way over my head tbh. I blame my age, and the lack of mobile devices to test with. ;)
Quote from: vbgamer45 on April 18, 2016, 11:10:29 AM
For SMF 2.0.x Antes made and is included in ezPortal the responsive version. It is an option under settings. Requires the SMF responsive mod installed.
Thank you, that's an interesting idea. So you have released two versions, one responsive, and one none responsive? Or just a new responsive version with a switch?
Quote
Thank you, that's an interesting idea. So you have released two versions, one responsive, and one none responsive? Or just a new responsive version with a switch?
No it just a responsive version with a switch two separate template files to choose between the two.
Quote from: vbgamer45 on April 18, 2016, 12:51:26 PM
Quote
Thank you, that's an interesting idea. So you have released two versions, one responsive, and one none responsive? Or just a new responsive version with a switch?
No it just a responsive version with a switch two separate template files to choose between the two.
Thanks. So just out of interest, is your EzPortal support site running in full responsive mode?
Yes it is.
This is just my thoughts,
For the top area you can have it full width.
Left is tricky for the fact you don't want to push your main content down. I would suggest to either hide it and put a button to expand it on demand or move it below the main content.
Right you can just display it as full width under the content and then the same for the bottom section.
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
^^ I believe that's how it should be as well.
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. ;)
@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:
(http://i.stack.imgur.com/DugDo.jpg)
^ ^ Done that before, with an old version of TP. ;)
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.
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.
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.
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. ;)
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
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. ;)
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.
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. ;)
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.
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.
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.
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.
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.
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.