Hate my home page - any ideas please

caroline · February 10, 2014

I really love the new SmuMug but have become dissatisfied with my home page and am struggling to revamp it.

The text at the top of the page is important, I like to be able to change it and it gets picked up by Google which is useful. I also like to show the categories I have for navigation so dont want to bunch them up into drop downs. It doesnt seem to be possible to get the slide show any bigger so I was thinking of using the new slideshow which would fill the page, but then my text disappears.
Any suggestions would be welcomed or links to sites as examples.

Thanks,
Caroline

psenior1 · February 10, 2014

The text definitely dominates the homepage, first thing I have a play with the layout, perhaps make the text box smaller down and justify the contents. You could do away with the slideshow, have a static background image and place a text box where it doesn't obscure too much of the image. You can use 'spacers' under the design tab to help get the text where you need it...

Allen · February 10, 2014

First thing I'd try is putting the text box and slideshow side by side.
Then add a folders box under them with your major categories.

caroline · February 11, 2014

Thanks Allen and psenior1

How do I add a folders box to my home page please?

denisegoldberg · February 11, 2014

caroline wrote: »

How do I add a folders box to my home page please?

Customize your homepage and drag a content element onto the page. If you look at my galleries page, that was built by dragging a folders content element onto the page, with it set to "folders I choose". The folders content element is under Navigation.

I would also recommend that you use this tool - http://quirktools.com/screenfly/ - to look at how your site looks on different sized devices. I am concerned that text plus a slideshow plus folders may not work well on smaller devices.

--- Denise

caroline · February 11, 2014

denisegoldberg wrote: »

Customize your homepage and drag a content element onto the page. If you look at my galleries page, that was built by dragging a folders content element onto the page, with it set to "folders I choose". The folders content element is under Navigation.

I would also recommend that you use this tool - http://quirktools.com/screenfly/ - to look at how your site looks on different sized devices. I am concerned that text plus a slideshow plus folders may not work well on smaller devices.

--- Denise

Hi Denise,
Thanks very much for your reply:)

I can see that the text is creating real problems on different devices, however on looking at Statcounter I have just 2% of visitors fom mobile devices and tablets. I find that very interesting as I spend most time viewing sites on my ipad these days!

I think adding the folders on the homepage is going to create but more problems but I do like the look of it. Overall keeping it simple appears to be the answer, more simple than I have at present.

I know that in the past the text on the homepage has been useful in SE terms but maybe I should forget about it and go back to using a blog/FaceBook/G+ or even Twitter to get similar hooks. At the moment I find it hard enough to update my site without posting in other places too!

If you or anyone has any suggestions on how to handle the text they would be much appreciated.

Caroline

denisegoldberg · February 11, 2014

caroline wrote: »

I can see that the text is creating real problems on different devices, however on looking at Statcounter I have just 2% of visitors fom mobile devices and tablets. I find that very interesting as I spend most time viewing sites on my ipad these days!

I think adding the folders on the homepage is going to create but more problems but I do like the look of it. Overall keeping it simple appears to be the answer, more simple than I have at present.

Caroline -
I like the new look better than the old - it looks more polished.

I don't think the heading "Folders" adds to the homepage though - I'd recommend removing the word. Just edit the content element and remove the word Folders from the Title.

--- Denise

caroline · February 11, 2014

denisegoldberg wrote: »

Caroline -
I like the new look better than the old - it looks more polished.

I don't think the heading "Folders" adds to the homepage though - I'd recommend removing the word. Just edit the content element and remove the word Folders from the Title.

--- Denise

Thanks Denise,
I quite like how it looks now too, the only thing bothering me is that the folders element doesn't fully resize with the page so at different dimensions it is left aligned. Can it be persuaded to remain central?

Caroline

Allen · February 11, 2014

caroline wrote: »

...

I'd play with the top margins of the slideshow and text boxes to even up the tops. Perhaps in the text
box there's as extra break at the top?

tomoscott · February 11, 2014

Overall, a very nice site!
I'm not sure why you want to keep the menu the way it is. Once the screen gets below 1000 px wide, the menu items start to fold over. As you point out, more and more people are going to start viewing the web on tablets, if not smart phones.

Not a big fan of center-aligned text. It doesn't behave very well with different sizes awkward trailing words at the end of paragraphs. And again, if you view this on a tablet, the text really dominates the page.

I think the background image is competing with the foreground image.

Your copyright is not really standard, since it's missing a year or year range and you're unnecessarily duplicating the word "copyright". I would just go with something like this:
© 2010 to 2014 Caroline Shipsey.

Just my $0.02!

caroline · February 11, 2014

