Chapter 7. Laying out pages with Flex Layout

 

This chapter covers

  • Implementing responsive web design using the Flex Layout library
  • Using the ObservableMedia service
  • Changing the layout based on the viewport size

When it comes to developing a web app, you need to decide whether you’ll have separate apps for desktop and mobile versions or reuse the same code on all devices. The former approach allows you to use the native controls on mobile devices so the UI looks more natural, but you need to maintain separate versions of the code for each app. The latter approach is to use a single code base and implement responsive web design (RWD) so the UI layout will adapt to the device screen size.

Note

The term RWD was coined by Ethan Marcotte in the article “Responsive Web Design,” available at http://alistapart.com/article/responsive-web-design.

There’s a third approach: in addition to your web application that works on desktops, develop a hybrid application, which is a web application that works inside the mobile browser but can invoke the native API of the mobile device too.

7.1. Flex Layout and ObservableMedia

7.2. Hands-on: Rewriting ngAuction

Summary

sitemap