rwd-css

Tips and tricks for beginners using CSS and the mobble WordPress plugin for Responsive Web development

Transcript

1. Responsive web development made easy with CSS and mobble Christine Rondeau @bluelimemedia
2. How do we tackle different screen sizes? CSS Plugin
3. CSS Method Hide/Reveal content at certain breakpoints Example - Underscores.me < b u t t o n c l a s s = " m e n u - t o g g l e " > M e n u < / b u t t o n > . m e n u - t o g g l e { d i s p l a y : n o n e ; } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 6 0 0 p x ) { . m e n u - t o g g l e { d i s p l a y : b l o c k ; } }
4. Handy Tutorial To learn more on how to use javascript at different screen size, check out Paul Underwood's tutorial: Checking Media Queries With Javascript
5. This method can be applied to anything . h i d e - o n - l a r g e { d i s p l a y : n o n e ; } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 6 0 0 p x ) { . h i d e - o n - s m a l l { d i s p l a y : n o n e ; } . h i d e - o n - l a r g e { d i s p l a y : b l o c k ; } }
6. Example - Emotive BC
7. CSS pros & cons Pro Super simple Can be applied to as many breakpoints as you want Cons HTML content is still there
8. Plugin Method Mobble provides conditional functions for detecting a variety of mobile devices and tablets. It is developed using Mobile_Detect which is also used by numerous others plaftorms. Mobile_Detect is a lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.
9. How to Use Mobble? Use Conditionals < p h p i f ( i s _ m o b i l e ( ) ) { d o s o m e t h i n g } e l s e i f ( i s _ t a b l e t ) { d o s o m e t h i n g s l i g h t l y d i f f e r e n t } e l s e { d o s o m e t h i n g t o t a l l y d i f f e r e n t } ? >
10. Example - Emotive BC < p h p i f ( i s _ m o b i l e ( ) ) { g e t _ t e m p l a t e _ p a r t ( ' c a r o u s e l - m o b i l e ' ) ; } e l s e { g e t _ t e m p l a t e _ p a r t ( ' c a r o u s e l ' ) ; } ? > Carousel mobile displays smaller images than the other one.
11. Example 2 - Mendoza & Pangan < p h p i f ( i s _ m o b i l e ( ) ) { g e t _ t e m p l a t e _ p a r t ( ' h e a d e r - m o b i l e ' ) ; } e l s e { g e t _ t e m p l a t e _ p a r t ( ' h e a d e r ' ) ; } ? > The navigation is displayed above the logo on the mobile phones but appears below the content on desktops and tablets.
12. Mobble pros & cons Pro Super simple You can target specific platform (eg: is_android, is_ios(), is_blackberry(), etc... ) It's free and well maintained Cons It relies on the browser user-agent string which is not perfect Needs to be tested on the platform
13. Thank You Christine Rondeau @bluelimemedia
14. ← → 1 / 13 Go to slide: Go