Current thinking (long)

J

Jim S

When I constructed the website below, my self imposed aim was to have each
picture with its caption in a single window with no scrolling, which it
does.
A some of you will recall I was converted from using full tables on every
page as placeholders (although I still use some to hold the buttons and
side by side pictures)
With the growth of mobile phone browsers I converted to XHTML and this
allowed the pictures to be seen on mobile devices with a minimum of
horizontal scrolling, but some vertical scrolling.
However since the CSS buttons I use can be very small, I am moving towards
the idea of putting all the big images on single topic pages as vertical
scrolling may be a better alternative to using tiny buttons at the top.
Before I do this, would such a move simple result in such pages taking ages
to download and thus outweigh the advantages?
 
J

Jonathan N. Little

Jim said:
With the growth of mobile phone browsers I converted to XHTML and this
allowed the pictures to be seen on mobile devices with a minimum of
horizontal scrolling, but some vertical scrolling.

How did *xhtml* do that?
 
J

Jim S

How did *xhtml* do that?

I really don't know, but it worked so I never questioned it.
However don't let that distract you :eek:)
I know I could try what I'm asking, but I have just spent ages putting the
buttons in the corner of each (and every) page, so I thought I might rest
while I sought advice.
 
D

dorayme

Jim S said:
With the growth of mobile phone browsers I converted to XHTML and this
allowed the pictures to be seen on mobile devices with a minimum of
horizontal scrolling, but some vertical scrolling.

Would have thought just good design, (no tables or other elements
with unbreakable widths) would have have been responsible for
this rather the doctype. HTML Strict is fine enough for now.
However since the CSS buttons I use can be very small, I am moving towards
the idea of putting all the big images on single topic pages as vertical
scrolling may be a better alternative to using tiny buttons at the top.

What are these alternatives exactly?
Before I do this, would such a move simple result in such pages taking ages
to download and thus outweigh the advantages?

Does not make much difference to load times whether pictures are
HTML/CSSd to scroll down or not.
 
1

123Jim

Jim S said:
When I constructed the website below, my self imposed aim was to have each
picture with its caption in a single window with no scrolling, which it
does.
A some of you will recall I was converted from using full tables on every
page as placeholders (although I still use some to hold the buttons and
side by side pictures)
With the growth of mobile phone browsers I converted to XHTML and this
allowed the pictures to be seen on mobile devices with a minimum of
horizontal scrolling, but some vertical scrolling.
However since the CSS buttons I use can be very small, I am moving towards
the idea of putting all the big images on single topic pages as vertical
scrolling may be a better alternative to using tiny buttons at the top.
Before I do this, would such a move simple result in such pages taking
ages
to download and thus outweigh the advantages?

Couple of things occur to me. You can have a different stylesheet for
mobile devices and other devices
http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
This means you can have relatively larger buttons on the mobile devices if
required.

The other thing to consider ... Many people pay per megabyte of data
downloaded on mobile devices .. they might not like to download many
megabytes of images on one page .. thumbnails are the way to go (keep)
 
J

Jim S

Would have thought just good design, (no tables or other elements
with unbreakable widths) would have have been responsible for
this rather the doctype. HTML Strict is fine enough for now.


What are these alternatives exactly?


Does not make much difference to load times whether pictures are
HTML/CSSd to scroll down or not.

I never make myself clear to you. It must be the equator.
My alternative to having each picture on its own would be to have all the
pictures in the 'Local' section on one page so the user would scroll down
using whatever method their device uses.
 
J

Jim S

Couple of things occur to me. You can have a different stylesheet for
mobile devices and other devices
http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
This means you can have relatively larger buttons on the mobile devices if
required.

The other thing to consider ... Many people pay per megabyte of data
downloaded on mobile devices .. they might not like to download many
megabytes of images on one page .. thumbnails are the way to go (keep)

I have just modified this page
http://www.jimscott.co.uk/St_Marys/St_Marys_10_island.html
(So dorayme can see what I did not make clear)
 
D

dorayme

Jim S said:
I never make myself clear to you. It must be the equator.

