Tutorial/Article on Responsive Mobile Design
 

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.

If you want to do that I would suggest you learn a course about responsive design from Lynda or learning from library of Bootstrap responsive css framework.

According to me, vB4 default style is already in 70% responsive design and 30% is need you to finish/design into responsive design :)

Posting a link to your site in no way helps what the OP asked for.

One of the most bloated sites imaginable, even your smallest pages are 1.8 megabytes - might be "friendly" as far as CSS goes, and somewhat responsive - but horribly NOT friendly for mobile browsing. Loads SLOW.

And, no bootstrap at all used.

http://www.webpagetest.org/result/15...KA9/1/details/

This is far from a good example of true mobile friendliness.

Yea, I love the look of your site and your seo is really amazing but your first load time is slow. I did not even try mobile.

Get that load time down and your traffic will go up as will your page rank and keywords.

A start would be to take all those 300px block images and lower the quality and make them progressive. You could probably optimize all your images and save 1 second at least right there of load time.

Go to Ozzie's site also and make sure you use the htaccess file there!

Really great site though! Great content and look!

Thought better if have a real example

Thanks Max Taxable for the link I could find some reasons why it made my site low slower a bit

Yep It's can be slow on mobile because it's responsive from vBulletin theme thus some images and js/css have not been optimized for mobile like default mobile theme of vB.

I agree with you about optimizing for images will improve loading speed for web site a bit more.

but not sure what you are saying here

Why needs to use htaccess?

Are you mentioning about codes to optimize images/css/js with htaccess?

The htaccesss will help with image compression among other things.

--------------- Added [DATE]1444011300[/DATE] at [TIME]1444011300[/TIME] ---------------

As for the Op post, yes a tutorial would be awesome!

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.

Honestly It didn't have an exact tutorial on how to build vB4 style into responsive because each person will like to do their forum template according to their way, problem is you need to know about CSS and Html as I suggested in my second post (learn from a CSS course and study from other sources about CSS/html)

It can do in basic steps

Add this to your header template
Using media queries to custom vBulletin layouts on different mobile screen sizes as you want. (require knowledge about CSS/html tags) It depends on your theme, you can show/hide some parts with your CSS..

I think, if possible, vB designer team should change vB4 default template into responsive design so it will be easier for users to custom their theme again from the default them.

--------------- Added [DATE]1444021469[/DATE] at [TIME]1444021469[/TIME] ---------------

What is the GLUT...I don't think so...can you show which should be improved on our forum?

Yeah someone can make their template into responsive, if not, they can use a mobile theme default from vBulletin for better performance.

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 can't imagine anyone taking the time to do a write-up on a project as big as making vb3 or 4 responsive especially since they are probably doing the responsive project as a job and making some money on it. Making a vb style "truly" responsive is a massive undertaking. Using the bootstrap framework involves changing almost all the classes and in several instances having multiple classes for each element on the page. Going further, when using bootstrap, several elements require a type be defined for proper rendering or changing the element tag itself. These items would have to be modified on every single template to make the site perform uniform and proper.

As far as bootstrap tutorials go, there is a ton of info available on the web with examples on how to implement it.

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.

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.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.

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.

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

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 :p. 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.

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:

https://vborg.vbsupport.ru/external/2015/11/1.jpg

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:

That's exactly what it is, after some major adjustments.That's not a accurate, real world test. This is.

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.

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

I prefer to see the real picture.

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.

Yeah, I don't worry about adblock or what that does to testing. I just test with real browsers, what the real browsers see. And we're still not anywhere near the 300kb you were talking before.

But, the test I ran comes up with 867kb for you, not anything like 580. I linked it here. Can you link me to the WPT you did there that's giving you 580kb?

Here you go.
http://www.webpagetest.org/result/151204_AX_232/

Also, use the adblocker from gtmetrix and you'll see results under 300 KB.
https://gtmetrix.com/reports/www.vid...t.com/1O5FVK81

