Ideal Layout Size

I started to make my website design but i just remembered that my webpage just fit in every screen resolution.. from 640x480 to the biggest as possible

there is my question, i started my design in 800x600 format.. but will it fit in a 640x840 and 1024x768 and 1280x1024 (my current screen resolution)? is it a question of coding or designing in photoshop? id like to know how the resolution in webpages works, cuz id rather know it now than after ive finished my work and having to do everything again..

and another question.. id like to position my stuffs in the center of the page.. do i do it in photoshop? or in the coding?

#435685

1. The best way to go is have a fluid layout. It means that your website isn't say 700px wide but 90% wide (where 100% is the width of browser's window so the layout automatically adjusts to it).

2. Positioning stuff in the center of the page can be achieved with CSS. For example you could create a div and add margin: 0 auto; styling to it.

#435711

Thanks Pe8er, and i guess (after having searched on Google of course ) that fluid/liquid layout is done in the coding.

But when I'm drawing all the design on Photoshop, which canvas size should i be using? The biggest possible or the smallest possible? Because if I go big.. it will take forever for the browser to compact it and and if I go small, i would lose quality when the browser enlarges it.

#435735

It's really up to you. Since you're doing it in Photoshop and it's liquid, it's really just more of a concept thing. Whatever helps you envision it best--you could just stick with 800 * 600, and then draw it out.

The thing is 800px or 600px will never be specified in your CSS! This is just to help you get more of a grasp on what screen elements will go where, and how much space they'll take up relatively.

Hoping my explanation was somewhat lucid,

-NC

#435805

Hmmm... I think I get it, so I'm gonna continue drawing in this size and then see the result after the coding which won't really affect the quality of the website. All I have to do is to use CSS and percents for the image size instead of pixels.

Okay, I kinda finished the drawing of my website design which should look like this :

I'm wondering if, with this layout, it will be possible to make a fluid layout. I really want one! lol XD

And about the slicing, I tried to slice the layouts and I ended up with like 30 .gif files, is it normal or is that too many?

I also tried to generate the css source by using ImageReady but ppl says it isn't good and, I would not say it isn't good, but I don't understand anything written in the source; everything seems to compicated. I would like to learn the css language, so if I have to change anything in the website later, I will know where and what to modify. Does anyone have a good site for css complete beginner tutorials?

Thanks for your help in advance!!

PS: And by the way, some comments on the layout would be nice. It is my first layout I make

#435945

looks great!

It would take a bit of tricky work to turn that into a liquid layout, but I think you should just stick with it as is.

#435947

Hmmm... I think I get it, so I'm gonna continue drawing in this size and then see the result after the coding which won't really affect the quality of the website. All I have to do is to use CSS and percents for the image size instead of pixels.

Exactly!

Looks like a nice design, though you may want to tone down the green a little bit.

-NC

#436050

I also tried to generate the css source by using ImageReady but ppl says it isn't good and, I would not say it isn't good, but I don't understand anything written in the source; everything seems to compicated. I would like to learn the css language, so if I have to change anything in the website later, I will know where and what to modify. Does anyone have a good site for css complete beginner tutorials?

Thanks for your help in advance!!

PS: And by the way, some comments on the layout would be nice. It is my first layout I make

Comments on your layout:

I think it's pretty good so far, but the shades of green you used are a bit bright; as nightcrawler1089 said, tone the green down a bit. For the left sidebar, you should vary the color a bit from the content area so that it contrasts slightly. I recommend reading this article for some tips on layout design (please don't be offended by the title, though. lol).

Tutorials:

Playing around with basic CSS-coded layouts is your best bet in getting acquainted with the language of CSS. This tutorial site helped me be more proficient in CSS. Once you're more advanced, or need some help with liquid layouts, the site here is pretty good for that knowledge.

I hope this helped!

#436548

Thanks guys for your comments!

Now that i'm back from vacations, and soon back to school too lol, I gotta restart working on the website

I've made some modifications on my layout seeing that you guys said that the green is too bright. The new layout should be easier to code though since I removed some few things and added a few things too like the logo. Now it should look like this:

I'd still like to have comments on the new layout and the logo too (supposed to be a K made with leaves)!!

I went to the library to borrow some books on CSS and wow, it looks so complex. most of them and like 200-300 pages. I think i'm going to read the few first pages just for the basics and then look for the most-useful aspects.

I'm still thinking between going for liquid layout for just fixed in the center since I'm such a newbie lol. I tried to put the banner in code but no success. I sliced it in a 1-pixel wide but cant make tile correctly; it keeps repeating from one end of the screen to the other. Looking for something to limit the repeat, hah! Happy New Year guys even I already did in another thread few days ago!!

#436588

mm, i suppose the width should be 800

#436733

Well, the central parts are 800px wide, I just enlarged the canvas so we can see how the layout was with the background XD.

#436753

Designing your site to fit in a 800px width screen is a safe way to go.

Just keep in mind that window borders and scrollbars trim a little of those 800 pixels, so it's better to not exceed 770 (760) pixels.

#436864