In only the last few years, Responsive Design patterns and paradigms have brought forth spectacular, sweeping changes in UI web production. The demands for device-compliance as well as the always-growing mobile market have made Responsive Design a necessity for many websites and web applications. While taking the Responsive approach may offer incredible opportunities, it also carries a gamut of challenges.

This session will cover best practices for the planning, production, and management of Responsive websites. It will also serve as an introduction to Responsive website creation using the Bootstrap 3 framework. We will explore the mechanics of the Bootstrap grid and explore how it may be used to create robust, flexible Responsive layouts. Topics central to the presentation include mobile-first production, content focus, site maintainability and performance.

The Flexbox (or Flexible Box) Layout Model is a set of CSS attributes allowing for the efficient creation of robust, multi-screen application layouts. Flexbox uses a dual-axis container/item layout model allowing for powerful approaches to element space distribution, alignment, and sizing. This can be a tremendous boon for web projects with dynamic data and design flux. It may also tremendously simplify responsive layouts that are dependent on commonly complicated grid models.

This presentation will introduce the mechanics of the Flexible Box Model and demonstrate its capability for simplifying markup and styling. Comparisons will be made to other layout paradigms to illustrate strengths of the model.