Making IWeb sites look good.

I've seen a lot of iWeb sites, and for the most part they're not bad, but generally they look really generic. From my graphic design point of view there are a few things that people can do to improve the "look"of their site.
1. Delete the auotmatic navigation bar that iWeb creates when making new pages. This can be done under the page tab in the inspector. Anything can be turned into a hyperlink, so make your own buttons, instead of letting iWeb do it. This means graphics and any kind of text you want. Be creative.
2.A. Typograghy please. Its a good rule of thumb to only use a few different fonts. Doing this throughout the website will add consistency to the overall design. iWeb allows for strict control over type (take advantage of this) text type (paragraph length type) looks best at a smaller sizes ie. 9-11 pt. Also increase the leading (the amount of space between lines of type). This will make the text easier to read.
2.B. Choose your own fonts. Don't use iWeb's default fonts. Generally text size can be reduced as well. Type makes the page, so pay attention to it.
Hope these tips help someone.
Power Mac G5 Mac OS X (10.4.7)
Power Mac G5 Mac OS X (10.4.7)

Hello all,
I would like to add to red.sea's comments. The reason : I have over 60 emails to reply on the topic of iWeb design from forum members.
It's a hard question to answer when someone asks you ways to improve their sites ... without wanting to hurt their feelings. I have to consider the fact that because I do this comfortably for a living, design comes as natural to me as painting. But what I have always enjoyed in my life, is seeing someone try ... and ultimately enjoy what they can achieve. Imagination is surely one of the greatest virtues.
Having said that, I would like to add a couple of points. This principally applies to people who wish to build a site entirely from scratch using a white blank page. But some of these methods will apply to template users.
Before designing a site, sketch it out on paper. Each slip represents a new page. Mark out roughly the topics, the placement of pictures, the amount of text involved on the page. This will save you a lot of time - believe me.
FONTS
Refine what you have just done in (1) by selecting different fonts as red.sea mentioned. Choose fonts according to the theme of the site. E.g. Romantic wedding sites, use fonts like Zapfino, Mona Lisa Solid, Bodoni etc. - script as well as serif fonts. Modern sites - sans serif fonts seems to be the trend, and it has been for a number of years. Examples, Gill Sans, Optima. The default Helvetica isn't bad, but try using Light instead of Bold. Use large point size. I use Avenir and Nobel on my sites.
N.B. The only area to leave as template default, is the blog - in case you want to use the Search feature.
IMAGES
Work your images to 100% of the size you intend to use in iWeb. Resizing will blur the images. This has been mentioned many times over, so I won't touch on this further. 72dpi images work fine with me and if you must, tweak your colours before dragging them to iWeb - if you are using Photoshop, for instance. Unsharp mask can help sharpen your pictures. I use NIK filters.
COLOUR (I was raised in England, so I spell with a 'U')
Theme colour is important. Many folks feel that white is boring. That really depends on how you use it and design normally plays a part in this. Should you choose to use colours, there are millions to use on the palette. Avoid strong primary colours unless you have a good design-sense. As mentioned, check the mood, the topic, the theme. If you have black and white photos, use black, grey or white as background. Light (often pastel) colours work well with B&Ws too. This can be a very in depth discussion, but I think you get my drift. Lastly, try and maintain a flowing look/theme to your site. It's very pleasant to browse through sites like these.
TEXT
Placing of text is by far the biggest issue for most iWebbers. Some sites have the right colours but is ruined with text running everywhere. One site had long sentences and paragraphs (11pt font size) stretching 600px from left to right which went on forever. It's an eye sore and nobody is going to read it, especially folks above 40 something. Make columns instead. The guides work beautifully on iWeb, just like in Keynote. Make sure under preferences > Alignment Guides, both are checked. Keep these columns tidy and aligned to something on your page - a photo, your headline - something the body copy can have affliation to. Play with the leading (space in between the text).
There are other things I would like to add ... maybe later.
I hope this helps rather than offend. Over the last couple of weeks, I have met and corresponded with many members from this forum. It's been a delight. I thank you for trying.
Joe
http://web.mac.com/joeleong

