For years, web designers could mostly rely on the fact that a visitor would have a screen resolution between 1024×768 or 1280×700, and web sites could be created accordingly. There have been debates on where the traditional fold fell on these screen resoutions, but in general, the rule has been, don’t put any essential information below 600 pixels. Today, this is not always the case. Viewers now have access to a variety of screens, from iPhones, to giant TV’s, and it’s getting more and more difficult to establish the ‘fold’ line on a specific device. You can’t possibly design for all outcomes, and so the “fold” is starting to become irrelevant. To add to the mayhem, users today also aren’t afraid of scrolling either, and devices like the iPhone, make this intuitive and essential to view important information. With this new openness to scroll, these invisible boundaries seem somewhat unnecessary.

Even though we are moving into an entire new use of space, it doesn’t mean we should totally ignore the idea of the fold. The most important messages should remain near the top. We still need to respect the importance of the initial visual hit a viewer gets when they reach a site. It’s a powerful tool and and can help to capture the attention of the audience and perhaps even keep them scrolling on down the page.

First seen in side scrolling video games from the 80′s, Parallax Scrolling is a special technique that gives an illusion of depth in a video game, or in today’s case, a web site. Parallax scrolling uses multiple layers to create the illusion of a 3D space, where background images move slower than foreground images. When used in web design, it can add a great sense of depth to the look of your site and is best used as a header, footer, or background. The effect can be created using CSS and some JQuery plugins (I’ll leave that up the the dev team). To experience this technique in action, check out Silver Back App. You’ll have to scale your screen width to get the full experience. Also, The Old Pulteney Row to the Pole web site uses a top down parallax that is super sweet. Be on the lookout for more designs like these popping up in 2011. For more info and how it can be done, check out Think Vitamin’s post on how to recreate the silverbacks parallax effect.

Google eBookstore

Did you buy someone an internet-connected gadget for Christmas, such as an iPad, Android tablet, eReader, or netbook? Chances are it can take advantage of Google’s eBookstore that offers millions of free and pay-for ebooks. Google announced and opened the eBookstore today which combines the selections from some of the big ebook providers with Google’s own library of digitized books. One nice feature of Google eBookstore is that the ebooks that you add to your collection remain on the web, so you can read them on your smartphone and then switch to your netbook without having to download your book again. Your whole library is available to all your internet-capable devices. It also remembers where you left off, even when switching between devices.

Google’s Chrome OS Netbook

Need a netbook on which to read your ebook? Tomorrow, Google is expected to announce the first Google branded netbook featuring Chrome OS. Unfortunately it is rumored that the netbook will not be available to the public, but it shouldn’t be long for more devices to start coming out, or for the open-sourced operating system to be available for public consumption.

Nexus S by Google

Google announced today that the successor to the famous Nexus One Android phone will be available in the States on Dec. 16th. The Nexus S is a Pure Android device which means that it will be first in line to get updates to the Android OS. It is the first phone to come with Android 2.3 Gingerbread and it is the first phone with a NFC (Near Field Communications) chip. Other specs are similar to the popular Galaxy S phones.

So, there you are – some exciting developments from Google.

Check it out!

Awesome nerdy tree decorated with Dell system discs and ethernet garland:

Original Mario Tree!

A PacMan Christmas Tree (or pyrimad?):

The best ornament I have ever seen.

Another free Google tool in beta?  Yep.  Seems like another one comes out every week.  This one in particular has been out for months, so if you haven’t given it a try yet, then you are overdue.

Do you need help configuring, testing and then easily embedding some free fonts into your web pages?  Great!  The Google Font Previewer lets you pick one of the open source fonts from Google’s Font Library, then tweak the size, spacing and decorations using simple sliders and buttons.

Perhaps even more exciting is the Chrome browser extension for the Google Font Previewer.  Click the icon in your Chrome toolbar, and select the web font you want the page you are currently viewing to become.  Zap!  New fonts to preview.  This can be great if you’re designing a site, but you’re just not sure which free web font to use.

These are both great tools for designers and web coders alike, so give them a shot.

