Tutorial/Article on Responsive Mobile Design

[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 (https://www.google.com/webmasters/tools/mobile-friendly/).

[webmastersun]

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 :)

[ozzy47]

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

[Max Taxable]

Try to check our forum http://www.webmastersun.com is it responsive design in handy??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/151004_W1_KA9/1/details/

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

[RichieBoy67]

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!

[webmastersun]

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

Thought better if have a real example

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/151004_W1_KA9/1/details/

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

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.

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!

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

..make sure you use the htaccess file there!

Why needs to use htaccess?

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

[RichieBoy67]

The htaccesss will help with image compression among other things.

--------------- Added 1444011300 at 1444011300 ---------------

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

[Max Taxable]

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

[webmastersun]

The htaccesss will help with image compression among other things.

--------------- Added 1444011300 at 1444011300 ---------------

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

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)

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


It can do in basic steps

Add this to your header template
<meta name="viewport" content="width=device-width, initial-scale=1">

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 1444021469 at 1444021469 ---------------

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.

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.


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

[Replicant]

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.

[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]

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

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]

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

https://vborg.vbsupport.ru/external/2015/10/15.jpg

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.

[Max Taxable]

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 (https://www.google.com/webmasters/tools/mobile-friendly/).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 (http://www.webpagetest.org/result/151201_SE_2NC/)- straight As and Bs baby.

Sample it by clicking here. (www.dallascowboysuniverse.com/?styleid=63)

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

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

[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 (https://gtmetrix.com/reports/www.video-game-chat.com/KR6ad5xQ) 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]

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. (http://www.webpagetest.org/result/151203_F1_16QP/)

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

[Max Taxable]

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?

[final kaoss]

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.video-game-chat.com/1O5FVK81

[Max Taxable]

Here you go.
http://www.webpagetest.org/result/151204_AX_232/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.

Also, use the adblocker from gtmetrix and you'll see results under 300 KB.
https://gtmetrix.com/reports/www.video-game-chat.com/1O5FVK81That'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:

www.video-game-chat.com/forum/video-game-chat-announcements/194248-video-game-chat-has-been-upgraded-to-vbulletin-4-2-1-a.html

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

www.video-game-chat.com/forum/

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

[final kaoss]

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.

[Max Taxable]

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. (https://gtmetrix.com/reports/www.video-game-chat.com/KR6ad5xQ)

[final kaoss]

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.

[Max Taxable]

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?

[final kaoss]

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.

[Max Taxable]

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

[final kaoss]

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

This shows when trying to grab the xml
The item you are attempting to download contains no customizations.

[Max Taxable]

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

This shows when trying to grab the xml
The item you are attempting to download contains no customizations.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"

[final kaoss]

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.

[Max Taxable]

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.

[Max Taxable]

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

[Max Taxable]

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

[final kaoss]

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

[Max Taxable]

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!

[final kaoss]

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/tools/mobile-friendly/?url=http%3A%2F%2Fwww.video-game-chat.com%2Fforum%2F

[Max Taxable]

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.

[Max Taxable]

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/tools/mobile-friendly/?url=http%3A%2F%2Fwww.video-game-chat.com%2Fforum%2F
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?

[final kaoss]

Here's a childless one like you requested with the mobile theme imported. That one comes out fine but fails the mobile test oddly.

It's called "single child"

[Max Taxable]

Here's a childless one like you requested with the mobile theme imported. That one comes out fine but fails the mobile test oddly.I can't choose any styles on your site anymore.

[final kaoss]

it makes you do that from here when using a mobile theme.
http://www.video-game-chat.com/forum/profile.php?do=editoptions

due to http://www.video-game-chat.com/forum/index/?styleid=30 being invalid due the /index/?styleid=30 part.

[Max Taxable]

How do i get back to where I need to be?

[final kaoss]

Strip off the /index part like so works for me. Try this.
http://www.video-game-chat.com/forum/?styleid=22

[Max Taxable]

Yep that worked, so what's the name of the last style you created?

EDIT: Never mind, "Taxable Mobile" looks just like the default mobile.

[final kaoss]

The "single child" is the one.

[Max Taxable]

Yeah no real help there either, now just looks like the default desktop v4.

[final kaoss]

Yeah no real help there either, now just looks like the default desktop v4.

One which fits perfectly on the google mobile test... but fails?

[Max Taxable]

One which fits perfectly on the google mobile test... but fails?Yeah, weird.

[final kaoss]

Think I might've gotten it. It fails the google mobile test but looks great now.
http://www.video-game-chat.com/forum/forum.php

[Max Taxable]

Think I might've gotten it. It fails the google mobile test but looks great now.
http://www.video-game-chat.com/forum/forum.phpAll i am seeing is the same as last time, looks like vB4 default style.

[final kaoss]

Here's what I'm tinkering with now.

<meta http-equiv="cleartype" content="on" />
<meta name="viewport"content="width=device-width, minimum-scale=0.5, maximum-scale=1.0, user-scalable=yes initial-scale=0.5">

All I need now is "legible font sizes" and maybe the "Size tap targets appropriately", otherwise I pass most of the other stuff.
https://developers.google.com/speed/pagespeed/insights/?utm_source=MFT&utm_campaign=MFT&utm_medium=incoming-link&priorityGroup=USABILITY&url=http%3A%2F%2Fwww.video-game-chat.com%2Fforum%2F

[tommythejoat]

Is there some way to get a copy of the DCU Mobile style?

[Max Taxable]

Is there some way to get a copy of the DCU Mobile style?Yes they still sell it.That skin looks awfully familiar... like the debutant one at themecrate.themecrate dot com I believe. Although I had a heck of a time getting it from them, it was like pulling teeth. But it's only $50 USD.

[final kaoss]

True you can get the theme for $50. I think my text sizes are large enough for mobile. All I have to do now is sort out the "Tap Targets".

[tommythejoat]

I have been trying for over two weeks now to get a response from Themecrate and/or register on the demo site. Have they gone out ot business?