Jump to content

CSS Layouts


antpower26

Recommended Posts

Hi its Ant.

I have just completed the CSS tutorials, both on w3schools and here. This question is about sizing our layout, and which layout is preferred, for more effective results. In the tutorials here, both fixed and liquid layouts were taught. However as I composed my fixed layout targeting 960 width in the main div container, I noticed in the browser view, there was a fair amount of empty whitespace outside of the content. So my question is how do we layout our pages successfully, filling the entirety of the screen, however big or small, and which type of layout is the best way to go, now and for the future.

Link to comment
Share on other sites

Layouts can be done in a couple different ways: fixed (for example, a fixed width of 960px), liquid (where the width is based on a percent value, rather than a pixel value) or some combination of the two (for example, it uses a liquid layout, but has min-width and max-width settings in place to constrain the layout.)

 

I personally tend to stick with fixed width layouts, using something that is between 900 and 980px wide so that it will fit within a 1024x768 browser. I figure that empty white space to the left and right of the layout is fine. Liquid layouts are possible, but they tend to be tricky to do well, especially when you have images to deal with that don't scale well. Text isn't very readable when it's too wide, and I don't want to be reading text that spans all the way across my 1680x1050 monitor.

Link to comment
Share on other sites

Thanks very much, that helps a lot:) A question I have actually, how do layouts work with smartphones, when you zoom in and out and everything resizes. Is that something that is built into the hardware? Or is it a case of creating extra code using the @media rule and specifying handheld, and maybe creating a liquid layout specifically for those devices and that market?

Thanks again.

Ant

Link to comment
Share on other sites

Zooming is usually built into the browser. You can create a separate mobile site, or modify the layout using @media queries, but that's up to you. I'm not sure how I personally feel about completely separate mobile sites... just because I am using a phone doesn't mean I don't want to see the "full" website. If you are going to make a separate mobile site, at least include a link to the non-mobile version so that can be accessed easily.

Link to comment
Share on other sites

I would add that if your client requires his site be accessible on cell phones then you will have to adapt to that particular requirement. Otherwise as Ben said, if I am accessing a website from my phone it's because I want quick access and info, so I will zoom in to see the area that I'm interested in and not even look at the overall "eye candy"

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...