Website design...

[andrew_carter]

Our band (http://www.last.fm/musicpages/album/index.php?id=2051866&mode=) has recently bought the domain name www.dancingaboutarchitecture.com.au and are now working on a website to fill it. One of the band members has done a draft of a site for us here - http://www.last.fm/musicpages/album/index.php?id=2051866&mode= . I would much prefer something along the lines of the image I will attach to this post (something I did last night on PhotoShop as a concept of what I like in a website...the "Contact Us" page has been used for the example).

Three questions...
1. Which do you prefer?
2. Any suggestions on how I could improve my design/what you like about it? I mean both from an aesthetical point of view and also from an ease and joy of use point of view. Don't worry...after 2 years of architecture critiques I can take criticism well enough. ;)
3. If I can convince the band about my ideas, would the person who did this (http://mainform.thefreebizhost.com/daa/index.html) be able to do my design? I have a feeling what he did was pretty rushed too.

Thanks,
Andrew

10708

[johnfoss]

1. Which do you prefer?
2. Any suggestions on how I could improve my design/what you like about it? I mean both from an aesthetical point of view and also from an ease and joy of use point of view.
I prefer your design, of course. Comments:
- Don't make it 800px wide. Too big for people using 800x600 screens, and too small for larger ones. We do a lot of stuff at 750.
- Text is very small, I would bump it up a notch or two.

Otherwise I think it looks really professional.

[andrew_carter]

Thanks for the advice John. The one I sent is actually more like a 1600 wide one resized for unicyclist.com...sorry I should have thought of that. Thanks for the advice on sizes though, that's really handy to know. Will resize text too. This is fun...now if only I could get it past the PhotoShop stage. I'll learn one day. :)

Andrew

[Matt.Weston]

I like your design the best :-)

The only issue I can see, is getting the background textures you've used to mesh properly with the red section around the photo - anyone able to enlighten on the present status of support for alpha-channel transparency on PNG's in Internet Explorer? If that's fully supported in Internet Explorer now (I'm fairly sure it already is in Firefox/Mozilla and Safari) that'd be a fairly easy site to put together.

I think the person who put together your other site should be able to do it, it looks to be a fairly easy job with the help of DIV layers to me. If they don't know DIV layers too well, get them to look them up - they're fairly easy to do (especially if you cheat and use Dreamweaver ;-))

Make sure to make any text that you can text on the page rather than in images, (eg, anything in a standard font such as Arial.) That way you can just use background texture images.

I hope that all made coherent sense :p

-Matt

[andrew_carter]

By the way all, I linked to the wrong page in my original thread. Where it says there's a draft of our site it's obviously not meant ot be Last.fm! The real link is further down in the post.

Thanks a lot Matt, so if we go ahead with this design, would the part in the banner with the group photo and the timber background texture be two different parts? Is it possible to just used a merged image of them both? You also mentioned fonts...we've used what has become our band font "Benny Blanco" for the band name up the top left. Would we be better off using an image for that part to avoid any issues with people not having a not so common font installed on their computer?

Thanks.

Andrew

[Matt.Weston]

You can use it as a single merged image, but then it won't spread across the entire screen - you'll need to lock the content of the site to be 750px wide down the center of the page, for example.

Yes, for your band name, it'd be best to use an image. For anything that is an uncommon font, use images. :-)

-Matt

[andrew_carter]

I know this is mostly likely a horribly obvious thing, but is it not possible to make it so that it uses the one merged image which is originally set to 1280 wide, and for the people running smaller screens have it crop it off from the left? I mean so that it's always lined up on the right. And then have the text parts of the banner done so that it's always lined up at the left of the screen no matter what size it is? That would be ideal, I think.

Updates...

Okay, I've gone back and redone some things. For now I've made two samples, one as if being viewed through a 1280x1024 screen with the site at the usual 4:3 aspect, and the other as 1280x720 (16:9 aspect). I think it'd look nice to be able to keep a horizontal theme to the site by making it always in the 16:9 aspect. Is that possible? Here are the two images...

