Screen resolutions directly from Kiwi.com Google Analytics
Global screen resolution stats for last 3 years(Jan 2016 - Jan 2019)
Breakpoints
Type
Gutters / Margins*
Breakpoint range
Desktop(Large)
24
1200px – ∞
Desktop
24
992px – 1199px
Tablet
16
768px – 991px
Mobile(Large)
16
576px – 767px
Mobile(Medium)
16
414px – 575px
Mobile(Small)
8
0px – 413px
Layouts
A layout is a pattern that defines a website's structure that supports consistency across applications by defining grid, spacing, and sections at different breakpoints.
We allows for three main types of grid layouts. The type of grid used should be based on content type and density. All choices of the grid belongs to the teams that own each part.
We define 3 main types of layouts, which are used across the main parts of Kiwi.com website:
3 Column Layout
2 Column Layout
1 Column Layout
Using 3 Column Layout
This type of layout is commonly used for Kiwi.com Search page.
3 Column Layout consists of three parts: Filter area, Content area and Advertisement area. Left column is used for showing up all the filters. In Mobile view is the left column hidden and filters are showed on the top of the content area. Middle column consists of search results which are showed all the time. The right column is showed only on Large Desktop view and it’s used as the advertisement area, also hiding as the first due the lower information importance. Maximum width of the container is 1440px.
Using 2 Column Layout
This type of layout is commonly used for Kiwi.com Booking page.
2 Column Layout consists of two parts: Content area and Sidebar area. Left column is used for showing up main content of the page. Right column displays price summary of the booking reservation. Sidebar area is hidden in the mobile view and shows up in small fixed Popover at the bottom of the screen. Maximum width of the container is 1200px.
Using 1 Column Layout
This type of layout is commonly used for Kiwi.com Manage My Booking page.
1 Column Layout consists of Content area part only. The main column is used for showing up main content of the page. Maximum width of the container is 960px.
Research
Screen resolutions
Breakpoints
Type
Gutters / Margins*
Breakpoint range
Layouts
Using 3 Column Layout
Using 2 Column Layout
Using 1 Column Layout
Using Custom Layouts