This chapter will give you a quick start into delivering different content to different devices, such as mobile phones. In the chapter on Browser detection and robots (search engines), you will find a more in-depth introduction. The template reference at the end of this Cookbook lists all options for the browser object.
Delivering content to mobile devices is becoming an increasingly important issue for web developers. Whereas devices like tablets handle normal websites well, the majority of mobile phone users benefit from custom templates, delivering content for smaller screens.
Some design issues can be handled using the media="handheld" versus media="screen" property in the link tag:
<link rel="stylesheet" type="text/css" href="...mobile.css" media="handheld"/> <link rel="stylesheet" type="text/css" href="...screen.css" media="screen"/>
However, it is more elegant to serve custom pages for different devices. Among other factors, the amount of data downloaded can be reduced if you don't deliver parts of your page which are not meant for mobile devices - rather than just "hiding" them with CSS.
Here a simple example of how Newscoop can display a sidebar on the page, but only if the client does not use a mobile device:
{{ if $gimme->browser->ua_type != "mobile" }}
{{ include file="set_setname/_tpl/sidebar.tpl" }}
{{ /if }}
Change the path of the included file to match your template package. You can use the same logic for calling CSS files in the header:
{{ if $gimme->browser->ua_type == "mobile" }}
<link href="http://{{ $gimme->publication->site }}/templates/set_thejournal/_css/mobile.css" media="handheld" rel="stylesheet" type="text/css" >
{{ else }}
<link href="http://{{ $gimme->publication->site }}/templates/set_thejournal/_css/style.css" media="handheld" rel="stylesheet" type="text/css" >
{{ /if }}
If you want to deliver content more specifically for different browsers on mobile devices, read the chapter on browser detection. This will enable you, for example, to display links to you iPhone App only if the device is an iPhone. In a similar manner, you can handle media for different browsers as well. For instance, if the device does not support Flash, don't display the Flash player, but a link to the file.
Note: there might be issues with caching systems. If you encounter a problem with browser detection when testing your Newscoop site, switch off the cache and see if that fixes the problem.
With modern CSS3 capable browsers you can also make use of the media query selector. Media queries allow you to change your design to the context with which it's being viewed. There are two main methods with which to call media queries, a single file or via includes.
In your CSS you can specify which CSS file to call in each specific circumstance. For example in the context of an iPad or other tablet with a resolution less than a modern computer but more than that of a mobile telephone.
The code can either be placed in a stylesheet, which we advise, or in the <head> of your site.
@media only screen (and min-width: 768px) and (max-width: 1024px) {
body {
background-color: #000;
}
}
@media only screen (and min-width: 768px) and (max-width: 1024px) {
@include url(ipad.css);
}
There has been error in communication with Booktype server. Not sure right now where is the problem.
You should refresh this page.