Monthly Archives: January 2006

Last updated by at .

Designers, do your part – Print Green!

Hopper Press - Print Greener!Designers do not produce alot of waste, nor do they manufacture large amounts of goods. But even designers should have a conscious eye on how they impact the environment. How so? By printing greener.

http://hopperpress.com is project I have had the honor of working on in collaboration with All-Star Printing and Longbow Strategic Group. The Hopper Press project will hopefully serve as resource for printeries looking to green their processes, and for designers looking for green presses to run their jobs on. But why?

Printing green means a lot more than using recycled paper. Its about sustainability, its about the health and well-being of press operators, its about the whole circle. Many green printer practices both foster a better work place environment, and end up saving the printery money!

Do you have a favorite printery? Are they green? Are their employees happy and safe, or exposed to toxic ink fumes? Do they offer recycled paper alternatives? Do they offer environmentally-friendly inks? How energy-efficient are their machines? Have they set up a solvent recycling program?

If so, good for you! You are not only helping the environment, but creating safer, better workplaces for press operators and related staff. If not, inform yourself and start a working relationship with a printery that does!

How to target the Sony PSP user agent

So you have created PSP -specific content and have a beautiful PSP -sized content. Now what? How do you stop conventional browsers from viewing and using your PSP website? For example, the WorldVIEW website is for Playstation Portables only. If you visit that page in a regular browser, you will be greeted with a message telling you that the website is for PSPs only. How can you pull this off yourself? Its simple.

The PSP User Agent

A user agent is simple how a browser identifies itself and the operating system running it. If you check your website statistics, you will probably see lines like:

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

Which simply tells us that this particular user was on a computer running Windows NT 5.1 (which we all know is Windows XP), running Internet Explorer 6.0. This information allows you to track and manage what user agents are visiting your website. Similarly, the PSP also identifies itself as:

Mozilla/4.0 (PSP (PlayStation Portable); 2.00)

Now that we know how to target anyone using the Playstation Portable web browser, what do we do with it?

Deployment

There are two methods for identifying a specific user agent, and subsequently feeding that agent content. Client-side methods typically change the content after the page has been parsed by the browser. Experience has found that the Netfrontâ„¢ does not handle modifying the DOM well, and you may have limited success with a client-side implementation. We already know the user agent, so we will use this as a condition for writing specific content to the page:

if(navigator.userAgent.indexOf('PlayStation Portable') != -1)
{
document.write('This content is only seen on a Sony PSP using the NetFrontâ„¢ browser');
}

The server-side method of deployment revoloves around the unique headers that the PSP sends when it requests documents. Both “http_x_psp_productcode” and “http_x_psp_browser” can be used to target the PSP only.

if(isset($_SERVER['HTTP_X_PSP_BROWSER']))
{
echo('This content is only seen on a Sony PSP using the NetFrontâ„¢ browser');
}

These PHP snippets output some simple text only to a PlayStation Portable. You may have to add and modify as you see fit.

Sony PSP Web Design Primer

The Sony PSP is a portable gaming device. This cannot be denied. While homebrewed programs open more and more functionality to the PSP, it can never aspire to replace a desktop or laptop computer. It does, however, lower the barrier of entry into mobile content design. As a designer looking for additional skill sets to acquire, the mobile world has always been of interest to me. The strict restraints of a small screen, small file size requirements and the competing mobile standards are all new to a designer used to designing websites and applications for use large monitors. This design primer covers some of the basics of you need to know before designing a PSP compatible website. Note: The following information applies to the web browser bundled in the 2.0 firmware update.

Getting to know your canvas

The Sony PSP has a maximal resolution of 480×272 @ 24-bit color. At 480 pixels across, its a little more than half of the standard 800×600 designers have been working with for years. You may be looking at those specs and scratching your head… yes, it is wider than it is tall – a 16:9 aspect ratio to be precise. This aspect ratio is often referred to as the “dvd” or “movie” aspect as most movies are filmed in this format. This is quite big for a mobile device. In fact, the PSP really isn’t even in the same class as a mobile phone – its that much bigger. This makes the PSP fun to work with, but not practical if you intend to learn how to design extremely tight interfaces and websites for cell phones.

Take a look at the browser you are currently reading this in. It has your standard forward/back buttons, the scrollbar on the right, the title bar where you can maximize and close the window… whew, this thing has a lot of extra stuff around it! So while someone may be using a resolution of 800×600, the available real estate for a website is actually less. The PSP differs from these typical web browsers as its buttons and title bar are retractable and translucent. This means for the first time we can actually use one hundred percent of the screen real estate without worry of browser buttons and scrollbars eating up space.

Sony PSP web browser specs and size

Controlling user navigation

To move around the browser users have two options. The analogue stick, which moves a familiar mouse cursor around the page and allows you to scroll, smoothly and using small increments, in all directions. The directional pad acts like the Page Up or Down keys on a keyboard – scrolling one “page” block at a time. This allows for some interesting control. By setting up equally sized blocks or “pages” we allow the user to scroll through the pages, one page at a time. The same applies for modal dialogues that prevent you from doing anything else until you’ve completed the current task like e-commerce checkouts and forms. By setting up single pages that match the screen size exactly, we can create the appearance of a step-by-step process.

Paged navigation
Modal navigation

Font sizing and legibility

Most small screen mobile devices have readability problems – big ones. The PSP has a larger-than-normal screen, which makes it viable platform for e-books, online and downloadable content. The browser (which we know to be NetFrontâ„¢ created by Access) uses 2 fonts – serif and sans-serif. Wow. What a cornucopia…

If that wasn’t limiting enough, the font sizes aren’t much better. The smallest available size still looks a little big – I think it could go even smaller before becoming hard to read. Others may debate this however. The sans-serif is the default font used, unless serif is specified. The serif font is smaller than the sans-serif – though I warn against using it at the smallest size for the sake of legibility.

These values are approximate, play with your settings accordingly:

  • Small 0.85em & under = 12px
  • Medium (default) 0.9em – 1.1em = 13px – 16px
  • Large 1.15em – 1.3em = 17px – 19px
  • X-Large 1.35em – 1.85em = 20px – 27px
  • XX-Large 1.9em = 28px

The NetFrontâ„¢ browser has the option to control font sizes through three settings: small, medium and large. The medium setting is default, like most current web browsers. Don’t even think that you can set your fonts to the smallest size possible and then think that the browser will scale the font size even smaller by using “small”. Scaling outside of the range of font sizes is not possible – regardless of if the browser is attempting to override the website’s font size. Building accessible websites typically involves allowing your users some control of what they see. Allowing them to increase or decrease your font size until they are comfortable. Thus, it will be prudent to scale your font sizes up a little so you sit comfortably within the range of sizes. Simply test your website at the three scalings (small, medium, large) and see how your fonts react. Often, using the “small” browser scaling will result in your two smallest fonts rendering the same size.

What for are the serif and sans-serif fonts named? What font is that? I don’t know. I think it appears to be close to Microgramma, but not quite. I would love to find out. It is certainly a very readable font, even at its smallest size.

Resources & Links

Pocket-Sized Design: Taking Your Website to the Small Screen A list apart
Access’ NetFront™ Browser Documentation
IGN review of the PSP Browser – Plenty of screenshots of it in action and its features.
Designing for Televisions at msntv.com