Web design & Internet tutorials
Search the site...
Home» FAQ » Browsers » How can I design my site so that any browser window will be filled entirely?

How can I design my site so that any browser window will be filled entirely?

Posted by Janine Warner - August 25, 2012 - Browsers, CSS, Dreamweaver, FAQ
0

Hi Janine

I have a question about FULLSCREEN WEBSITES in Dreamweaver CS4. How can I design my site so that no matter what size the browser window is, it will be filled entirely? I like that my website will look the same on all types of monitors.

I have a SWF File in Dreamweaver. Shall I do some coding in Dreamweaver??

I have found this at Google: <table width =”100%” border=”0″
Is that right?????

Can you help me with that?

Thanks
Troels
Denmark

___

When you create a web site, you always have to set a width. These days we usually create designs that are 970 pixels wide, assuming that most people have a computer set to at least 1024 by 768 resolution (although the latest statistics show that the most common screen resolution is 1366 x 768, so web designs may be getting wider in the near future).

If you want the design to fill the entire screen, you set the width to 100%. You can do this with a table or with CSS and get a similar effect. At 100% the width will change depending on the size of the monitor. The challenge with this approach, and the reason many designers don’t use it, is that monitors range from very small to very big these days and your site may not look good at all sizes. If you do use this approach, you should test your site on many different sizes to see how the design is affected. For example, if you have a lot of text on a page, when the size is set very wide, the text can be hard to read. Similarly, if you have multiple columns in a design, you can have strange results when the columns are bigger or smaller.

A variation on this is to set a maximum width and a minimum width so your designs are not spread so far on the largest screens and things do not get too crowded on the smallest screens.

If you are using Flash to design your site, how you set up your Flash files makes a difference. Because Flash uses vectors, it can adjust to different size screens very well, but only if you design well from the start. Again, testing on many different resolutions is a good idea.

UPDATE to this Answer: The latest approach to web design is to create responsive or adaptive designs that work on a variety of screen sizes, including small mobile phones. You can learn more about how to create responsive web designs in this article

I hope that helps you find the best solution for your designs,
Janine

Learn More about Adaptive and Responsive Web Design

  • How to create adaptive web pages with the new Fluid Grid Layouts in Adobe Dreamweaver CS6
  • What are the differences between adaptive and responsive web design?
  • Examples of adaptive and responsive web design
  • 6 reasons to upgrade to Dreamweaver CS6

Leave a Reply

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1&1 Hosting

Recent Posts

  • Google Analytics for Creative Professionals – new class on Pluralsight
  • Follow the cursor JavaScript sample
  • Part Four: Tools that let amateurs look like professionals




© 2001 - 2020 All rights reserved. DigitalFamiliy.com | Terms & Conditions of Use | Privacy Policy

This is a demonstration store. No physical products will be shipped. Dismiss