Difference between revisions of "6CC001 Workshop - Mobile"
From mi-linux
Jump to navigationJump to search (Created page with "Main Page >> Advanced Web Technologies >> Workbook >> Week 08") |
|||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
[[Main Page]] >> [[6CC001|Advanced Web Technologies]] >> [[6CC001 - Workbook|Workbook]] >> Week 08 | [[Main Page]] >> [[6CC001|Advanced Web Technologies]] >> [[6CC001 - Workbook|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 [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> | ||
| + | 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'); | ||
| + | } | ||
| + | </pre> | ||
| + | |||
| + | == 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:
