MyBB Community Forums

Full Version: Responsive CSS framework?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3
(2013-01-29, 08:53 AM)labrocca Wrote: [ -> ]Forums have a lot of information and content. How are you going to 320px MyBB?

I think attempts to display the same content on a desktop onto a cell phone are going to fail. Your only hope is to have different content sent to tablets and smart phones.

Pretty much what I said - that you can use a 320 -> 1024 if it is a relatively simple app and you are really just moving data about to fit on the page - maintaining a tabular layout (not necessarily using tables, but keeping all the data together and readble) is difficult though not impossible.

The MyBB Mobile template does a pretty good job of it, but once it goes into the larger sizes (768 and up) then a desktop layout is just as efficient. That is why I said IF MyBB Mobile will ignore tablets and only "click in" when its a phone - then I would use the mobile theme as at least it is optimised for a small screen.
(2013-01-29, 08:53 AM)labrocca Wrote: [ -> ]How are you going to 320px MyBB?

>Forum Title and forum icon and forum description
>>A thread Title and thread icon and thread by and last poster
>>>thread display avatar, post bit, etc Resize media elements.

Resize on images and media used in signatures, avatars and posts to stay within intended aspect ratios.

That all is very possible on 600 px wide screen and even possible on a 320 screen.

(2013-01-29, 08:53 AM)labrocca Wrote: [ -> ]I think attempts to display the same content on a desktop onto a cell phone are going to fail.
You are absolutely right about not displaying the same amount of content on a cell phone than a desktop... which is the whole point of true responsive design.
For example extras such as sidebars, extra div padding, margins, etc would have to go away for the smaller screen spaces which can be done with CSS by changing Display rules and div sizes/location or with javascript./jquery libraries.
I wouldn't rule out a responsive design for 2.0. I also can't say it's a certainty. It's something that needs to be heavily investigated.

The current prototypes for 2.0 are not responsive; however, they're also a number of years old at this point. At this point, they mostly serve as an idea of where 2.0 will be headed. They still need a lot of work.
So much simpler imho to have a separate page like mobile.php with it's own libs and classes. Would make things like plugins easier to deal with and custom edits.

I just don't see how a responsive template is going to work. Just don't.
Have you seen the GoMobile templates labrocca?

They do resize to a small screen really well, it is the larger resolutions where it all starts to get a bit shaky. This is where the responsive design would come in by adding the "frills" to the larger resolutions.

I truly believe it can be done, but it would need a complete rewrite of nearly every template. The advantage of a separate template set is that you can serve a mobile version with reduced javascript. The disadvantage is that you would have to ensure that any mobile solution would also be "monetisable".

That was where the profits (and share price) from facebook went - increased usage of the mobile platform that was not as inundated with ads etc as the desktop.
Quote:The disadvantage is that you would have to ensure that any mobile solution would also be "monetisable".

MyBB has never concerned itself with that aspect of it's software. It shouldn't start now.
(2013-01-29, 10:07 PM)labrocca Wrote: [ -> ]
Quote:The disadvantage is that you would have to ensure that any mobile solution would also be "monetisable".

MyBB has never concerned itself with that aspect of it's software. It shouldn't start now.

MyBB maybe don't, but it's users do. Please do not think I am speaking on behalf of MyBB in this discussion - if I gave that impression I apologise for it.
the problem would be solved if CSS would support something like {hide-if-screen: YYYpx;}

though it can be worked around with a plugin/edit that works similar to GoMobile. based on user agent. Then append to the class list of the items you want to hide in a mobile display, like

class="author hide{$ismobile}"

and have a CSS class

.hide1{
display:hidden;
}

the amount of data is still loaded, but you can make use of the same template set
Yea, that is pretty much what I have, but I am using the media queries and changing the display properties based on browser-width - currently I was looking at 460, 600, 800, 1024. I have a wrapper that fixes the container to a max-width of 1440 px.

So, for example, on the index page at side 800 and below the sidebar is set to display none. Unfortunately, the side bar is also making a call to the db to display a gallery - so that is a real waste on a page if it is not even displayed.
(2013-01-29, 10:18 PM)pavemen Wrote: [ -> ]the problem would be solved if CSS would support something like {hide-if-screen: YYYpx;}

though it can be worked around with a plugin/edit that works similar to GoMobile. based on user agent. Then append to the class list of the items you want to hide in a mobile display, like

class="author hide{$ismobile}"

and have a CSS class

.hide1{
display:hidden;
}

the amount of data is still loaded, but you can make use of the same template set

media queries do exactly this. They apply styles depending on the viewport, pixel density or something. They're kinda the whole reason why responsive design is possible. Or am I missing something?
Pages: 1 2 3