Tutorial/Article on Responsive Mobile Design

[final kaoss]

I am aware that there are bootstrap tutorials out there. However, vbulletin's coding & multiple templates in a skin/style complicate things even more for someone like me.

In otherwords they have tutorials yes but none that are geared for vbulletin forums from what I've seen so far.

[Max Taxable]

Originally Posted by webmastersun

What is the GLUT...

GLUT is loading the equivalent of a two minute music mp3 file on mobile browsers every pageload. That's the 1.8 MEGABYTE page load you have. And most of it is all the images, glitz, custom font files and massive scripts contained in your pageload, which I linked a detailed analysis of, earlier. It is 203 requests, 1.857 megabytes. On one of your smallest pages.

You are loading huge amounts of bytes with every pageload, on mobile browsers. It's slow on a PC with a fast cable connection, imagine how slow it is on a i-phone in 4G.

It is slow, it's not a opinion. It is a fact. And it's slow mainly because of the glut.

Originally Posted by webmastersun

Oh I removed the link on my post if you think it's for promoting, for me I think it's an example for the OP...that's all.

I don't care what links you post. I am not a moderator or a admin here. I am pointing out your site is NOT a good example of mobile friendliness, and has NOTHING at all to do with bootstrap since is uses NO bootstrap at all.

[Replicant]

Originally Posted by final kaoss

I am aware that there are bootstrap tutorials out there. However, vbulletin's coding & multiple templates in a skin/style complicate things even more for someone like me.

In otherwords they have tutorials yes but none that are geared for vbulletin forums from what I've seen so far.

I don't know how else to put it. You basically have to modify or rewrite the html in the templates and add the bootstrap classes where necessary to get the desired effect. Vbulletin's coding has nothing to do with it. You're not changing the information, you're changing the way it is presented using a CSS library.

[TheLastSuperman]

Originally Posted by Max Taxable

Nonsense. It is slow because of the GLUT. No other reason. You have sacrificed performance, for appearance. It only satisfies your own ego, and does a horrible disservice to anyone trying to browse that pile of crap using mobile.

Stop, insulting our intelligence by constantly posting your link as a example of mobile friendliness, because it is way, way far from it. It's become just basically, spam in just about every thread about mobile, and it is the worst possible example to post. In fact it is a example of what NOT to be doing.

Holy Horse Hockey Robin!!!!!

Go back to bed Max, you woke up on the wrongggggggg side this morning .

Roughly 9,856,243 ways to word it nicely but you simply went for the throat caveman/sabretooth tiger style and that is all.. I have nothing else my humor's ran dry lol!

Also just a side note that webmastersun is not a full-time devloper or anything of that nature so when people TRY and the end result looks good (appearance vs speed currently but can be worked on respectfully) despite his "ego" I'd say good job but there's room for improvement, just don't put them down then stomp them while they're down, geesh . Sorry my grandmother raised me w/ 1950-60's values so to me its just shocking how some act despite my often viewed as Carlos Mencia style humor, I'm full of shiskey too ya'know we just differ .

**If you have the default mobile style installed on vBulletin 4 then in your options make sure to set your desktop style as the primary, then allow members to change styles and also set the default mobile browser for older and new devices to the mobile style - this will make your site mobile friendly for Google.

[Max Taxable]

Originally Posted by final kaoss

A quick write up on what to do to make vb4 styles mobile friendly would come in handy.

It should cover most of the recommendations from this test tool.

I finally accomplished this mission - getting a v4 style that is responsive, mobile-friendly, browser agnostic and is full featured not stripped down like the native v4 mobile style is.

It loads 264kb very greasy-fast, and has all the vB features and is even compatible with many add-ons and products. It's also pretty nice looking for desktop users.

Performance Test - straight As and Bs baby.

Sample it by clicking here.

Screenshot using Chrome in 400px width, to simulate a mobile device:

[final kaoss]

That skin looks awfully familiar... like the debutant one at themecrate.

btw thanks for that post Max, got me looking into this again. So far so good with under 300 KB of load on my side. I'm going to look into making some tables (<divs>) responsive & see if they help.

Showthread:

<div id="header" class="floatcontainer doc_header">
<ul id="navtabs" class="navtabs floatcontainer">
#vbulletin_html
body > div.body_wrapper
#footer_copyright
#footer_morecopyright

[Max Taxable]

Originally Posted by final kaoss

That skin looks awfully familiar... like the debutant one at themecrate.

That's exactly what it is, after some major adjustments.

So far so good with under 300 KB of load on my side.

That's not a accurate, real world test. This is.

[final kaoss]

I use gtmetrix more than webpagetest for a few reasons.

I can better see what's going on with the more detailed yslow & pagespeed reports.
I can filter external resources with the adblock filter supplied so that I only see "local" resources.
Also, the history tracking comes in pretty handy.

[Max Taxable]

Was only pointing out, that test was inaccurate. Both in total requests and also in KB delivered.

I prefer to see the real picture.

[final kaoss]

Actually the results aren't that different for me.

507 kb & 64 requests on gtmetrix (with adblock off), you'll have to do a new test with it off
580 kb & 64 requests on webpage test

The difference being slightly different due to different adsense ads.