Posts in the ‘mobile web’ Category
If you are going to the trouble of designing mobile sites for different devices and screen sizes, then you should be taking into account that many smartphones have the abilitiy to change orientation from portrait to landscape, giving a much wider screen width.
You can use Javascript to register the change in orientation, but how can you deliver a different user experience when the user flips the phone?
With bemokoLive, it’s very easy to use the context rules to change the behaviour of your site when the user flips the device.
Context rules allow you to change the behaviour of the bemoko rendering engine with parameters on the URL. In this case we can use some javascript to note the change in orientation and call a URL with the relevant parameters set. The javascript looks like this:
<script type="text/javascript">
var landscape = isLandscape();
function updateOrientation(){
var landscapeToUpdate = isLandscape();
[#--
Only redirect if landscape flag has changed
--]
if (landscape != landscapeToUpdate) {
landscape = landscapeToUpdate;
if (landscape) {
window.location = "${intent.serverRelativeSiteEndPoint}/landscape/${intent.name}"
} else {
window.location = "${intent.serverRelativeSiteEndPoint}/${intent.name}"
}
}
}
function isLandscape() {
switch(window.orientation) {
case -90:
case 90:
return true;
break;
default:
return false;
}
}
</script>
The important piece in this script are the lines where the window.location is changed. Note the addition of the landscape parameter. As this parameter is before the intent in the URL it acts as a context rule.
To get bemokoLive to recognise the context rule, it has to be registered in the site-config.xml
<context> <rules> <rule name="landscape"> <param action="add" name="type">l</param> </rule> </rules> </context>
This makes bemoko add a parameter called “type” to the context if the landscape context rule is present. We can use this parameter to change the device category recognition for the device, again in the site-config.xml
<uigroup>
<ui name="landscape" expr="intent.get('type') == 'l'" fallback="ajax" />
</uigroup>
This change has the effect of overidding the standard device identification, adding the landscape category into the fallback chain. This means that any files or fragments in the landscape category will be delivered to the device, allowing you do do anything from simply delivering wider images to changing the whole look and feel of the page.
You can find more on context rules at http://bemoko.com/wiki/Context_Rules
For a live demo showing one use of context rules, take a look at http://bemoko.com/addons/imagetranscoder/test/i – the alternative rendering links at the bottom of the page use context rules to change the way the device is recognised.
- More than 80% of surveyed UK web users do not trust emails and web sites that do not effectively represent familiar brands
London, 20 April 2009: Mobile internet software specialist, bemoko Ltd today announces a co-operation agreement with Monotype Imaging Inc., a leading global provider of text imaging solutions, to provide expertise to Monotype Imaging customers by introducing them to bemoko’s range of mobile marketing tools, which are designed to deliver improved mobile web presence and represent brands more effectively across fixed and mobile connected devices.
Recent research conducted by Opinion Matters and commissioned by Monotype Imaging revealed that the vast majority (86%) of approximately 2,000 survey respondents in the UK would not trust a communication from a source they often use, such as a bank, if the details were sent in an unfamiliar font. Millions of people are now receiving email messages and surfing the web on mobile devices. However, the sheer number of mobile platforms available (considering the many different operating systems, screen resolutions and other variables) means that brands struggle to ensure their identity is represented effectively. bemoko is working with Monotype Imaging to provide expertise for brands looking to exploit the mobile opportunity with consistency of experience across different mobile devices.
bemokoLive™ has been specially developed to support the rapid creation of mobile web sites that can deliver relevant and brand recognisable content to mobile devices, regardless of screen size, operating system or other characteristics.
Julie Strawson, Director of Marketing, Europe, Monotype Imaging Ltd, said; “Even with most advanced screen technology, poorly designed and delivered text raises suspicions amongst users that legitimate communications are spam or phishing scams. Our goal is to educate customers, and, through the process of introducing bemoko to our customers, raise awareness of the opportunities for delivering online branded experience to the desktop and also across mobile phones.”
The co-operation agreement between bemoko and Monotype Imaging will allow creatives building multi channel sites with bemokoLive™ to be able to engage more easily with both companies to help ensure that a new site can go live fast, and have the confidence that logos and font types will be rendered correctly onto target mobile devices.
Mat Diss, Founder, bemoko said: “For branding on the mobile web to be effective it is essential that people believe that a communication is genuine – if they do not the effect will be to destroy brand trust not to build it. Working with Monotype Imaging will help us to facilitate logos, font types and content displaying effectively on a mobile device, enabling organisations to represent their brand more effectively in the mobile space.”
-Ends-
About bemoko:
bemoko (www.bemoko.com) is the leading innovator in flexible mobile web solutions providing a comprehensive platform for delivering compelling mobile web sites. It provides a multi-device, multi-channel delivery platform for mobile content, designed with flexibility and speed of deployment in mind. For more information: www.bemoko.com
Monotype is a trademark of Monotype Imaging Inc. registered in the U.S. Patent and Trademark Office and may be registered in certain jurisdictions.
For further information please contact:
bemoko
Chris Bignell, XL Communications Ltd
+44 (0)7834 020460
In this tutorial we will start exploring some of the features that bemokoLive provides to allow you to develop dynamic, intelligent and reusable multi-channel websites.
We will start with a run through of intents – that is, mapping what a user wants to do – through to extending your website using the plugin architecture to integrate dynamic content into your pages. Along the way we will again look at some best-practices that can be applied to speed up your own development work and some of the features the bemokoLive provides to add intelligence to your pages.
This is an extract from our new tutorial on building dynamic sites using the bemokoLive platform. If you would like to read more, please download the full tutorial from our developer wiki at http://bemoko.com/wiki
iPhone Apps – the current sensation in marketing circles. Every brand wants a piece of the iPhone action. Are brands jumping on this bandwagon as part of an overall mobile strategy or is it just the current trendy thing to do? Are brands becoming pre-occupied with mobile apps?
Many people forget that an iPhone app can only be used by people who have an iPhone. Whilst the iPhone is undoubtedly popular, it only has at most 5% of the market, so brands are effectively ignoring a majority of their consumers. Can this really be part of a considered mobile strategy?
There are a number of solutions to this problem:
1) Ignore it.
2) Create apps for other devices. This is expensive as it means a seperate development for each class of device, in a different programming language
3) Get the best of both worlds with a combined app and mobile web strategy. This can reach more consumers for a lower .
Save money, get a bigger audience
If you could have a solution that delivered the coveted iPhone app and also addressed consumers on all other devices you would have maximum coverage for your brand. And if it cost less than developing the native iPhone App, what’s not to like?
Using the latest release of the bemoko multi-channel web development framework, web developers can create a mobile website which works on all devices. The framework very easily allows the site to be tweaked for the iPhone, allowing it to be styled as an app with all the sliding page transitions and fancy effects associated with an app. So now you have a website that looks like an app, the icing on the cake comes with our integration of the PhoneGap framework to wrap the website in native code so it can be placed in the app store as a normal app and downloaded by consumers.
Now you have the iPhone App for the iPhone users and also a website that can be used by all your consumers whatever device they are on. And, because developing a website is much cheaper than developing a specialised app, you’ve only paid a fraction of the price of a native iPhone app with a limited audience.
Finally, a mobile strategy to keep everyone happy!
bemoko today launched the mobile website for the 2009 Doha Tribeca Film Festival and it’s been featured online in Mobile Entertainment.
Have a read of the article here and take a look at the site for yourselves at dtff.bemoko.com
… or in other words we can readily synchronise local browser storage with back-send server persistent storage. This is one of the fundamentals of compelling off line web applications.
So a little background. You may know that you can store data in your local browser database with javascript like …
1 2 3 4 5 6 7 8 9 10 11 12 13 | function store() { if (window.localStorage) { var count=window.localStorage.getItem("count"); if (!count) { count=0; } count++ window.localStorage.setItem("count",count); } } window.onload = function() { store(); } |
and you can even see it in action here, if you got a decent browser such as the latest iPhone 3, Firefox 3.5, Safari 4.
But this ain’t much good if you can’t get this data back to the server to do something useful with it, e.g. share with friends, share with your other devices, keep a backup, send a message … I could go on.
So what we really need is a way to easily listen out to storage events and deal with it in one place. Yep, we could create our own Javascript framework to do this and handle getters and setters, but that sounds nasty to me.
Instead we can know use the onstorage attribute on the HTML body tag to hook into a function that will handle all of these call backs based on local stored data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function store() { if (window.localStorage) { var count=window.localStorage.getItem("count"); if (!count) { count=0; } count++ window.localStorage.setItem("count",count); } } function handleOnStorage() { myFunctionToSendDataToServer(event.key, event.newValue, event.oldValue); } window.onload = function() { document.body.setAttribute("onstorage", "handleOnStorage();"); store(); } |
Take a look at it in action here in the bemoko mobile test suite. It works on iPhone 3 and Safari 4. You can even see the complete code here.
With the iPhone 3.0 firmware released today, I thought I’d show you how to access one of the features I’ve been most looking forward to – support for the geolocation API in Safari means I can now create location aware websites.
This will be just a quick demo to retrieve and display the current longitue and latitude of your phone, along with a googlemap so we can see if the results are right. The more interesting applications will come….
To do this we’ll use javascript and the newly added Navigator.Geolocation interface to call the getCurrentPosition() function to retrieve the current longitude and latitude of the phone, which we’ll display and pass to the googlemaps API.
The code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iPhone 3.0 geolocation demo</title> <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"/> <script> function handler(location) { var message = document.getElementById("message"); message.innerHTML ="<img src='http://maps.google.com/staticmap?center=" + location.coords.latitude + "," + location.coords.longitude + "&size=300x200&maptype=hybrid&zoom=16&key=YOURGOOGLEAPIKEY' />"; message.innerHTML+="<p>Longitude: " + location.coords.longitude + "</p>"; message.innerHTML+="<p>Latitude: " + location.coords.latitude + "</p>"; message.innerHTML+="<p>Accuracy: " + location.coords.accuracy + "</p>"; } navigator.geolocation.getCurrentPosition(handler); </script> </head> <body> <div id="message">Location unknown</div> </body> </html> |
The results:
-
- iPhone OS 2.2.1
-
- iPhone 3.0
-
- iPhone 3.0 – I am here!
Try it for yourself by pointing your Safari browser at http://bemoko.com/blog/iphonegeo.
Update 27/7/2009: I noticed the zoom level on the google static map API wasn’t being set so the map was zoomed all the way out. I’ve added a default zoom for the demo code above. Not sure if thats a new requirement from Google’s side?