16:9 (http://www.unicyclist.com/gallery/?g2_view=core.ShowItem&g2_itemId=163416&g2_imageViewsIndex=1)
4:3 (http://www.unicyclist.com/gallery/?g2_view=core.ShowItem&g2_itemId=163419&g2_imageViewsIndex=1)

Thanks,
Andrew

[Matt.Weston]

I'd never thought of cropping it to the left... I think it's probably possible, but don't quote me on that. It'd be worth a try for sure. Set up the merged image in a DIV layer locked at right="0px" and top="0px", and then lock the page to only be vertical scroll - I can't remember where this is done anymore, just that it can be done.

Use seperate DIV layers for the text, and another for the image of 'dancing about architecture' title. I'd do that in a transparent gif, btw. Well, try to. :-P It may be a little tough to get decent antialiasing on it in a GIF that matches the background

As for the aspect ratio, it's best to keep the site functioning like a normal site, scrolling down rather than across. Bear in mind that it's significantly more 'horizontal' than a standard screen, as you have the various bars around the place (The huge section up the top with the address bar and such, the section down the bottom where there's another bar and the start menu (on windows anyway) )

It's looking really nice :-)

-Matt

[andrew_carter]

Ah...I see, thanks! Yeah, the plan was always for it to function with no horizontal scrolling and minimal vertical. So is it possible to crop it to always fit in the 16:9 frame and then have a scroll bar on the right only when you need it? That would fit nicely inside Firefox/IE or whatever with the bars you mentioned. I'd forgotten about them!

Thanks a lot,
Andrew

[Matt.Weston]

Umm, as I understand it that's possible... but I'm not exactly sure I understand, lol.

[andrew_carter]

Yeah, sorry for the bad explanation. So what I was proposing was something along the lines of this...

A site set within some sort of (subtle) frame that crops the bottom off, making it always in the 16:9 aspect ratio. I tried finding an example but couldn't. After what you pointed out about there being the bars in browsers anyway I'm not so fussed about it because it becomes semi-widescreen anyway.

Andrew

[andrew_carter]

Another thought...

What if solved a lot of problems by making the site always set to 1024x768? The number of people running 800x600 screens is getting smaller and smaller, and 1024x768 looks fine on a 1280x1024 screen. Is this too hard on those few who are still at 800x600. I would have thought it would be far less even than what the chart below claims. What would happen to those people? Could they scroll across to see the whole thing or would it be cropped? Since you'd already be setting the site as a permanent width and height, could you then change it to 16:9 instead of 4:3 like I was sayign before? It would solve a lot of problems wouldn't it?

Sorry for all the newbie questions. We've gotta start somewhere. :)

Andrew

[Matt.Weston]

Setting it into a 16:9 ratio frame is quite possible, but once again I think it'd lock you to a specific resolution (I think...)

Something else to consider, is sites designed for 800x600 look fine on 1024x768 - and very few people run it higher than 1024x768 - and those that do are well accustomed to having some sites look small to them :-)

It is possible to make the 1024x768 one crop down to 800x600 I think, but it really has to be tried before you can be sure.

-Matt

[andrew_carter]

Thanks. I'm amazed at how few people run 1280x1024. I mean, lots of people have monitors with that resolution or higher but choose less. Anything less looks far too big to me, having run 1280x1024 for years.

Andrew

[Matt.Weston]

I think it's because most people can't see 1280x1024 with standard sized text. I have been running it for a long time (even on my old 14" monitor... TINY!) - but people have often commented when using my PC on how hard it is to read the text. Apparently, 3/4 of the planet is in denial about their need for specs. :p

-Matt

[andrew_carter]

Here is an alternative banner. Picture this in the exact same page layout, including the textured background behind it as per the other version. Which do you prefer?

Thanks,
Andrew

10712

[Borges]

I have an idea about how you could get around the sizing problem, but it's a little tricky and I haven't tried this, so don't sue me if it doesn't work.

You could place the next gig text and the picture of you at the right edge of the browser. You could do this with the "float: right" property in css. It would also require that you give the picture of the band a transparent background in the part which is over the gray area.

[Matt.Weston]

I like the new one :)

[andrew_carter]

Although I didn't know if it was possible, that's what i was hoping to do. Have it so the band picture and next gig reminder are aligned to the right and the "dancing about architecture" and navigation menu are aligned to the left, then when the screen resolution decreases the only thing that would be affected would be the banner image which would be cropped from the left.

Andrew

[Matt.Weston]

I'm fairly sure this is possible.

[Gilby]

I'd recommend not trying to force a certain size screen/window. Allow it to flow with the size of the browser window. You can accomplish what you want as far as having the positioning of everything using CSS and div elements in html. You can align the business card pic in the lower right corner with it set to have things wrap around it. The photo in the header can be aligned to the right and then you can layer it so it is above the textured background. For the band name at the top, you should write it out in text within a header tag, so that search engines can pick it up and screen readers (for the sight-impaired) can speak it. Using CSS, you can replace it with an image to get the font you want.

[andrew_carter]

Thanks, that's all very helpful. :)

[UniTyler]

So, which one are you in the pictures?

I really like the site, it is desinged well. Keep it up!

[andrew_carter]

Thanks Tyler. Top left in this photo - http://www.unicyclist.com/forums/attachment.php?attachmentid=10701&d=1132299108 .

[andrew_carter]

This is too hard, I can't do it! :(

I've been trying out Dreamweaver v8.0. Apparently you can integrate it with PhotoShop and easily turn your PhotoShop images into websites. I just don't know where to begin though, I'm overwhelmed.

Does anybody have any experience with this Dreamweaver and Photoshop integration?

Thanks,
Andrew

[evil-nick]

All the computers at my university (excluding the Linux lab and the software engineering lab, all run by competent people) use 800x600 as the default. My dad uses it too because of his eyes. My gf only started using 1024x768 because she used by LCD monitor over the summer, and forgot to change her resolution back after hooking her crt back up. Too many people use it (my iBook has that for the native size :()

PNG support still sucks in IE, as does CSS in general. But therein lies the challenge, getting it to look halfway decent in both. If you want an example, look at http://evil.linuxfreak.ca for a bad IE design (but awesome under Firefox at 1024x768) and http://inglit.ubishops.ca which should scale properly, and look decent on IE (though not perfect, I only have so much time ;)

[andrew_carter]

Thanks Nick. That's good to know, although quite disappointing to realise that so many people are still running 800x600.

Update...

Here's an updated scheme - http://www.unicyclist.com/gallery2/main.php?g2_view=core.DownloadItem&g2_itemId=164963&g2_serialNumber=1&g2_GALLERYSID=e8decd39fb4df780aabf95065873adcd
Here's an alternative that I tried but don't like - http://www.unicyclist.com/gallery2/main.php?g2_view=core.DownloadItem&g2_itemId=164966&g2_serialNumber=1&g2_GALLERYSID=e8decd39fb4df780aabf95065873adcd

It still looks much the same but I've done the "Home" page as an example now instead of the "Contact Us" page. The idea is that the horizontal banner, bottom left framing element, and background colour would stay the same and the rest would change for each page.

Things like fonts and colours are going to change, it seems. Not sure what to though. Colour schemes are difficult with the red and orange in the banner...quite restricting. Personally I like the colours as is (I think) but not all the band members do. Some want a "less clinical" font, but I don't know what to use that is still common enough to use in a website.

I'd really like your feedback and have really appreciated the advice you've given so far.

Andrew

[Gilby]

Thanks Nick. That's good to know, although quite disappointing to realise that so many people are still running 800x600.

Hey now, just a few months ago I upgraded from 320x240 to 640x480... on my handheld. Anyways, the point is that you should make the site scalable to different size screens. Don't assume a certain screen size, and instead design it to work for all screen sizes.

[andrew_carter]

Will do. That's very impressive that handhelds are up to 640x480!

Andrew

[andrew_carter]

http://www.unicyclist.com/gallery2/main.php?g2_view=core.DownloadItem&g2_itemId=165139&g2_serialNumber=1&g2_GALLERYSID=e8decd39fb4df780aabf95065873adcd

I'm quite happy with this. I wanted the info on each page on the home page but thought it looked too dull as it was so I made these silhouette images (which was fun to do :)) to liven things up a little. Do they work? I also added some colour to the framing element at the bottom left to mimmick what's happening in the banner. Is it best with or without colour?

The other thing is, I'm considering designing it at 1024x768 and having it be able to just squeeze down to 800x600 but have 1024x768 as the upper limit. I think visually it will work best at 1024 and that it looks fine set at 1024 on a 1280 screen. What are your thoughts? It's very tempting to make those 800x600 people just put up with scrolling both vertically and horizontally to view the site. :)

Thanks,
Andrew

[Borges]

I don't think it's a good idea to design for a specific screen size. More on principle than because it'll be annoying for peoble with really high or low screen resolutions. Also the way you organize the info on the screen doesn't call for high resolution and the design you've created could be made scalable.

[andrew_carter]

Here it is...

http://www.dancingaboutarchitecture.com.au

Brian Mackenzie made the site for us, and did a fantastic job. I know there were warnings not to exceed 750 pixels wide, but that wouldn't have suited the design and the number of people running smaller resolutions is dropping steadily anyway.

Andrew

[Matt.Weston]

Nice! Came through really well :-)