3 Ecommerce Site Design Trends for 2018

 1. CSS Grid Layout

Websites evolved from simple documents into complex, interactive applications, techniques for document layout, e.g. floats, were not necessarily well suited for application layout,” wrote World Wide Web Consortium editors in the CSS Grid Layout recommendation.

“By using a combination of tables, JavaScript, or careful measurements on floated elements, authors discovered workarounds to achieve desired layouts. Layouts that adapted to the available space were often brittle and resulted in counterintuitive behavior as space became constrained. As an alternative, authors of many web applications opted for a fixed layout that cannot take advantage of changes in the available rendering space on a screen.”

 

2. Full-screen Search, Forms

In web design, a modal, modal box, or modal window is an element, typically controlled with a script, that is overlaid on top of other elements (content) to permit user interaction.

Modals have been an effective user interface for several years and are common on many ecommerce websites. What may change for 2018 is the use of full-screen modals for search and forms.

The trend comes from mobile-first web design. On a mobile device, many modals take up most or all of the available space on the screen.

Overstock's newsletter subscription form uses a full-screen modal box.

Overstock’s newsletter subscription form uses a full-screen modal box.

Overstock, as an example, is using a full-screen modal for its newsletter registration form, which pops up for new site visitors. On a mobile device, the form is centered and full-screen and even on a much larger screen the translucent gray stretches end to end.

The Ralph Lauren website includes a search modal that covers nearly all of the content on the page when displayed on desktop or laptop computers, and is, in fact, full-screen on a mobile device.

The Ralph Lauren site uses a search modal that is full-screen on mobile devices and covers most content on larger screens.

The Ralph Lauren site uses a search modal that is full-screen on mobile devices and covers most content on larger screens.

Look for designers who are building for mobile first to use full-screen modals for search and other forms and carry those full-screen implementations into larger layouts, too.

3. Much More Video

Video is an excellent medium for conveying complex information, telling stories, and evoking emotion. The amount of videos distributed on the web and watched by Internet users rises every day. So it should not be a surprise that online retailers are also using more video elements in web design.

Sites such as Beardbrand, which has been using videos and content marketing for several years, lead the way by adding video inline on product detail pages.

Online videos are both popular and effective. In 2018, look for ecommerce site designs to include video on product pages, landing pages, and even as backgrounds. <em>Source: Beardbrand.</em>

Online videos are both popular and effective. In 2018, look for ecommerce site designs to include video on product pages, landing pages, and even as backgrounds. Source: Beardbrand.

You may also see video used as backgrounds, on-site merchandising, or hero images.

Leave a Reply

Your email address will not be published. Required fields are marked *