Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
WordPress ThemeFramework And ResponsiveTheme
Who Am I? Damien Oh WordPress Developer A Blogger and Editor at Make Tech  Easier (http://maketecheasier.com) -  an onl...
What Is a ThemeFramework? A starter kit that enables the  user/developer to quickly create a  theme In WP, a theme frame...
Advantages of Using a ThemeFramework Shorten the theme development time. Can focus solely on the design. Update of the ...
Disadvantages of ThemeFramework Learning curve. Some theme frameworks come with  fixed functionalities, thus limiting yo...
What Is Responsive Design?   One design for all devices and screen    size.
Technical How-to (Brief) A combination of CSS 3 @media  query and javascript. Examples:    ◦ @media screen and (max-    ...
More Examples @media only screen and (min-  device-pixel-ratio: 2){css code} @media screen and (device-  aspect-ratio: 1...
Advantages of ResponsiveDesign One theme to rule them all. Consistent layout. Best suited for SEO purpose.  Recommended...
Disadvantages of ResponsiveDesign It is complicated. Requires plenty of time to develop. May be more resource intensive...
Responsive + ThemeFramework Combining responsive design into  theme framework. Enable users/developers to create  respon...
Responsive Theme FrameworkFor WordPress (User) Gantry Framework (http://www.gantry-  framework.org/) PressWork  (http://...
Responsive Theme FrameworkFor WordPress (Developer)   Bones (http://themble.com/bones/)   Skeleton    (http://themes.sim...
Useful Tools   FireSizer (Firefox Addon -    https://addons.mozilla.org/en-    us/firefox/addon/firesizer/)   Windows Re...
Useful Resources Media Queries - http://mediaqueri.es/ Responsinator - http://responsinator.com/   Modernizr - http://m...
Questions?
The End
Próxima SlideShare
Cargando en…5
×

Wp responsive-theme-framework

1.495 visualizaciones

Publicado el

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.

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

×