This is as I suspected, you're testing with Chrome. Chrome does not give you the true picture because in order to give the illusion and make the claim that it is "faster" it ignores and therefore doesn't render, certain types of requests. To get real world, worst-case performance testing with WPT, always use IE 11 because when you pass that standard, you also pass on all other browsers.

I stay with the hardest test and only with the one test, in a scientific approach to solve problems. I don't shop around and fudge things and change test parameters to get illusions or things I want to see. I want to see how bad it really is. The WPT I posted before, IS what your site's performance really is. And i didn't even go into mobile performance there.

That's not really relevant, it's only showing you what the adblocker removes. Not what the vast majority of the public is loading.


Edit to add: Plus, you're not even testing the same page of your site, with the WPT you just linked! Here is the page you opriginally tested and the one I tested:

Here's the one you tested with Chrome in WPT:

There's a big difference. Let's test the same page, at least.

I just did a test with IE11 on WPT. I have yet to see anything over 800 KB when I test.
http://www.webpagetest.org/result/151204_M5_2XN/

63 requests & 560 kb. Nothing is failing to load compared to the other 2 browsers.

You're not testing the same page you originally referenced.

Have you not noticed that every post after that has been on my forum home page? That one you're linking to was just an example.

All I did was test your original, referenced page. And those results were accurate, while your test you referenced on that exact page, were not. I didn't change pages or test conditions.

So, with you still using the native vBulletin mobile style for mobile (No idea how we got to talking about your full style in a mobile browsing thread) what's your objections and concerns with it? Do your members like it?

I was thinking about trying to make those segments I listed on the first post of page 2 here be responsive... without much luck lol. They made a mess when they coded this damn thing. That's how.

Anyways, so far, people are asking why it looks different but they like it.

One thing to try, just for laughs:

Download a copy of the mobile style XML and one of your desktop style XML.

Go in and load the desktop style you downloaded, as a new style and call it something different from all others.

Then load the mobile style XML, again naming it differently.

Then, try the "merge styles" feature, merging these two styles. See what results.

lol that would be a fun test but it won't let me download it.

This shows when trying to grab the xml

Hmm.... i just did it on mine and had no trouble.

Style Manager> Then look down at the default mobile style, select "Download" in the options to the far right.

On the page that results, at the top it is already set the way you need it, just click "Download"

Oh dear god. I did manage to make a child mobile theme and merge a copy of the dark style into that. Here's the results.

select "taxable mobile style". It's a wreck.

Oh wowwwww. Sum Ting Wong, it didn't populate any CSS for some reason. I got a LOT better results when I tried this. But what i got although mobile friendly, would have been way too much work to make look nice.

Oh wait. No child style. This won't work on child styles.

Hey Man, that style passed the mobile-friendly test, and also looked GREAT on my i-phone emulator!

Actually now that I've got the hang of it, I did manage to import the mobile style into a child copy of blackened. Not too bad results either.

Choose "Child of Blackened"... vbulletin named it that... lol

Wow, that's COOL. Looks and acts responsive, can't test it on google mobile-friendly test though. On this one I don't get a style number in the addressbar.

But that really responds to different browser widths, I think you're on to something here!

I've set it to be the default skin for a few minutes. I can give it a go & see how it does in the mobile test.

It passes but looks squished...
https://www.google.com/webmasters/to...com%2Fforum%2F

This gives me a idea - if someone were to go through all the stylevars which are custom - they'd be red in the lists - and manually populate all the settings from your main style into the mobile one, you would get after a bunch of work - a mobile style that is native vB but looks exactly like your desktop style!

You wouldn't mess with any CSS templates, just the stylevars.

That's much better results than I got when I tried this, as far as looks and all? Looks like you might have something to work with there.

Merging the native mobile style into a regular custom style, as a child of the style though, I think you inherit too much of the desktop CSS that way. Try it not as a child, like I described before. OR, try merging "Blackened" as a child of the mobile? Merge a copy of "Blackend" into a child of the mobile style?