Category Archives: PSP

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

What browser does the Sony PSP use?

Sony’s recently updated the operating system (2.0) on the Playstation Portable to include some new features, including an internet browser. How does it work? Is it fast? What featureset does it support? Does it render CSS? Javascript? How does my site look on a PSP? What kind of limitations are there?

The browser bundled in the 2.0 firmware update is a welcome addition to the PSP. (Firmware is the software loaded into flash ram, that runs your PSP. Much like a motherboard bios, it can be flashed/updated. This firmware is sometimes called the “operating system”.) Prior to the 2.0 update, the only way to browse the net on your PSP is through hacked browsers found in Wipeout Pure, Tenchi no mon, and Fired Up PSP games. This usually involved downloading an ISO of the browser (illegal) and configuring your PSP to run homebrew software (potentially confusing to new users).

Naturally the built-in browser is a welcome addition, but be forewarned: To use this new browser you MUST update to version 2.0 firmware. You WILL loose the ability to run alot of homebrew, though the list of homebrew that runs on 2.0 grows daily.

So whats this browser called?

That is ACCESS’ NetFront browser. ACCESS specializes in mobile web browsing and their NetFront browser already has a strong foothold in the mobile phone market. NetFront touts quite an impressive list of features, not all of which are available to the PSP version of the browser.

The ACCESS’ documentation outlines its capabilities.

  • HTML 4.01, XHTML 1.1, including Mobile Profile
  • Parts of CSS1 and 2
  • ECMA Script Mobile Profile
  • ECMA Script 262 3rd Edition – i.e. JavaScript 1.5)
  • DOM Level1, Level2 and Dynamic HTML
  • Cache
  • Navigation history
  • Offline browsing
  • Streaming Download
  • Direct Connect (View and control functions of device from the browser)
  • Rapid-Render
  • Smart-Fit Rendering
  • R to L Rendering (For Arabic and other languages that display from right to left)
  • Image formats: GIF, Animated GIF, JPEG, Progressive JPEG, PNG, MNG, BMP, WBMP
  • Internationalization support (Each character set supported)
  • HTTP Cookie full support
  • HTTP 1.1
  • SSL Ver2, Ver3, TLS1.0
  • SSL Route Certificate: VeriSign, Entrust, Thawte, Betrusted, GeoTrust, SECOM, Trust.net
  • SSL Client verification function (PKCS #7, #10, #12)
  • OMA* DRM (Verification and display of Forward lock/combine delivery contents)
  • IPv4/IPv6 dual TCP/IP protocol stack
  • Browser expandability: plugins, helper applications

Besides technical specifications, their documentation also lists the features available in NetFront. Many of the creature comforts we’ve gotten used to like tabbed browsing are in this list.

  • Multi-window
  • Tab browsing
  • Popup protection
  • Web search function
  • Internationalized domain name support (automatically convert domain names from characters input in their native language)
  • Web data manager (forms, usernames, passwords and other information saving depending on the site URL)
  • URL input, bookmark, history
  • Page memo
  • Frames
  • Enlarge/reduce, character size change, character encoding change
  • Word wrap, prohibition processing
  • Image saving
  • Searching in web pages
  • Software keyboard
  • Vertical/horizontal scroll, drag scroll
  • URL input history
  • ROM 1 to 2MB (kernel + SLIM)
  • RAM size 2 to 8MB from contents

ACCESS has been doing a phenomenal job in the mobile phone world offering an extensive list of extendible abilities and plugins. Will we ever see these make it to the PSP? Only time will tell. Rumblings already have it that Flash may be the first plugin to make it to the browser. The following items are available to the NetFront browser, but not available (yet) to the PSP version.

  • NetFront SMIL Player/NetFront SVG Viewer – A multimedia expansion module developed by access conforming to W3C and 3GPP guidelines. It can be used as both NetFront plugin and as a standalone player, and shares the resources used by the browser.
  • NetFront Sync Client – Data synchronization with external SyncML servers
  • NetFront Document Viewer – Viewer for documents created in Microsoft Word, Excel, Powerpoint, etc. Offered as NetFront plugin.
  • JV-Lite 2 Wireless Edition – Java operating environment that supports J2ME. Offered as a NetFront plugin, for running Java applets.
  • Flash 6/Flash Lite – Needs no translation. Support for the de-facto Flash content.
  • Helix DNA Client – Streaming player with support for RealAudio, RealVideo, MP3, MPEG-4, and SMIL.
  • Adobe Reader LE – Support for PDF files
  • Embedded ViaVoice – Translation of VoiceXML, offers support for voice recognition and Text-to-speech services.
  • Mascot Capsule – 3D polygon engine

Rumors have it that Flash may be the first on this list to be included in the next firmware update. It would most likely be based on Flash Lite or Flash 6.

“Sony’s developers are considering adding Macromedia Flash support for PSP’s Web browser in the future, as well as expanding Javascript functions. Kawanishi explained they need to determine Flash’s performances on the PSP before coming to a conclusion. Kawanishi said that his team basically has an open stance toward network-related functions, and Flash playback was not intentionally ignored. On the other hand, Kawanishi explained that security issues prompted the team to leave out some Javascript support, such as allowing scripts to access the UMD.”

Translation: “We could add Flash, like, right now. But we have to make sure no one can exploit the Flash plugin and gain the ability to run homebrewed software.” The endearing term “security issues” and the fact that they mention “access the UMD” only shows Sony is steadfast in its opposition to home-made software.

Resources and Links

ACCESS’ NetFront Specifications