PDA

View Full Version : Designing a website to fit all resolutions


DesignFox
01-25-2011, 07:10 AM
Hi all. I have joined this board with the sole intention of getting a solution for predicament.. and would greatly appreciate any help thrown my way!

So here I go with the explanation! (I'll try and keep it short and to-the-point)

I was basically tasked to create a website for all resolutions as the thread title might suggest. I designed the layout in Photoshop CS3 at a 800x600 resolution. Here is the outcome of said designing.

http://img543.imageshack.us/img543/165/livedemoip.jpg

Everything has its own layer - each of the buttons, the USA logo, main and sub nav etc.

I've watched countless videos on creating a website to fit all resolutions but they tend to start the whole design process in Dreamweaver. Likewise the videos I've watched on importing slices from PS to DW forgo mentioning how to port your designs so that they are capable of being viewed easily across all resolutions. So I find myself trying to mix and match both of these elements to find the solution myself, which has become very daunting to say the least.

I should say my knowledge of Dreamweaver is basic, if that. All I've learned has been from online tutorials and such over the course of about 15 solid hours of info-digesting.

In my e-travels I have happened across terms such as Div tags, CSS and spacers, none of which I fully comprehend. If I slice my layout and import it in to DW then I can set the layout to fit 100% of the screen width, however this leaves me with ugly white areas in the design that I assume are the transparent spacers at work?

http://img443.imageshack.us/img443/2219/livedemoip3.jpg

I suppose the core of my concern is where exactly the best place to start is, considering my end-goal?

I understand this isn't the best thought out explanation but I've been up all night trying to literally piece it all together and it looks like my motor functions are beginning to suffer for it!

Thanks in advance!

Corrosive
01-25-2011, 08:50 AM
Welcome to the forum DesignFox

You need to have a bit more of a plan for this. If you read more posts here then you'll soon get the idea that tables, slices and export from photoshop is not a good idea. Spacer gifs are only the start of the problem. I won't go on about it as you have already alluded to div tags and CSS which are your building blocks for web pages.

You have two choices with fitting resolutions. One is to make your layout flexible/liquid so that it expands and contracts with the browser window. These layouts are achiveable but hard and, for my money, tend to look a bit sh*t. Especially on widescreen monitors when it can be spread across quite a distance!

Your second option is to make a fixed width layout no wider than 800px for the resolution you are talking about. I don't bother with 800px nowadays as the number of users with that res screen are so low it is negligible (based on Analytics stats). I use 960px for fixed width layouts.

Once you choose your approach it will become easier as you'll have something to focus on.

dubaco
01-25-2011, 09:13 AM
Again, welcome.

I really echo the last post (not the trumpet solo, obviously) but hearing it twice may help you.

Time spent learning dreamweaver and divs will pay off in the long run and will be less stressful than the photoshop approach. Also, looking at Google analytics for my own site, a very small fraction of people use 800x600 these days and actually, in my own stats, use above 1000 wide) so a width of 960 is a good approach. I did a liquid one recently and it does look a bit stretched out on my screen but I am set to somewhere in the 1700's wide anyway but, again back to the stats, not many people are set to that high.

gentleone
01-25-2011, 09:31 AM
I agree with the above and especially for beginners I'd recommend to stick with fixed width layouts for as long it takes to get familiar with HTML & CSS and to understand all the tags/elements and what they're meant for.

In my opinion is the future of layouts the liquid layout as the mobile device market is going by storm. A liquid layout would be the best approach if you want to, or have to, target also a large mobile device audience.

gentleone
01-25-2011, 09:38 AM
Corrosive and Dubaco, if you don't want that your liquid layout looks a bit funny (or read ugly) on the wider screen resolutions, just use the min-width and max-width property and if it's a must with a CSS expression to support IE6 too.

#wrapper {
min-width: 960px;
max-width: 1280px;
margin: 0 auto;
width: expression(document.body.clientWidth < 961? "960px" : document.body.clientWidth > 1281? "1280px" : "auto");
}

dubaco
01-25-2011, 09:49 AM
just use the min-width and max-width property[/code]

Brilliant, cheers!

DesignFox
01-25-2011, 09:54 AM
Thank you very much for the snappy response, I wasn't expecting a reply for days =O

The brief I was given requires the site to be multi-resolutional, for want of a better word. So you suggest I look in to making it 'liquid' and also scrap the Photoshop idea entirely and create the whole website from Dreamweaver?

@ Gentleone - It has to be accessible to mobile devices too, but I assumed that would require a different design altogether?

