Shopware, Europe’s leading e-commerce system for fast growing and medium-sized enterprises, is mastering the creation of landing pages through its Shoppingworld application embedded within the system. As more and more companies are moving towards a hybrid content + commerce approach and the need to set up new commercial campaigns at the speed of thought is increasing to remain competitive, it is essential for companies to have a tool like Shopware’s Shopping World at their fingertips.


Shopware’s CMS / Shopping World is likely to be the biggest selling point for a lot of retailers – allowing users to create highly flexible content pages with all of the core components they could possibly need. A user can drag and drop things like products, product blocks, banners, videos, content blocks, blog posts, guides, carousels, and so to create a layout tailored to their brand.




What makes the perfect landing page?

Landing pages are pages with a strong single purpose: to convert. Landing pages are often used as corner stones in a web shop or first destination within a brand’s commercial campaign. Also, a company’s homepage is in essence a landing page.


Depending on the type of product, conversion might mean different things. Either it will be straight sales, or rather seduce the visitor to investigate further upon your product.


Successful landing pages contain the following five elements:

  • a clear visual to attract the prospect;
  • a clear single message;
  • storytelling with supporting evidence;
  • something to click: a form, button, product
  • visual cues towards the desired click.

All of these elements should be neatly balanced towards your customers’ wishes in the page its composition.




Composition: working with grids


Grids help us organize a page, make them more consistent and speed up production using a clear reference or pre-defined elements. Most of the popular frameworks use a grid system of 12 equal-widths column. The number 12 is the most easily divisible among reasonably small numbers; it’s possible to have 12, 6, 4, 3, 2 or 1 evenly spaced columns. This gives designers tremendous flexibility over a layout.

grid

Grids, like Google’s Material Design layout grid, are made up of three elements: columns, gutters, and margins. Content is placed in the areas of the screen that contain columns.


  1. the width of columns is defined using percentages to allow content to flexibly adapt to any screen size;
  2. Cell spacing (also referred to as gutters) are the spaces between columns; they help separate content and are fixed values;
  3. margins are the space between content and the left and right edges of the screen; they also are defined as fixed values.
grid2




Screen resolution and viewports


When you buy a device, you will often see both screen size and resolution listed in the specs. The screen size is the physical measurement diagonally of the screen in inches. This is not to be confused with the resolution, which is the number of pixels on the screen often displayed as a width by height (i.e. 1024×768).


While desktop and laptop displays are in landscape orientation (wider than tall), many mobile devices can be rotated to show websites in both landscape and portrait (taller than wide) orientations. In order to cater great user experience for different devices, one must embrace responsive design: optimizing for both desktop and mobile use.


The problem is: screens are getting bigger and mobile screens differ in a large extend. While there are trends of increasing mobile use (for most sites nowadays more than 50 percent of total visits), there isn't really such a thing as standard sizes. Your visitors vary from mine, highly depending on your target group. There are many geographical differences, age differences, tech savvy vs. tech dummy differences, and so on.


Because designing for each and every device is just practically impossible, we use viewports. The viewport is the user's visible area of a web page. Viewports allow design to be consistent and the site to maintain functionality across different sizes. We define breakpoints (usually just widths) as a condition to either serve the design for one or another viewport. Shopware’s Responsive theme – the base for many current Shopware themes - uses the following breakpoints:


  • 480px / @phoneLandscapeViewportWidth
  • 768px / @tabletViewportWidth
  • 1024px / @tabletLandscapeViewportWidth
  • 1260px / @desktopViewportWidth

These breakpoints fully correspond with the industry’s best practices.


Besides its width, a page’s composition is to a large extend also determined by its height. And heights to, differ enormously. While almost every web user is accustomed to (vertical) scrolling, it is advisable to put your most important message within the page height limits without need to scroll. Coming from direct (paper) mail, this is what they call above the fold. (When people received a letter, this was often folded within its envelope – above the fold refers to the visible part of the letter as soon as the envelope was opened.)


Resolution doesn’t stand on its own. Often overlooked issues when deciding the width of a web page are what browsers your customers use, how big they keep these browsers and whether they have specific plugins or extensions installed that make the visible area within their browser smaller. Also, they might visit your site with a specific zoom in / out setting. While your site should strive to be cross-browser compatible, as with screen resolution, you are always going to disappoint a small portion of your website visitors who use outdated browsers.


Given all of the above aspects, none of your visitors will experience your site like you do and it is advised to be acquainted (at a minimum) with your own user statistics. (See Google Analytics > Technology > Browser & OS > Screen resolution.) Other recommended sources are: www.screensiz.es, www.w3schools.com/browsers and gs.statcounter.com/screen-resolution-stats.

