Wp responsive-theme-framework

1,412 views
1,305 views

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,412
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Explain the differences between a free theme and a theme framework and why is it beneficial to both end users and developers
  • 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 (http://maketecheasier.com) - 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 (http://www.abookapart.com/products/respo nsive-web-design)
    9. 9. Advantages of ResponsiveDesign 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. 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- 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. 13. Responsive Theme FrameworkFor 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. 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. 15. Useful Resources Media Queries - http://mediaqueri.es/ Responsinator - http://responsinator.com/ Modernizr - http://modernizr.com/
    16. 16. Questions?
    17. 17. The End

    ×