This article was originally posted on net magazine.
## Follow along as Garrett Winder of Erskine Design talks us through the process of going mobile with ExpressionEngine using a dedicated approach. In the last few years mobile has absolutely exploded. It's the way people shop, browse the web and check email and the numbers are increasing exponentially. Because of this, we need to shift our focus on building websites explicitly for the desktop and really start thinking about the context that our work is being seen in and interacted with. We need to rethink the way we're building websites. In this tutorial we're going to run through some ways to integrate mobile into our ExpressionEngine workflow. ## Getting started To follow along you'll need a licensed copy of ExpressionEngine 2. You can download it as well as find [step by step installation instructions](https://docs.expressionengine.com/v2/installation/index.html) from the [ExpressionEngine website](http://expressionengine.com/). You'll also need to download the core files for our example site, [Know your viral enemies](https://github.com/erskinedesign/Mobile-website-tutorial), a fictitious educational website about common viruses and why we need to wash our hands!  ## Dedicated vs responsive, in a nutshell When it comes to a mobile web experience we've got two options: dedicated and responsive. A dedicated mobile website is a mobile optimized version of our website that usually resides on its own domain or subdomain. With a dedicated approach we can easily give our users the option to view desktop or mobile. We've also got more control over resource optimization and load time.  A responsive website is created with a mix of fluid layouts, flexible images and media queries. It gives us a tailored experience based on the width of the browser window using the same HTML and CSS. This approach also forces us to think about website structure and create cleaner, more focused design and front-end code. Since this is all done in the CSS, we won't go through that in this tutorial (though I have included a responsive version of the example site for your rummaging).  So, without further ado, let's get started. ## The dedicated approach With a dedicated approach, we can have two versions of a website using the same installation of ExpressionEngine. ### Create a global variable in `index.php` First off, we need to create a [global variable](https://docs.expressionengine.com/v2/templates/globals/user_defined.html) that we can use to tell our templates to load the full or mobile version of our website. Open up your `index.php` file and find the following line: `$assign_to_config['global_vars'] = array(); // This array must be associative` Right below that line, we need to add the following:
/* Setup our global variable array */
$global_vars = array();
/* gv_site_version: set to 'full' or 'mobile'; */
$global_vars['gv_site_version'] = 'full';
/* Assign to global vars in EE 2 */
$assign_to_config['global_vars'] = $global_vars;
$system_path = '../domain.com/system';
/* gv_site_version: set to 'full' or 'mobile' */
$global_vars['gv_site_version'] = 'mobile';
<div class="notification">
<p><a href="">Hey, there’s also a mobile site!</a></p>
</div>
{exp:mobile_detect}
{if mobile}
<div class="notification">
<p><a href="">Hey, there’s also a mobile site!</a></p>
</div>
{/if}
{/exp:mobile_detect}