WordCamp Montreal 2013
Build a Responsive WordPress Theme with ZURBs Foundation 4 Framework.
Before we can code responsively,
we must understand the fundamentals.
What the heck is responsive web design?
A website or app that responds to the device that accesses it and delivers the
appropriate output for it.
No pinch and zoom!
One Site to Rule
Them ALL!
Cheesy movie reference :)
Why build responsively?
“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”
- Jeffrey VeenJeffrey Veen is the author of "The Art and Science of Web Design"
Some basic stats ...because I’m a marketing guy :)
Smartphone sales have become bigger
than PC sales.
28% of Internet usage comes from a
mobile phone
In the retail industry, 16% of search queries
come from mobile web usage
Mobile web usage took 50% of sales
related to Mother’s Day in 2012
There were a total of $163 billion mobile
transactions in 2012
$235.4 billion expected in 2013
We must build responsively,
the web depends on it!
The basics of responsive web design
Before you wireframe, design, or code ...
Think mobile first!
consider ...
1
2
3
4
5
Use a responsive framework
We use Foundation 4 by ZURB
Why we chose Foundation 4
★ Designed for Mobile First!
★ Flexible 12-column grid
★ Mobile visibility elements
★ Mobile navigation - toggle or off-canvas
★ Existing WP theme
★ Powerful jQuery and Zepto libraries
★ Foundation is developed in Sass
It’s all about the grids!
What you need to consider in the design phase
Image sizing
What you need to consider in the design phase
Stacking & Re-ordering of columns
What you need to consider in the design phase
Mobile Navigation
Design for mobile navigation
Toggle menu Off-canvas menuvs.
Responsive Navigation: Optimizing for Touch Across Devices
Adapting
Common Patterns
Read: Responsive Navigation: Optimizing for Touch Across Devices by Luke Wroblewski
Now that we covered the basics,
let’s look at the code ...
Download Foundation 4
http://foundation.zurb.com/docs/
Foundation 4 Markup
<meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Foundation 4</title>
<link rel="stylesheet" href="css/normalize.css" /> <link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="js/vendor/custom.modernizr.js"></script>
<head> (css version)
Foundation 4 Markup
<script> document.write('<script src=' + ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + '.js><\/script>')</script><script src="js/foundation/foundation.js"></script><script src="js/foundation/foundation.LIB-YOU-NEED.js"></script> <script> $(document).foundation(); </script>
Before </body>
Foundation 4 Libraries
What comes with Foundation 4
★ Forms
★ Navigation
★ Reveal
★ Joyride
★ Magellan
★ Orbit
★ Tooltips
To name a few ...
Let’s do it!
Foundation 4 Grid
<div class=“row”><div class=“large-12 columns”>
</div></div>
<!-- stuff -->
The Grid in Action
Super Easy!
Foundation 4 Grid
Customizing the Grid
Foundation 4 Grid
Customizing the Grid
Foundation 4 Grid
Customizing the Grid
Foundation 4 Grid
Customizing the Grid
Foundation 4 Markup in WP<?php get_header(); ?>
<div class=“row”> <div class="large-6 columns" role="main"> <?php while (have_posts()) : the_post(); ?> <article <?php post_class() ?> id="post-<?php the_ID(); ?>"> <header> <h1 class="entry-title"><?php the_title(); ?></h1> <?php reverie_entry_meta(); ?> </header> <div class="entry-content"> <?php the_content(); ?> </div> </article> <?php endwhile;?> </div>
</div> <?php get_sidebar(); ?><?php get_footer(); ?>
That was Easy!
The other large-6 is in sidebar.php
If it ain’t broke don’t fix it!
Get Reverie by ThemeFortress
Easy to hack
Most stable Foundation WP theme
Only F4 Theme!
It’s FREE
Some Examples
Some Examples
Some Examples
Thank You!www.TheBrendans.com
www.KeepMarketingFun.com@TheBrendans
www.facebook.com/thebrendans
@digibomb