Google Font Previewer (http://code.google.com/webfonts/preview)
Google Font Previewer Extension for Chrome (https://chrome.google.com/extensions/detail/engndlnldodigdjamndkplafgmkkencc)

Also, don’t forget to go back and read Greg’s post about Google’s Library of free Web Fonts.

If you are feeling brave, you can put a map on your website with the API that Google provides. It’s all javascript code that works on every modern browser. The API is extremely well documented, so I won’t get down to the complete process of setting up a map, because this blog post is about using custom icons for your markers.

Click through to read how.

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var map;
var infowindow;
 
function initialize() {
    var markers = new Array();
    var pins = new Array();
    var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
    map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
}
</script>

That little block of javascript should replace the content of a div with the id of “#googleMap”. It also created to empty arrays to hold your markers and pins. I store all my LatLng objects inside that pins array, and use those pins as the position for my markers. By default, Google puts a little red circular pointer that I’m sure you are familiar with. Let’s make a marker for Portland, OR.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var map;
var infowindow;
 
function initialize() {
    var markers = new Array();
    var pins = new Array();
    var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
    map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
 
    pins[0] = new google.maps.LatLng(45.5234515,-122.6762071);
    markers[0] = new google.maps.Marker({ position: pins[0], map: map, title: 'Portland, Oregon' });
}
</script>

This code puts that familiar red circle marker on Portland. I have made a custom image, and have uploaded it to my web server. Now I’m going to se up a new javascript variable called icon, and it will hold both the path to the image, and a XY coordinate so that the maps API knows where the tip of the marker is. If you don’t set up the coordinate, it will assume the bottom center is the correct point on your custom marker. Here’s that code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var map;
var infowindow;
 
function initialize() {
    var markers = new Array();
    var pins = new Array();
    var icon = new google.maps.MarkerImage("http://www.nineteenfortyone.com/wp-content/uploads/portlandMarker.png", null, null, new google.maps.Point(69,236));
    var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
    map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
 
    pins[0] = new google.maps.LatLng(45.5234515,-122.6762071);
    markers[0] = new google.maps.Marker({ position: pins[0], map: map, title: 'Portland, Oregon', icon: icon });
}
</script>

Note lines 9 and 14.

Last but not least let’s put some bounds in there to bring the map to the right spots, and then we are done!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var map;
var infowindow;
 
function initialize() {
    var markers = new Array();
    var pins = new Array();
    var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(25.8,-120.9), new google.maps.LatLng(49.8,-71.1));
    var icon = new google.maps.MarkerImage("http://www.nineteenfortyone.com/wp-content/uploads/portlandMarker.png", null, null, new google.maps.Point(69,236));
    var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
    map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
    map.fitBounds(bounds);
 
    pins[0] = new google.maps.LatLng(45.5234515,-122.6762071);
    markers[0] = new google.maps.Marker({ position: pins[0], map: map, title: 'Portland, Oregon', icon: icon });
}
</script>

Here is the result:

This site allows you to “automatically match fonts based on typographical metrics, optimize the font bundles for their intended purpose, and deliver rock solid CSS for those fonts and their fallbacks to copy & paste”. Basically, you can go to this site and choose from 45 fonts (that are free and licensed for online use) to use for your headlines, body copy, decorative and monospaced needs. As you choose your font for each category, sample text in a window to the right updates to show you how it will look as copy. It only displays fonts that would be appropriate to use together so you don’t end up with, say, two similar sans serifs like Droid Sans as your headline font and Fontin Sans as your body copy font. This makes it really nice for me as a designer.

What makes it nice for web developers is that after you have chosen all your fonts, or your “fontstack”, you can conveniently download the font files and put them into a directory in your website then copy the CSS code to your stylesheets folder and link it from your website. Awesome, eh?

AND, each font stack has a back-up stack for those using browsers that don’t support @font-face.

P.S. Iron Maiden rules

The current version of Flash provides us with 2.5D content; not quite 3D. But with frameworks and libraries like Away3D, we could stuff a 3D engine into Flash. Now the engine will be built-in with GPU support, allowing content with faster frame rates, more triangles, and better lighting and shaders. But because the APIs are low-level, developers will need to use frameworks to simplify development. Check out these videos for all the details:

3D APIs for Adobe Flash Player and Adobe AIR

Flash Player 3D Future

The way that you make calls upon your different elements has changed a bit with the upgrade from version 1 to version 2. Also, many pieces have moved around in the administration panel. Using jQuery, the navigation for administering your site has been totally revised, making it easier to browse around your pages and code. It feels much more polished and is quite a bit cleaner. Compare these two screen shots, the first from modX 1.0.4, and the second from the new 2.0.4.


This is the screen that you are presented with when you log into your site manager, and both look similar. Note the lack of tabs in the new version. Many elements have been moved to a new spot, but with the power of AJAX, it’s actually easier to find what you are looking for.

I urge you to check out modX 2. If you are familiar with modX 1, then you will pick up the new version very quickly. If you’ve never used this CMS, then now is the perfect time. RTFM at http://rtfm.modxcms.com, learn it, and make your life easier.