This is the presentation for the Singapore WordPress user group meetup on 14th Nov 2012 at Central Library. The topic is about WordPress Theme Framework and Responsive Design.

1. WordPress Theme
Framework And Responsive
Theme

2. Who Am I?
 Damien Oh
 WordPress Developer
 A Blogger and Editor at Make Tech
Easier (http://maketecheasier.com) -
an online tech tutorial site

3. What Is a Theme
Framework?
 A starter kit that enables the
user/developer to quickly create a
theme
 In WP, a theme framework can exist in
different form:
◦ Drop-in code (useful for hardcore
developers)
◦ Parent theme (useful for users with a little
coding knowledge)
◦ Complete theme with plenty of
customisation option (useful for end-

4. Advantages of Using a Theme
Framework
 Shorten the theme development time.
 Can focus solely on the design.
 Update of the theme does not break
the site.
 Can create a beautiful theme without
any coding knowledge.

5. Disadvantages of Theme
Framework
 Learning curve.
 Some theme frameworks come with
fixed functionalities, thus limiting your
choices
 Some theme framework are resource-
intensive and add unnecessary
burden to your server.
 Most of the good one are not free.
Some of the free one don’t provide
support or good documentation

6. What Is Responsive Design?
 One design for all devices and screen
size.

7. Technical How-to (Brief)
 A combination of CSS 3 @media
query and javascript.
 Examples:
◦ @media screen and (max-
width:480px) {css code}
◦ @media screen and (min-width:
600px) and (max-width: 900px)
{css code}
◦ @media only screen and (min-
width: 1149px) {css code}

8. More Examples
 @media only screen and (min-
device-pixel-ratio: 2){css code}
 @media screen and (device-
aspect-ratio: 1280/720) {css
code}
 @media screen and (orientation:
portrait){css code}
 Responsive Web Design by Ethan
Marcotte
(http://www.abookapart.com/products/respo
nsive-web-design)

9. Advantages of Responsive
Design
 One theme to rule them all.
 Consistent layout.
 Best suited for SEO purpose.
Recommended by Google
(https://developers.google.com/webmasters
/smartphone-sites/details)

10. Disadvantages of Responsive
Design
 It is complicated.
 Requires plenty of time to develop.
 May be more resource intensive on a
mobile device.
 May not be suitable for all users.

11. Responsive + Theme
Framework
 Combining responsive design into
theme framework.
 Enable users/developers to create
responsive WP theme effortlessly.

12. Responsive Theme Framework
For WordPress (User)
 Gantry Framework (http://www.gantry-
framework.org/)
 PressWork
(http://wordpress.org/extend/themes/pressw
ork)
 Catalyst (Premium theme -
USD$127, http://catalysttheme.com)
 Ultimatum (Premium theme – USD$65
- $170, http://ultimatumtheme.com/)

13. Responsive Theme Framework
For WordPress (Developer)
 Bones (http://themble.com/bones/)
 Skeleton
(http://themes.simplethemes.com/skeleto
n/)
 Roots (http://www.rootstheme.com/)
 Reverie (http://themefortress.com/reverie/)
 Foundation
(https://github.com/drewsymo/Foundation)
 Genesis (http://www.studiopress.com) -
USD$59.95

14. Useful Tools
 FireSizer (Firefox Addon -
https://addons.mozilla.org/en-
us/firefox/addon/firesizer/)
 Windows Resizer (Chrome Addon -
https://chrome.google.com/webstore/detail/win
dow-
resizer/kkelicaakdanhinjdeammmilcgefonfh)
 User Agent Switcher (Firefox -
https://addons.mozilla.org/en-
US/firefox/addon/user-agent-switcher/, Chrome
-
https://chrome.google.com/webstore/detail/user
-agent-switcher-for-
c/djflhoibgkdhkhhcedjiklpkjnoahfmg)

15. Useful Resources
 Media Queries - http://mediaqueri.es/
 Responsinator - http://responsinator.com/
 Modernizr - http://modernizr.com/

16. Questions?

17. The End