breakpoints




Responsive design: optimizing for desktop and mobile


Responsive design is about using HTML and CSS to (automatically) resize, hide, shrink, or enlarge, a website, to make it look good on all devices.


In most countries, nowadays, more than 50 per cent of all web site visits are done using a mobile device. Generally, this means either a mobile smartphone (the vast majority) or a tablet. Both of these devices can be used either in portrait or in landscape mode. Using Google Analytics you can easily find how your users use your site. If you notice in your Google Analytics records that the screen height is greater than the screen width, they are looking at you in portrait mode - and vice versa for landscape.


Analyzing the records of tens of customers, millions of site visits, we conclude that most visits are in portrait mode for both mobile (+/- 95%) and tablet (+/- 85%) use. Again, however, sites differ: a video intensive site for example will most probably record more landscape use, since most videos are still in landscape.


While it is advisable to adjust your design as much as possible per viewport, reality is that this requires extensive development and testing resources. We strongly recommend to optimize your design at a minimum for mobile portrait and desktop. You can resize your desktop design easily for tablet landscape. Depending on your content, you might also make such adjustments for mobile landscape or tablet portrait.


When designing for desktop versus mobile, one is in essence designing for large versus small screens. For (small) mobile screens, please consider that some areas might be difficult to reach while operated in one hand with big thumbs. For each page object, decide to either make it smaller, give it a different shape or even leave it out. For mobile design, it is even recommended stronger to place the most important content up (above the mobile fold). Since mobile users are scrolling extensively, it does not hurt to repeat the call to action at the bottom of the page.


We advise one of the following approaches for your responsive design, taking into account the user’s orientation (landscape vs. portrait):

  1. the interface adjusting to the screen’s size, adding or subtracting layout components according to the dimensions of the chosen orientation; in practice, this strategy is most often used;
  2. a changed orientation triggers an auxiliary screen with relevant supplementary information; an example would be a mobile financial application that displays data in the default portrait mode, and then provides a visual graph when the user rotates to landscape mode.
  3. a changed orientation triggers a secondary interface with a separate function, in Youtube’s example this means for instance using the smartphone as a remote control versus a program guide when rotated; in practice this is only possible when users use your site on a very frequent basis.

When option 2 or 3 is pursued, it is advisable to use an orientation icon to serve as a visual clue.


Some elements might be optimized for either desktop or mobile too. The carrousel functionality to display products, for instance, is typically used on a mobile device. These elements invite the user to swipe from product to product.

screen




In practice: setting up your first Shopping World


In Shopware, landing pages are made using the Shopping Worlds tool. To open Shopping Worlds, enter your backend and follow: Marketing > Shopping worlds.


A web page user interface consist of different areas: its header, body and footer. And to each of these areas, different elements might be assigned. For instance: headers typically contain a logo and navigation. Generally speaking are Shopping Worlds the body of the web page. However, upon your design decisions they might not be the sole page body (you are able to display your products on the same page) and in some use cases you might decide not to use your site’s header in combination with your Shopping World.


Step 1:

When creating a Shopping World, first a few details have to be entered on the page its use. You can use a Shopping World either related to a specific category of your Shopware site or as an (independent) landing page. The first use case is relevant to combine both storytelling and shopping. The second use case is very relevant as a landing page for online marketing campaigns. When the Shopping World is used as a landing page, the landing page check box must be marked and an extra setting will appear that asks for the page its desired internet address.


Since Shopping Worlds can be combined on one page (we will describe the reasoning behind this later on) you should also indicate its position. Indicating “1” means the Shopping World is displayed on top of the page, while “2” is displayed below, and so on.


Finally, as a basic element you should indicate the viewports for which the page is being developed. Generally, it is advisable to indicate all viewports when you are reusing the same elements for every viewport. When the used elements vary to a large extend, one can better opt to also vary in Shopping Worlds.


inpractice1

Step 2:

In the second step you decide upon the Shopping World’s grid and behavior.


As mentioned previously, your grid serves as the basis for your design. The grid is defined as a number of columns and a height (in pixels) of each row. It is important to understand that every resulting ‘block’ (also referred to as modules) in the grid can contain an element, but no module can contain two elements. It is therefore recommended to use the maximum number of columns and not to make the row height too large in order to have most flexibility within the design process. When needed, the grid’s dimensions can be adjusted, but this might result in your design to be corrupted.


