Number of devices in use by 2018 (billion) Source: BI Intelligence Estimates
  • Phones
  • Tablets
  • Wearables
  • Computers

An increasing number of people are accessing information and services on their mobile devices. New devices are being introduced every day.

With GEL we can future proof our solutions in this ever changing market, ensuring that our customers banking needs are always catered to. In essence, responsive web design serves the same HTML code to all devices. Cascading style sheets (CSS) are then used to change the appearance of the user interface depending on screen size. This means a single codebase can support users with different sized screens. Pages are structured in columns using an underlying grid. This grid determines how the content reflows when the viewport gets smaller or larger. To some degree the order of elements can be changed and any element can be hidden or shown depending on screen size. In addition, the GUI offers the ability to use one HTML code base in combination with brand specific CSS to almost instantly create multi-brand interfaces.

think flexible

a new approach to designing user interfaces

Responsive web design suggests that the user interface should respond to the user’s behaviour and environment based on screen size, platform and orientation. This practice consists of a mix of flexible grids and CSS media queries. As the user switches from one device to another, the interface should automatically respond and accommodate for layout, resolution, media size, content and interactions. In other words, the interface should have the smarts to automatically respond to the user’s preferences. This eliminates the need for a different design and development phase for each new gadget on the market. Responsive web design is not only about adjustable screen layouts and fluid images, but rather a whole new approach to design delivery. Achieving user interface design and code quality must be a priority — to do this greater emphasis on design and front-end development skills and collaboration is paramount.

We can’t keep creating custom solutions for every device that hits the market. So, how do we deal with the situation?

Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies are using “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.

Ethan Marcotte. A list apart

Transplant this discipline into web design, and we have a similar yet whole new idea. Why should we create a custom interface design for each group of users; after all, architects don’t design a different building for each type of visitor. Like responsive architecture, interface design should automatically adjust. It shouldn’t require countless custom-made solutions for each new category of users.

Obviously, we can’t use motion sensors and robotics to accomplish this the way a building would. Responsive web design requires a more abstract way of thinking. However, some ideas are already being practiced: fluid layouts, media queries and scripts that can reformat screens and content effortlessly (or at least automatically).

design with systems

work smarter not harder

Our design systems play an important role in achieving quality, consistency and efficiency across all our brands user interfaces.

We’re constantly building and refining these systems to cater for the ever changing digital brand landscape. It’s important to understand these systems. They’ll help you design and build coherent, consistent user journeys while maintaining strong brand alignment.

  • axure UI kit

    Our wireframing UI Kit has been created using Axure. It contains all the elements you will find in the GUIs and lots of re-usable patterns and components sized to match the responsive views. Using these tools will save design time and have you thinking with a design system mindset from the get-go. More about the Axure UI Kit

  • sketch UI kit

    A set of graphic assets for designing responsive, multi-brand applications that align with our front-end development framework. Each element in the UI Kit corresponds exactly to the coded element found in the GUIs. More about the Sketch UI Kit

  • dev starter pack

    The GUI Front-end Dev starter pack is a complete front end development environment that aligns with the GUI framework. It’s designed to get front-end developers up and running quickly. It’s available on GitHub and uses technologies like node, npm and grunt. View in GitHub

  • the grid

    In today’s digital world responsive design is simply best practice. We’ve created a responsive grid – along with a library of templates to help you design for multiple screen sizes. The responsive grid is a powerful system. It’s difficult to master but crucial if your design has to be responsive. More about the grid