Multi
Multi
Closed
  • Pages:
  • 1
  • 7
Outline Alphacide Featured Premiere!
Topic Started: Saturday, 26. November 2011, 15:07 (7,291 Views)
Rarez
No Avatar
Level 1
The skin looks good but is badly optimized imo.

Compress the Javascript files. This minimizes the page file size and therefore faster loading (original size= 30kb, reduced to 11kb [example]). Nothing is compromised by doing this. http://jscompress.com

Example JS/jQuery files I found that weren't compressed =\
http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js
http://z4.ifrm.com/30296/128/0/p1096392/H2.js
http://z4.ifrm.com/30296/128/0/p1096544/TableBorder.js
http://z4.ifrm.com/30296/128/0/p1099627/Alphacide.js
http://z3.ifrm.com/53/36/0/p400403/reset.js

Some of the above files don't even need to be separate. They can be combined into a single file.

There were some other random "scripts" that could be merged into a single .js file & compressed. Optimization. Faster loading.

I noticed you used images for pretty much everything. I can see the need for some div's/places but not *every* single thing. You should consider using CSS3 gradients. Instant loading compared to images. If that isn't an option, consider using image sprites for the smaller gradients/images.

Other than that, the skin looks good.

edit: Just noticed Google Font API was being used... jeez, no wonder the page flashes. It's a bad idea to use it for your body font. Regardless of your page. It will always flash. That's never a good thing. You should consider using Trebuchet MS instead. It looks like whatever you guys are using and comes installed in most computers nowadays.

edit2: Also consider using HTML5 caching for your js files.

That's all the tips I'm giving for now ;)
Edited by Rarez, Saturday, 3. December 2011, 14:10.
Off
Profile
Top
 
Aidan
Member Avatar
Level 12
Rarez
Saturday, 3. December 2011, 14:02
The skin looks good but is badly optimized imo.

Compress the Javascript files. This minimizes the page file size and therefore faster loading (original size= 30kb, reduced to 11kb [example]). Nothing is compromised by doing this. http://jscompress.com

Example JS/jQuery files I found that weren't compressed =\
http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js
http://z4.ifrm.com/30296/128/0/p1096392/H2.js
http://z4.ifrm.com/30296/128/0/p1096544/TableBorder.js
http://z4.ifrm.com/30296/128/0/p1099627/Alphacide.js
http://z3.ifrm.com/53/36/0/p400403/reset.js

Some of the above files don't even need to be separate. They can be combined into a single file.

There were some other random "scripts" that could be merged into a single .js file & compressed. Optimization. Faster loading.

I noticed you used images for pretty much everything. I can see the need for some div's/places but not *every* single thing. You should consider using CSS3 gradients. Instant loading compared to images. If that isn't an option, consider using image sprites for the smaller gradients/images.

Other than that, the skin looks good.

edit: Just noticed Google Font API was being used... jeez, no wonder the page flashes. It's a bad idea to use it for your body font. Regardless of your page. It will always flash. That's never a good thing. You should consider using Trebuchet MS instead. It looks like whatever you guys are using and comes installed in most computers nowadays.

edit2: Also consider using HTML5 caching for your js files.

That's all the tips I'm giving for now ;)
H2.js, TableBorder.js, and Alphacide.js are the only three files that I have control over. The first .js file is something ZetaBoards has added by default, I believe. The last .js file is one that Joe added to Outline itself. The reason those three I mentioned earlier are in separate external files is because each does something different. The H2.js file may be updated at one point or another, but it's something I use for almost all of my themes. TableBorder.js is only for adding a "table border". Alphacide.js is the codes used to make the theme what it is, basically. It's the file that has all the additional JavaScript that is solely for this theme.

I've never used CSS3 gradients, but that's because I have no experience with it. I'll definitely look into it when a patch/update is made.

I'm no professional with fonts either. Where do you suggest the Google Web Font is put? Also, I have no experience with HTML5 at all. The only thing I really did for this theme was the CSS and some of the HTML (the JavaScript in the Alphacide.js file was mostly done by Cory).
Off
Profile
Top
 
Night Rage
No Avatar
Level 5
:( DPM Do you know how to fix my errors yet?
Off
Profile
Top
 
Aidan
Member Avatar
Level 12
Night Rage
Saturday, 3. December 2011, 04:12
correct now that is fixed
:) what about my pip error and .zetaTab Error with the bottom part of the table bored repeating?
I have asked Cory about both issues as I have no idea why other is occurring. I'll get back to you in a PM message as soon as I have a fix.
Off
Profile
Top
 
Night Rage
No Avatar
Level 5
ok Thank you :) For now Im using the the all in one image pip till this gets fixed :)
Off
Profile
Top
 
Dragon Lord
Member Avatar
Gaming4Life
I get a weird problem where I cannot click in the bottom right area of the fast reply box, nor can I click on the "down" arrow for the Fast Reply scroll bar. Can make it rather hard to type if I need to click outside of the box mid-sentence and I left off in that area.
Off
Profile
Top
 
