Difference between revisions of "6CC001 Workshop - Mobile"

From mi-linux
Jump to navigationJump to search
 
(3 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
The easiest way to create a mobile version of a website when using a Web Framework is to use the helpers provided.
 
The easiest way to create a mobile version of a website when using a Web Framework is to use the helpers provided.
  
For example CodeIgniter features a [http://ellislab.com/codeigniter/user-guide/libraries/user_agent.html is_mobile() helper] that you can use to load different views in your controllers (desktop or mobile):
+
For example CodeIgniter features a [https://codeigniter.com/user_guide/libraries/user_agent.html is_mobile() helper] that you can use to load different views in your controllers (desktop or mobile):
  
 
<pre>
 
<pre>
Line 23: Line 23:
  
 
== Responsive grid ==
 
== Responsive grid ==
 +
 +
Alternatively you could use a responsive grid/framework. The 2 most popular choices are:
 +
* [http://foundation.zurb.com/ Foundation]
 +
* [http://getbootstrap.com/ Bootstrap]
 +
 +
Getting started tutorials:
 +
* [http://getbootstrap.com/getting-started/ An overview of Bootstrap, how to download and use, basic templates and examples, and more.]
 +
* [http://foundation.zurb.com/docs/index.html Getting started With Foundation is easy.]

Latest revision as of 14:40, 5 October 2015

Main Page >> Advanced Web Technologies >> Workbook >> Week 08

Framework helper

The easiest way to create a mobile version of a website when using a Web Framework is to use the helpers provided.

For example CodeIgniter features a is_mobile() helper that you can use to load different views in your controllers (desktop or mobile):

if ($this->agent->is_mobile('iphone'))
{
    $this->load->view('iphone/home');
}
else if ($this->agent->is_mobile())
{
    $this->load->view('mobile/home');
}
else
{
    $this->load->view('web/home');
}

Responsive grid

Alternatively you could use a responsive grid/framework. The 2 most popular choices are:

Getting started tutorials: