Improvements to SmugMug's default theme

BaldyBaldy Registered Users, Super Moderators Posts: 2,853 moderator
edited May 24, 2008 in SmugMug Support
Hi Everyone,

We made some improvements to our default theme that we've been testing for a few weeks. You'd see the changes on your homepage and gallery pages if you don't use some other theme, or if you have no customization.

They were driven by customer feedback and I get the feeling they will please most people and not be noticed by the rest. But if we're inadvertently causing some of you to curl in the fetal position, we'd love to know so we can do something about it.

Here's what the default current home page looks like:

280944609_GPsNa-O-1.jpg

And here's what the new default would look like:

280943601_SyKTk-O-1.jpg

You can see them both side-by-side here:

http://cmac.smugmug.com/gallery/4742293_Wz6Ad#280944474_x2Jms
«1

Comments

  • BaldyBaldy Registered Users, Super Moderators Posts: 2,853 moderator
    edited April 17, 2008
    Here's what galleries would look like:

    280943584_PiJXt-O-1.jpg


    280944225_jMf97-O-1.jpg

    Side-by-side.
  • BaldyBaldy Registered Users, Super Moderators Posts: 2,853 moderator
    edited April 17, 2008
    Here's what it looks like on a live site:

    http://andytest1.smugmug.com

    and

    http://andytest1.smugmug.com/gallery/4617894_Sct6R#272409799_GMko5

    Caveat: SmugMug style only on that site.
  • BaldyBaldy Registered Users, Super Moderators Posts: 2,853 moderator
    edited April 17, 2008
    The main changes are:

    1. More readable & sexy fonts.

    2. Background not jet black.

    3. Less green.

    4. Caps where there were once lower-case words. That will affect you even if you customize. We know some people love lower case but our user tests showed it was a readability thing.

    5. If you customize, and have done so via your CSS box, or via a custom theme, you'll see no changes to your customizing.

    6. If you have customized, using say a black banner, and you've done it with HTML in your header box, and you have no CSS in your CSS box, you'll get the new background color (it's not pure black).. and so if you had a black background in your header, it wouldn't blend in:

    281011842_X8xyN-X2.jpg

    There are a number of ways to address this, and we'll be happy to assist. Anything from a few clicks to change your default theme, or, helping you to make a new banner that matches if you like.


    Your thoughts.
  • cRAsHcRAsH Registered Users Posts: 2 Beginner grinner
    edited April 17, 2008
    I don't think I would have been able to tell the difference if you hadn't pointed them out. ne_nau.gif
  • hotmamahotmama Registered Users Posts: 2 Beginner grinner
    edited April 17, 2008
    Dig it. I was sort of getting tired of the green text. Nice change.

    -Liz
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited April 17, 2008
    This latest change might have induced a width problem with #albumNav_top.

    I've checked 10 random sites and the page nav and photo nav line wraps
    to two lines. Using Firefox. The photo nav ends up under the page nav. A
    slight browser width change and it unwraps.

    Happens on every color theme here except gray and white.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AndyAndy Registered Users Posts: 50,016 Major grins
    edited April 17, 2008
    Allen wrote:
    This latest change might have induced a width problem with #albumNav_top.

    I've checked 10 random sites and the page nav and photo nav line wraps
    to two lines. Using Firefox. The photo nav ends up under the page nav. A
    slight browser width change and it unwraps.

    Happens on every color theme here except gray and white.
    Al, that's a separate bug, this stuff's not live thumb.gif
    We've fixed that bug internally and will have it out on the live site as soon as we can.
  • ShoganaiShoganai Registered Users Posts: 17 Big grins
    edited April 18, 2008
    Hello, I'm Gwen wave.gif

    I miss the green. :cry

    To me it was 'Smugmug Green' like '3M Blue' or 'KTM Orange'.

    The color alone was enough to make me think 'Smugmug'. Like team colors, how many of you might see orange and purple next to each other and think "Clemson Tigers"?

    Frankly, I think it's a mistake to drop the 'Smugmug Green'
  • LoadedagainLoadedagain Registered Users Posts: 21 Big grins
    edited April 18, 2008
    looks good to me... deathe to green! gawd i hate caps... but i can live with them if someone else types them. mwink.gif
  • Mike LaneMike Lane Registered Users Posts: 7,106 Major grins
    edited April 18, 2008
    gawd i hate caps... but i can live with them if someone else types them. mwink.gif
    I'm your man. power or pro smuggers can easily go back to lowercase by putting in text-transform:lowercase; into their CSS (need a selector of course). Eg.

    body {text-transform:lowercase;}

    That works better than us putting text-transform:capitalize; since that makes all the words capitalized (of, the, a, etc.) which looks dumb.
    Y'all don't want to hear me, you just want to dance.

    http://photos.mikelanestudios.com/
  • NWMtnGuyNWMtnGuy Registered Users Posts: 88 Big grins
    edited April 18, 2008
    Go-Live Date?
    When will the change go live?

    Dale
  • AndyAndy Registered Users Posts: 50,016 Major grins
    edited April 18, 2008
    NWMtnGuy wrote:
    When will the change go live?

    Dale
    Soon, we hope thumb.gif

    We never give exact dates, and rarely pre-announce, but in this case wanted feedback - what's yours ear.gif
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited April 18, 2008
    Andy wrote:
    Soon, we hope thumb.gif

    We never give exact dates, and rarely pre-announce, but in this case wanted feedback - what's yours ear.gif
    If I could compare the examples posted might do that. But they are super
    sized
    for really large monitors and very difficult to compare.:D
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AndyAndy Registered Users Posts: 50,016 Major grins
    edited April 18, 2008
    Allen wrote:
    If I could compare the examples posted might do that. But they are super
    sized
    for really large monitors and very difficult to compare.:D
    go look on andytest1.smugmug.com thumb.gif
  • Mike LaneMike Lane Registered Users Posts: 7,106 Major grins
    edited April 18, 2008
    Y'all don't want to hear me, you just want to dance.

    http://photos.mikelanestudios.com/
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited April 18, 2008
    Mike Lane wrote:
    Thanks, makes it real easy to see the differences.
    But but but that big face is still green.:D
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • DrDavidDrDavid Registered Users Posts: 1,292 Major grins
    edited April 18, 2008
    I really love the Smugmug Gradient theme--as is. I guess I can use the Grey Gradient, but, please.. Leave the Smugmug Gradient (as is) at LEAST as an option to choose the original green smugmug text, etc..

    Yes, I can make my own theme with it, but, this it's a lot easier for you to change the default (if you must) and keep the SM Gradient theme (as it is now) as an option to select. Please?

    David
  • DrDavidDrDavid Registered Users Posts: 1,292 Major grins
    edited April 18, 2008
    DrDavid wrote:
    I really love the Smugmug Gradient theme--as is. I guess I can use the Grey Gradient, but, please.. Leave the Smugmug Gradient (as is) at LEAST as an option to choose the original green smugmug text, etc..

    Yes, I can make my own theme with it, but, this it's a lot easier for you to change the default (if you must) and keep the SM Gradient theme (as it is now) as an option to select. Please?

    David
    Am I being an idiot? Is "Default" not Smugmug Gradient? lol3.gif

    David
  • NWMtnGuyNWMtnGuy Registered Users Posts: 88 Big grins
    edited April 19, 2008
    Andy wrote:
    Soon, we hope thumb.gif

    We never give exact dates, and rarely pre-announce, but in this case wanted feedback - what's yours ear.gif

    Overall I like the new "default" look. The lack of green is easier on the eyes, though I realize some users probably like it. Will you leave the current default theme available as a selectable option?

    I guess one thing that's always bothered me about SmugMug themes is that they all include a box/frame that surrounds each section (sometimes gradient, sometimes not, but there always seems to be a box). My personal feeling is that many pages would look a lot neater if sections of the page - i.e. galleries, bio, etc. - weren't all surrounded by frames/boxes and instead just floated over the background. Hope that makes sense.

    Dale
  • AndyAndy Registered Users Posts: 50,016 Major grins
    edited April 19, 2008
    DrDavid wrote:
    Am I being an idiot? Is "Default" not Smugmug Gradient? lol3.gif

    David
    Default, is SmugMug Gradient right now, yes.
  • Luc De JaegerLuc De Jaeger Registered Users Posts: 139 Major grins
    edited April 20, 2008
    The changes are quite good imho, except that it's a bit too grey, too flat and 'colorless' now. The green gave some color to the default. Perhaps it's possible to let the account holder select a color (red, green, grey, white,...) to give some color to the site if desired.

    Luc
  • AndyAndy Registered Users Posts: 50,016 Major grins
    edited April 20, 2008
    Bump
  • jfriendjfriend Registered Users Posts: 8,097 Major grins
    edited April 21, 2008
    Too many font sizes?
    The changes look like definite improvements.

    When I go to the andytest site, I see an issue with the font on the "This is My: Friend Family" wording. I see this in Firefox and IE, but not in Safari (perhaps because I'm not logged in with Safari). It seems oddly spaced, small and different than "Andy's Home" which makes it look out of place.

    In general, I'm wondering if you want this many different font sizes/weights/styles going on the same page (perhaps as many as 8 or 9). It appears that every one of these is a different font size/style combination. This seems like too many different ones. Wouldn't it be better to pick 3 and make everything one of those.
    • Your Photos | Logout | Help
    • Andy's Home
    • This is My:
    • Friend Family
    • Featured Galleries
    • Gallery1 Title
    • Gallery1 description
    • Updated: Mar. 30 ...
    See this screen shot:
    282577983_eXs5X-O.jpg
    --John
    HomepagePopular
    JFriend's javascript customizationsSecrets for getting fast answers on Dgrin
    Always include a link to your site when posting a question
  • AndyAndy Registered Users Posts: 50,016 Major grins
    edited April 21, 2008
    jfriend wrote:
    The changes look like definite improvements.

    When I go to the andytest site, I see an issue with the font on the "This is My: Friend Family" wording. I see this in Firefox and IE, but not in Safari (perhaps because I'm not logged in with Safari). It seems oddly spaced, small and different than "Andy's Home" which makes it look out of place.

    Great feedback, John - that's definitely something we missed :) We'll get that fixed - the intention here isn't to undo things like this that already work just fine on the current default theme.

    Thanks again!
  • Mike LaneMike Lane Registered Users Posts: 7,106 Major grins
    edited April 21, 2008
    126.5% (?!?!?), 14px, 12px, 11px, oh my! ne_nau.gif

    We'll get to a more sensible place. For now, headers are 18px, most body copy is 14px (with emphasis either using bold, italics, underlines, etc), and other stuff that should be a bit more out of the way is 12px (you may not be able to see these changes yet). We'll worry about getting yui fonts set up sometime later (though it won't affect how the page looks much compared to rightnow unless you use your browser to resize your text).
    Y'all don't want to hear me, you just want to dance.

    http://photos.mikelanestudios.com/
  • scwalterscwalter Registered Users Posts: 417 Major grins
    edited April 21, 2008
    Mike Lane wrote:
    126.5% (?!?!?), 14px, 12px, 11px, oh my! ne_nau.gif

    We'll get to a more sensible place. For now, headers are 18px, most body copy is 14px (with emphasis either using bold, italics, underlines, etc), and other stuff that should be a bit more out of the way is 12px (you may not be able to see these changes yet). We'll worry about getting yui fonts set up sometime later (though it won't affect how the page looks much compared to rightnow unless you use your browser to resize your text).

    Pixels vs. Points vs. EM

    I was recently wondering whether to use pixels or points for my CSS and a google search turned up many pages that said using em is the best because it scales best, mainly in IE but FF seems to also scale pixel fonts. Some of the information was pretty old though, is this still a valid concern with modern browsers? Should smugmug be using ems?

    -Scott
    Scott Walter Photography
    scwalter.smugmug.com
  • Mike LaneMike Lane Registered Users Posts: 7,106 Major grins
    edited April 21, 2008
    scwalter wrote:
    Pixels vs. Points vs. EM

    I was recently wondering whether to use pixels or points for my CSS and a google search turned up many pages that said using em is the best because it scales best, mainly in IE but FF seems to also scale pixel fonts. Some of the information was pretty old though, is this still a valid concern with modern browsers? Should smugmug be using ems?

    -Scott
    We'll be going to %-based fonts eventually. Check out the yui fonts to see how it'll end up. You're right, px-based fonts aren't super, but they'll work for now.
    Y'all don't want to hear me, you just want to dance.

    http://photos.mikelanestudios.com/
  • NWMtnGuyNWMtnGuy Registered Users Posts: 88 Big grins
    edited April 23, 2008
    Just a thought...

    Have you guys ever considered implementing a "SmugMug Theme Builder" utility? Right now a user has the choice of choosing one of the pre-designed themes or having to wade into HTML or CSS to make significant changes. As an inexperienced web designer I have spent hours just trying to change something like the color of a background or font.

    On the other hand, you could add a tab within the control panel for a "SmugMug Theme Builder" that would allow a user to quickly create a custom theme using pull-down menus. For example, you could have a list of all the different categories of text that appear on a SmugMug page and for each one a user could select the color, size, and font from pull-down menus. Same thing with colors - list all the different elements of the page that have colors or gradients, and for each one let the user choose their desired color/gradient.

    You could even get really fancy and provide the ability to turn page elements on and off with simple check boxes. For example "Display horizontal lines", "Display Breadcrumbs", "Display Buy Photos buttons", etc.

    This approach would seem to be a win-win solution: Users could quickly and easily design themes to meet their needs, and the SmugMug staff would spend a lot less time answering forum questions from people trying to modify themes.

    I should probably post this in Feature Requests, but it seems relevant to this discussion.

    Dale
  • AndyAndy Registered Users Posts: 50,016 Major grins
    edited April 23, 2008
    NWMtnGuy wrote:
    Just a thought...

    Have you guys ever considered implementing a "SmugMug Theme Builder"

    nod.gif It's a very good idea thumb.gif
  • AndyAndy Registered Users Posts: 50,016 Major grins
    edited April 28, 2008
    Bump
Sign In or Register to comment.