A design concept by sayhello.ch, June 2024

Lorem Ipsum

A design concept by sayhello.ch, June 2024

Lorem Ipsum

This is a sample page of a responsive design layout, created by Say Hello GmbH: a WordPress design and development agency in Switzerland.

View more experiments here

The web works on many devices and at many screen sizes: from little smartphones with a screen size of 320px x 480px to massive televisions and desktop monitors. We specialise in ensuring that the design concepts we create—and those which are delivered to us by our partners—work as well as possible across all screen sizes.

The Grid Layout

This idea of this site is to display a collection of images, multimedia content and text, which adapts using a “grid layout” to present the information in an optimal way for every screen size. You can see how this works for the visitor by loading this page at different screen sizes—for example, on your smartphone and your desktop computer—and comparing how the content is presented differently, according to screen size.

All of this happens seamlessly using a content management system with additional grid controls. In this demo, only an administrator is allowed to change the page layout, whilst other users can edit the content: retaining control over the text, images and so on without worrying about breaking the page design.

Notes

  • The content of this page is only for demonstration purposes. As such, the carousel elements and stacked images are only placeholders, and do not contain “real” functionality.
  • The images aren’t optimised for performance: in client projects, we implement custom blocks which are finely-tuned for every “breakpoint”.
  • Every image in each custom block is created by the CMS and output at an ideal resolution, which strikes a balance between file size and image quality.
  • The page content itself is managed using the regular “blocks” (content elements). Only the layout across different screen sizes is managed through the use of an additional tool.

Remaining page content to fill the screen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo.