Question regarding IPB 4.0's responsive design

[Stritix]

The other day I read a staff member state that IP. Board 4.0 will have a responsive design. This is good, though some of us have websites with a design structure that doesn't support a responsive design. I have always found the IP. Board mobile skin a good solution for this.

Will IPB 4.0's responsive design be easy to set to a fixed width? Will IP. Board mobile still be available, or possibly replaced?

Thanks for reading.

[Weppa333]

Responsive design is perfect as long as you don't expect to put any advertising on your website.

Here we are at a crossroad : it's in the interest of software editors like IPB to use responsive, and it's a financial risk for forum owners.

Advertising wise, mobile+fixed is still the obvious choice.

Usability wise, responsive is a leap forward indeed; especially with well crafter @media queries (not that screen resolution based crap)

[Tom Christian]

Responsive design is perfect as long as you don't expect to put any advertising on your website.

Here we are at a crossroad : it's in the interest of software editors like IPB to use responsive, and it's a financial risk for forum owners.

Advertising wise, mobile+fixed is still the obvious choice.

Usability wise, responsive is a leap forward indeed; especially with well crafter @media queries (not that screen resolution based crap)

http://www.labnol.org/internet/google-adsense-responsive-design/25252/

[Weppa333]

I don't expect adsense to pay for my expenses, I mean real advertising. :)

Many customers still want plain old banenrs, wallpapers, or even... flash !

I know it sounds ridiculous, but that's what most people want here :(

About your code ; this is not responsive. It's a funny hack tough. I use this "code" myself, resize the screen, the layout is simply broken until next page load. Also this is limited to pixel dimensions, it's impossible to have this code work on screen dimensions (in inches) like @media.

On most responsive forums I see, the first question that people ask once the layout has been switched to responsive is "where is the button the get the full layout when we want it" and most of the time, there isn't such a button at all. And if you do add one, well you just created... a mobile website !

[opentype]

Will IPB 4.0's responsive design be easy to set to a fixed width?

Obviously. Responsive websites just use CSS break-points at certain viewport sizes. If you remove those, the site will behave like a non-responsive site.

But I don't know if a specific mobile skin would need to be maintained. Basically a responsive design comes with a built-in mobile skin.

[Tom Christian]

I won't argue with someone who does not use a single word in his answer.

And I don't expect adsense to pay for my expenses, I mean real advertising...

This is not responsive anyway. I use this "code" myself, resize the screen, the layout is simply broken until next page load. Also this is limited to pixel dimensions, it's impossible to have this code work on screen dimensions (in inches) like @media.

You're completely writing off the use of ads with responsive design when it's quite clearly possible and in fact encouraged by Google themselves. The solution may not be perfect but if you're completely reliant on ads to run your community, it'll do the job...that is at least until a more sound solution arises.

[Charles]

Much like we show/hide elements in a responsive design based on the screen size, you would show/hide ads based on the viewing size being used.

[Stritix]

Responsive design is perfect as long as you don't expect to put any advertising on your website.

Here we are at a crossroad : it's in the interest of software editors like IPB to use responsive, and it's a financial risk for forum owners.

Advertising wise, mobile+fixed is still the obvious choice.

Usability wise, responsive is a leap forward indeed; especially with well crafter @media queries (not that screen resolution based crap)

No, it's not for certain people. It's a step forward, but some websites can't support it (design-wise), so being able to set it to a fixed width with a mobile skin is the best solution for them. A lot of people have a website structure that doesn't support a responsive design as I mentioned in my opening post. I use Wordpress on my site with IP. Board being used just as a forums system at /forums.

Obviously. Responsive websites just use CSS break-points at certain viewport sizes. If you remove those, the site will behave like a non-responsive site.

But I don't know if a specific mobile skin would need to be maintained. Basically a responsive design comes with a built-in mobile skin.

Thank you for your insights :) I ask this because vBulletin 5 is responsive, but is difficult to set to a fixed width.

Though I was hoping a staff member could confirm this?

[ᴡᴅツ]

Much like we show/hide elements in a responsive design based on the screen size, you would show/hide ads based on the viewing size being used.

It's actually more profitable this way if you think about it since you can charge per viewport (hence, more advertisement slots).

[bfarber]

You would be able to "disable" the responsive design in some manner, and I would expect there to be a fixed-width capability somehow. It's important to remember that we don't just create a single default skin that we expect everyone to use as-is out of the box. We realize different clients have different needs.

We would almost certainly not maintain a separate mobile skin with our default skin being responsive, however. Nothing would stop a client from building a mobile skin themself though.

[Stritix]

Thank you for the great response.

[blair]

Just resize your ads with javascript according to viewport (which I think Charles said). e.g:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-*****";
 
var width = $(window).width();
if (width > 740)
{
    google_ad_width = 728;
    google_ad_height = 90;
    google_ad_slot = "*****";
}
else if (width > 480)
{
    google_ad_width = 468;
    google_ad_height = 60;
    google_ad_slot = "*****";
}
else
{
    google_ad_width = 263;
    google_ad_height = 60;
    google_ad_slot = "*****";
}
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>