Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 03 Oct 2015, 21:02
final kaoss final kaoss is offline
 
Join Date: Apr 2006
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.

Last edited by final kaoss; 03 Oct 2015 at 21:32.
Reply With Quote
  #2  
Old 04 Oct 2015, 15:42
webmastersun's Avatar
webmastersun webmastersun is offline
 
Join Date: Oct 2013
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

Last edited by webmastersun; 05 Oct 2015 at 05:56.
Reply With Quote
  #3  
Old 04 Oct 2015, 18:24
ozzy47's Avatar
ozzy47 ozzy47 is offline
 
Join Date: Aug 2009
Real name: Chris
Posting a link to your site in no way helps what the OP asked for.
__________________
You can get access to my 180 mods for vB 3.6 - 4.x at The Admin Zone as well as the professional support you are used to. New vBulletin Spider Definitions, vBulletin Spiders List Hits 1000 Spiders! ​ OzzModz down. Site has had a data breach, checking how the intrusion happened. Change your PW if you use the same one on my site and others.
Reply With Quote
  #4  
Old 04 Oct 2015, 18:39
Max Taxable's Avatar
Max Taxable Max Taxable is offline
 
Join Date: Feb 2011
Originally Posted by webmastersun View Post
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/15...KA9/1/details/

This is far from a good example of true mobile friendliness.
Reply With Quote
  #5  
Old 05 Oct 2015, 01:12
RichieBoy67's Avatar
RichieBoy67 RichieBoy67 is offline
 
Join Date: Apr 2004
Real name: Richie
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!
__________________

Let us take care of your forum, seo, seo reports, maintenance, what ever you need.

Reply With Quote
  #6  
Old 05 Oct 2015, 02:33
webmastersun's Avatar
webmastersun webmastersun is offline
 
Join Date: Oct 2013
Originally Posted by ozzy47 View Post
Posting a link to your site in no way helps what the OP asked for.
Thought better if have a real example

Originally Posted by Max Taxable View Post
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.
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.

Originally Posted by RichieBoy67 View Post
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?
__________________
The best webmaster forum & internet marketing forum for webmasters and internet marketers.
Reply With Quote
  #7  
Old 05 Oct 2015, 03:13
RichieBoy67's Avatar
RichieBoy67 RichieBoy67 is offline
 
Join Date: Apr 2004
Real name: Richie
The htaccesss will help with image compression among other things.

--------------- Added 05 Oct 2015 at 03:15 ---------------

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

Let us take care of your forum, seo, seo reports, maintenance, what ever you need.

Reply With Quote
  #8  
Old 05 Oct 2015, 05:45
Max Taxable's Avatar
Max Taxable Max Taxable is offline
 
Join Date: Feb 2011
Originally Posted by webmastersun View Post
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.
Reply With Quote
  #9  
Old 05 Oct 2015, 05:55
webmastersun's Avatar
webmastersun webmastersun is offline
 
Join Date: Oct 2013
Originally Posted by RichieBoy67 View Post
The htaccesss will help with image compression among other things.

--------------- Added 05 Oct 2015 at 03:15 ---------------

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)

Originally Posted by final kaoss View Post
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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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 05 Oct 2015 at 06:04 ---------------

Originally Posted by Max Taxable View Post
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.

Originally Posted by Max Taxable View Post
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.
Reply With Quote
  #10  
Old 05 Oct 2015, 14:33
Replicant's Avatar
Replicant Replicant is offline
 
Join Date: Sep 2014
Real name: Mel
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.
__________________
VB5 mods - RepliClock VB4 mods - Member Online Status
Reply With Quote
  #11  
Old 05 Oct 2015, 16:10
final kaoss final kaoss is offline
 
Join Date: Apr 2006
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.
Reply With Quote
  #12  
Old 05 Oct 2015, 17:17
Max Taxable's Avatar
Max Taxable Max Taxable is offline
 
Join Date: Feb 2011
Originally Posted by webmastersun View Post
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 View Post
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.
Reply With Quote
  #13  
Old 05 Oct 2015, 17:57
Replicant's Avatar
Replicant Replicant is offline
 
Join Date: Sep 2014
Real name: Mel
Originally Posted by final kaoss View Post
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.
__________________
VB5 mods - RepliClock VB4 mods - Member Online Status
Reply With Quote
  #14  
Old 05 Oct 2015, 21:07
TheLastSuperman's Avatar
TheLastSuperman TheLastSuperman is offline
 
Join Date: Sep 2008
Real name: Michael Miller Jr
Red face

Originally Posted by Max Taxable View Post
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.
__________________
Daddy Does Dios and Figs!
https://www.linkedin.com/in/thelastsuperman

Search - Use the search feature to find similar issues/answers.
Information - Include screenshots, copy/pasted error codes, url etc.
Fixed - Please return to your thread/post and let us know how it was fixed!
Thanks - For participating! Click the "Like" on a post if someone helped you!

Last edited by TheLastSuperman; 05 Oct 2015 at 21:16.
Reply With Quote
  #15  
Old 01 Dec 2015, 03:02
Max Taxable's Avatar
Max Taxable Max Taxable is offline
 
Join Date: Feb 2011
Originally Posted by final kaoss View Post
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:

Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 05:18.

Layout Options | Width: Wide Color: