Responsive web development made easy with CSS and mobble


Christine Rondeau

@bluelimemedia

Logo

How do we tackle different screen sizes?

WordCamp Vancouver 2014

CSS Method

Hide/Reveal content at certain breakpoints

Example - Underscores.me

	
	<button class="menu-toggle">Menu</button>
	
	.menu-toggle {
		display: none;
	}
			
	@media screen and (max-width: 600px) {
		.menu-toggle {
			display: block;
		}
	}		  

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

This method can be applied to anything

	.hide-on-large {
		display: none;
	}
			
	@media screen and (max-width: 600px) {
		.hide-on-small {
			display: none;
		}
		.hide-on-large {
			display: block;
		}
	}	  

Example - Emotive BC

Emotive

CSS pros & cons

Pro

Cons

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.

How to Use Mobble?

Use Conditionals

	
<php
	if (is_mobile()) { 
		do something 
	} elseif (is_tablet) {
		do something slightly different
	} else {
		do something totally different
	} 
?>
		

Example - Emotive BC

			
<php
	if (is_mobile()) { 
		get_template_part( 'carousel-mobile' );
	} else {
		get_template_part( 'carousel' );
	} 
?>

Carousel mobile displays smaller images than the other one.

Example 2 - Mendoza & Pangan

			
<php
	if (is_mobile()) { 
		get_template_part( 'header-mobile' );
	} else {
		get_template_part( 'header' );
	} 
	?>

The navigation is displayed above the logo on the mobile phones but appears below the content on desktops and tablets.

Mobble pros & cons

Pro

Cons

Thank You


Christine Rondeau

@bluelimemedia

/