Perhaps all the folk north of the equator would like to speak up
and say how clearly they remember your website and how clearly
they immediately understood the specific changes you alluded to
and who, north of the equator, did not. And for good measure,
folk south of the equator might do same. And then, when all the
facts are in, we might assess whether it has anything to do with
the equator.
 
D

dorayme

Jim S said:
I have just modified this page
http://www.jimscott.co.uk/St_Marys/St_Marys_10_island.html
(So dorayme can see what I did not make clear)

I always like looking at your pictures. I think I am very
homesick. Can you please try to find out if that little island
could be evacuated and me stay there. I would do your website for
nothing if you can swing this one, make sure there is fast
broadband there. I will bring the equator with me so I can still
be south of it, not to upset too many things at once (being south
of it being part of the dorayme identity).
 
R

Rob W.

Op 16-12-2010 23:43, dorayme schreef:
Perhaps all the folk north of the equator would like to speak up
and say how clearly they remember your website and how clearly
they immediately understood the specific changes you alluded to
and who, north of the equator, did not. And for good measure,
folk south of the equator might do same. And then, when all the
facts are in, we might assess whether it has anything to do with
the equator.


<speaking up>
Maybe it's not the Equator, maybe it's the Greenwich Meridian. I'm just
east of it.
</speaking up>
 
D

dorayme

"Rob W. said:
Op 16-12-2010 23:43, dorayme schreef:


<speaking up>
Maybe it's not the Equator, maybe it's the Greenwich Meridian. I'm just
east of it.
</speaking up>

It was about latitude, not longitude. And, besides this little
detail, there was an implied suggestion that things relevant to
settle the question of whether the equator has anything to do
with the communication, as received south of it, needed to be
offered.
 
J

Jim S

It was about latitude, not longitude. And, besides this little
detail, there was an implied suggestion that things relevant to
settle the question of whether the equator has anything to do
with the communication, as received south of it, needed to be
offered.

Now you can see why I just went ahead and tried it.
The big page with lots of pictures does take a long time to load uo on a
mobile or my mobile anyhoo.
 
B

Beauregard T. Shagnasty

Jim said:
Now you can see why I just went ahead and tried it.
The big page with lots of pictures does take a long time to load uo on
a mobile or my mobile anyhoo.

It took over a minute on my 13Mbps cable connection as well. Something
wrong with your server?
 
D

dorayme

"Beauregard T. Shagnasty said:
It took over a minute on my 13Mbps cable connection as well. Something
wrong with your server?

Took 10 secs on mine. One of the pics is a reasonable 78K,
another is unreasonable at 228K, have not checked the others.
Wish I knew what exactly Jim's question was. I still don't!
 
J

Jim S

Took 10 secs on mine. One of the pics is a reasonable 78K,
another is unreasonable at 228K, have not checked the others.
Wish I knew what exactly Jim's question was. I still don't!

One last try, before I come down there and show/thump you.

Currently if I click on the St Mary's Island thumbnail on the home page I
get a new thumbnail page:
http://www.jimscott.co.uk/St_Marys/St_Marys_00_thumbnails.html

