For a working example of the LiquidShop Mobile interface, please visit www.liquidshopdemo.com on a compatible mobile device.
Mobile Usage
Mobile visitors account for 10% of visits to LiquidShops, they also account for 5% of all purchases.
Mobile transactions are predicted to hit a record high this Christmas.
Mobile trafic to ecommerce sites is set to double within the next 12 months.
Mobile Specification
General Specification of the Mobile Interface.
- All image based buttons (with the exception of 2) have been replaced with css generated buttons to save bandwidth, make them easy to restyle and to ensure that buttons fit on the page when viewing on a tiny screen.
- Left and right columns have been stripped from the site entirely.
- Banners are resized to shrink to the available browser space rather than breaking the template.
- To ensure consistent font sizes and wrapping of content, zooming is disabled on the mobile version.
- All links and buttons throughout the site have been padded out to ensure there is a large enough space to press on them with a finger. Buttons and links should never be crowded together on a mobile.
- Breadcrumbs remain throughout the site to act as an important navigation method.
- Forms throughout the site were designed to show field labels above the field rather than to the left. This ensures customers don’t need to scroll left to right to read what the field is before filling it in.
Changes to the website header
- Stripped of all navigation as this varies in width from site to site. All moved to permanent spots in the footer instead.
- Only the My Account and Shopping Basket links remain in the header.
- Shopping Basket adapted to show the number of products in the basket.
- The height of the header will adjust to fit the size of the company logo.
- The logo always acts as a link back to the home page.
- Designed to take up as little vertical space as possible to ensure calls to action are visible without scrolling.
- When switching from portrait to landscape view the search box will move from being below the logo to alongside it (may need to refresh to see change depending on handset).
Changes to the category/special category/brand/search result pages
- As there are no left/right columns on the mobile version, product filters would never have displayed. Because they are still very important we moved them to below the page title and description.
- Product filters are hidden behind a button so that products are not hidden very far down the page. When pressed the available filters for the products will be shown
Change to the Product page
- All important product content remains as this is the main reason that customers visit the website – nothing is hidden, it’s just restyled.
- Product images are not zoomable at present (this is an area that we may need to improve upon in the future, possibly by allowing customers to click on the image to see a much larger version).
- When a product has multiple images they are shown as smaller thumbnails under the main image. Clicking on them swaps the images around so that thumbnails are viewable in the larger size.
- Product reviews, information, videos, and customer questions all remain.
Changes to the Checkout
- Basket redesigned to make it easy to view on a small screen. Old tabular layout was replaced with a list of products.
- Breadcrumbs here show progress through the checkout with a tick to show completed sections.
Changes to the Footer
- Additional search box repeated in the footer to make it easy to find products
- List of top-level categories and information pages always displayed in footer to act as main navigation method.
- Contact number prominently displayed.
- Switch to full website button, designed to be obvious by being in the most common position found on other mobile websites.
- Newsletter signup form included if it’s also used on the main site