antpower26 Posted June 18, 2011 Report Share Posted June 18, 2011 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted June 18, 2011 Report Share Posted June 18, 2011 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. Quote Link to comment Share on other sites More sharing options...
antpower26 Posted June 18, 2011 Author Report Share Posted June 18, 2011 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 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted June 18, 2011 Report Share Posted June 18, 2011 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. Quote Link to comment Share on other sites More sharing options...
virtual Posted June 19, 2011 Report Share Posted June 19, 2011 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" Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.