Thanks again guys, seriously.

Corrosive
01-25-2011, 10:04 AM
I actually don't think fluid is the future of mobile sites. I believe that scaled back, mobile specific sites will soon be what it is all about (if it isn't already). You've just got to llok at Amazon mobile or BBC mobile to see how effective it can be. :)

gentleone
01-25-2011, 10:24 AM
I actually don't think fluid is the future of mobile sites. I believe that scaled back, mobile specific sites will soon be what it is all about (if it isn't already). You've just got to llok at Amazon mobile or BBC mobile to see how effective it can be. :)

Indeed and that's my point I'm trying to make here. ;) The basis from those sites is a liquid layout in the first place and they use CSS media queries to detect and to adjust the layout for the appropriate mobile devices.

It's called responsive web design... that's the future what's lying in front of us IMO and once again the basis is the liquid/fluid layout together with flexible images and all kinds of other stuff we have to adopt into our design process... whether we like it or not :)

http://www.alistapart.com/articles/responsive-web-design/

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

@Designfox... if you have to support a wide range of mobile devices then those articles above has all the tips you need, but since you've just started in this field of web design this might be a bit too much for you.

Corrosive
01-25-2011, 10:34 AM
It's called responsive web design... that's the future what's lying in front of us IMO and once again the basis is the liquid/fluid layout together with flexible images and all kinds of other stuff we have to adopt into our design process... whether we like it or not :)



Ah, I see what you mean now! I thought you meant big, full sites being liquid to adjust to mobile screens but scaled-down sites in %s certainly does make a lot of sense... And probably a lot easier to code than a full liquid layout.

gentleone
01-25-2011, 10:42 AM
Ah, I see what you mean now! I thought you meant big, full sites being liquid to adjust to mobile screens but scaled-down sites in %s certainly does make a lot of sense... And probably a lot easier to code than a full liquid layout.

Yes, with CSS media queries you show the scaled down version(s)... for instance you set the the unimportant side bar to display: none for them and set the new CSS3 multi-column property (has already wide support on mobile devices) on the paragraphs in the content div, so that those paragraphs adjust nicely if a iPhone or iPad user goes from portrait to landscape view.

Ricky55
01-26-2011, 01:29 AM
Gentle when you gonna get your site finished? I keep checking. I like the grungy thing you have going on at the moment and I'll be interested to see what you come up with.

I'm working on a new one for myself. Just a simple one pager for now. I never get the time to do my own.

Re, this post. I think you've been given a bit of a tough brief here mate.
Trying to tackle all of this on your first site is crazy IMO.

Not overly keen on your design if I may say too.

gentleone
01-26-2011, 06:03 AM
Gentle when you gonna get your site finished? I keep checking. I like the grungy thing you have going on at the moment and I'll be interested to see what you come up with.
I was hoping no one would ever ask... :) i ask myself too, when I'm going to finish the bloody thing. It's the content/text what's holding me from launch... not satisfied about it yet at all... and it's also client work what keeps coming in between.

I'm working on a new one for myself. Just a simple one pager for now. I never get the time to do my own.
Ah see... seems like you can't find the time for it too ;)

Re, this post. I think you've been given a bit of a tough brief here mate. Trying to tackle all of this on your first site is crazy IMO.
Yes I know... all that bla, bla was more for Corrosive... I think I made it twice clear to the OP that this would be too difficult for him if he just started out with web design.

Not overly keen on your design if I may say too.
You mean you don't like the it so much... my web page design?

Ricky55
01-26-2011, 08:41 AM
Not your design I meant the design created by the person who started this thread.

3magic
01-26-2011, 09:05 AM
I agree with the above and especially for beginners I'd recommend to stick with fixed width layouts for as long it takes to get familiar with HTML & CSS and to understand all the tags/elements and what they're meant for.

In my opinion is the future of layouts the liquid layout as the mobile device market is going by storm. A liquid layout would be the best approach if you want to, or have to, target also a large mobile device audience.

Hi,thanks for sharing the information here.Actually i'm beginner in web designing feild and so your information is very helpful for me.I'm very glad to read this informative post because it may be very useful for me in context to web designing.
(http://www.3magicbeans.com)

gentleone
01-26-2011, 09:30 AM
@3magic
I'm glad that the info was helpful to you, but I've deleted your website addresses, because we don't allow first time posters to post url signatures.

gentleone
01-26-2011, 09:35 AM
Not your design I meant the design created by the person who started this thread.
Ooohkay.. that's why... it didn't made sense to me, because you said you liked it first :)