In this step you also decide upon the Shopping World to be full screen – or not. When you decide for full screen, the size of the columns is fluid (percentages) and the content changes accordingly. When the page is not full screen, the column width is still a percentage depending on the number of columns used, but with a maximum (fixed) size. This allows for better control on how content is displayed, but will result in large white margins on a 27-inch-iMac. When a white side is desired, another option could be to opt for full-screen but keep the first and last column empty. When you use a three columns layout, you will find yourself in difficulty then, however, since 10 columns (twelve minus two empty columns) don’t divide well by three. Then opt for 11 columns. In other scenarios, similar creativity might be needed.


In relation to the landing page’s behavior, Shopware supports four different modes:

  1. fluid / responsive / masonry: elements are arranged dynamically according to the resolution of the end device; when elements appear next to one another on desktop, but are too large to be displayed on mobile, they automatically resize for mobile and you are easily able to stack them atop of each other;
  2. resize / scaling: elements will resize in order to maintain their original relationship with one another across different devices; this means that with smaller devices, the elements will not break to sack upon one another, rather become smaller to maintain their original display;
  3. rows: these are rows without a predetermined height;
  4. storytelling: each page is presented full screen with sections divided by percentiles. For example, if there are 4 lines and 3 columns per section, each row represents 25% of the total height and each column 33.3% of the total width.

practice2

Step 3:

In the third step, we will be making the actual page design using so-called pre-defined elements.


To add an element to the page, one simply has to drag one of the standard elements into the grid. Once the element is in the grid, the size can be adjusted and the content can be adjusted by clicking on the pencil. Once you click on the pencil, a new window opens to add the right content.


When you are in need for more rows, you simply click the ‘+’ on the left side of the grid. When you want to get rid of a row or two, you use the ‘-‘ on the right side. Please note that deleting a row also deletes the elements contained therein, even if the element extends across several rows.


The colored bar at the top of the grid shows the different viewports. Each screen must be checked and adjusted according to the device. By clicking on another device you will see the adjusted grid and screen. This bar furthermore contains a few functions, including:

  1. the possibility to link or unlink different viewports, thus, when something is changed in one viewport it is in parallel automatically adjusted in the linked viewport; in most cases, the viewports for desktop and tablet in landscape mode can be linked;
  2. showing the number of elements in use for other viewports – but not that specific one; these elements are too big to be shown in the viewport compared to the original in which it was placed.

practice3

When designing your Shopping World there are a few very important things to remember:

  1. besides the pencil, one can find both a blue and a red X when hovering an element; the blue X hides an element in the current and linked viewports; the red X deletes the element from the whole Shopping World, no matter if it is in use or not;
  2. there is no autosave for Shopping Worlds, so you might want to hit that save button rather once too often than once too few; however, when you hit autosave the Shopping World will automatically re-open to the largest (desktop) viewport; when you were adjusting tablet landscape, you might not notice that and hurt your (finished) desktop design.




Banner behavior


As described in great detail, resolutions differ, while the basic elements you are working with might have a fixed design. This is often true for images like banners. Shopware’s Shopping World will always fill the block / modules in use by its assigned element. For this reason, it is possible that the image may not be displayed correctly on some devices: the image might be optimal for desktop, but not for mobile or tablet use.


By default, banners are automatically scaled toward the center point. You are however able to control the behavior of the image using a 3x3 grid (9 focal areas to choose from) corresponding to the CSS properties background position: top / bottom / left / center. This assists you in ensuring that the most relevant portion of the image is always displayed. When working with copy in a banner, however, it is strongly recommended to test the banner in different viewports and address the position of the copy using the same 3x3 approach.




Storytelling


The Storytelling feature is a Shopping World with a specific behavior. Instead of scrollable page, this Shopping World is always shown full screen and in sections, no matter the screen resolution. These sections can be thought of as chapters in the Storytelling experience. Sections each have an individual URL and are separated by bullet points in the frontend.


Storytelling shopping worlds always have priority – this means if a Storytelling shopping world is displayed in a category, no other shopping world can be displayed, regardless if it is active.


On a Storytelling Shopping World, specifically, it is worth to consider Sideview and Quickview elements. Sideviews reveal items in a slider, displaying the most relevant item information inviting the user to swipe. Using Quickviews, an item opens in a lightbox with more detailed information.




Saving your Shopping World


To save your Shopping World, Shopware offers two choices. Either you do a ‘regular’ save of the specific Shopping World you just designed – or you save it as a preset.


When you save your designed Shopping World as a preset you can later on easily load it as a template to adjust. You can also decide later to make a preset of specific Shopping Worlds.


save