Mobile First Design

Foundation uses a revolutionary new way to styles your website. All of the default styles throughout the theme and all the stacks are done through Site Styles.

My Image

What is mobile first design?

Foundation supports a "Mobile First" approach to web design. This means that you don't design your site on the desktop and then figure out how to get it to work on mobile. All of the default sizing and settings are set on the mobile level first. Then you progressively enhance the site to work on larger devices. This should not scare you as desktop sizing is turned on by default so that the paradigm shift is easier for you.

Mobile First Design

Progressive Enhancement

When starlings to build a new webpage, set the view width setting inside Site Styles to mobile width. Then start designing your webpage for the mobile layout. Make sure that you turn off tablet sizing in the columns stacks as it is enabled by default.

After you have completed your mobile layout, you can then progress onto the tablet view in the Site Styles. Adjust the settings in your stacks so that the layout works well for tablet devices. You may find that you will want to show or hide some content at this point.

Lastly, you will progress onto desktop sizing. I find that not many tweaks will need to be done since most of the time, tablet sizing also works great on desktops.

Product by Joe Workman

I am an indie Web and Mac developer based in the SF Bay Area. I've been highly active in the community since my first release in 2008.