Similar Messages

IWeb not looking good on Internet Explorer

Hi,
My site, www.bargelachouette.com has sat well on mac and in Windows IE for a couple of years, except for a small glitch on IE which I was prepared to accept. A few days ago I upgraded to IE8 on the Windows virtual machine of Parallels. The site is totally unacceptable in IE now, with illegible text covering photos which should not be there (The reflection at the bottom of the photo in the<white> <welcome> template I use is now the whole photo replicated below the original photo . Can anyone tell me why this is happening and what I should do to rectify it....please.
Cheers,
Bob

Don't know Bob, but it looks like IE bit you.
I see what you're talking about.
I view it in Firefox and it looks fine.
Not sure what you might be able to do, but hopefully someone will have a thought.
The Barge look really neat.
Good luck.
You might try turning off the reflections.
Looks like that where the problem areas are.
Look like IE is not displaying it as a reflection, but a second picture.
Message was edited by: Chuck Usher
Message was edited by: Chuck Usher

IWeb site looks completely different when published compared to on iWeb...

For whatever reason, whenever I publish my website (I published it to a "local folder"), it looks completely different and VERY ugly.
This is what it looks like in iWeb right now:
http://i3.photobucket.com/albums/y53/WWEFreak69/Screenshot2011-03-22at34527PM.pn g
This is what it looks like when it's published:
http://i3.photobucket.com/albums/y53/WWEFreak69/Screenshot2011-03-22at33817PM.jp g
There's an obvious difference.
So what am I doing wrong?

For one thing there are many files that did not get uploaded to the server. You can see which by viewing your site in Safari and bringing up the Activity window (Command+Option+A).
The pages where the navbar is down the site appear to have much of the site's objects in the navbar section rather than the body of the page. Go to the iWeb preferences and check the checkbox to show guides and image indicator.
Click to view full size
The design link on the home page is inoperable. Did you intend to have just the text be the link for the hyperlinks on that page or also the image that each text box is on? Makes for a very small link to find.

Making 4:3 look good for both 4:3 and 16:9 screens

Hi,
Up until this point I have lived my life in a pleasant 4:3 world. I shot 4:3 footage, edited 4:3 in FCP, sent 4:3 to DVDSP, checked my work on a 4:3 television, and mailed 4:3 DVDs to my customers.
My understanding from playing around with a friend's 16:9 TV, is that the TV owner could push a button to view 4:3 content with bars on the right and left (I think from other contexts this must be called pillarboxing).
Then I brought my baby's videos to my parents' house.
They say the camera adds 10 lbs -- how about 50! I guess if all consumers got used to watching television this way, it would be a huge win for the anti-anorexia people.
My parents could see nothing wrong with the video that was being stretched out to fit their 16:9 television. They watch all their movies this way. They didn't want me to fiddle with the remote because, "they might not be able to get it back the way it was."
I've read the thread "Need help on 16:9" very carefully.
http://discussions.apple.com/thread.jspa?threadID=510426&tstart=0
Unfortunately, it's still a bit too far over my head. From reading that thread, I've come to understand that "letterboxing" is the black bars put above and below 16:9 footage when it is displayed on a 4:3 screen. "Pillarboxing" is adding black bars to the right and left of 4:3 footage so that it displays with the correct aspect ratio on a 16:9 screen.
Unfortunately the term "anamorphic" in the various contexts is lost on me. I know it's a special lens that you use to shoot widescreen footage on 35mm film, but what it means in the DVD context is a bit lost on me.
I want to know:
1. Is it possible to take my 4:3 footage and process it somehow in FCP and DVDSP to make DVDs that will "just work" on both 4:3 televisions and widescreen TVs? That is, I want the image to have the correct aspect ratio on both boxes without the user having to do anything to their TV. (I assume this would mean displaying as-is on 4:3 TV's and pillarboxing automatically on 16:9 TVs)
2. If it is possible, can someone point me to some references on how to accomplish this? Or at least some references that would help me learn enough to choose the right workflow to do this?
Doing a "search" or a "Google Search" for 16:9 tutorial, leads to more hits than is useful and lots of vendors trying to sell me products.
I'm not against buying & reading a book or tutorial, but there is so much out there that I need a push in the right direction first.
3. Looking at the other thread my impression is that if I want to do this, I'd have to find some way to make FCP add the black bars to pillarbox my 4:3 data, then tell DVDSP I've got 16:9 footage. I have no idea how to actually accomplish this (settings, etc.) however.
Whew! And all this is just SD stuff I believe. I still haven't touched HD, but I believe those 16:9 TV's are made for HD but will still display my SD DVDs. Please correct me if I'm wrong about that.
Thanks so much! These forums have been so helpful. Even though I only occasionally post I read many answers to questions I've had that other people have too.
--Beth

Hi,
Thank you very much for the reply. Once I'm finished I'll post all my notes so others can benefit. Right now though, I've been having problems fighting compressor all day. I think I broke my computer
I'm currently downloading an update, but that's not going to finish for the next 6 hrs. (I have a very slow network connection, and I tend to only update my programs between projects unless I run into a serious issue.)
Here are the issues I've had and some of the solutions I've found:
* = I found a solution
*1. Originally my compressor .m2v file would not import into DVDSP -- DVDSP would unexpectedly quit every time I even clicked on the file, I didn't even click "import" and it would quit. I renamed my file to no avail (it had a '/' in it, compressor's default file naming turned 16:9 to 16/9). I read on the DVDSP forum that the way around this was to drag my file directly into DVDSP. That worked.
2. I accidently told FCP to "render all" in that 16:9 timeline before sending it to compressor. I did it because I wanted to see how things looked before sending to compressor. Unfortunately, I don't know how to tell FCP to "un-render" the files. Is there a way to do this? I seem to recall that there weren't any files in on FCP's scratch disk when I looked, but I can't check right now (see #4) Problem #2 may be the cause of problem #3, but I can't check that until later either.
3. The disk I created using the compressor-rendered-from-FCP files appeared to have interlace issues. i.e. during times of quick, high-contrast horizontal motion, there were every-other-line streaks left behind. The problem is most easily noticed on computer monitors. There is a small amount of it on the original DVD, but not nearly as much as in the DVD created with compressor. Do you have any recommendations for settings, or is this potentially caused by my rendering in FCP first before going to compressor?
4. The big issue: After using compressor, finder now quits when I click on 2 of my 4 disk drives. (I saved .m2v files on two different disks due to the DVDSP problems in #1. I thought perhaps the first time my file itself was corrupted.) I did searches for this issue and learned that many people have it, and the solution seems to be to right-click on the offending file and choose open with -> other -> quicktime, check the box for all files of this type. Unfortunately, I can't even get finder to get that far.
I tried another solution using one of my disks that still works, I re-named a .mov file to .m2v, and then told that one to open with -> other -> quicktime, check the box for all files of that type. Unfortunately that didn't appear to work as Disk 1 and Disk 4 still cause finder to quit and re-start itself. (Various iterations of reboot, trash finder.plist, etc. thrown in for good measure.)
I am currently downloading these patches:
Apple Qmaster Update 2.0.1
Cinema Tools Update 3.0.3
Compressor Update 2.0.1
Pro Applications Update 2005-02 1.0
Soundtrack Pro Update 1.0.3
I don't even know how many of those I really need. I already have FCP 5.0.4 and DVDSP 4.0.3. That should finish sometime tomorrow, but if the patches don't work I could use some advice. I guess I could go into the Unix side of things and manually delete all the .m2v files, but I've been hesitant to do that because they took so long to create in the first place.
Is this finder/compressor/DVDSP problem a known issue that is fixed with some of the above patches?
Thanks again,
--Beth

Published site looks good on safari (mac) NOT good on firefox (mac)

Any person who knows how this comes?
site I'm talking about: www.dinarodrigues.com
fonts looks thicker in FF
shadow behind text isn't there in FF
How can I resolve this issues?

Shadows have been a problem for a while in Firefox.
Take a screenshot of your text with the shadow and drop the JPEG onto the page instead of the text.
I could live with the thickening in the font as it is easier to read.

One step beyond making 4:3 look good on wide screen

OK- now that Hanumang has straightened me out on combining 4:3 & 16:9 sequences on the same DVD, I have one question beyond. How does one modify 4:3 aspect video to produce undistorted introductory movies and background video for menus that are viewed on both 16:9 monitors and 4:3 monitors? thanks in advance.
Steve

This is a largely stylistic (or philosophical) decision with no easy answer.
One approach to introductory movies is to go with the pillarboxed 4:3 but to use any number of compositing and/or animation techniques to create a 16:9 background in FCP, instead of pillarboxing on an empty black layer, with your 4:3 movie composited (in any number of ways) on top. Depending on the style of the video - or style guidelines you're working within - you could very simply feather the edges of your video onto, say, a colored matte. Or you could create lavish composites.
Menus would be similar in nature, but you'd have more flexibility since you need to occupy some screen real estate with buttons and whatnot. To put it another way, the use of video footage in some type of box is common enough in menus - think of the drop zones in DVDSP's templates - that it won't seem awkward.
But I'm just brainstorming out loud. What do you typically like to do with your intro movies? That is, do they always flow into the menu, or do they stand on their own? And, perhaps most importantly, am I forgetting a key assumption here. That is, do you want to stay way from letterboxed menus on 4:3 TVs?

Looking for great examples of iweb sites

I am in the process of rebuilding my site with iweb '09 and want to see what others have done using iweb '09. I want to see what is possible. Any ideas where I should look ? Thanks - Thomas

Macistotle wrote:
I did my entire site in iWeb, using nearly zero template-based elements:
http://www.503creative.com
that's a pretty good looking iWeb site.
I also think something he mentions is good advice for someone who wants to make a iWeb site look as pro as possible, which is to avoid the templates. While the templates look good on the Mac, they seem to be a cause of grief for IE, which most people use to surf the net. Also, they're canned. It's better, I think, to start with a blank slate and build from there. Stylistically, I think there's a trend towards simple elegance in professional websites rather than ginned up designs that are no longer as popular as they used to be.
Here is a site I made in iWeb that exemplifies the "simple elegance" that I think is becoming popular these days and also coincides with iWeb's ability to work better on more systems when the design elements are kept simple. Basically, the iWeb site I came up with is a search engine. I know that sounds boring but I'm thinking it may be handy for people looking for a particular website but don't know where to find it yet. There are also some additional features I've been adding into it, and advertising here and there to generate some income, but basically it's a search engine. I've finally gotten it off MobileMe and onto a 3rd party host so the URL is now www.google.com. Let me know what you think!

IWeb sites are slow to upload. text columns turn to heavy png files

Hi!
Yes I've noticed that iweb sites for some odd reason are slower to load on any browser. No matter what the hosting is. I use Me.com for a few years and iWeb as I don't have the time or patience to bother with Dreamweaver. I use Me.com for hosting as well as another web hosting server. If there is graphic material on the page, it takes so long to open. Apple must do something about it for sure.
The program iWeb itself doesn't open up fast enough if you have more than 3 pages on it (which any normal site would have). I'm glad Apple made good changes in iWeb09, but it needs to do something about the speed of the program, the sites it makes and how it processes simple matter on it.
Even though, I have come across some good examples of iWeb made sites that are easy and relatively faster to open or they open at a normal speed. The authors also have used flash material on their iWeb sites. I have a non-registered program (web site Maestro) that claims to ease up and streamline the graphic and other heavy content on a iWeb site to make it lighter with loading.
But the unregistered version works on 70 percent files only. And I don't really notice any difference with it either. So I'm doubtful of buying the full version.
Any thoughts? Solutions? Would really appreciate.
ANOTHER ISSUE that I have discovered while making iWeb site is that a text column put on a shape after publishing turns into a heavy PNG picture file that can weight almost upto 1 whole megabyte!!!
And you keep wondering why the darn page is so slow to open!!! Cuz a simple text could've been just about 50kb. But it turns into a 900kb picture in png!!! Is there a way to change this?? I guess, taking out the picture from the published site folder and reediting it in - say - Photoshop reducing its size may help. But its so cumbersome and arduous to go into every darn folder and open all the text now converted into pics and re-edit them!! And then their reduced quality will make the text look feeble and bad quality too.
This is a problem that APPLE iWEB experts Must work on. iWeb gives a certain flexibility as its like a free flowing canvas. But then its also a known fact that iWeb sites are exceptionally heavier to open, unless you know many other tweaks here and there to make it work right. But again, this is contrary to the purpose of iWeb, cuz its made for amateur site makers.
I wish there is a work around this thing really.
ANY SUGGESTIONS FRIENDS?? WOULD LOVE TO HEAR. PLEASE SHARE YOUR THOUGHTS AND SOLUTIONS.
Thanks.
Regards,
Nitesh

Welcome to the Apple Discussions. Shapes by their very nature are graphic elements that end up a png file whether there's text in them or not. You should try adding the text in a text box above the shape and see if there's any difference. Just be sure to use a Web Safe Font and not add any enhancements that will turn it into a image file:
Click to view full size
You may not notice a difference with loading with WSM but those with Internet Explorer should. Have you tested your site with and without WSM on a PC?
In WSM you can set the amount of optimizing for graphics. I've set it at about 60% (moderate) and haven't tested other settings for image quality. I'm sure a lower quality level, i.e. more compression, will have a impact on file loading. I just don't have a feel for the greatest amount of compression that will still have acceptable image quality. You'll just have to experiment.
If your site is a commercial site then using a commercial hosting server is the best option. Also, it's reported that using a Text Based Navbar instead of iWeb's java based one will help dark side compatibility.
Be sure to put in feature requests for the improvements that you see necessary to Apple via http://www.apple.com/feedback/iweb.html.
OT

How can I transfer JUST ONE IWeb site to another computer?

I am new to making IWeb sites and am now making them for
other people. I have about 10 sites in my IWeb folder and need to
be able to give a person's site to them.
I need to be able to transfer JUST ONE site to another computer.
Right now, I am only able to transfer ALL the sites I have made to
another mac and then, it wipes out all their sites! How can I prevent
the ultimate wipe out of all their iweb sites yet give them JUST ONE
of mine?
thank you in advance,
Beth http://www.yourzensite.com

First, read Wyodor's post about changing the publishing settings HERE.
You can create the extra folders in Home Folder/Library/Application Support/iWeb or, as I do, in a folder named iWeb in the Home folder.
Create a folder for each website, give it a suitable name and paste the Domain.sites2 file with all the websites into each.
Open each one in turn, double click the Domain.sites2 file to launch it in iWeb, delete all the sites except the one whose name is the same as the folder name, save and quit.
Now you can launch any site individually in iWeb and sent a copy of the appropriate folder to the client.

Iweb site on search engines

I have been trying my very best to make my website (http://web.mac.com/bjcarreon) available on search engines because I think it's a great site and people can learn from my experiences but I have been only 1/4 successful because when you try to search for me in google, you can only search what's on the welcome page and not the sub pages. how do i make all the pages in my site, searchable?
is there an easy way to have my iweb made website searchable on line? please help.

mate - your in the wrong forum. you have the latest iweb version, and this is the one previous to it. in any case, you might want to check out my tutorial for making iweb sites be on google:
http://guimkie.com/projects/iweb/get-on-google-with-iweb/
as a way to make your site be more keyword attractive - make sure that none of your text is as images. if you use simply textboxes, the content will be moved into the html code and can then be picked up by google. text in images cannot be picked up by google.
for those having iweb 06, i have this article:
http://guimkie.com/projects/iweb/get-on-google-with-iweb-1x
i have some ads on my site, meaning it might generate revenue if you visit it. this is apple policy. i have to state it in order to be allowed to post this link here.
max

KDE fonts under Gnome doesn't look good

Ok, most people complains about GTK fonts under KDE. I have the inverse problem, my kde apps doesn't look good into gnome.
If I run kde, the fonts are displayed properly with small size, but if I run gnome and the run a kde app, the fonts are very big.
When i run a gtk app under kde, the fonts are showed properly but it doesn't use my gnome theme.
Anyone have a solution on making kde apps looking good under gnome?

Even though it's the inverse problem, it's likely still the same solution. Gnome has a Gconf setting for DPI. Otherwise you change it as an option to X. Where you do so depends on how you start up X though (startx, xdm, kdm, gdm, etc). I'll post back once I'm in Gnome and tell you where you can change the DPI.

My iweb site... give it a look

Guys and Gals,
This is my latest iweb site and I would appreciate your feedback. The demo videos have no audio yet. The site is hosted on my Xserve and a very fast colocation facility. The service it describes uses the Mac OS X Server WIKI and blog features on the backend.
Take a look.
http://www.ourparentingspace.com
<Edited by Moderator>

Nice site, and how refreshing to see an iWeb site not using a default theme. It is clean and uncluttered which is good. I (personally) would change 3 things:
1. The color of the 'selected' nav-bar is dark gray and becomes lost against the bluey-gray header. Perhaps make the 'selected' color stand-out more...light blue... And change the Red rollover color. It really doe not go with the rest of the design. Stick to blue.
2. Move the Google Ad. It looks as though it has been added as a last minute afterthought and really looks out of place where it is.
3. I would add a dedicated 'Contact Us' page. I can't help but think that people who your site is aimed at really want to talk to people. You really should have your contact details all over the place.
They are just my minor thoughts.

I'm using iweb 3.4 and trying to load audio files to my web page. everything looks good in iweb but after publishing instead of having a control bar i have a "?". does anyone know what to do?

I'm using iweb 3.4 and trying to load audio files to my web page. Everything looks good in iweb but after publishing instead of having a control bar i have a "?". Does anyone know what to do?

Where are you hosting the site, how are you uploading the files and what's the URL of your site so we can examine it first hand?
Adding audio files by dragging onto the web page forces the viewer to have Quicktime installed on their computer in order to be able to listen to them. Look at the audio player options on this page of Roddy's iWeb for Musicians site: Audio Players for your Music Website.
OT

Making an iweb site for .mac on a computer with no internet connection

Hi.
I am making an iweb site for publishing to a .mac account on a computer that is supposed to have internet access via airport, but it's not working properly at the moment.
I would really like to transfer the site onto my other machine in my office which has a decent broadband connection (I have iweb installed on there too). Is it possible to transfer a site that is yet to be published from one computer to another?
regards
David T

David,
You might want to try burning your Domain file to a CD or DVD by using http://iWebFAQ.com/iWebBackup.zip and opening the file & Publish from the other computer while effectively backing up your Domain file in the process.
regards,
http://iWebFAQ.com/#Backup

Changes in iWEB '08 are NOT making it to my published iWeb site

Never had this issue with earlier versions. I run iWeb to make changes in pages that I have had up for months. iWeb says the changes are published. When I go here:
http://web.mac.com/tyreeford/Site/Resume.html
The changes are there.
When I use Safari and the link:
http://web.mac.com/tyreeford/iWeb/Site/Resume.html
I get the old unchanged version.
I have been using iWeb the whole time. Why did the URL change!? I didn't change it.
Thanks,
Ty Ford

From '06 to '08 the way iWeb handles the publishing thus the url changed.
web.mac.com/username/sitename/pagename.html is the new '08 url
http://web.mac.com/tyreeford/Site/Resume.html
you didn't change it, iWeb '08 changed it. Basically because the /iweb/ was useless and only made the url longer, looks much better now, don't you think so?
Regards,
Cédric

Making IWeb sites look good.

Similar Messages

Maybe you are looking for