Aidan
Member Avatar
Level 12
Dragon Lord
Saturday, 3. December 2011, 23:31
I get a weird problem where I cannot click in the bottom right area of the fast reply box, nor can I click on the "down" arrow for the Fast Reply scroll bar. Can make it rather hard to type if I need to click outside of the box mid-sentence and I left off in that area.
I forgot to mention I edited the ThemeAppearance.txt file again with this fix. Thanks for pointing it out.
Off
Profile
Top
 
Night Rage
No Avatar
Level 5
wait so theirs another fix to be applied to the skin now?
Off
Profile
Top
 
Rarez
No Avatar
Level 1
DaPizzaMan
Saturday, 3. December 2011, 17:22
Rarez
Saturday, 3. December 2011, 14:02
The skin looks good but is badly optimized imo.

Compress the Javascript files. This minimizes the page file size and therefore faster loading (original size= 30kb, reduced to 11kb [example]). Nothing is compromised by doing this. http://jscompress.com

Example JS/jQuery files I found that weren't compressed =\
http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js
http://z4.ifrm.com/30296/128/0/p1096392/H2.js
http://z4.ifrm.com/30296/128/0/p1096544/TableBorder.js
http://z4.ifrm.com/30296/128/0/p1099627/Alphacide.js
http://z3.ifrm.com/53/36/0/p400403/reset.js

Some of the above files don't even need to be separate. They can be combined into a single file.

There were some other random "scripts" that could be merged into a single .js file & compressed. Optimization. Faster loading.

I noticed you used images for pretty much everything. I can see the need for some div's/places but not *every* single thing. You should consider using CSS3 gradients. Instant loading compared to images. If that isn't an option, consider using image sprites for the smaller gradients/images.

Other than that, the skin looks good.

edit: Just noticed Google Font API was being used... jeez, no wonder the page flashes. It's a bad idea to use it for your body font. Regardless of your page. It will always flash. That's never a good thing. You should consider using Trebuchet MS instead. It looks like whatever you guys are using and comes installed in most computers nowadays.

edit2: Also consider using HTML5 caching for your js files.

That's all the tips I'm giving for now ;)
H2.js, TableBorder.js, and Alphacide.js are the only three files that I have control over. The first .js file is something ZetaBoards has added by default, I believe. The last .js file is one that Joe added to Outline itself. The reason those three I mentioned earlier are in separate external files is because each does something different. The H2.js file may be updated at one point or another, but it's something I use for almost all of my themes. TableBorder.js is only for adding a "table border". Alphacide.js is the codes used to make the theme what it is, basically. It's the file that has all the additional JavaScript that is solely for this theme.

I've never used CSS3 gradients, but that's because I have no experience with it. I'll definitely look into it when a patch/update is made.

I'm no professional with fonts either. Where do you suggest the Google Web Font is put? Also, I have no experience with HTML5 at all. The only thing I really did for this theme was the CSS and some of the HTML (the JavaScript in the Alphacide.js file was mostly done by Cory).
I went ahead and created a Zetaboard myself. Jeez, it's pretty much the same as Invisionfree. No filemanager, no XML skin sets, etc. The ACP is really small. Could go on for hours...

I did some of the changes I suggested and yup, the loading greatly improved. Nothing was compromised.

Compressed all the JS files, a script in the "layout", and put them into a single file. Size reduced from 12kb (total) to 9.88kb. Looks and functions a lot cleaner as well. Then I used HTML5 caching: http://s11.zetaboards.com/rarezdev/index/

I then removed Google Web Fonts and replaced all instances of Droid Sans with Arial.

Cleaned up the HTML a bit as well.

Result: perfect loading, browser only loads the (small) js file once & caches it forever (due to html5 cache trick), page doesn't flash due to Google Web Fonts.

Here is the file with Tableborder, H2, Alphacide, and copyright code (in that order): http://darknight.b1.jcink.com/uploads/darknight/tableh2.js

They don't need to be separate. They can all be combined into a single file and compressed for optimized loading. Nothing is comprimised. If you guys are unable to read it, then I suggest this: have a "working copy". That is a copy that you will use for the actual skin (compressed), and a "master copy". A copy with all the notes, spacing, and so forth.

A much better skin now.

;)

edit: Some of the ZB js files themselves could use some help lol. Both oh well, w can't access those =[
Edited by Rarez, Sunday, 4. December 2011, 09:26.
Off
Profile
Top
 
Cody
Member Avatar
Winter is coming.
You may now direct comments and bugs here. :)

Outline Archives
N E W S

This announcement is outdated and has been archived.

Cody | Outline Staff
Posted Image
Posted Image
Off
Profile
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Archived News · Next Topic »
Closed
  • Pages:
  • 1
  • 7

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..