OK, I didn't know that. No problem. I was talking about lightbox btw (couldn't think what it was called).
I think I like this theme just fine. Do my galleries look OK? Everything seems to work OK and I think it looks nice. I don't know enough to make my own customization so I am happy with the gradient theme for now.
We left off the /popular gallery from showing on your homepage. That started life for you, in your control panel, because you've customized. And, we gave you several ways to turn off photorank. Though I'm not sure why - as two of your photos were on the most popular list first two pages a few days back. Great way to draw more people to our fine work
OK, I get it. Thanks. The popular gallery is something else.
And I was thrilled, Andy, to have my photos be on the most popular page. Really I was.
I'm so torn by this whole thing. I DO want to be a part of the whole smugmug community. But then I can't have the gallery curators viewing my portfolio wondering what those thumbs are. Or people who's portraits I've taken wondering if I am asking strangers to rate them personally. Or corporations who need headshots coming to my site and thinking I am not a serious photographer because it looks like I'm running a photo ranking game.
My answer is I just need to create another site. A stuffy, simple professional site. Then I can be a looser with my smugmug site. Once I create a business site, I will be able to turn all the fun stuff back on and call smugmug my personal site.
I like what you guys are doing. I really do. I hate missing out on the fun. I've resigned to the notion that I'm just trying to make smugmug something it isn't.
Thanks for testing out my customizations, Andy. Is there a way to set my theme to "smugmug classic" on all my galleries without having to go into every one of my galleries and set it manually? Is there a global change somewhere? Or maybe a code hack?
OK, I get it. Thanks. The popular gallery is something else.
And I was thrilled, Andy, to have my photos be on the most popular page. Really I was.
I'm so torn by this whole thing. I DO want to be a part of the whole smugmug community. But then I can't have the gallery curators viewing my portfolio wondering what those thumbs are. Or people who's portraits I've taken wondering if I am asking strangers to rate them personally. Or corporations who need headshots coming to my site and thinking I am not a serious photographer because it looks like I'm running a photo ranking game.
My answer is I just need to create another site. A stuffy, simple professional site. Then I can be a looser with my smugmug site. Once I create a business site, I will be able to turn all the fun stuff back on and call smugmug my personal site.
I like what you guys are doing. I really do. I hate missing out on the fun. I've resigned to the notion that I'm just trying to make smugmug something it isn't.
Thanks for testing out my customizations, Andy. Is there a way to set my theme to "smugmug classic" on all my galleries without having to go into every one of my galleries and set it manually? Is there a global change somewhere? Or maybe a code hack?
thanks!
Trish
Trish - for exposure's sake, you should make a "portfolio gallery," put in representative best work, keyword the hell out of it, make it public, allow thumbs, and enjoy the goodness. You *can* have it both ways y'know
Theme: Yes - go to control panel>organize&customize>all pages theme>and choose "smugmug classic"
Now look around your site. You can easily change back, btw.
Trish - for exposure's sake, you should make a "portfolio gallery," put in representative best work, keyword the hell out of it, make it public, allow thumbs, and enjoy the goodness. You *can* have it both ways y'know
Theme: Yes - go to control panel>organize&customize>all pages theme>and choose "smugmug classic"
Now look around your site. You can easily change back, btw.
Thanks Andy. Changing to "classic" was easy. I knew there had to be a way.
Maybe I will set up a smugmug rate-em portfolio gallery. That's a good idea. When you say "allow thumbs" what is that?
you can bar thumbs from your whole site with the javascript thing - as you've done
or
you enable / disable by gallery customization settings.
Hi Andy,
Pesty here.
It turns out changing to 'smugmug classic' did effect some changes from the 'default' theme. Mosly in the Journal pages where I have some HTML in my captions. All my bold stuff turned blue, and I also get these thick white lines between each of my images.
It turns out changing to 'smugmug classic' did effect some changes from the 'default' theme. Mosly in the Journal pages where I have some HTML in my captions. All my bold stuff turned blue, and I also get these thick white lines between each of my images.
Also, the 'smugmug classic' theme displays differently in Firefox and Internet Explorer. More text turned blue in IE. And if I don't have the new border-bottom code in, IE has a pleasing solid thin grey line after each image while Firefox has a distracting thick white line.
I would be happiest with that solid thin grey line in all browsers. But if it's safer to go with the dashed lines (safe as in I know it will display right in all browsers) I'll stick with that.
That first red <b> tag does not have a corresponding </b> which I think is causing your .journal_entry bottom border to be bolded. This is an example of why I don't like the !important tag. In this case it was able to mask a problem in the html.
Also there's no need to use a <big> tag. We can adjust your font size with CSS.
Also, the 'smugmug classic' theme displays differently in Firefox and Internet Explorer. More text turned blue in IE. And if I don't have the new border-bottom code in, IE has a pleasing solid thin grey line after each image while Firefox has a distracting thick white line.
I would be happiest with that solid thin grey line in all browsers. But if it's safer to go with the dashed lines (safe as in I know it will display right in all browsers) I'll stick with that.
thanks!!
Trish
Again, this is due to an unclosed <b> tag I'm pretty sure. Close that tag and then we'll move on.
Y'all don't want to hear me, you just want to dance.
That first red <b> tag does not have a corresponding </b> which I think is causing your .journal_entry bottom border to be bolded. This is an example of why I don't like the !important tag. In this case it was able to mask a problem in the html.
Also there's no need to use a <big> tag. We can adjust your font size with CSS.
Now on to your questions.
this:
.caption b {color:#f00;}
turns them red. Adjust the color to whatever you want.
Again, this is due to an unclosed <b> tag I'm pretty sure. Close that tag and then we'll move on.
Thanks Mike. I closed the tag.
So ".caption b" means this is what I would like the <b>'s to look like in my captions. Yes?
You also said don't use <big>. Instead, do my font sizing though CSS.
What's the code I need for that? In this example, I wanted a bold address and a bold but larger name on top.
My site is really just a house of cards. It's why I would like it to stop changing. If I knew what I was doing, I probably wouldn't care so much about the changes. And it's not that I don't find the coding interesting, but we all have priorities and I keep falling back on the I'm-a-little-lost-but I'll-poke-at-it-until-it-looks-good method of customization.
Which works really well. Until it doesn't.
Also, I don't know what you are talking about when you say the !import tag. And I don't know why this is an example of how it is not a good thing.
My site is really just a house of cards. It's why I would like it to stop changing. If I knew what I was doing, I probably wouldn't care so much about the changes. And it's not that I don't find the coding interesting, but we all have priorities and I keep falling back on the I'm-a-little-lost-but I'll-poke-at-it-until-it-looks-good method of customization.
Don't forget we're volunteering our time as a resource to you. I for one would rather you try things out in the webdev CSS editor and then if you can't get them to work to come to in here. You can post the code that you tried and what you're trying to make your site do. Then we can look at it and tell you why it didn't act like you wanted it to. That is quicker for everyone than the poking at it and putting stuff in until it breaks and then running in here for help. Generally that method involves a whole round of us saying "okay first remove this, close this, do this...etc" before we can even start to get you what you want.
Also, I don't know what you are talking about when you say the !import tag. And I don't know why this is an example of how it is not a good thing.
thanks!!
Trish
That wasn't directed towards you. I'm sort of known for my dislike of the CSS !important attribute. Your site was a great example of one of the reasons why I dislike it. You didn't close a <b> tag which among other things caused the big solid white line in your page. What's more, that couldn't be fixed by using any amount of specificity with the CSS tags in browsers other than IE. But what could fix it is the !important tag. That's great except for the fact that you still had an open tag in your html which is bad. Point is that it would have taken us less time to figure it out had the !important tag not been used. When you're helping as many people as we do in a given day, that's time that could be better spent on other things.
Don't forget we're volunteering our time as a resource to you. I for one would rather you try things out in the webdev CSS editor and then if you can't get them to work to come to in here. [snip]
What is the webdev CSS editor? I've just been typing it in the customizations page.
We're planning on making the 'smugmug gradient' theme our new default look & feel after:
A) we get feedback. Is it good? Do you like it? Have suggestions?
and
does it work with your customization? Jimmy probably has some suggestions for small changes (background = none on some places) to get rid of the gradients in your customization.
So if you've got complaints, suggestions, kudos, etc... here's the place.
Pixels?! How Quaint. Y'all please excuse me while I hit Mike over the head with a nice (albeit by now slightly broken) high resolution display.
:soapbox
I mean for crying out loud, this is 2006. Higher and higher resolution displays are turning up all over the place, and folks still think it's acceptable to hard code PIXEL counts???
Allow me to suggest a better approach.
I'm going to ASSUME that you're attempt with that 20px value is to get a font about 2x the size of a "normal" font. But that's just an assumption, because I don't know what anyone has as their "normal" font setting, or what their display resolution is (either in reality, or in the deluded mind of their operating system for windows users.) But then neither do you, which is why you should never, ever, hard code anything in PIXELS. On one display I have at work, 20 pixels is about a 3/16 of an inch tall, which means that if the rest of your site is coded with the same assumptions, and using say an 8 or 9 pixel font for "normal" text then as soon as I loaded it, I said "ah, here's someone that doesn't know what they're doing" and left it.
So, we make that assumption and move on... Two ways you can approach this, let's say you really wanted a multiple of the normal font, let's say 3x and 2x respectively:
Note I used the "em" unit value. Ems are multipliers. They are a proportion of the containing element, or the base size if uncontained. Now if you had really wanted 2.5x, well, you can have that too:
That gives you the ability to control the size of your text relative to some other element, such as the containing object's text. Pixels is also a relative measure, but they are relative to something that (1) you have no control over, and (2) varies WILDLY from user to user. (You may sometimes see folks asserting that the resolution of displays are all 72 dpi (or if they are slightly more cluefull, 72ppi) or even 96ppi if it's "high res". That's pretty absurd. The display I'm typing on now is a bit over 100ppi, the display my wife is using is 84.5 ppi... the point is very very few displays these days are 72ppi.)
So what if you want an absolute measurement? Well, there are several to pick from. Personally, I like good old fashioned typographic units like pica, or points. (72 points = 1 inch; 12 points = 1 pica) At 6 pica to an inch, a font size of 1 pica is roughly on par with newspaper print density. So let's say that instead what you wanted to accomplish with those values above was to do roughly 1/3 and 1/5 of an inch. (I'm assuming here that those values were determined with something approximating a 100ppi screen as being "good"... wild guess, but I have to try to make some guesses to get any idea what the appropriate values need to be.)
While you likely won't notice the change yourself as you move to using predictable units, it's probable that your viewers will. Ever been to a website and wondered "why did they use such a small font?" or "why did they use such a huge font?" It's because of issues like this. Those designers did the same thing Mike suggests here, they hardcoded units in pixels that looked good on their displays, or their clients, and those displays have a different resolution than yours. This is why browsers invented the font enlarge/shrink options, and why they're keystroke accessible on many browsers today.
Ok, I'll step off the soapbox for now. This issue just happens to touch a very raw nerve for me. Recomended reading for those that care to present their websites in a reliable fashion. (Note that these units are NOT restricted to fonts... want to make an object 6 lines of text tall? use a height value of 6em... great in combination with scalable vector graphics.)
SmugMug Sorcerer - Engineering Team Champion for Commerce, Finance, Security, and Data Support http://wall-art.smugmug.com/
... Yawn ... You know what they say happens when you assume...
Oh and what do you think about the look of your smugmug site btw? It's the default Smugmug Black style. No big deal, no customizations, just images and text. Does the text look odd to you? Too big? Too small? Just right? Guess what hotshot, your site uses pixel font values!
Thanks for the lecture but I'm fully aware of everything you posted. I'll share a tid bit about what is considered the "right" way to do fonts on the web in a minute. But first...
I chose in that example for 3 reasons.
The default smugmugBlack CSS uses pixel font values. Why? Pixels are pixels. A smugmug site's main content is images which obviously need to be pixel values. Text is ancillary content on Smugmug. Text is meant to enhance the photo viewing experience not overtake it. So pixel values (which IE can't resize) are used. That's my best guess on why Smugmug uses pixel values. Fortunately for me, I don't care which is one reason I tend to stick with pixel values for the examples I give on dgrin. At the very least, it's more consistent for those folks who really don't know much about what is going on with CSS.
I did NOT choose a 20px value to "get a font about 2x the size of a 'normal' font." That's actually a pretty ridiculous thing to assume.
I did it to make it silly large (the first one is 30px mind you). Notice the color I used: #f00. Full on bright red. Silly large and bright red. The other font is slightly smaller (20px) but still silly large and this time bright orange. Kinda get what I'm doing? Making it WAY too obvious what those changes did. That way it's stupid obvious what the code I just posted does. The dgrinner either looks up a way to make it non-silly or they ask us about the CSS font property.
What I've found in the time that I've been helping people with their site deisgn on dgrin is that consistency and clarity is key. Furthermore, all the helper types in here have way too much to do than to explain to everyone what an em or ex is, why it should be used, what you need to do to convert your entire site over to % and em (read why below), and why IE may or may not have a problem with it. Furthermore, we don't have the time to explain why the font I gave them is a different size relative to other fonts on their site when someone upsizes it in IE. Don't forget that IE6 (still the most popular browser by a massive amount) simply will not upsize pixel value fonts. Again, it's a consistency thing. Perhaps most importantly is the fact that, like it or not, pixel values are easy. Silly easy. I'm all about things being easy when it comes to helping people out. I could do a tutorial that spells out exactly how one "should" do their fonts on their site and why pixel values are bad. But ultimately, lots and lots of people just won't get it. Frankly I've got better things to do than to try to help people fix something that isn't broken in the first place.
The now generally accepted right way to do fonts on a website is to use a combination of percentage and em values. See here and here. Actually Mozilla recommends that you use ex values for fonts because em values have problems with rounding errors. Unfortunately ex values are not implemented properly on all browsers. So percentage and em it is.
But am I going to take the time to explain that to a dgrinner who can't yet figure out how to make it so their header image is a link??? Absolutely no offense to anyone who is in that boat, but if you don't yet know enough about xhtml to make your header a link, then you most certainly don't know and don't need to know the finer points about sizing your fonts with relative units.
Simplicity and consistency. It's a mantra to live by.
And FYI, it's better not to just fly off into a flamefest the first chance you get
Y'all don't want to hear me, you just want to dance.
There is a balance to be maintained. Existing customer don't want the the status quo to "break". However, to remain in the same place includes the risk of becoming old, stale, antiquated.
Change is a necessary component of progress that everyone must deal with in all aspects of life.
So long as smugmug is prepared to handle the increased volume of support issues resulting from this change, I say go for it.
Comments
They look great
Portfolio • Workshops • Facebook • Twitter
I like
And I was thrilled, Andy, to have my photos be on the most popular page. Really I was.
I'm so torn by this whole thing. I DO want to be a part of the whole smugmug community. But then I can't have the gallery curators viewing my portfolio wondering what those thumbs are. Or people who's portraits I've taken wondering if I am asking strangers to rate them personally. Or corporations who need headshots coming to my site and thinking I am not a serious photographer because it looks like I'm running a photo ranking game.
My answer is I just need to create another site. A stuffy, simple professional site. Then I can be a looser with my smugmug site. Once I create a business site, I will be able to turn all the fun stuff back on and call smugmug my personal site.
I like what you guys are doing. I really do. I hate missing out on the fun. I've resigned to the notion that I'm just trying to make smugmug something it isn't.
Thanks for testing out my customizations, Andy. Is there a way to set my theme to "smugmug classic" on all my galleries without having to go into every one of my galleries and set it manually? Is there a global change somewhere? Or maybe a code hack?
thanks!
Trish
Trish - for exposure's sake, you should make a "portfolio gallery," put in representative best work, keyword the hell out of it, make it public, allow thumbs, and enjoy the goodness. You *can* have it both ways y'know
Theme: Yes - go to control panel>organize&customize>all pages theme>and choose "smugmug classic"
Now look around your site. You can easily change back, btw.
Portfolio • Workshops • Facebook • Twitter
Thanks Andy. Changing to "classic" was easy. I knew there had to be a way.
Maybe I will set up a smugmug rate-em portfolio gallery. That's a good idea. When you say "allow thumbs" what is that?
thanks,
Trish
Well
The trick now is
you can bar thumbs from your whole site with the javascript thing - as you've done
or
you enable / disable by gallery customization settings.
Portfolio • Workshops • Facebook • Twitter
Pesty here.
It turns out changing to 'smugmug classic' did effect some changes from the 'default' theme. Mosly in the Journal pages where I have some HTML in my captions. All my bold stuff turned blue, and I also get these thick white lines between each of my images.
You can see it on these pages:
http://www.trishtunney.com/gallery/384050
http://www.trishtunney.com/gallery/1090220
http://www.trishtunney.com/gallery/384508
I set them back to default for now. But you'll see the changes if you set them to smugmug classic.
Maybe someone could suggest some CSS to fix those?
thanks!
Trish
#journal .title {
color: #99ccff;
}
.journal_entry {
border-bottom: 1px dashed #fff !important;
}
if you wanted dashed lines, that is.
OK?
Portfolio • Workshops • Facebook • Twitter
No text should be blue in this example set to 'smugmug classic':
http://www.trishtunney.com/gallery/1090220
Also, the 'smugmug classic' theme displays differently in Firefox and Internet Explorer. More text turned blue in IE. And if I don't have the new border-bottom code in, IE has a pleasing solid thin grey line after each image while Firefox has a distracting thick white line.
I would be happiest with that solid thin grey line in all browsers. But if it's safer to go with the dashed lines (safe as in I know it will display right in all browsers) I'll stick with that.
thanks!!
Trish
1) This: does not belong in your header html. You need to put that in your head tag box.
2)In your caption you have this:
[COLOR=Red]<b>[/COLOR] <big>Trish Tunney </big> <br> 3128 21st Street <br> San Francisco, CA 94110 <br> (415) 695-1901<br> <br><br> <a href=mailto:trish_tunney@yahoo.com?subject=TrishTunney_Photography class="ttheader">info@trishtunney.com</a><br> <br> <br> <form method=post action=http://www.ymlp.com/subscribe.php?trishtunney> <table border=0> <tr> <td colspan=2>Fill out your e-mail address to receive <br> notice of upcoming shows:</td> </tr> <tr> <td width="151"><input type="text" name="YMLP0" size="28"></td> <td width="57"><input type="submit" value="Submit"></td> </tr> <tr> <td colspan=2> <input type="radio" name="action" value="subscribe" checked> Subscribe <input type="radio" name="action" value="unsubscribe"> Unsubscribe </td> </tr> </table> </form> </div>That first red <b> tag does not have a corresponding </b> which I think is causing your .journal_entry bottom border to be bolded. This is an example of why I don't like the !important tag. In this case it was able to mask a problem in the html.
Also there's no need to use a <big> tag. We can adjust your font size with CSS.
Now on to your questions.
this:
.caption b {color:#f00;}
turns them red. Adjust the color to whatever you want.
Again, this is due to an unclosed <b> tag I'm pretty sure. Close that tag and then we'll move on.
http://photos.mikelanestudios.com/
So ".caption b" means this is what I would like the <b>'s to look like in my captions. Yes?
You also said don't use <big>. Instead, do my font sizing though CSS.
What's the code I need for that? In this example, I wanted a bold address and a bold but larger name on top.
My site is really just a house of cards. It's why I would like it to stop changing. If I knew what I was doing, I probably wouldn't care so much about the changes. And it's not that I don't find the coding interesting, but we all have priorities and I keep falling back on the I'm-a-little-lost-but I'll-poke-at-it-until-it-looks-good method of customization.
Which works really well. Until it doesn't.
Also, I don't know what you are talking about when you say the !import tag. And I don't know why this is an example of how it is not a good thing.
thanks!!
Trish
It means that all the b tags that have div.caption as an ancestor will be red - at least in the way that I defined it, but the color can change.
Right. You can adjust the size of the font of your caption by doing something like this:
.caption {font-size:26px;}
That will be much too big but you can scale it down.
Don't forget we're volunteering our time as a resource to you. I for one would rather you try things out in the webdev CSS editor and then if you can't get them to work to come to in here. You can post the code that you tried and what you're trying to make your site do. Then we can look at it and tell you why it didn't act like you wanted it to. That is quicker for everyone than the poking at it and putting stuff in until it breaks and then running in here for help. Generally that method involves a whole round of us saying "okay first remove this, close this, do this...etc" before we can even start to get you what you want.
That wasn't directed towards you. I'm sort of known for my dislike of the CSS !important attribute. Your site was a great example of one of the reasons why I dislike it. You didn't close a <b> tag which among other things caused the big solid white line in your page. What's more, that couldn't be fixed by using any amount of specificity with the CSS tags in browsers other than IE. But what could fix it is the !important tag. That's great except for the fact that you still had an open tag in your html which is bad. Point is that it would have taken us less time to figure it out had the !important tag not been used. When you're helping as many people as we do in a given day, that's time that could be better spent on other things.
FYI, you can change this:
.journal_entry {border:1px dashed #333333 !important;}
to this:
.journal .journal_entry {border:1px solid #333;}
And if you don't really understand what I was talking about don't worry about it.
http://photos.mikelanestudios.com/
C'est très magnifique.
http://wall-art.smugmug.com/
I have a couple more questions....
Can I have two different sizes in my captions?
In this example, I wanted to have my name bigger than my address. I did it in this hokey HTML way.
<b><big>Trish Tunney</big><br>
3128 21st Street<br>
rest of the address here<br></b>
How can I do something like this with CSS?
What is the webdev CSS editor? I've just been typing it in the customizations page.
That big solid white line is still on my page even after I closed the tag. But only in Firefox. Any other ideas why that white line is so thick?
http://www.trishtunney.com/gallery/1090220 <--big white line
thanks!!!!
Trish
See the Firefox and Firefox Web Dev links in my sig. And this Tutorial, it's a wonderful, easy to use FREE tool:
http://www.dgrin.com/showthread.php?t=31784
Portfolio • Workshops • Facebook • Twitter
I'm using it, and I LOVE it
http://avatars.imvu.com/sayntbrigidii
My SmugMug: desmurfjes.smugmug.com
My website: http://www.DigiDiDi.com/
Try this:
<h2>Trish Tunney</h2><br/>
<strong>3128 21st St<br/>
rest of the address here <br/></strong>
Then you can affect those by using the following CSS:
.caption h2 {font-size:30px; color:#f00;}
.caption strong {font-size:20px; color:#f80;}
That's just an example, change it as you see fit of course.
Use firefox and the webdev tool (www.chrispederick.com) to make non-permanent changes to your CSS while your page is under development.
You didn't put this in your CSS like I said:
.journal .journal_entry {border:1px solid #333;}
http://photos.mikelanestudios.com/
thanks Mike!
Trish
I love this theme, just as it is. But you Power and Pro users, you can trick it out, too. Not hard at all.
http://andydemo.smugmug.com
Portfolio • Workshops • Facebook • Twitter
Pixels?! How Quaint. Y'all please excuse me while I hit Mike over the head with a nice (albeit by now slightly broken) high resolution display.
:soapbox
I mean for crying out loud, this is 2006. Higher and higher resolution displays are turning up all over the place, and folks still think it's acceptable to hard code PIXEL counts???
Allow me to suggest a better approach.
I'm going to ASSUME that you're attempt with that 20px value is to get a font about 2x the size of a "normal" font. But that's just an assumption, because I don't know what anyone has as their "normal" font setting, or what their display resolution is (either in reality, or in the deluded mind of their operating system for windows users.) But then neither do you, which is why you should never, ever, hard code anything in PIXELS. On one display I have at work, 20 pixels is about a 3/16 of an inch tall, which means that if the rest of your site is coded with the same assumptions, and using say an 8 or 9 pixel font for "normal" text then as soon as I loaded it, I said "ah, here's someone that doesn't know what they're doing" and left it.
So, we make that assumption and move on... Two ways you can approach this, let's say you really wanted a multiple of the normal font, let's say 3x and 2x respectively:
.caption h2 {font-size:3em; color:#f00;} .caption strong {font-size:2em; color:#f80;}Note I used the "em" unit value. Ems are multipliers. They are a proportion of the containing element, or the base size if uncontained. Now if you had really wanted 2.5x, well, you can have that too:
.caption h2 {font-size:3em; color:#f00;} .caption strong {font-size:2.5em; color:#f80;}That gives you the ability to control the size of your text relative to some other element, such as the containing object's text. Pixels is also a relative measure, but they are relative to something that (1) you have no control over, and (2) varies WILDLY from user to user. (You may sometimes see folks asserting that the resolution of displays are all 72 dpi (or if they are slightly more cluefull, 72ppi) or even 96ppi if it's "high res". That's pretty absurd. The display I'm typing on now is a bit over 100ppi, the display my wife is using is 84.5 ppi... the point is very very few displays these days are 72ppi.)
So what if you want an absolute measurement? Well, there are several to pick from. Personally, I like good old fashioned typographic units like pica, or points. (72 points = 1 inch; 12 points = 1 pica) At 6 pica to an inch, a font size of 1 pica is roughly on par with newspaper print density. So let's say that instead what you wanted to accomplish with those values above was to do roughly 1/3 and 1/5 of an inch. (I'm assuming here that those values were determined with something approximating a 100ppi screen as being "good"... wild guess, but I have to try to make some guesses to get any idea what the appropriate values need to be.)
.caption h2 {font-size:24pt; color:#f00;} .caption strong {font-size:14.4pt; color:#f80;}While you likely won't notice the change yourself as you move to using predictable units, it's probable that your viewers will. Ever been to a website and wondered "why did they use such a small font?" or "why did they use such a huge font?" It's because of issues like this. Those designers did the same thing Mike suggests here, they hardcoded units in pixels that looked good on their displays, or their clients, and those displays have a different resolution than yours. This is why browsers invented the font enlarge/shrink options, and why they're keystroke accessible on many browsers today.
Ok, I'll step off the soapbox for now. This issue just happens to touch a very raw nerve for me. Recomended reading for those that care to present their websites in a reliable fashion. (Note that these units are NOT restricted to fonts... want to make an object 6 lines of text tall? use a height value of 6em... great in combination with scalable vector graphics.)
http://wall-art.smugmug.com/
Oh and what do you think about the look of your smugmug site btw? It's the default Smugmug Black style. No big deal, no customizations, just images and text. Does the text look odd to you? Too big? Too small? Just right? Guess what hotshot, your site uses pixel font values!
Thanks for the lecture but I'm fully aware of everything you posted. I'll share a tid bit about what is considered the "right" way to do fonts on the web in a minute. But first...
I chose in that example for 3 reasons.
- The default smugmugBlack CSS uses pixel font values. Why? Pixels are pixels. A smugmug site's main content is images which obviously need to be pixel values. Text is ancillary content on Smugmug. Text is meant to enhance the photo viewing experience not overtake it. So pixel values (which IE can't resize) are used. That's my best guess on why Smugmug uses pixel values. Fortunately for me, I don't care which is one reason I tend to stick with pixel values for the examples I give on dgrin. At the very least, it's more consistent for those folks who really don't know much about what is going on with CSS.
- I did NOT choose a 20px value to "get a font about 2x the size of a 'normal' font." That's actually a pretty ridiculous thing to assume.
- What I've found in the time that I've been helping people with their site deisgn on dgrin is that consistency and clarity is key. Furthermore, all the helper types in here have way too much to do than to explain to everyone what an em or ex is, why it should be used, what you need to do to convert your entire site over to % and em (read why below), and why IE may or may not have a problem with it. Furthermore, we don't have the time to explain why the font I gave them is a different size relative to other fonts on their site when someone upsizes it in IE. Don't forget that IE6 (still the most popular browser by a massive amount) simply will not upsize pixel value fonts. Again, it's a consistency thing. Perhaps most importantly is the fact that, like it or not, pixel values are easy. Silly easy. I'm all about things being easy when it comes to helping people out. I could do a tutorial that spells out exactly how one "should" do their fonts on their site and why pixel values are bad. But ultimately, lots and lots of people just won't get it. Frankly I've got better things to do than to try to help people fix something that isn't broken in the first place.
The now generally accepted right way to do fonts on a website is to use a combination of percentage and em values. See here and here. Actually Mozilla recommends that you use ex values for fonts because em values have problems with rounding errors. Unfortunately ex values are not implemented properly on all browsers. So percentage and em it is.I did it to make it silly large (the first one is 30px mind you). Notice the color I used: #f00. Full on bright red. Silly large and bright red. The other font is slightly smaller (20px) but still silly large and this time bright orange. Kinda get what I'm doing? Making it WAY too obvious what those changes did. That way it's stupid obvious what the code I just posted does. The dgrinner either looks up a way to make it non-silly or they ask us about the CSS font property.
But am I going to take the time to explain that to a dgrinner who can't yet figure out how to make it so their header image is a link??? Absolutely no offense to anyone who is in that boat, but if you don't yet know enough about xhtml to make your header a link, then you most certainly don't know and don't need to know the finer points about sizing your fonts with relative units.
Simplicity and consistency. It's a mantra to live by.
And FYI, it's better not to just fly off into a flamefest the first chance you get
http://photos.mikelanestudios.com/
There is a balance to be maintained. Existing customer don't want the the status quo to "break". However, to remain in the same place includes the risk of becoming old, stale, antiquated.
Change is a necessary component of progress that everyone must deal with in all aspects of life.
So long as smugmug is prepared to handle the increased volume of support issues resulting from this change, I say go for it.