1222North.com

Posts Tagged ‘layout’

December 17th, 2009

Browser Size lets you see how others view your web site

Author: quiller

In ye olden days of newspaper and other print design, the phrase ‘above the fold’ was a critical part of deciding where various elements or stories should be placed. The more important the story, the closer to the front page is was placed. The most important stories of the day were placed near the top of the front page, which would make them visible to the casual passerby that saw the newspaper in a rack on the street. Everything below the fold would be hidden from view without picking up and unfolding the paper, and thus the ‘above the fold’ rule was invented.

As newspapers and other print materials slowly adapted to the web as a delivery platform, however, this physical limitation was no longer seen as important. It didn’t matter where the story was on the front page, just that it was there. Over time, though, ‘above the fold’ re-entered the arena in a slightly different pretense. Web pages, like newspapers, have a limited amount of real estate that can be visible at the same time. Visitors may not need to physically unfold a website, but their monitors are only so large, which forces the user to scroll their window to see the full content of longer pages.

In the web-based, digital world, ‘above the fold’ represents what is visible on a user’s screen without scrolling the browser window. What makes this concept more difficult to implement online than in print is that the fold is not a static, consistent line for every user. Depending on how large their screen is, what the resolution is set to, and even what kind of device (netbook, desktop or mobile phone?) they are using, the folding line will move vertically and horizontally around the page.

To remedy this problem, Google has recently unveiled a new tool called Browser Size that helps you determine what visitors actually see. Type in the URL to a web site and Browser Size will overlay percentage charts that visually demonstrate what percentage of users will see various elements. This tool allows the designer to determine if an under-performing link or button, for example, is due to its placement — too far to the right or too far down the page, and a certain percentage of your visitors might not ever see that shiny graphic no matter how attention-grabbing and creative it is!

bs1

Browser Size is a free, web-based tool that is part of Google Labs. Read more from Google’s official blog announcement or see Browser Size in action for yourself.

November 15th, 2006

…And Another Nice Collapsible Site

Author: Mike

This one’s even smoother…but maybe not as good of design.

mad4milk

November 8th, 2006

Flex Builder 2 For Mac

Author: Mike

It’s about time.

Flex Builder 2

September 21st, 2006

Lite Box, Drag and Drop Navigation

Author: Mike

This whole site was designed to navigate the entire site without loading a new page. All items on the page are drag-able with hotspots that open a Lite Box display. I’ve never seen this kind of navigation without flash before. Innovative. However, I don’t know if I should wowed, or worried that they can do all this without Flash. Even works on I.E.

Haus Hoyer

September 21st, 2006

Nice JavaScript Drop Down Menus

Author: Mike

I was checking out this site, and it uses drop down menus that at first glance appear to be flash, But it is in fact not. They used css to style an unordered list, and then JavaScript to alpha tween it in. Simple, but slick.

Deform Group