Designing for the Sony PSP

At some point you may decide you’d like to write a website specifically for the Sony PSP web browser, or convert a current site to have a PSP friendly design that allows your visitors to view the site from the PSP browser.

The first thing to do is separate those users using the PSP web browser from those using a normal PC or Mac browser. Usefully, the PSP uses a specific User Agent string to identify itself, so using a simple piece of PHP, we can check where the user is coming from, and redirect to the specific PSP site if required.

<?php
if(ereg(”PSP BROWSER”, $_SERVER[’HTTP_USER_AGENT’]) ) {
// Direct to PSP specific Site
header(”location:http://www.yoursite.co.uk/psp/”);
}
?>

Now we have separated the Sony PSP browser from the normal browser, you can present the PSP with specifically formatted web pages. You may decide that you don’t want to maintain two websites with the same content, and redirecting the user to a separate site is too much overhead. If thats the case, you can simply use the above script to load a specific cascading style sheet (CSS) for the PSP that will format the site in a PSP friendly manner.

From this point on I am making the assumption that you are building a site specifically for the PSP, although most of what I have to say is applicable to websites written using style sheets to present information to the PSP as well as normal web browsers.

Sony PSP Screen Size

Unlike normal web browsers, the Sony PSP present the webmaster with the perfect blank canvas upon which to render a website. The Sony PSP web browser is fixed in size, doesn’t have a multitude of erroneous toolbars and add-ons, and the technology within the browser is fixed, at least until Sony decides to add a Macromedia Flash player to the browser.

Being fixed in resolution, the Sony PSP is perfect for designing a website for, because you know exactly the size of the screen at your disposal. The Sony PSP screen is 480 pixels wide by 272 pixels tall, so your website should be designed to fit this size. The browser doesn’t render scrollbars, so if your site is taller than 272 pixels, which it is likely to be, the user will be unaware that the site continues downwards unless you ensure the design implies a continuation below the fold. Likewise with a site that is wider than 480 pixels.

Navigation of the PSP browser is by directional keys, and works in a similar way that the tab key does on a normal keyboard. When deciding on the navigation layout for your site, think about the order in which the user will navigate through the page, and ensure key navigational aids are present and easily accessible. If you are using a drop down selection list as your main navigation method, ensure it is one of the first items tabbed to on the site. This is the same for any of your main navigation elements – make sure they are not buried away where the user cannot see them, or where the user has to tab past many links and buttons to get to them.

PSP Speed of browsing

The Sony PSP connects to the internet using the built in wi-fi capabilities. Although this is a fairly quick connection method, the browser isn’t lightning fast and gets slowed by graphic intensive websites, so try and make sure you keep the page size down to a reasonable level to ensure speedy surfing. If you pages weigh in at around 25k they will be much easier to surf than pages of 100k or more.

PSP Website Content

There is no reason why websites designed for the PSP should have content that differs in nature from the standard websites – someone browsing on a PSP is just as likely to be interested in national news stories as someone using a PC. At the moment however, most sites designed for the PSP appear to be PSP related. The web design community is beginning to understand the market for mobile device compatabile websites, but the take up is relatively slow. Hopefully in the future more and more websites will be easily browsable by PSP, with specific designs for Sony’s handheld multimedia device.