Layout web - and mobile apps

Written by Kees van Dieren

Last update: september 2019

This document is outdated, please do not use this information when starting new products.

Introduction

Creating layouts is often implemented in different ways on different platforms. This makes it hard to be productive. Especially the Android layout system and the iOS layout system (AutoLayout) has a serious learning curve while those skills are not reusable on the web.

Flex Box Layout system was first introduced for the web by W3C for CSS. Some frameworks for native app development implementing Flex Box are available as well. We expect it to become the standard mechanism for all platforms on the long term.

Flex Box in Android native apps

Google FlexboxLayout has worked well for one of our client projects.

Flex Box in iOS native apps

Facebook has created Yoga.

Warning: Facebook has a patents limitation on their Open Source components, always ask the owner of the software if this is acceptable. See also: this InfoQ article. Use of Facebook Open Source components that have the PATENTS limitation in its license is not permitted for products owned by Squins IT Solutions B.V.

LinkedIn has created LayoutKit, a fast view layout library for iOS, macOS, and tvOS. LayoutKit has ‘similarities’ to Flex Box.

Debugging Auto Layout applications

For some customers we have apps still build with Auto Layout.

Helpful tool to debug Auto Layout issues: wtfautolayout.com

Web applications

Bootstrap 4 has Flex box support.

Google Material Design seems to have no Flex Box support. Material Design for Bootstrap 4 might be worth giving a try.

Posted in: Web Apps Layout

Kees van Dieren, CEO

We've years of experience helping startups and scale-ups to work more efficient by creating apps that are fit their needs.

Let’s talk. We look forward to exploring the opportunity to help your company too.

Go ahead and send us a message. We look forward to exploring the opportunity to help you too.