On Tue, Jan 24, 2012 at 7:50 AM, Freelance Traveller
<edi...@freelancetraveller.com> wrote:
> Question the First:
>
> After seeing plenty of discussion, here and on other forums focussing on
> website development, I've decided that maybe it's a good idea to
> implement max-width (and possibly min-width) settings on my site. The
> sense I get from the discussion is that a max-width of 960px is probably
> the best choice.
>
> What's a good reasonable value for min-width, given that I have a fixed
> 120px vertical nav bar down the left side of the page?
>
> Sub-Question: Should max-width (and min-width, if deemed appropriate) be
> applied to the HTML tag, the BODY tag, or should I enclose everything in
> a DIV and apply it to that?
>
> Question the Second:
>
> Would it be better, instead of setting min-width, to allow the page to
> "reformat" itself so that instead of a left nav, it has a horizontal
> breadcrumb trail for nav across the top? If so, can someone point me to
> material that will explain how best to do so?
I would say that min-width depends on your content.
960px is a good max width... for most site visitors.
I'd recommend implementing a few different fixed-width designs with
the help of media queries. Implement designs for 760px and 960px.
The default virtual viewport width for Android mobile devices in
portrait mode is 800px and the default for iOS is 980px.
... Yes, people are visiting your site on mobile devices.
If your site is (or can be) especially relevant to mobile users, you
might want to take a look at the viewport meta tag and start with a
320px width layout. Then work your way up to 960px. Perhaps 320,
480, 600, 760, and 960 are appropriate.
It sounds more complicated than it is. Take a look:
/* styles for 320px width go here */
@media all and (max-device-width: 480px) {
/* modifications for 480px go here */
}
@media all and (max-device-width: 600px) {
/* modifications for 600px go here */
}
@media all and (max-device-width: 760px) {
/* modifications for 760px go here */
}
@media all and (max-device-width: 960px) {
/* modifications for 960px go here */
}
The important buzz-phrases to be used in your search engine of choice
are "adaptive web design", "responsive web design", and "media
queries"
Recommended reference material:
http://developer.android.com/guide/webapps/targeting.html
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
http://www.alistapart.com/articles/responsive-web-design/
http://simplebits.com/notebook/2011/08/19/adapted/
--
Ghodmode
http://www.ghodmode.com
> --
> Jeff Zeitlin, Editor
> Freelance Traveller
> The Electronic Fan-Supported
> Traveller® Fanzine and Resource
>
> edi...@freelancetraveller.com
> http://www.freelancetraveller.com
> http://come.to/freelancetraveller
> http://freelancetraveller.downport.com/
>
> ®Traveller is a registered trademark of
> Far Future Enterprises, 1977-2009. Use of
> the trademark in this notice and in the
> referenced materials is not intended to
> infringe or devalue the trademark.
How can anyone trademark a commonly used dictionary word? That's just
stupid.
>
> Freelance Traveller extends its thanks to the following
> enterprises for hosting services:
>
> CyberNET Web Hosting (http://www.cyberwebhosting.net)
> The Traveller Downport (http://www.downport.com)
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
