PSP Web Design

PSP Web Design by AB

First thing I want to announce here is that this site, ABS, is compatible with the Sony PlayStation Portable console AKA the PSP. This site adjusts its fonts and width to fit the small screen on the device.

Image by aviper2k7.

I don't have a PSP, but some ABS members do, and they, especially aviper2k7, were able to help me run some tests as I coded.

Very recently the firmware upgrade to the PSP (2.7) included a web browser with JavaScript and Flash Player 6. You could enable Flash in the system settings. Since ABS has a lot of flash content, I didn't waste one moment. Right away, I went ahead and designed ABS to be compatible with PSP. The movies made for Flash Player 7 or 8 won't work on PSP (yet), but many classics such as Keaton's The Evil Strawberry and Jason's (nice guy, by the way) The End of the World are compatible with version 6. However, there was not enough internal memory in the device to run The End of the World or most files larger than 1,000 KB.

The Audio section works amazingly well as the MP3s that you click on download right to the console, no hassle.

Image by aviper2k7.

There is not much to gain from putting effort into trying to design for a rarely used web browser. No money for one thing, and probably, no one will notice. I did it as a design challenge, and a novelty to add to my design portfolio. I will provide this design option to my clients' sites as well.

Before I continue with teaching how to design for the PSP, I have to assume you know CSS (Cascading Style Sheets) code. If you don't know how to code, this task is not for you. You cannot overcome this design challenge properly with a site builder. You need to understand code.

What I wanted to do is make a stylesheet specifically for the new browser with a different media type. No good. Just like Internet Explorer and Firefox, the PSP browser uses the screen media, not handheld nor anything else besides screen.

The size of this screen is a width of 480 pixels by a height of 272 pixels.

Either design your site with a flexible width, such as percentages, or use scripting to detect the browser and provide a stylesheet with the width of 480px or smaller.

You may instead want to redirect your PSP users to a different section of your site that has a more appropriate design for the small browser. Use the following code in the head of your document.

<?php
$browser = $_SERVER['HTTP_USER_AGENT'];
$pattern = "[pP][sS][pP]";
if(ereg($pattern, $browser)) {
?>
<meta http-equiv="refresh" content="0;url=http://www.your-website-address.org/psp-version/">
<?php
}
?>

Also, be sure to shrink down some fonts in your CSS, but not too small. There are only two font types. Serif and Sans-Serif (no Arial or Verdana or anything like that), and only about 5 sizes, the smallest being unreadable to my eyes (and I have 20/20 vision). You will notice some font sizes such as 10px and 11px display the same on the PSP. Some of your current fonts will be shrunk while others will grow if you run a test.

If you have a sidebar, it is very rare that you'll be able to actually fit it on the side with such a small screen space. Use clear: both; code to apply to your div tags. This way, each division will be positioned above or below rather than waste space on the side.

I plan to add more to this article over time. If you have questions, feel free to contact me, but keep in mind I don't actually have a PSP to run tests on your sites.

May 18, 2006