Allen wrote: »

I'd play with the top margins of the slideshow and text boxes to even up the tops. Perhaps in the text
box there's as extra break at the top?

There was an extra break at the top of the text and Ive adjusted the margins, thanks for that Allen:)

Now is there any way to get the folder to adj to width of screen please?

Caroline

caroline · February 11, 2014

Tomoscott your $0.02 are very welcome, thank you!

Ive left aligned the text and agree it looks better, I hate the way it looks on my ipad but using the application Denise suggested it seems to otherwise behave well.

I added the background image sometime ago and now cant find where to get rid of it, it doesnt appear to be in the background tab which is set to none??

As regards my copyright - I guess Im trying to avoid letting on that some of these images go back to 2000 when I went digital:) Point taken though!

If you have any further thoughts they will be much appreciated.

Caroline

Edit:- I love the design of your site and your sand images are just gorgeous x
And your drop down menus are just brilliant, how did you do that?

Allen · February 11, 2014

tomoscott wrote:

...

What code did you put in your menu links to add the image icon?
I can't get the img to work.

tomoscott · February 11, 2014

caroline wrote: »

Tomoscott your $0.02 are very welcome, thank you!

Edit:- I love the design of your site and your sand images are just gorgeous x
And your drop down menus are just brilliant, how did you do that?

To Caroline and Allen, here is the code for my menu. I add the html and css blocks for customization of the entire site. I've taken out a bunch of the menu items, so there's enough there to give you the general idea. As you can see, I utilize my own server to store some of the images so that things work right and I have more control over them.

HTML

<div id="tos_menu_container">
<ul class="tos_menu">
    <li><a href="http://www.tomoscott.com">Home</a></li>
    <li><a href="http://tomoscott.com/Galleries">Images</a>
        <ul><li><a href="http://tomoscott.com/Galleries/Sand-Vision">
                        <img src="http://www.tomoscott.net/images/sand_vision.png"/></a>
                <a href="http://tomoscott.com/Galleries/Sand-Vision">
                    Sand Vision </a>
            </li>
            <li><a href="http://tomoscott.com/Galleries/Sand-Vision-in-Black-White">
                        <img src="http://www.tomoscott.net/images/sand_vision_bw.png"/></a>
                <a href="http://tomoscott.com/Galleries/Sand-Vision-in-Black-White">
                    Sand Vision B &amp; W </a>
            </li>                
            <li><a href="http://tomoscott.com/Clients">
                        <img src="http://www.tomoscott.net/images/key.png"/></a>
                <a href="http://tomoscott.com/Clients">
                    Clients </a>
            </li>                
        </ul>
    </li>
    <li><a href="http://tomoscott.com/Site-Pages/Contact">Contact</a>
        <ul><li><a href="http://tomoscott.smugmug.com/Site-Pages/Contact">
                        <img class="social" src="http://www.tomoscott.net/images/email_icon.png"/></a>
                <a href="http://tomoscott.com/Site-Pages/Contact">
                    Email Me </a>
            </li>
            <li><a href="http://500px.com/tomoscott"
                    target="_blank">
                        <img class="social" src="http://www.tomoscott.net/images/500px_icon.jpg"/></a>
                <a href="http://500px.com/tomoscott"
                    target="_blank">
                    500px </a>
            </li>      
        </ul>        
    </li>
    <li><a href="http://tomoscott.com/Site-Pages/Blog">Blog</a>
        <ul>
            <li><a href="http://tomoscott.com/Site-Pages/Blog/A-Productive-Month">
                A Productive Month</a>
                <span class="blog_date">02/10/14</span></li>
            <li><a href="http://tomoscott.com/Site-Pages/Blog/A-Productive-Month">
                Andre Ermolaev</a>
                <span class="blog_date">01/29/14</span></li>
            <li><a href="http://tomoscott.com/Site-Pages/Blog/Jared-Christopher-Martin">
                Jared Martin</a>
                <span class="blog_date">01/16/14</span></li>
            <li><a href="http://tomoscott.com/Site-Pages/Blog/Ending-the-Year-Right">
                Ending the Year</a>
                <span class="blog_date">12/31/13</span></li>
            <li><a href="http://tomoscott.com/Site-Pages/Blog/Reboot">
                Reboot</a>
                <span class="blog_date">12/11/2013</span> </li>
        </ul>
    </li>
    <li><a href="http://tomoscott.com/Site-Pages/About">About</a></li>
    <li><a href="http://tomoscott.com/search">Search</a></li>
</ul>
</div>

CSS:

