When we first started this blog a mere month ago we thought that we’d only be posting about new features or services. Reading all your comments made us think that perhaps we should expand the “mission” of the blog to include talking about how the product works today. So, I thought I’d introduce what I’m hoping will be regular feature on the blog: “Good Design.” We’ll try to post some sort of design tip on a regular basis, in hopes of taking what the Homestead Product Team has learned here and sharing it with all of you.
The idea for the first topic in this series came because I’ve noticed that a few people (Donna, Nancy and others) have commented on the blog that their pages look fine on a smaller monitor, but they don’t like the way their pages can look on larger monitors.
One of the biggest challenges of web design is that it can be hard to know how your site is going to appear to people visiting your site, because they’re using computers that are different than yours. While you might have a large 21-inch monitor set to a high resolution, one of your customers might be using a 15-inch monitor set to 800 x 600 pixels resolution. To better illustrate this issue, I thought it would be fun to take a photo of the monitors used by a few of the people here at Homestead showing a site that I designed for some friends of mine using SiteBuilder.
This 15 inch monitor (resolution 1024 x 768 pixels) belongs to Amr in the Marketing Team.
This huge 21 inch monitor (resolution 1920 x 1200 pixels) belongs to Brian in the Product Design Team.
You can see that your site visitors can have a very different view of your website than you do, depending on the size and settings of their monitors.
In Donna’s post, she specifically mentions that she doesn’t like “large white space on the right hand side.” It’s really easy to change that in SiteBuilder simply by centering the content of your page in the browser window.
My friend’s website centered on Brian’s large monitor.
In fact, some of the most popular sites on the web, like CNN or ESPN, do exactly that. For fun, you can drag your browser window wider or narrower while looking at these sites to see how the space on either side of the content changes, but the width of their actual page doesn’t change. Most sites used to be left-justified for the most part, but lately more and more sites, professional sites like CNN and ESPN in particular, have moved their content to the center. At Homestead we’ve been reviewing that issue ourselves, and with our next software update (end of summer) the default setting will be for all new pages that are “built from scratch” to be centered instead of left justified. If you’re using a QuickSite, any new pages you create will continue to match the justification of your Quicksite.
In the meantime, if you’d like to center-justify your content you can follow these easy steps:
1) Open SiteBuilder
2) Click on the “Page Info” button in the top toolbar of SiteBuilder.
3) Click on the “Advanced” tab in the “Page Properties Editor” on the right side of the application.
4) Click the check box for “Center Contents on Page”
I hope this helps address some of the questions people have had with how their sites look on different monitors. If you have other suggestions for design topics to cover please let us know. Remember, if you have more specific questions you can always create a help ticket at our new help center.
I hope this was helpful!
-Rochelle
August 3, 2007 at 11:27 am |
This tip works if you have a plain white background, but I’m not sure it will work on a site with a graphic background like most of mine (see example at http://www.goodbyeluci.com). It would be nice to have an option in Sitebuilder to: (a) left-justify the background, (b) center the background, (c) right-justify the background (although I’m not sure why anyone would want to do that), or (d) stretch the background to fit whatever screen resolution and size is being used to view the site. Is that even possible?
August 3, 2007 at 11:30 am |
P.S. Note how the background image begins to repeat itself on the right side of the screen, even though the image fills my entire editing screen in Sitebuilder. I would prefer to have the image cover the entire screen and avoid the eyesore that is the vertical image break.
August 5, 2007 at 7:59 am |
I am the web designer for the American Legion Dept of Arkanas.. On thing I would love to see added to site builder is the ability to create charts on the web sites using site builder. Right now I am creating it in dreamweaver then inserting the html code. Would preffer to do that within the site builder.
Is there anything in the works for adding a feature like this???
See this page http://www.arklegion.homestead.com/post_info.html
August 7, 2007 at 1:29 am |
Rochelle
I design sites for member based organizations using Homestead. The biggest issue I have had is not so much with appearance as with readability. Customers who have monitors set to 800 by 600 tend to want larger font size for easier reading. However the content even centered runs off the screen.
August 9, 2007 at 6:37 pm |
Rochelle, thanks for the tip. It works very well for the site I’m hosting for our church. I have another church host site, and I’m going to try it with that one as well. I’ll let you know if it doesn’t work. Then I’m going to try it on the rest of my sites!
August 10, 2007 at 6:52 pm |
I recently centered my site and have checked it from various browsers and monitors. It is a much better site presentation when centered.
http://www.tribalscreen.com
August 15, 2007 at 4:27 am |
Keep an eye on what screen res your visitors are using with your statistics. There’s no point building a site at 800×600 if most of your visitors are using 1024×768. It’s 2007, anyone using 800×600 is in a tiny minority, don’t hold back your site for the sake of a handful in the dark ages.
Centering your page isn’t as good as automatic fit to screen size, I’d like to see that facility available, as it’s commonplace on the web these days.
August 15, 2007 at 2:24 pm |
Great tip. I had just mentioned to my wife that my site on wider screens probably looked pretty skimpy. 10 minutes later I read your blog about centering. Thanks!
August 15, 2007 at 6:34 pm |
I would like to see a setting that stretches the background to fit whatever screen resolution a persons using like Kevin suggested.
August 18, 2007 at 2:46 am |
Hi folks,
I just put up a new post that addresses using images as backgrounds: http://blog.homestead.com/2007/08/18/good-design-using-an-image-as-your-background/
I think it addresses most of the issues that Kevin, JP and Andy bring up. Also, I wanted to say that Andy’s comments on screen res are spot on. In the US, less that 15% of users have a screen resolution of 800×600 and 1024×768 is the leading majority.
-Rochelle
August 18, 2007 at 2:19 pm |
Hi Rochelle,
I am just starting with my website and your post just answered a huge question! Thanks.
But I have a bigger one. Now that I am getting more comfortable working with the software I woule like to get rid of the sitebuilder lite template and start over in sitebuilder. Do you know how I would do this?
Thanks, Heather
September 18, 2007 at 10:50 am |
I think that it is important to keep in mind different monitors and look at the stats from time to time
It seems that some designers still consider 800*600 px resolution but there are few people who still have it so I don’t think it makes sense to keep it in mind… When I looked at our site using our new Samsung monitor (at 1280*768 px) I found a lot of flaws that I didn’t see on old monitors at the same resolution! So I think the monitor is very important and the designers have to be very careful today, as technology moves ahead.
December 5, 2007 at 4:57 pm |
Great!
Regards,
CMS,
Sergio’s World Beers
Email : generalmailbox@sergiosworldbeers.com
http://sergiosworldbeers.com
December 15, 2007 at 6:42 pm |
very interesting, but I don’t agree with you
Idetrorce
February 5, 2008 at 7:53 pm |
Centering is great but how wide should you make your page to begin with so it fits the majority of monitors & there is not a lot of dead space around your page. Will be great when you have the option to automatic fit to screen size!!
November 2, 2008 at 5:53 am |
automatic fit needs to get here soon otherwise homesteads will start lagging behind the others, come on get it going!
December 22, 2008 at 5:04 pm |
Thanks, Rochelle, for addressing my concerns. I did what you recommend, as well as making all my page the largest setting 1200. Personally, I would prefer people have to scroll the tiniest bit to the left or right to see a portion of content that interests them than for there to be a couple of inches of white to either side of my site. Keeping in mind how often people upgrade and that newer screens are wider, I’m betting most viewers won’t have to scroll at all.
I concur withe Kevin, would be great to have a “fit to screen” update.
Thanks again.
Donna Schillinger