Hi,

I'm designing with Fireworks for a while now and have always been able to make good looking 960 pixel width designs.

However, I'm working on a new project and I would like to have full page width using the design. For instance, take youtube it is designed on a 960 pixel width, I guess. But can I make a design that takes full widths, like 1024, and still scales to smaller and bigger resolutions. Is that possible without Flash?

I've been taking a look at html5, and I don't know if it's possible with that. But it would be nice when older web browser versions can display the website as well.

Is it possible with, css, javaScript and html, or am I asking the imaginary thing?

Thanks

4 answers

Justin 20
0
points
This was chosen as the best answer

You can have a completely dynamically resizing site using CSS today.

Check out some of the stuff by Mathew James Taylor:

http://matthewjamestaylor.com/blog/perfect-3-column.htm

If you want images that resize dynamically (I do this myself) then you probably need to resort to JavaScript.

You can see an example of this technique at anchorbenefits.com

Answered about 6 years ago by Justin
Ktash 1851
1
point

The absolute easiest method for this is, as mention above, doing a percentage based width, and then going from there. For images, the best technique I've found is using repeating backgrounds and things of that nature. If you're looking for a design that maybe has images that are more static, the best I've seen is to design for the 1600x1200 screen resolutions and make sure that when images are clipped to smaller sizes (with overflow: hidden) that content is not lost, only minor style. This will allow you to cover most screen resolutions (minus 1900x1200 or multi-monitor resolutions) and still allow you to do the full design.

The advantage to repeating background is a low bandwidth impact, and the disadvantage being you have to be a lot more creative to get away with it sometimes. The advantage to the oversized image approach is being able to do everything you want, the downside is that if the images are not as small as possible, it can be a bandwidth hog. But for most users, that's not an issue.

Answered about 6 years ago by Ktash
  • Hi thanks for your answer, it's really helpful. However, I found this: http://www.w3schools.com/browsers/browsers_resolution_higher.asp The 1920 x 1200 resolution is used by 4.6% of the internet users. I would like the design to be correct viewable for that group as well. In a nutshell, I want the best dimensions for the most used (preferably all) screen resolutions. Would a 1920 x 1200 design with the Flexbox style, like Jude Hansen mentioned, be an option? Thanks. simbilim about 6 years ago
  • I don't know much about the flexbox style or its support so I'm not sure. It also depends on your audience. w3schools has a very tech savy user base, so if you have that sort of audience, then you'll want to target them with better new browser support and higher resolutions. If you're hitting a general audience, you'll want to make sure you have IE 7+ support which supports little to no CSS3. Check http://www.quirksmode.org/compatibility.html for compatability. And 1920x1200 is on the rise, yes. Usually between 1-5% of users have 1900x1050+ monitors depending on statistics site used. Ktash about 6 years ago
1
point

I think within a year or so we'll all be giving more attention to things like the Flexible Box Model and CSS3 Multi-column support. These new treats barely have support in progressive browsers so to implement something similar we'll be stuck with hand-crafted solutions.

Answered about 6 years ago by Jude Hansen
  • Thank you for your answer. I read that the Flexible box is experimental supported by the gecko and webkit engines. Do you know how this is interpreted by IE until IE9? simbilim about 6 years ago
1
point

The closest to getting this is done is using fluid numbers as opposed to hard pixels. Try percentages (example: width:50%; padding: 10%; margin: 15%). As far as images, things will get a bit trickier. You can actually use CSS to resize images, but the quality of the image will probably be compromised.

#container img.resize {
 width: 40%;
}

The above code will make the image scale to 40% of the parent div.

<div id="container"> <img src="example.jpg" alt="Example" class="resize" /> </div>

This is the quickest and easiest way to do it via CSS; but quality may be sacrificed. jQuery is capable of doing it too; with minimal loss of quality.

Answered about 6 years ago by Vinny Burgh
  • Hi thanks for your answer. Does this mean I need to write CSS for different resolutions? simbilim about 6 years ago
  • If you were to make each div have values containing percentages, no. If you were to use pixels to set values, yes. Vinny Burgh about 6 years ago