Question about best size for header logo, Trying to determine best method for logo size to make a flexible des Options

[fenton kennedy]

Hi, I am attempting to create a site which will have a flexible design and that can be modified easily for mobile devices. I am a novice (learning as i go).

My question is:
how do i decide what size horizontally to make my logo (logo will take entire width of viewport)

Here is the relevant html code I am using:

CODE

<div id="outerWrapper">
    [b]<div id="title" ><img src="images/company logo.png" alt="Boutique Take Two Logo"width="100%" height="200"></div>[/b]
        <div id="menu">
            <ul class="MenuBarHorizontal">
                <li><a id="m1" href="index.html">HOME </a></li>
            <li><a id="m1" href="specials.html">SPECIALS</a></li>
                <li><a id="m1" href="gallary.html">GALLARY</a></li>
            <li><a id="m1" href="aboutus.html">ABOUT US</a> </li>
                <li><a id="m1" href="contactus.html">CONTACT US</a></li>
            </ul>
        </div>
    </div>
</div>

I currently have the logo placed so that my menu will overlay my logo image as if it was part of my logo.
Here is an image of what my page currently looks like. (I don't have it hosted anywhere yet as it is a work in progress) in the attachment in gif format



thank you for your help and suggestions

[pandy]

If you give it a fixed height it will be distorted at most window sizes. I wouldn't do that.

About the physical size of the image I guess it's trial and error. You don't want it so large that it will slow the page down and not so small that it will look too bad when up-sized. What format is it? JPG, GIF, PNG?

[Christian J]

I'd use a fixed width for the logo image, and the use a repeating background to fill out the sides in large browser windows.

Or you could split the logo image into two fixed-width parts, with the text part floated left, the ladies floated right, and a repeating background between the floated images in large windows.

[pandy]

I would probably also go for that, but then you need to use min-width or one of the floats will drop in a small window and maybe that isn't desired.

[Christian J]

Yet another idea (for newer browsers) is to make the whole logo a background image, then use CSS3 media queries to show different sizes depending on window width.

[fenton kennedy]

If you give it a fixed height it will be distorted at most window sizes. I wouldn't do that.

About the physical size of the image I guess it's trial and error. You don't want it so large that it will slow the page down and not so small that it will look too bad when up-sized. What format is it? JPG, GIF, PNG?

currently the physical size is 600px wide by 150px high in a png format

[fenton kennedy]

Yet another idea (for newer browsers) is to make the whole logo a background image, then use CSS3 media queries to show different sizes depending on window width.

I like this idea ! Could you provide some sample code for how I would use css3 media queries to do this. Also I have a question regarding using a percentage for width (which I am currently using in my html code) since this seems to work ok when I resize my window size, at least on my computer

My next question would be would using css3 work for smartphones and tablets or do I need different code for these devices.

[fenton kennedy]

I'd use a fixed width for the logo image, and the use a repeating background to fill out the sides in large browser windows.

Or you could split the logo image into two fixed-width parts, with the text part floated left, the ladies floated right, and a repeating background between the floated images in large windows.

this is a copy of the logo:


Are you suggesting I split this image in the middle and then create a 1px or 2px width background image which will match the two sides? I can split the image but not sure how to make a repeating background image that would match and don't see how this would benefit me more then just using a 100 % width which will expand to fill large browser windows.

Could you please explain a bit more, I am pretty much a newbie at this

[Frederiek]

There a lot of talk lately about a good solution for responsive images. There's a new (HTML5) element <picture> in the making that might solve that.

Search for "responsive images".

See also:
http://responsiveimages.org
http://www.d.umn.edu/itss/training/online/...css.html#images

And for media queries:
http://www.d.umn.edu/itss/training/online/...ign/css.html#mq

In any case, watch out that the aspect ratio of the image is preserved, so it doesn't get distorted.

[Christian J]

Also I have a question regarding using a percentage for width (which I am currently using in my html code) since this seems to work ok when I resize my window size, at least on my computer

That should work as long as the image's original width is wider than the window, but if the window is wider the image quality will suffer. You can of course start with a very wide original image, but that increases download size. To make the image keep its aspect ratio, don't give it any height value.

My next question would be would using css3 work for smartphones and tablets or do I need different code for these devices.

Smartphones have good CSS3 support, but due to the smaller screen size of smartphones you may want to use a different layout (larger logo, single content column etc) than on a tablet or desktop monitor.

This is further complicated by the large resolution of many smartphones. You may not always be able to detect a small smartphone screen with media queries, since the latter apply to resolution (not physical screen size), and the smartphone may have the same or higher resolution than a fullsize laptop monitor. (Here's a slightly dated thread on this problem: http://forums.htmlhelp.com/index.php?showtopic=15317 )

[Christian J]

Are you suggesting I split this image in the middle and then create a 1px or 2px width background image which will match the two sides? I can split the image but not sure how to make a repeating background image that would match and don't see how this would benefit me more then just using a 100 % width which will expand to fill large browser windows.

The difference is that in wide windows, the two halves would display to the left and right in their original size, with the space in the center filled up by the tiling slice.

[fenton kennedy]

Thanks to everyone who has posted regarding my question. You have all provided some excellent advise and it is greatly appreciated. After reviewing and reading the info in some of the links provided. I have now begun to realize that this is not an easy task as I first thought.

I am now going to be doing a lot of reading and studying and will probably be asking a lot more questions as I progress in this endeavor.

Kudos to all of you, and your very kind efforts to help someone who was under the mistaken impression that building a website would not be that difficult. Lol, man was I ever wrong

Sincerely,
Fenton Kennedy