Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wp responsive-theme-framework


Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Wp responsive-theme-framework

  1. 1. WordPress ThemeFramework And ResponsiveTheme
  2. 2. Who Am I? Damien Oh WordPress Developer A Blogger and Editor at Make Tech Easier ( - an online tech tutorial site
  3. 3. What Is a ThemeFramework? 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. 4. Advantages of Using a ThemeFramework 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. 5. Disadvantages of ThemeFramework 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. 6. What Is Responsive Design? One design for all devices and screen size.
  7. 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. 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 ( nsive-web-design)
  9. 9. Advantages of ResponsiveDesign One theme to rule them all. Consistent layout. Best suited for SEO purpose. Recommended by Google ( /smartphone-sites/details)
  10. 10. Disadvantages of ResponsiveDesign 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. 11. Responsive + ThemeFramework Combining responsive design into theme framework. Enable users/developers to create responsive WP theme effortlessly.
  12. 12. Responsive Theme FrameworkFor WordPress (User) Gantry Framework (http://www.gantry- PressWork ( ork) Catalyst (Premium theme - USD$127, Ultimatum (Premium theme – USD$65 - $170,
  13. 13. Responsive Theme FrameworkFor WordPress (Developer) Bones ( Skeleton ( n/) Roots ( Reverie ( Foundation ( Genesis ( - USD$59.95
  14. 14. Useful Tools FireSizer (Firefox Addon - us/firefox/addon/firesizer/) Windows Resizer (Chrome Addon - dow- resizer/kkelicaakdanhinjdeammmilcgefonfh) User Agent Switcher (Firefox - US/firefox/addon/user-agent-switcher/, Chrome - -agent-switcher-for- c/djflhoibgkdhkhhcedjiklpkjnoahfmg)
  15. 15. Useful Resources Media Queries - Responsinator - Modernizr -
  16. 16. Questions?
  17. 17. The End