Tourchscreen optimized Magento Mobile Theme

Tourchscreen optimized Magento Mobile Theme

Real Simple Magento Mobile Theme for iPhone, Andriod and other smartphones.

One theme, all advanced touchscreen mobile platforms.

It’s not a mobile theme for iPhone, it’s not a mobile theme for Andriod phones-it’s a mobile theme that works for iPhone, Andriod and other advanced touchscreen smartphones with full support for Javascript.

Our Approach for Magento Mobile Theme

When we felt we were ready to build a solid mobile theme for Magento, the first and the critical question we asked: do we build a Magento mobile theme that works only for iPhone/iPod that acts like an App, or do we build a mobile theme for Magento that works like a real website with mobile user in mind, and that it works for all advanced touchscreen smartphones?

It wasn’t hard for us to make the right decision and get the right answer!

A Mobile version of site in addition to a desktop version

Real Simple Mobile theme is a complete Magento theme, which means you can (and should) setup up the theme as a second store, allowing your users to switch between desktop and mobile version of sites. The theme comes with an open source mobile detection code which will redirect the mobile device user to the mobile version of site, and the users can choose to visit desktop version if they prefer; this approach also offers extra flexibility because it allows you to give your mobile store something different, e.g., a category or promotional offer for mobile user only.

Highlight of Real Simple Mobile Theme:

  • Mobile Optimization – the theme has scored between 90 – 95 on Google Page Speed and YSlow. We have done some optimization on our server, but most of the credits go to the optimization in the theme.
  • Touchscreen optimized – no Javascript event or link relies on hover state.
  • Search Engine Optimized – Optimizations are done in the template and (e,g, structural markup, nofollow tags for Layered nav, reports, back link etc…, remove duplicated links within a page) and we will show you how to improve it further. Remember, good page speed helps your site’s SEO too!
  • Built with mobile device, mobile user in mind
  • WCAG2.0 AA quality
  • Categories listing on Hompage
  • New Products Module – a Magento standard feature
  • Bestseller module
  • Improved product gallery
  • Accordion menu for categories menu and other areas
  • CSS3 powered

Standard Magento features not included in the Mobile Theme

  • Tags features – Popular tags (sidebar item) and Add To Tags.
  • Send to Friend
  • Mini cart report
  • Mini Wishlist report
  • Ship to Multiple Addresses
  • Contact Us form (can enabled easily) – replace with mailto link. Reason: due to the behavior of textarea (no scrolling), typing message to a webform isn’t as user-friendly as composing an email in a Email client from a mobile device.
  • Recurring Profiles and downloadable product – what we really meant is, we removed navigational links of these product types in the Customer Logged in area. If you use any of these product types, enable it by all means.

Is this theme for iPad too?

We do not considered iPad a smartphone mobile device, but yes, since the mobile theme is recommended to setup as a second store, iPad user will have a choice to switch to Mobile version of site.

Does the theme work for touchscreen tablets and slate PC such as Samsung Galaxy Tab?

Similar to the iPad, users from these devices will have an option to switch to mobile version of site, and vice versa. Our finding shows that, these devices have a 1024px resolutions for landscape view, this makes the device a better choice for desktop version.

If you prefer to have any of these devices loads the Mobile version, it can be configured from the mobile detection script.

The Real Simple Desktop theme is optimized for iPad and PC touch screen devices. If you purchase both themes you will be able to provide your users a thematic consistency site regardless of which device is used.

Known Issues:
  • Table layout in My Cart, Products Comparison and Order History/Recent Orders in Customer Logged in area.

    Mobile browsing device does not rendered table layout well, part of the reason is due to the width constraint. The layout of the Mobile theme disallowed user scale – what it means is, user cannot zoom in/out the page [1], this has caused table layout in above mentioned pages cut off when the width of the layout exceeds the device width in Portrait view. There is no workable solution as long as table layout is used (it’s a default for the Default, Modren and Blank Magento themes). After weighing all the options, we have opted out to revamping the above pages into UL lists, for that these pages are still accessible in Landscape view, and that doing so will result terrible update issue each time Magento releases a new version.

  • Potential and known issues in browsers:

    Windows Phone 7 browser: This browser (with IE7 engine) still does not have full support for Javascript.

    Andriod browser: you will find the rounded buttons jagged – it’s a borders radius issue that can’t be fixed from CSS.

    Opera Mini: Opera Mini is not a full browser, in addition to this, it has some CSS bugs therefore some areas not rendered correctly. None of the issues caused by CSS can be fixed by us, for that there is no CSS hacks available that can be used for Opera browser.

    What exactly does the not a full browser meant?

    Lifehacker has a pretty good article and comment from this user is spot on.

Purchase the mobile theme or visit the demo site.

2 Comments to “ Tourchscreen optimized Magento Mobile Theme ”

  1. Mark Anderson says:

    Hi,

    Does this mean that I have to make a seperate 2nd site for mobile devices and INPUT ALL PRODUCTS into this second site?

    Or can the products in desktop site be fed into mobile site?

    Mark

    • lsd says:

      You can use the products for both desktop and mobile sites.