Session: Day 1

Mobile first, responsive web design in MODX

Day 1 at 12:00

Using MODX with a mobile first, responsive web design strategy. I will show you how I use MODX when creating responsive websites. This includes: TV based CSS grids, responsive images, performance optimization, SASS and more!

Mobile first, responsive web design in MODX

In this session aimed at web designers and front-end developers that use (or want to start using) a mobile first, responsive web design strategy.
I will show how I use: SASS, Compass, Foundation, Template Variables, MIGX, phpThumbsUp, SmartOptimizer and more to create fast, responsive and flexible websites in MODX.

Content of this session:

Mobile First

How I structure and wireframe new projects starting for the smallest screen sizes first.

Responsive grids

Extending the flexible grid system of Foundation using MIGX and Template Vatiables to allow site administrators to create custom layouts.

Responsive images

A big subject right now, how do we optimize our responsive project by delivering images of a correct size to different screen sizes? Using phpThumbsUp, MODX will create variouse versions of uploaded images on the fly and allow you to deliver a smaller image to uses with a small screen size. This will greatly improve the performance of your project.

Optimizing performance

The plugin's and techniques I use to optimize my web projects. This includes: combining CSS & Javascript and caching.