Responsive Web Design (RWD)
Responsive Web Design (RWD) is a web design approach that is aimed at crafting pages optimized for a wide range of devices. It advocates the use of primarily fluid layouts and media queries to optimize a site for different devices, instead of designing a separate site for each device. It results in sites that respond to the devices that are accessing it, displaying the information in an optimal way for the available screen size. For example, showing various store pages or layouts according to the device’s screen size. Rather than designing multiple sites for different-sized devices, the responsive approach designs one site but specifies how it appears on different devices.The following diagram illustrates the Responsive Web Design approach for the Aurora starter store on several devices:
Where the storefront is shown to shoppers according to the device or screen resolution they are using, such as a desktop, tablet, or mobile device, or web browser window size.
Benefits of using Responsive Web Design
The presentation elements of the store pages are simplified to broaden support, consistency, and performance across multiple platforms. The simplified store pages results in a robust storefront comparable in function across device capabilities and screen sizes. That is, responsive store pages provide a consistent user experience on any device when compared to browsing desktop-optimized starter stores on tablet or mobile devices, or maintaining multiple WebSphere Commerce store archives.
Store pages are designed with no specific screen size or device platform as a base. Instead, the layouts and site flows are designed to work on all devices capable of providing full HTML web browsing capabilities. They are optimized for both landscape and portrait orientations. They adapt to device sizes with ease, with no pinching, scrolling, zooming, or other touch gestures necessary on mobile devices. Dojo widgets, HTML 5, and CSS 3 features enable seamless user interface interactions on any device storefront.
Deploying responsive starter stores helps to reduce costs in the end, as future device support is in built. The storefront continues to work as designed, even on devices that are new to the market.
Responsive Web Design and WebSphere Commerce
The design objectives for Responsive Web Design and WebSphere Commerce are as follows:
- Provide rich, retail-centric RWD page templates that are accessible, localized, and touch-friendly.
- Give business users complete control of page content and layout.
- Provide a unique workflow to design, assemble, and test RWD pages.
User Experience design
The storefront maintains the structure of the Aurora starter store, with added visual emphasis on the underlying fluid grid. For example, increased spacing within the user interface around tap-friendly areas. Simplified, more open grid designs and enlarged functional user interface elements help in separating content on any screen size or device type.
All page functions are available without the use of hidden or hard-to-find page areas, such as hover states. That is, all interactions and functions are accessed on each visible page area. Hover states are used as a supplement or decorative visual representation, instead of being used for accessing site functions.
With Asynchronous JavaScript and XML (AJAX) calls, the frequency to load or reload entire pages is reduced.
Aurora starter store
The catalog browsing pages in the Aurora starter store are responsive by design so that they can be accessed across multiple channels and platforms. For example, on desktop, tablet, or mobile devices. They demonstrate best practices in starter store development with WebSphere Commerce, and can act as a base for implementing responsive storefronts for various platforms.
A single store archive (SAR) file covers every device storefront, instead of separately deploying multiple SAR files for desktop, tablet, and mobile stores. That is, the Aurora.sar file is used to deploy the responsive Aurora starter store for every device. The single SAR file results in less complexity, and reduced development and test times when compared to developing discrete, device-specific sites.
Responsive starter stores feature a dynamic and engaging home page, featuring targeted marketing content, and easy to use catalog browsing.
Store pages and user interface elements are all designed to be interacted with on any device. For example, all interaction controls provide a minimum size of 40 x 40 CSS pixels, resulting in more tap-friendly areas in the storefront.
Search-based navigation with WebSphere Commerce Search helps customers find what they are looking for. Search term associations, search rules, and landing pages deliver targeted content with a rich user experience. Location-based services enable customers to find store locations closest to their current location, regardless of device.
Page range breakpoints
Responsive Web Design (RWD) pages dynamically resize and show different content on different devices that access the store. There are three page range breakpoints available by default in the Aurora starter store to accommodate desktop, tablet, and mobile devices. The following table summarizes the default page range breakpoints in the Aurora starter store:
Aurora starter store page range breakpoints
Device Range breakpoint Page range Desktop RWD-C 1281 CSS pixels and above Tablet RWD-B 601 - 1280 CSS pixels Mobile RWD-A 600 CSS pixels and below
Complete business user control of page content and layouts
The Commerce Composer tool lets business users create pages and build layouts for the store directly in the Management Center, without involving IT users.
A rich, retail-centric RWD page templates are provided, which is accessible, localized, and touch-friendly by default. The rich, retail-centric RWD page templates result in a unique, end-to-end workflow for designing, assembling, and testing RWD pages.
Responsive site flows
The responsive site flows show all the store pages that are responsive in the storefront. The site flow topics show screen captures at each range breakpoint, and describe how the wireframe slots are populated by default. To understand which store pages are responsive, review the site flow diagrams:Site flows overview.
Device support
Responsive starter store pages support desktop, tablet, and mobile devices by default.
For more information about specific device stack levels, see Verify hardware, software, and operating system requirements.
- Responsive Web Design (RWD) framework
The Responsive Web Design (RWD) framework uses several technologies and design patterns to create a responsive storefront across devices.- Page range breakpoints in the Aurora starter store
Responsive Web Design (RWD) pages dynamically resize and show different content on different devices that access the store. There are three page range breakpoints available by default in the Aurora starter store to accommodate desktop, tablet, and mobile devices.- Responsive and device-specific store pages
Responsive store pages and store pages are device-specific by default. The transition between responsive and device-specific pages is controlled by the device detection framework.- Creating responsive layout templates
We can create responsive layout templates so that store pages and elements are optimized for web browsers on desktop, tablet, and mobile devices.- Creating responsive widgets
We can create responsive widget content so that they are optimized for web browsers on desktop, tablet, and mobile devices.- Creating responsive marketing content
We can create responsive marketing content so that they are optimized for web browsers on desktop, tablet, and mobile devices.- Responsive Aurora starter store file structure
The Responsive Aurora starter store files are organized in a defined structure by default. The file structure contains layouts, containers, widgets, CSS style sheets, and marketing content.- Responsive layout templates
All layout templates in the Commerce Composer library are responsive, arranging slots based on the screen size. A selected template does not have a fixed width, allowing for optimal viewing between devices.- Responsive widgets
All the widgets in the Commerce Composer widget library are responsive and display according to device screen size. For example the faceted navigation widget automatically expands as the display size grows.
Related concepts
Aurora starter store
Aurora as a B2B starter store
Commerce Composer tool