Jump to content

Ideal Layout Size


Recommended Posts

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?

Link to post

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.

Link to post

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.

Link to post

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

Link to post

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 :

kiwilayout7copyxu2.th.jpg

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

Link to post
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

Link to post
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! :)

Link to post

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:

betterkiwilayout3copyhe4.th.jpg

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

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!!

Link to post

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...