How to have a web page fill the screen on the viewers computer - Is this called Elastic Pages? HowTo? Pros/Cons?

Question

I have always designed my webpages to a specific size as different people have different resolution settings...

Since I don't do web dev on a regular basis I somehow missed "Elastic Pages" or what ever its called to have the page dynamically re-size to fill the viewers screen.

1 - Can Expression 4 Web Pro do this? If so is there a How-To or Video Tutorial I can forward to a new user?

2 - What are the pro's & con's of creating elastic pages?

Thanks for any help.

Answer 1

Whilst this used to be a good idea, the use of wide screens on the one hand and smaller screens on the other make this impractical. Your pages may look OK on a 17" monitor but very sparse if viewed on a wide screen 23" or larger.

Having said that, if you want your site viewable 'cross-device' ie mobile thro desktop you can use a responsive layout (rather than elastic) that gives an optimum at all resolutions.

Check out some of the responsive tutorials to see how this works. eg: 

http://www.webdesignshock.com/responsive-web-design/

And a responsive template

http://www.getskeleton.com/

HTH

---

Ian Haynes

EW - V4 Add-Ins
EW - Resources, hints and tips
EW - Design for the Mobile Web
expression(web.blog)

Answer 2

As Ian said, with display sizes ranging from 320 x 480 pixels to 2880 x 1800 pixels, the old-style elastic (fluid, hybrid, etc.) layouts can be problematic. Trying to stretch content that fits comfortably in a 960px design to display in a 2000px+ wide display leads to lines of text that are far too wide to read comfortably, excessive and awkward whitespace, etc.

Furthermore, many people, myself included, do not use their browsers at full screen on a wide monitor. I have a 27" monitor on which I run EW and a browser side-by-side for convenience when developing and testing, as well as other apps I may use, such as Photoshop/Illustrator/Fireworks, etc.

Personally, I typically do fixed designs, at the current industry target of 960/980 pixels. These also work OK on many mobile devices, but if you want to invest the time, you can also create responsive designs as Ian has suggested. Note that this does presuppose a degree of experience with HTML and CSS, and is not something built-in to EW.

cheers,
scott

---

Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.