How to convert osCommerce to mobile friendly responsive design.

The official osCommerce releases up til version 2.3.4 does not have a mobile friendly design and with Google ranking mobile-friendly sites higher, its getting more and more important to upgrade websites that does not pass the Google Mobile Friendly Test Tool.

Here are some ways you can make a osCommerce website mobile friendly.

– Modify Existing osCommerce Site Design
Modify your current website design to be mobile responsive.

This works so that your website design will adapt based on the screen resolution of the device the visitor is using to view it.

For oscommerce 2.3+ websites one of these can be a good starting point 960 Grid Responsive or Responsive HTML 5 osCommerce.

For older osCommerce versions reading up on this Google tutorial on making responsive design or using a mobile responsive framework like Bootstrap 3 can provide a solid starting-point for proceeding to make your website responsive.

– Add a Separate Mobile Site
Add a “separate” mobile website to your existing shop.

This works so that when a visitor arrives at your shop url they will then be sent to your existing site or to the mobile site based on what device they use to view your website.

iOSC Mobile Version/Mobile OSC is an add-on that give a mobile version for osCommerce 2.2rc2a and osCommerce 2.3.0 to 2.3.4.

– Make a New Shop Using osCommerce Mobile Responsive Community Version

A community initiative to make a mobile responsive version of of osCommerce, Mobile Responsive osCommerce Bootstrap Community Version, is available and can be freely downloaded and used.

DEMO: osCommerce Mobile Responsive Community Version

When you have modified it and changed the design to your liking you can then migrate over the old shops data and you are ready to go.

To view how your osCommerce website look on different mobiles, tables and computers, iOS, Android, OS X & Windows, you can use a visual testing tool like for instance BrowserStack

Resources:
– osCommerce
– Bootstrap 3
– 960 Grid Responsive
– Google ranks mobile-friendly websites higher
– Google Mobile Friendly Testing Tool
– Google Mobile Responsive Design Tutorial
– osCommerce Mobile Responsive Community Version
– Browserstack Multiple Device Responsive Website Test Tool
– osCommerce Add-on: Responsive HTML5 osCommerce 2.3+
– osCommerce Add-on: iOSC/Mobile OSC for 2.2/2.3+
– DEMO: osCommerce Mobile Responsive Community Version