Sunday, July 13, 2008

Understanding Resizing

There have been lots of questions about Showit Sites and how resizing works, so I thought it would be good to give a brief overview of how and why resizing works the way it does in Showit Sites.

One of the first goals in building Showit Sites was to design a way to build full browser sized websites that would look good at almost any resolution. A typical web page is a fixed pixel size, so a bigger monitor may have lots of extra space and a small monitor may require scroll bars. With Showit Sites, the content is resized to fit whatever resolution, even a wide monitor or a browser window that is opened narrow. Below are some over exagerrated browser aspect ratios to illustrate how content fills the entire browser window:


To do this, we created a few different ways to layout your site content explained below.

1) Layers - All content from images to video to other flash content that you drag onto a page is a layer of your page. If a layer is not locked then it will scale and position relative to the other elements on the page in the center of the browser window.

2) Locked Layers - Layers that you want to float independent of the page content but basically stay against a side of the browser window can be locked to a side with the check boxes and offset on the "Layout" tab for a selected layer. If you want the layer to stay in a corner, lock it to two sides. If you want it to stretch, lock to two opposite sides. Locking to two sides will distort an image, so we recommend only using this for lines or boxes or graphics that can be stretched and not look funny. Locking is great for things like a site menu bar or a logo that you want to stay in a corner.

3) Background
- The background sizes to fit the entire browser window which will NOT make layers line up relative to the background. The background is meant to fill the entire browser window, so depending on whether the browser is opened tall or wide will determine what parts of the image will be cropped. You can choose how you would like the image to be cropped by using the drop down next to the background and choose options such as locking it to the top, bottom, corner or even stretch it. If you want your background image to line up with the layers, put the background image on the page as a layer and just use a solid color for the background.

I hope that helps explain a few of these sizing concepts because when you are designing it often feels that the page is a fixed size, but it's good to keep in mind that people have different sized monitors and open their browsers in different ways. A great way to test your site is to click the preview button and then drag the bottom right corner of the window so you can see what your site will look like when sized narrow or wide.

The full sized-scaling site does provide for an amazing experience across many different screen sizes but it's a little tricky initially to understand how to design for it, especially when deciding what to use for your background. Hopefully this gives you a good understanding and some ideas as you build your Showit Sites!

-Todd

4 comments:

mickou1234 said...

Hi David, i find showit site excellent, i juste have some questions for you before i subscribe:

can i put music not juste on a specific page but on the entire website without changing music when i change page ?

there is alot of competition out there in the photography, i want to catch peaple on the net:
for my website visibility on the NET, what do you propose?
In the showit site software do you have already an option for that?
where i pup my keywords and my description in the software?

and last question:

is there an option in showit site to make my website popup in a new full screen window who goes over the internet browser?

thank so much in advance, Mika.

Here is my email: mikaphotographie@yahoo.com

Wedding photographer said...

Interesting blog - Got me curious - Considering applying a couple of your programs to my wedding photography postprocessing. Would like to know more about the showit web product and scp about registration for DVD's order? How does that work?
wedding photographer France

bwanafoto said...

Hello
I want to know if I can password protect my slide show
Thanks

Tineyi said...

This is awesome! I am left with one question though.

If I use an image as a background, do I need to make it a higher resolution, (like 1920 x 1200), so people with large displays can still get a great fullscreen experience?