1222North.com

Archive for the ‘Technology’ Category

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.

July 6th, 2009

One of my favorite panels at SXSWi

Author: Chris

I know it’s bit late but I wanted to mention my favorite panels at SXSWi that attend this past spring.

“Even Faster Websites” presented by Steve Souders which he is well know for creating YSlow and now Google Page Speed. If you’re not familiar with these two Firefox plugins then you should definitely check them out.

What I really enjoyed about his presentation was how technical it was, which most panels I went to were mostly theories and best practices. What he focused on that day was javascript which has become more and more heavily used with today’s websites and definitely with things we have done here. Here are few key things he touched on.

Script blocking which is when a browser downloads JS (javscript) and that JS filet will stop everything from loading, images, css files and iframes. The browser will then also wait till the JS is executed and then finish downloading the other assets.

IE7 only allows 2 connections per hostname. What this means in a nut shell is the browser will only download 2 files at the same time from the same domain name. People get around this by what they call domain sharding, where you have multiple sub domains loading assets for one site. For instance Amazon.com has a.amazon.com, i.amazon.com and so on. With this technique though you still have to wait for JS to load and execute before the browser can continue downloading the other assets.

A couple other things Steve mentioned were iframes share the same connection pool with the parent window. Meaning if the iframe is loading 2 things already then the parent element can’t load it’s assets. Also stylesheets in the parent parent window also block iframes and/or it’s resources.

Now Steve did mentioned a few good ways to address these issues. Put your JS at the end of your web page, just right before the closing body tag. Use the script DOM element or script onload technique to load your JS. I’m not going to explain the process of implementing these 2 techniques because they get pretty technical but you should look at his reasoning in the powerpoint.

Last but not least are few other things to help speed up your site. Gzip your files, sprite your images and flush your document. Now I’m off to make the web even faster!

June 5th, 2009

Your mom goes to Facebook

Author: Eric

While the perception of social media is still of a place where the kids are having all the fun, the big story is actually about what’s happening with the older generations. While the under 30 crowd has plateaued, the over 30s are going hog wild for this social networking thing. The percentage of 30-somethings engaged in social media has doubled since 2007 and nearly tripled among the 40+ and 50+ age groups. Ad Week has the scoop.

Worlds are colliding, George.

June 4th, 2009

Adobe’s Browserlab: View Your Site In Multiple Browsers

Author: Linder

Adobe's Browserlab

This tool looks promising as more and more browsers are surfacing these days. Adobe’s Browserlab claims to display and compare your web design in such browsers as: Firefox, Internet Explorer, and Safari running on different operating systems. You can try the tool out if you have an Adobe ID (which I’m sure most of us do in this field). Since it’s currently not accepting new users, I couldn’t demo it to give my opinion. You can check the status of their progress at the Adobe Labs Wiki site. The only drawback I see… (more…)

May 21st, 2009

WebVisions Day 1: Paper Prototyping

Author: Shelton

WebVisions started off Wednesday with an exciting hands-on learning experience. The idea to take note of is the fact that hands-on in this case doesn’t refer to a room full of tech nerds working away at their laptops. In fact, there really were no computers involved. (more…)