Responsive Design

eCommerce WebSite using Responsive Design Framework to deliver single site design to fit various devices including desktop, laptop, iPad, smartphone, etc. This project involves the creation of a Responsive Template set and underlying platform support to help a Merchant lower their costs by creating a single web site that delivers an optimized, effective and consistent shopping experience to a shopper regardless of the device (desktop, tablet, phone) that they are using to shop.

Key Ideas

Responsive shopping templates provide Merchants with a quick start on their site development efforts, lowering the learning curve for responsive design, and reducing implementation time and costs.

The ability to serve an optimized shopping experience to many different devices from a single site enables Merchants to consolidate content and lower on-going merchandising, monitoring and management costs.

Responsive shopping templates that encapsulate e-commerce and responsive design best practices produce experiences that enable Shoppers to successfully shop when and how they like on any device, which helps to drive Merchant success metrics.

Approach

There are four default formats: Large (992+), Medium (992/769), Small (768/481), Extra Small (480-). Design will produce wire frames/designs at 992, 768, 320.

Primary Techniques

- Scaling across resolutions within a format.
- Show/hide of UI features across formats.
- Fluid grid to arrange pages to fit display to screen width regardless of format.
- Adaptation of feature displays across formats (different widgets).
- Progressive disclosure

Design Assumptions

- Proven e-commerce design principles trump any emerging app standards.
- Responsible Responsive Design
- A full commerce feature set exists independent of formats.
- Exposed and emphasized based on shopper behaviors relative to devices on the multi-device P2P and what is appropriate per format.
- Larger formats typically expose more features, merchandising message, content, etc. than smaller formats.
- Implied Merchandising priority determines what merchandising remains present as the experience evolves from the larger to the smaller formats.
- Can be overridden per format via CSS associated with template

Wireframes

Based on the requirements of responsive template updates, started by heuristic evaluations and how merchandisers use existing non-responsive template sets to design eCommerce sites.

© Copyright 2024 CucumberMint - All Rights Reserved

Free AI Website Creator