(Apart from the 1st one Curry's Point) if I now click on a thumbnail, it
takes me to a page with ONE picture on it and this page leads to the next
or back to the thumbnail page.

My new alternative would be to do away with the individual photo pages and
only have one page with all the photos on it - like the one you now get if
you click on the Curry's Point thumbnail.

Geddit?
 
D

dorayme

Jim S said:
.


One last try, before I come down there and show/thump you.

Currently if I click on the St Mary's Island thumbnail on the home page I
get a new thumbnail page:
http://www.jimscott.co.uk/St_Marys/St_Marys_00_thumbnails.html

(Apart from the 1st one Curry's Point) if I now click on a thumbnail, it
takes me to a page with ONE picture on it and this page leads to the next
or back to the thumbnail page.

My new alternative would be to do away with the individual photo pages and
only have one page with all the photos on it - like the one you now get if
you click on the Curry's Point thumbnail.

Geddit?

Yes, I ged the two alternatives you are wrestling with now. To
avoid you coming over and thumping me, the pleasure of you being
so honest in the threat being entertainment enough for me, I will
venture forth on the matter with confidence.

It does not matter if there is just one enlarged pic or just a
few on a page, as long as the total loads fast. If you have 4 or
5 pics about 70K, these days, that is fair enough and you would
do this if it is convenient. If a group of pics are related, it
is a good reason, the user just can scroll, he or she will
probably be looking at the first one while others load.

There is *no firm rule* on this and it depends: in your case, I
noticed that one of your pics was over 200k. If you are going to
prepare pics that big in file size, then that is an argument for
not many, maybe just one on a page. That said, all the others
look reasonable and I note you have improved in image preparation
from years back.

If you have a lot of related enlargements, consider making them
not quite so large in px size (which brings down the file size)
for the benefit of them being together on a page. Try not to have
a whole MB on a page (as you do), that is getting a bit big but
perhaps I am old fashioned.

If big is very important, you can make each normal 350 to 600px
enlargement a link to an even larger. No messing about: just make
a folder called "biggest" and stick in your 800 to 1000px wide
versions there on the server and simply link like:

<a href="biggest/lighthouse.jpg" title="see a bigger version
still if you like"><img src="big/lighthouse.jpg" alt=""></a>

No need for any special page for the biggest, the browser will
simply display the pic starting in top left corner. Most people
would likely be satisfied with your 300 to 600px versions, the
*biggest* just being an extra.

Just btw, it is a very handy thing to have the different sizes in
different folders because all the files can have the same names,
a big saving in construction. It is also very handy in how it
ties in with batch image prep. You start with the biggest, and
instruct the image program to make smaller versions and to put
them in a different folder. Not having to worry about the file
names is a big gain, the folder on the server will identify the
thumbs from the normal enlargements from the super sized ones.

3. Do consider - yeah I know, I risk being thumped again - some
handy html/css for pics and captions. There is no point in not
taking advantage of the fabulous inline-block css for creating
flexible pic/captions if you are going to have more than one pic
and caption per page, take advantage of the direction you are
going in. Get with the program as my daughter says!

Something like this is what I have done and it is terrific when
people have big wide screens, they often do not have to scroll.
They send me gifts (anyone want some stuffed Teddy Bears?)
because they are finally getting value from their monitor
investments.

This is roughly how for both thumbnail pages and medium
enlargement pages:

<style type="text/css" media="screen">
div {padding: 0; display: inline-block; margin: 1em 2em 1em 0;}
div div {padding: 0; margin: 0;}
div img {display: block; border: 2px ridge #ccc;}
</style>

<!-- support IE 6/7 -->
<!--[if lt IE 8]>
<style type="text/css">
div {
display: inline;
zoom: 1;
}
</style>
<![endif]-->

<div>
<img src="pics/big/...jpg" alt="">
<div style="width: picWidthpx">Caption...</div>
</div>

<div>
<img src="pics/big/...jpg" alt="">
<div style="width: picWidthpx">Caption...</div>
</div>

<div>
<img src="pics/big/...jpg" alt="">
<div style="width: picWidthpx">Caption...</div>
</div>

There are improvements you can add but this is the basic.
 
J

Jim S


Yes, I ged the two alternatives you are wrestling with now. To
avoid you coming over and thumping me, the pleasure of you being
so honest in the threat being entertainment enough for me, I will
venture forth on the matter with confidence.

It does not matter if there is just one enlarged pic or just a
few on a page, as long as the total loads fast. If you have 4 or
5 pics about 70K, these days, that is fair enough and you would
do this if it is convenient. If a group of pics are related, it
is a good reason, the user just can scroll, he or she will
probably be looking at the first one while others load.

There is *no firm rule* on this and it depends: in your case, I
noticed that one of your pics was over 200k. If you are going to
prepare pics that big in file size, then that is an argument for
not many, maybe just one on a page. That said, all the others
look reasonable and I note you have improved in image preparation
from years back.

If you have a lot of related enlargements, consider making them
not quite so large in px size (which brings down the file size)
for the benefit of them being together on a page. Try not to have
a whole MB on a page (as you do), that is getting a bit big but
perhaps I am old fashioned.

If big is very important, you can make each normal 350 to 600px
enlargement a link to an even larger. No messing about: just make
a folder called "biggest" and stick in your 800 to 1000px wide
versions there on the server and simply link like:

<a href="biggest/lighthouse.jpg" title="see a bigger version
still if you like"><img src="big/lighthouse.jpg" alt=""></a>

No need for any special page for the biggest, the browser will
simply display the pic starting in top left corner. Most people
would likely be satisfied with your 300 to 600px versions, the
*biggest* just being an extra.

Just btw, it is a very handy thing to have the different sizes in
different folders because all the files can have the same names,
a big saving in construction. It is also very handy in how it
ties in with batch image prep. You start with the biggest, and
instruct the image program to make smaller versions and to put
them in a different folder. Not having to worry about the file
names is a big gain, the folder on the server will identify the
thumbs from the normal enlargements from the super sized ones.

3. Do consider - yeah I know, I risk being thumped again - some
handy html/css for pics and captions. There is no point in not
taking advantage of the fabulous inline-block css for creating
flexible pic/captions if you are going to have more than one pic
and caption per page, take advantage of the direction you are
going in. Get with the program as my daughter says!

Something like this is what I have done and it is terrific when
people have big wide screens, they often do not have to scroll.
They send me gifts (anyone want some stuffed Teddy Bears?)
because they are finally getting value from their monitor
investments.

This is roughly how for both thumbnail pages and medium
enlargement pages:

<style type="text/css" media="screen">
div {padding: 0; display: inline-block; margin: 1em 2em 1em 0;}
div div {padding: 0; margin: 0;}
div img {display: block; border: 2px ridge #ccc;}
</style>

<!-- support IE 6/7 -->
<!--[if lt IE 8]>
<style type="text/css">
div {
display: inline;
zoom: 1;
}
</style>
<![endif]-->

<div>
<img src="pics/big/...jpg" alt="">
<div style="width: picWidthpx">Caption...</div>
</div>

<div>
<img src="pics/big/...jpg" alt="">
<div style="width: picWidthpx">Caption...</div>
</div>

<div>
<img src="pics/big/...jpg" alt="">
<div style="width: picWidthpx">Caption...</div>
</div>

There are improvements you can add but this is the basic.

Thanks d.
I'll look into the big picture thingy.
However my idea if putting all the pictures in one folder was NOT one of my
best ideas because it ceases to be reasonable where there are scores of
pictures in a folder. (I guess I already knew that).
My maximum height/width combination of 460/840 stems from assuming some
folks still operate on 800 x 600 screens and so I can get a caption in
without scrolling down (much). Having said that, my local library uses a
setup where my 610 wide images fill their big screens.
I have been playing with the CSS button size so it doesn't look daft on a
desktop, but is big enough for a mobile touch screen.
Now to find the picture that she was banging on about being 220k+
 
B

Beauregard T. Shagnasty

notbob said:
I'm hardly one to be giving advice, being so new to the html/css
thing, but I did run across this, last night. Perhaps it may be of
help with some alternate ideas:

<http://www.webreference.com/programming/css_gallery2/index.html>

There are some thought-provoking ideas shown there which might help with
design processes. However, the author recommends XHTML and does not
specify either Strict or Transitional. See "Section 2 The !DOCTYPE".
Then he states "I use XHTML1.1 for all my current web pages." but the
page itself uses HTML 4.01 Transitional. <lol!>

I'd recommend using HTML 4.01 Strict.
http://tekrider.net/html/doctype.php
 
J

Jim S

I'm hardly one to be giving advice, being so new to the html/css
thing, but I did run across this, last night. Perhaps it may be of
help with some alternate ideas:

http://www.webreference.com/programming/css_gallery2/index.html

nb

My problem is that my groups need text and my large pictures need captions.

I'm coming round to thinking I had got it more or less right and if I can
get the thumbnails so they are big enought to touch, but not so big that
they look silly on a desktop..
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top