Mobile Price Charting

For the last couple years, people have consistently asked for a version that works well on mobile phones and tablets.  After several iterations, we've finally released it publicly.  Visit PriceCharting.com on a mobile phone and you'll now see something like this:

Summary

This is all implemented using responsive design so the site now works seamlessly on any device with a web browser.  Here are some of the benefits from the new design:

• it works on desktops, phones and tablets
• faster load times for desktop users
• all features (except historic charts) are available on mobile devices

Performance

While developing the new mobile design, we tested extensively on slow 2G mobile networks.  That highlighted several performance improvements we could make to the site.  For example, we now use data URIs for small images so your browser makes fewer network requests.  We also trimmed down the size of some larger files and improved how we use web caches.  Our data shows the new design loads up to 50% faster than before.  If you're a typical mobile user with 3G or 4G speeds, the site should be pretty snappy.

Graceful Resizing

The new design works by automatically showing and hiding content based on the size of your browser.  For example, on a large desktop screen, the top-level menu now has an entry for Xbox, so you don't have to scroll through the Other Systems menu:

As your browser window shrinks, we move less popular systems into submenus so that mobile devices see only the most commonly used menu options:

We perform similar resizing tricks to optimize the site's appearance depending on how much screen real estate you have.  If you don't see a particular feature on your phone, try rotating to landscape mode and more features will appear.  You can also pull down on the top of the page to show the Search and Log In features.

Feature Parity

One of the best parts about this design is that all PriceCharting features are available on all devices.  If you're at a flea market, you can use the Add Typical Shipping Prices feature to compare prices for online and offline options.  If you're in the basement organizing your collection, you can use the Pricing Cart to see what it's worth.

Home Screen Icon

The new site is configured with an icon specifically for your iPhone or Android device's home screen.  On your iPhone, tap the icon, choose Add to Home Screen, give it a name and click Add.  On your Android device, bookmark the site, then long-press on your home screen.  Choose Shortcuts > Bookmark and choose the bookmark you just made.  Now you're only one click away from the site.


If you don't want to add a bookmark or a home screen icon, you can also type our short URL: vgpc.com which redirects to the games site.

If you notice anything wrong with the new site, please let us know about it in the comments below.  Be sure to mention which device you were using when you spotted the problem so we can fix the bug.