ProductCart 5 Has Two Responsive Mobile Commerce Options. Which Mobile Solution Is Right for Your Store?

Mobile websites and mobile commerce have grown rapidly in the last few years. With such rapid growth and the changes in technology that occurred as developers rushed to keep up, some of the buzzwords and definitions have gotten a little fuzzy. Even seasoned web developers who specialize in mobile development sometimes disagree when it comes to what it means when we say, “responsive.”

We’d like to help retailers using ProductCart, and specifically those considering upgrading to or purchasing version 5 which features two very powerful mobile commerce solutions, better understand what our team means when we use some of the most common terms.

Here are the buzzwords you might have heard:

Mobile website
Mobile specific site
Responsive Web Design (RWD)
Responsive website
Mobile responsive
Fluid layout
RESS (responsive web design with server side components)
Adaptive web delivery (AWD)

Executive Summary:

If you are a merchant using or considering ProductCart, you should know that both mobile solutions in version 5 (the bootstrap themes and the Basic theme with mobile turned on) are responsive mobile.

How ProductCart’s Mobile Ecommerce Works:

ProductCart 5 offers two distinct responsive mobile ecommerce solutions for merchants offering maximum flexibility and options.

Adaptive Web Delivery
If you already have a website design and simply want to upgrade, you can turn on Mobile in your Control Panel and suddenly transform your website into a responsive mobile site that delivers an optimized web browsing experience to mobile phone users. All without having to complete a single line of recoding your existing design!

If you are starting from scratch, you choose the Basic theme in the Settings section of the Control Panel, then turn of Mobile to deliver a super-fast, optimized mobile commerce experience to your customers.

Responsive Web Design
If you have created your own website design using HTML5 and fluid responsive layouts, once you upgrade to ProductCart5 you can deliver an elegant, fluid responsive experience to your mobile online shoppers.

If you’re brand new to ProductCart or would like to start a redesign, we recommend that you choose one of our Bootstrap themes the Control Panel. You use the designs as-is, or customize them by updating the CSS and building a new custom theme of your own.

DEFINITIONS:

Mobile Website – This is the most generic of terms. It refers to any website that is designed or developed for display on smaller handheld devices or phones. This can be a website meant only for mobile devices or a website that accommodates smaller devices through some form of responsive display.

Mobile Specific Website – This kind of mobile site is specifically formatted only for smaller devices like smart phones. They are designed to load quickly and deliver only the information and tools that the developer and client feel are most important for a mobile visitor, meaning that most of the time a mobile specific site only has part of the standard website’s content. A mobile specific site detects when someone is accessing the standard website via a mobile device and then will reroute them to the mobile site, typically hosted at m.website.com or website.com/mobile. The important thing to note here is that a completely separate set of files and URL are at work here.

Previous versions of ProductCart had a Mobile Add-on that functioned in this way; however Google no longer recommends this method of mobile website delivery.

Responsive Web Design (RWD) – This is a very specific definition, created by Ethan Marcotte at the beginning of the mobile development movement, to defined the use of 3 techniques: using fluid layouts, flexible images (and media objects), and media queries. This phrase is often swapped with “responsive” as a very strict definition, however responsiveness and responsive websites have come to encompass more techniques than these three as mobile development has evolved.

Responsive Website / Mobile Responsive – These broad terms are interchangeable and refer to the many different website strategies for delivering a mobile optimized experience to website visitors by adapting the layout, content, and functionality of a page depending on their device and screen resolution (or a combination of the two).

Fluid Layout – One of the building blocks of responsive design, fluid layouts use proportions to define elements on the page, for instance a width of 60% instead of a fixed width of 500 pixels. When combined with grid systems, media queries, HTML5 and CSS3, these fluid layouts not only shrink and expand proportionally depending upon the resolution of the visitor’s screen and browser window, but it will also adjust the layout of columns and block-level elements for optimal display and usability based on screen resolution. For instance, the menu might collapse into a stacked two column list when the screen resolution is between 640 pixels wide and 960 pixels wide.

RESS (responsive web design with server side components) – The traditional understanding of Responsive Web Design relies exclusively on client-side rendering or hiding of elements. RESS uses server-side components in addition to RWD techniques to produce faster load speeds and performance and improved functionality on mobile devices. RESS can include server-side dynamic CSS, like Sass, as well as device detecting software for functional enhancements. The important improvement over traditional responsive here is the reduction of “payload.” Instead of simply hiding elements on the client side and shrinking down full resolution images and elements, we deliver exactly what is needed for that device and resolution, swapping out scripts, images, and plug-ins as necessary for specific devices.

Adaptive Web Delivery (AWD) – This technique takes RESS to the next level, by detecting the requesting device and then delivering entirely different batches of HTML and CSS code.