Hi all, Happy Holidays.
This question and fix is long overdue and is the first of some needed steps in making my site load quicker, more effectively, and display better.
Here is my BIG question…
On my website, I have a .png graphic (a smartboard), that is 980x650 pxls and is about 123kb. It needs transparency
For the last 1.5 years, it is ON TOP of the page and window background, but beneath everything else because as you will see I have wanted to give the look that the students see a smartboard and the icons fit nicely on it.
Is this the best way to have this graphic appear? Sometimes it comes in after the icons on a slower connection, or comes in slowly.
Should I make it a WINDOW BACKGROUND or a Page BACKGROUND??? I know this is a large graphic but I am trying to improve things here.
I tried it as a WINDOW background hoping that it would zip it on the page (like what seems every professional looking website which does not load in with pieces), but what happened is the background color appeared instantly and then the large graphic took some time to come on little by little.
I think the way it is now was actually better which was surprising (I could be wrong here).
I am going to get the size of this BIG .png graphic smaller, but the quality suffers some so I think the best I can get it to is like 80kb.
Thanks for looking and sharing your thoughts on what to do for now with the large smartboard graphic (I know I have other things to get to as you’ll see)
Barry
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
This answer is short:
It basically depends on the page-construction (the plan behind) which item is better for what purpose. Band-width spoken, it shouldn’t matter - really. It is resource that needs to be loaded. I had a quick test with tinyPNG and it compressed it to 96kb lossless.
If you allow me a note:
I am not sure if modern pages are built like yours these days. Looking at the amount of decorative images and stuff (shadows, border decoration, buttons …) it has been probably 75% 7 years ago (even more) and today it’s less then 10%.
You ask for a reason?
CSS - and just as a side-step:
This is naturally not comparable to your device, but stunning - isn’t it?
I’d probably re-think the DIV-construction into smaller junks and cut the device into three peaces (Top, center, bottom). Just a thought.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
First thank you Thomas for your time to write back and your thoughts.
I also appreciate your honest view of the the site, however, one must always look at who their user is, not whether it uses the most modern format.
Hoffkids’ visitors and daily users are 98% made up of 11 and 12 year olds. So as much as it might not be flashy with CSS, it is extremely rich and simple to navigate- needs no explanation for young computer users.
It has things it can improve and I am not sure what the site you sent me even is about??? I do not even know the first thing about what that “pen” site is, does or its purpose-- can you explain please (and was it made with Freeway?)
Thanks,
Barry
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I am not sure what the site you sent me even is about??? I do not even know the first thing about what that “pen” site is, does or its purpose— can you explain please (and was it made with Freeway?)
Thomas’s point is that the iPad image on the site he directed you isn’t an image at all - it is pure CSS and as such has a ZERO load time.
And No - it was not made with FW.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Should I make it a WINDOW BACKGROUND or a Page BACKGROUND??? I know this is a large graphic but I am trying to improve things here.
If you can use this image in the background then surely it doesn’t require transparency and therefore does not need to be a png - a jpeg will give you a much smaller file size.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
we’ll isn;t that great for them 
the rest of us will have to load our images as images I suppose.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
interesting…
let me try that-
Dave, which should i use… PAGE background or WINDOW background???
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Your issue is going to be keeping all the icons etc ‘inside’ the bounds of your smartboard image ie maintaining the relationship between the background and the foreground - especially with different browser window sizes.
My simple answer is to try both and see which gives you greater ease of construction.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
so Dave,
RIght now the icons are always right where they should be; never a positioning issue at all. If I make it a background will it surely have misalignment on some monitors, or ipads, resolutions, etc?
(maybe this is why I did it this way from the start)
At the very least, maybe I should just make it a jpeg.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
My advice is always to - Build a test page
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Dave,
you made me rethink things and here is what I will do
- pull up my smartbaord .psd
- resize it as needed
- Add Canvas up top to allow for header
- Fill in the areas that were transparent with lead black (same as web page background)
- SAVE FOR WEB in PS
not use the page or window background. too risky…
.jpeg went to 26kb!!! fast!
thanks!!!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ok- now a strange PS issue.
I filled in the once transparent part of the graphic with the same color as the page background (Lead black, hex 191919) but for some reason the black is not matching the page and I can see the difference on the bottom…
not sure why…
http://www.hoffkids.com/tooltiptest.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options