Our band 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…
Which do you prefer?
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.
If I can convince the band about my ideas, would the person who did this be able to do my design? I have a feeling what he did was pretty rushed too.
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.
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.
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?
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.
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…
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. 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) )
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!
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.
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.
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.
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.
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.
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?
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.
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.