#tos_menu_container {
    width:500px;
    margin:0 auto;
}
ul.tos_menu {
  margin:0 auto;
  display: inline;
  padding: 4px 4px 8px 0;
  list-style: none;
  
}
ul.tos_menu li {
  font: 1em;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 4px 20px;
  background: #e0e0e0;
  cursor: pointer;
}
ul.tos_menu li:hover {
  background: #888888;
  color: black;
}
ul.tos_menu li ul {
  padding: 0;
  position: absolute;
  top: 25px;
  left: 0;
  width: 225px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul.tos_menu li ul li { 
  background: #888888; 
  display: block; 
  color:black;
  z-index:9999;
}
ul.tos_menu li ul li img {
    height:20px;
    width:30px;
    padding-right:6px;
    margin-bottom:-3px;
}
ul.tos_menu li ul li img.social {
    height:16px;
    width:16px;
    padding-right:5px;
    margin-bottom:-3px;
}
ul.tos_menu li ul li .blog_date {
    font-style: italic;
    font-size: 0.8em;
    margin-left:6px;
}

ul.tos_menu li ul li:hover { 
    background: #666; 
    color:white;
}


ul.tos_menu li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Allen · February 11, 2014

tomoscott wrote: »

To Caroline and Allen, here is the code for my menu. I add the html and css blocks for customization of the entire site. I've taken out a bunch of the menu items, so there's enough there to give you the general idea. As you can see, I utilize my own server to store some of the images so that things work right and I have more control over them.
...

Ah, so you used your own html and CSS not the default built-in Smugmug menu.

Might change all those info galleries to unlisted so the paths do not show.
No need for visitors to see your Site-Pages page.

tomoscott · February 11, 2014

Allen wrote: »

Ah, so you used your own html and CSS not the default built-in Smugmug menu.

Might change all those info galleries to unlisted so the paths do not show.
No need for visitors to see your Site-Pages page.

Not sure what you're referring to -- the blog pages? Those are the only urls that have Site-Pages in them, and those are public. Maybe I'm missing something. . .

Allen · February 11, 2014

tomoscott wrote: »

Not sure what you're referring to -- the blog pages? Those are the only urls that have Site-Pages in them, and those are public. Maybe I'm missing something. . .

Visitors can browse up a level by editing the browser link which opens this page.
http://www.tomoscott.com/Site-Pages/About
/Site-Pages

To me all my site pages are personal with all kinds of odds and ends in there.

tomoscott · February 11, 2014

Allen wrote: »

Visitors can browse up a level by editing the browser link which opens this page.
http://www.tomoscott.com/Site-Pages/About
/Site-Pages

To me all my site pages are personal with all kinds of odds and ends in there.

I see what you're saying now. Yeah, I should put all the blog entries in a top level folder.

DanCarl97 · February 12, 2014

I feel like your home page is a little unbalanced. If it was me, I'd have the slideshow at the top, with the text underneath. Perhaps with two columns? I think it would help make the home page look much more symmetrical.

To make the page 'stretchy' or a fixed width, you go to:

Customise > Customise Site

Then Pick The 'Layout' Tab and you should be able to select between 'Stretchy' and 'Fixed Width' under 'Layout'.

caroline · February 12, 2014

DanCarl97 wrote: »

I feel like your home page is a little unbalanced. If it was me, I'd have the slideshow at the top, with the text underneath. Perhaps with two columns? I think it would help make the home page look much more symmetrical.

To make the page 'stretchy' or a fixed width, you go to:

Customise > Customise Site

Then Pick The 'Layout' Tab and you should be able to select between 'Stretchy' and 'Fixed Width' under 'Layout'.

Hi Mel,
Can you tell me please what you are viewing my site on?
I have the layout set to stretchy already but fill height is set to off, not sure what difference this makes

Caroline

DanCarl97 · February 12, 2014

caroline wrote: »

Hi Mel,
Can you tell me please what you are viewing my site on?
I have the layout set to stretchy already but fill height is set to off, not sure what difference this makes

Caroline

HI Caroline,

I'm using Google Chrome.

I just posted instructions to change that because I wasn't sure if you wanted to change it or not (or if you already had).

Fill Height just extends our page to the bottom of the window if there isn't enough content on the page I believe.

caroline · February 13, 2014

DanCarl97 wrote: »

HI Caroline,

I'm using Google Chrome.

I just posted instructions to change that because I wasn't sure if you wanted to change it or not (or if you already had).

Fill Height just extends our page to the bottom of the window if there isn't enough content on the page I believe.

Hi Mel,
I wondered if you were just viewing on a tablet and that was the reason you thought it looked unbalanced:)
Still tweaking at at the moment:)

Caroline

Hate my home page - any ideas please

Comments