You are currently browsing the archives for the mobile web design category.
05/08/2008 by nicola.
I’ve tried uploading a version (not very much different to yesterday’s) to Voxeo and testing through Skype but I keep getting “an internal error has occurred”. The voicexml appears to be valid. The xhtml is valid, I’m still not 100% sure about the JavaScript. You can’t check the whole thing on the regular w3 validators. I am too tired to process any more code tonight.
In terms of saving something as a favourite, via a cookie downloaded to the device, it appears to depend on different devices and manufacturers, session cookies appear to work across all, but persistent cookies may disappear once phone is switched off.
In theory, it should be possible to create a series of voicexml forms referenced in an xhtml+voice page which allow someone to choose what type of web coding template they would like to receive and then when the final form is submitted, a mouseclick or spoken event should send a message to the server to deliver back the output of those choices.
Its similar in principle to any type of online shopping. Once you have completed payment an invoice is generated - either on the final ‘thank you’ page or a ‘confirmation that it has been emailed to you’ page. As with a milkshake order, it should be possible to return a receipt of your order as a text file after you have completed the order, so sending a text file back to the user with an xhtml, RSS, php or whatever type of coding template inside it, which can be then saved to the phone or device should be no different.
A guess of how to do it would be to put templates in a mysql database then add php to the original xhtml+voice page to tell the server to fetch the template and include it in an email/SMS back to the customer. I know php has code for email options and for attaching files, I just don’t know exactly how to do it myself…yet - anyone else out there using or developing an ecommerce site tried ?
If this is all possible, it also means that someone who wanted a template might not have to actually go online at all, they could just make a phone call, make their choice and receive the template back - i.e. they would be calling (just like telebanking). Hopefully….
Will return to this later - am SO not on track to complete everything by September (maybe end of) but its still been very useful exercise, uncovering increasingly complex layers of coding, media and to some extent - architecture, now starting to make some connections between some of these too.
There is definitely potential to create pages of code against the 5 original strands (sms,multimodal,standalone vs mobile web/widget, pc vs web, mobile opensource vs mobile proprietary) it is possible to create both stand alone and web applications to do this, will compare and review their efficiency against the other strands in terms of device independence in the final stages of this project. Will also compare and review as to what this could mean for any mobile learning development and if it is worthwhile being deployed.
Anyway, my online persona is going to have a break for a few days, not sure what the offline one is going to be doing yet
Posted in voice, mobsessed, mobile web design | Print | 2 Comments »
05/08/2008 by nicola.
First unfinished attempt which have not either validated or checked via Voxeo. Please feel free to copy / download (will need to select page and source to view code….once I have finished version will upload as a text file)
Would also recommend waiting until have a finished attempt that is assuming anyone out there would actually want a copy of either finished or unfinished
It will hopefully provide at least half an idea. The milkshake one is more complicated in that you need branching immediately upon answering the first question. I guess it is unlikely that if you had such a wide choice of flavours that you would just tell an online form that you wanted one flavour only.
Is based around this text from post yesterday.
It is quite similar to a familiar Xhtml page except that it has slightly different DOCTYPE and namespaces to be declared. Another difference is use of time - which you can declare in seconds or milliseconds, you also should provide script so that the browser reading it, knows that you’re finished / stops listening. You also use scripting (JavaScript) to manage events such as prompts, speech input and branching etc I’m not entirely sure I’ve got my “elements by ID” in the right sequence to fit with the branching at the moment, but will inspect in more detail tomorrow
You can put the voicexml directly into the Xhtml coding or reference it as an external voicexml file (based on everything I’ve understood so far, external is better because you can reuse it, even within the same document). You set up grammar files to help with understanding i.e. a file will include typical words that you might expect to hear in response to a prompt/question.
Tomorrow’s task is to reference this unfinished version against the W3 guidelines Then put together an aural stylesheet. Another option is to record the prompts and save as audio files which you can then reference within the forms, so might do this too.
Posted in voice, mobsessed, mobile web design | Print | No Comments »
04/08/2008 by nicola.
Mentioned this on the original post about this mini-project
“…multimodal web & messaging only, so I understand it as….a future extension of mobile web and learning - giving people choice over how they interact and use information and for the purposes of this little project, looking at voice-text only. A multimodal browser will allow multiple types of input or output using a range of options - keyboard, touch, voice etc I will be looking at Xhtml + Voicexml (x+v) markup languages”
Have deliberately not done much with due to other more intense programming bits but thought it was about time to post something. Prior to May, had not attempted to write/code anything related to voice before, although wrote an audio stylesheet about 2 /3 years ago.
Trying to think this along the lines of:
1. Should it be a mobile web page with a basic form ? This would not appear to be what xhtml+voice forms have already been designed for (e.g. examples so far seem to be things like using a form to find something or order pizza etc), but was wondering whether you could create a basic mobile web page, with options when selected by voice input would return a web page template as a file, to the user either via SMS or the web. If you’re going to be online anyway, would using voice add any value in terms of speeding up the process, so you could edit / create mobile web pages on the go ? Hmmm, not sure, but having both a visual and voice form would make it more accessible.
2.If not a whole mobile web page, could it be a regular web page with voice annotated ‘elements’ on the page that could produce a similar result ? Would it be better than a mobile web form ? Don’t know yet until try.
3. Due to limits of connectivity / bandwidth / cost / time, would it be more useful just to provide a standalone mobile voice application that could produce a set of templates and is it possible ? Could any files or the code be generated by a form similar to the above to generate either a voice or text SMS? (As above, re using voiceSMS - from an accessibility point of view - is better to have both a text and voice option?) Also don’t know yet until try. (Will return to this in a future post).
Will not be starting with an example of a mobile-friendly web page just yet because as per mobile web experimenting, haven’t done that yet - however will be bringing into this project later on.
In order to accept user input i.e. someone saying something, this is coded on a web page in a similar way to inputting text, using a form. So just as each text box would appear on a page, there can be an equivalent set of code to allow for speech. The examples provided by others would be things like - ordering food or drink, so if you were using your mobile phone and wanted to quickly order something like a milkshake (why you would be ordering one via the web, but off the top of my head…) your order would be a set of speech ‘events’.
So, am wandering around in Bournemouth, UK, its a lovely sunny day and I want a milkshake - so decide to order from Shakeaway (if you are ever in Bournemouth….) so a form would include questions like
Would you like a milkshake with:
Chocolate bar
Cake
Biscuits
Cereal
etc
Would you like anything else with it?
(note - if it was Shakeaway then a mobile web form would be totally inappropriate because there are hundreds of combinations)
Strawberry
Cherry
Lime
Kiwi
Melon
etc
Dairy or alternative?
Dairy
Soya
Any extras?
No thanks
Extra icecream
bran
protein
etc
Finished?
Yes
No
Would you like to save this as a favourite?
Yes
No
All of the above could also branch out - imagine if you were standing at the counter and being asked what you wanted, with lots of choices to look at, you might need several decisions or you might have a favourite - mine is chocolate & cherry with soya - so on the form I would be saying chocolate then selecting cherry then soya, no thanks then yes to finish. However if you would like anything else (question 2) you could potentially have additional sub branches e.g. 2a being lists of chocolate bars, 2b being cake options etc etc, depending on how many flavours you wanted.
In voicexml forms, each question would be treated as its own ‘block’ so you would need to add in extra code to tell the form to go to other blocks. No idea exactly at this point how to code the cookie bit (i.e. would you like to save as a favourite, am assuming that you can save cookies on a form on mobile device in same way as pc, but haven’t looked into as yet), but it would be useful seeing as you are using a phone and want to save time being online.
What does this look like in voicexml?
Will try and post tomorrow. Am hoping that same principle of menu items would apply for this project i.e.
What kind of page do you want to create?
xhtml
RSS
php
etc
Then a branch if selected Xhtml:
What type of Xhtml?
Strict
Transitional
etc
or if selected RSS -
Is this for a podcast?
Yes
No
(If select yes, this would be telling the server that you want RSS 2.0 and automatically bring in a template with itunes, encl and other media-specific tags)
This is about as far as I have got in terms of thinking it through. There are a whole bunch of resources available and I spent (productively going round in circles) several hours trying to work out how it was possible to test anything without having access to your own voice server. I have signed up to Voxeo because you can test anything you create using Skype which sounds useful. You can also enable voice if you download Opera browser (Voice is not on Opera mini yet.)
Refs and sources for this post on delicious with voicexml tag
Posted in voice, mobsessed, mobile web design | Print | No Comments »
02/07/2008 by nicola.
This year, its changing and its going to get more fun ! If it gets easier to develop mobile apps, there’s millions of more possibilities for mobile learning too. There is an interesting article from European Communications this week summarising past, current mobile development activity and possibilities about how it could become easier.
1. Why isn’t it easy now?
In the preface of Designing the Mobile User Experience, Barbara Ballard starts off with “hundreds of devices, dozens of browsers, hundreds of implementation environments” and expands further about the variety of technology, messaging, connectivity options. I was at a DevMobi event last week and they mentioned that there are now over 3000 unique device profiles in the Device Atlas including a refrigerator
The Device Atlas is a relatively new (and amazing) output from DevMobi which has complete lists of device characteristics / specifications for mobile phones, blackberries etc across the planet.
In a post last week, George Siemens mentioned that innovation in this space has been lacking. A recent post from C. Enrique Ortiz who has many years of experience in the mobile computing space, clarifies this further by showing the differences between local and browser based application development. So - mobile application development to date has not been easily achieved, not just due to all the different devices, but the different components within the handsets as well.
2a) What innovation has there been? I’ve had some cool apps on my phone over the years (mosquito repeller that worked in Bodrum, being one of the better ones!)
I guess this also needs - b) What has been the context for mobile innovation to date ?
I am not in a position to answer this fully, but in short mobile developers have not had the time or resources to develop for multiple devices in multiple countries and have had licensing restrictions on the development. Some highly innovative mobile application development has been carried out by developers, often for their own personal use on their device of choice at the time. These have been released within communities - such as xda as well as manufacturer communities and forums - software development kits have been around for several years. Some communities and sites have been specific such as S60. Lots of apps are available as freeware but are scattered around the web.
3a) Why are applications not all in a central place for downloading like a Sourceforge and b) how do you know what is good or not?
Context and purpose of development as above (as well as specific commercial development by manufacturers and operators alike). Two more sets of developer communities have appeared for developing apps for iPhone and Android. Device Atlas is also a start and there are initiatives afoot to create more central ‘repositories’ of accessible applications that can be downloaded and modified. For example, the Android Developer Challenge recently released some screenshots of the 50
re b) As with any opensource - how do you decide - look at resources, check the ‘readme’ documentation, check online reviews and ask internal and external colleagues.
4. Ok, so Android is opensource - developers can build apps, what else ?
Ajit Jaokar’s ‘Android crossing the chasm’ post, his ‘eleven architectures of the mobile web 2.0′ post and not ‘comparing ecosystems with operating systems’ post explain that Android with its development of an open stack releases the potential for others to not just be application developers, but also device manufacturers because they can now afford to develop them (hmmm Nikia phones anyone
).Google as a web giant with extensive web application development and web communities can explore where it is appropriate to bring these into the mobile space. Andreas Constantinou on the Vision Mobile blog, describes Android as being similar to a browser on steroids
If you are interested in further details, I highly recommend both Ajit’s blog and book, as a non-industry specialist, I find it both readable and insightful.
5. What about other ‘open’ mobile foundations ?
The two most well-known are Limo and recently Symbian foundations which will both provide opportunities for royalty-free software development and in the case of Symbian foundation, backwards compatibility to current device versions such as S60 3rd editions and others.
6. I still don’t really get where the mobile web fits into all of this or why its important?
We know that we have been able to create content via the web, reuse, modify and distribute it via the web. We also know that with web2 apps and rise of web-based social networks, we can collaborate with others to produce and update content regularly, depending on how/when/why/where users have connected with the content. With the development of the mobile web, you can also create and publish content using the web and it might be possible to avoid the development problems highlighted above - such as device interoperability and higher cost, (and speed to market?). With mobile phones currently outnumbering computers in terms of personal or group ownership, there may be chances that some people’s first or early experiences of the web at all, could be via a mobile phone or similar device.
The device, context and purpose are also highly significant here - you are using a mobile device because you are on the move, you want to find relevant things quickly, connect quickly, not spend too much time browsing and fiddling around with the keypad or touchscreen, connect with other people quickly, maybe collaborate on work-related projects as well. Wifi, bluetooth, RFID, NFC and GPS provide a range of possibilities for getting real time location-relevant information.
Mobile marketing thoughts suggest that because of this relevance of data based on where you are and what you are doing, that mobile advertising may be more successful. Admobs live data concurs with this.
Matt Lewis suggested that using a browser to develop and deploy applications opens up possibilities for non-development specialists to have a go too (mobile widgets being a good current example of this). Gábor Török provides an overview of the different environments compared to a browser. He agrees to an extent but suggests that the proliferation of mobile browser versions and their current limits in terms of interaction / rich functionality may make it more complex.
7. So how can we develop mobile web content that is going to work, be enjoyable and useful ?
My journey into mobile web is documented on this site and its ongoing. One of the best resources available is the devmobi community website. Devmobi are part of Dotmobi whose investors (incl Google, Microsoft, Nokia, Sony Ericsson etc etc) have put money into the company to help ’standardise’ the mobile web and provide resources for anyone who wants to create a mobile web presence. Rudy Da Waele’s M-Trends is another good resource for mobile web development ideas. For mLearning specific ideas, mLearnopedia.com is a fantastic starting place.
If you are interested in mLearning but not sure how much technical understanding you need in order to develop content, the rise of the mobile web and the opening up of development opportunities will lead to you being able to access something on the ‘front end’ so that you can develop without needing to code or worry about how to make it work on devices. Barbara Ballard’s choice of book title is useful - it is not designing mobile applications, but designing the mobile user experience. They are mobile - moving around, what do they need or want? As with any other learning experience that you wish to create - who are your users, context, purpose etc . Device considerations come in a lot further along the process (although knowing about them / gaining an understanding of some of their characteristics can help and may make the process more cost-effective etc)
I will post back about this over the next few months as my ‘mproject’ continues, I would love to hear from you in the meantime.
For now, its back to Python

I am going to Open Tech Day this Saturday so have just attempted to download Android SDK and the Eclipse development environment (woohoo, it has pictures… well at least until I have to start typing !)

Posted in mobsessed, mproject, opensource, Mobile phones, mobile web design | Print | No Comments »
22/06/2008 by nicola.
SMS - found a brilliant SMS tutorial from developers home where I first learnt some xhtml-mp and basic when trying out mobile web coding last year. Understand some of the differences between how to send SMS between phones and pc, but have temporarily stalled - because in order to practice SMS commands - need to buy a GPRS modem and I’m still trying to find the right one I need.
Predictive text - still not got any answers, someone suggested something about using ’spell’ feature but I still can’t get it to recognise html tags etc
Priority is programming languages - attempting to learn at speed - in order to see if can do something with open source (Android, LiMo…) and / or standalone, downloadable app for mobile - so need python (S60s), Java and C++ (others) - have started learning python - using two great online tutorials/books:
Byte of Python
Learning to Program
Am not in a position to output anything much yet - do not think that realistically going to achieve python, java, c++ by September but will see. Going to Open Tech day soon, so will be attempting to look at linux too before then.
So in summary - still don’t know if can manage to ‘magic’ SMS message into a web page without resorting to having to do something via the web such as mobile ftp. Am currently trying to stay away from covering mobile & multimodal web yet i.e. if you want to do something on the mobile web, you need web connectivity, bandwidth and a compatible mobile device, so already you would not be designing an app accessible by everyone.
Links are scattered but everything so far related to this project can be found on this feed. Thanks to a great post on Ignatiawebs, about Zoho, have started trying to use that for this project but nothing of use to share from there yet.
Posted in mobsessed, mproject, mobile web design | Print | No Comments »
07/06/2008 by nicola.
This is probably going to be a very boring post but I have various strands of thoughts which are circling in my brain kind of randomly, am going to attempt to connect and explain so if you did want to, could hopefully follow my train of thoughts so far.
Background / context:
Jan 2005 When I decided to start my web design qualification - why - was doing eStuff (incl eLearning), knew some but not enough about tech side, was more interested in mStuff (incl mLearning) and how things were changing with the web - i.e. more of web2 apps seemed to appear then. I decided back then I wanted to try and do something interesting with mobile web and mLearning at the end of it. So decided to do a web qualification i.e. computer foundation / some Internet architecture / eCommerce / web design & little bit web dev, so planned path was web - mobile web - mobile learning.
Also during some of 2005/06 was in an eGov role in Poole - this role was about helping people working in the council to eEnable / transform (seeing as its now called Transformational Government) front end and back end of creating, processing and publishing of information and advice to the public. UK central government had provided a grant to all local councils to help them ‘digitise’ and there were 54 different ‘projects’ to be achieved. eLearning was not one of these but I was following some of the developments through reports like Becta’s emerging technologies series which had very useful information about trends.
Accessibility was a key issue then too because by enabling information in digital / electronic formats - i.e. information and interactions being available to everyone is a good thing, not to mention the legal implications being a public sector organisation. The key being people want choices about how they access information which may depend on context, purpose, location etc.I was spending a lot of time having lots of interesting discussions with people across the council, about different types of information and on devices that it could possibly be displayed.
Some of these discussions were with Poole Forum which was a group set up for people in Poole with learning disabilities and we were talking about various different devices and ways of accessing information. So kind of areas thinking about then were device independent web access and learning - was it possible to design and publish information that could be displayed on as many appropriate devices as possible, using just one method of development. Not sure that it is actually possible to do with one method because mobile devices more complex now but will be finding out I guess….
So now - 5 strands of thoughts
1. Backwards compatibility - text, SMS messaging and SMS web as per previous post
2. Future proofing - multimodal web and multimodal messaging. There are some resources, around about multimodal learning Cisco paper , articles . As with the lovely “web2.0″ multimodal can mean different things to different people. My context for this being multimodal web & messaging only, so I understand it as….a future extension of mobile web and learning - giving people choice over how they interact and use information and for the purposes of this little project, looking at voice-text only.
A multimodal browser will allow multiple types of input or output using a range of options - keyboard, touch, voice etc I will be looking at Xhtml + Voicexml (x+v) markup languages. I first heard about Voicexml from mobile design expert Barbara Ballard who has written lots about class based design and mobile usability - what kinds of apps are fit for what purposes and contexts etc I will be using her recent book on designing the mobile user experience to find out more.
More on multimodal to follow in next post.
3. Stand alone app vs web app - in 2008 which is going to be better and for what purpose in terms of creating, distributing and users accessing….who is the target audience for the app and who is creating it, using what device.
4. Mobile app vs pc app - is it needed at all - as above with multimodal what is the context and need.
5. Development of app - open source (Android) v …anything else which isn’t ! However can’t go near an open source community until have more web dev knowledge, I don’t think they’d appreciate someone coming along and saying what is linux all about then ![]()
6. If I had time would be looking at handwriting recognition - text but this is out of scope for now i.e I would like to finish what am doing by end of summer.
What I want to do
Create a couple of small mobile apps - bearing in mind the above 5 strands and document the process on here. I will not be documenting any other bits relating to any other learning technologies on here before September at earliest (except when I can’t help myself), its going to be tech and some random bits of carpentry stuff. First app as in previous posts is a mobile editor and depending on time, 2nd app would be a mobile screen capture app.
If anyone knows of any good resources on any of the above, would love to hear from you re delicious or whatever , thanks !
Posted in mobsessed, mproject, opensource, mobile learning, mobile web design | Print | No Comments »
02/06/2008 by nicola.
Decided to see if could happily write web pages using text messaging for initially three reasons:
a) If could put tags used regularly in predictive text it would mimic web editors already in existence on pcs
b) Templates - can easily save templates of familiar tags to save retyping each time and just delete any not needed. If a phone doesn’t have templates then can save in drafts each time and make a new message from it.
c) Ease of use on multiple handsets - different manufacturers
Why?
Still looking into options for writing web pages on the go - such as a notes editor but this will be better possibly. Some considerations of mobile web editing vs pc web editing that I discovered, below. Should also mention that had absolutely no knowledge of predictive text before this weekend, other than its existence.
Mobile
Tend to have creative thoughts on the go, do not always have laptop or pc near to hand so useful to record when thinking about them
Predictive text - entered loads of tags (can include up to approx 20 characters), don’t know if it can’t recognise words which start with symbols or its my own incompetence - but it would only pick up the words / letters inside tags so didn’t actually work. Am asking around various places to see if this is possible or not. It would be so useful to use predictive text in this way and I guess it can’t be too hard ?
Using a template and without predictive text was able to type around half a page of code before either pc or laptop had booted up
Some character limits for SMS messaging (depends on who SMS with etc) might mean paying for more than one SMS for a whole page.
When needed a bigger screen, was able to take advantage of a bigger screen than my monitor. Have looked into mobile projectors, found 3 companies but so far no definite news on release dates/pricing into models or as separate items for this year. So used TV out cable for phone and voila!

What I especially liked too, is that could mess around with colours / themes on phone to find ones that were more comfortable on my eyes, although the attached was fine too.
You can use on a digital tv if you have a DV IN socket or if like me you’ve got older tv with no DV IN; have DVD player/recorder/set top boxes all hooked up to a scart unit, can connect through the DVD player:

You may be able to do with other similar AV connection cables / stereo jacks too. TV out is a fairly new feature on phones - available on a few Nokias and have heard rumour that Sony Ericsson are putting as standard in all their new phones - don’t know for others. If anyone out there spending time right now, in hotel/BB rooms with tvs, would be interested to know if they have DV in ?
PC
There is a keyboard so fingers may be able to move more flexibly and enter coding more efficiently - also a range of sophisticated editors (e.g. highlighting rows and tags so can pinpoint errors etc) out there already.
Better for scrolling long rows of text if not using a tv screen or projector.
Getting it out there - SMS to web
Still trying to work out best way of sending SMS to web - at the moment, doesn’t appear to be an easy way of sending directly to my own webspace - many apps exist for sending from web to phone but not other way round.
SMS blogging is option because less likely to have character limits but then would have to cut and paste code into separate web page and upload into your own webspace - which is a pain. If you have set up your own SMS gateway there may be a way of avoiding this but I don’t know enough about the how, yet, to understand if it can be done.
Templates created so far (approx 15 mins to create)
XHTML transitional
CSS
RSS
These three include the most common tags that I have used when writing stuff.
Have done a PHP mini one but seeing that all I know is how to write Hello World - that is all there is in it.
Please let me know if you would like a copy of templates & provide cell/mob no - happy to SMS through if of use. Going to stick with this for now, could be very useful for snippets at least.
Posted in mobsessed, mproject, mobile web design, web design | Print | No Comments »
30/04/2008 by nicola.
What will mobile web be about?
Very nice overview from ‘Kodel’ in Belgium, if you really don’t have time to look through - slide 34 will give you the answer - but not the why - so go look at the rest too
Posted in Mobile phones, mobile web design, Uncategorised | Print | No Comments »
09/04/2008 by nicola.
Its great to see they are an official honoree in the mobile web news category, with only 15% selected from over 8000 entries !
The Voices of Africa project where hundreds of news reports / interviews have been uploaded to the site by mobile reporters across Africa. You can view the complete series and get an insight into the reporters who are sending articles and images using a mobile phone and GPRS, without the need for a pc and internet connection.
Their February update reports on the range of topics covered including foreign investments, views on political, economic change in various parts of Africa and extensive coverage of the election in Kenya and the African Cup of Nations in Ghana.
Posted in Africa, mobile web design | Print | No Comments »
07/04/2008 by nicola.
Removing the need to scream your way through designing something that can be used / viewed on a mobile device, Little Springs have put together a brilliant resource wiki
The Little Springs page on producing multimedia content for mobile distribution on their main website, provides a great overview of considerations for anyone thinking of incorporating it into mLearning.
Also some interesting thoughts on mobile multimedia twitter on the Open Gardens blog
Posted in Mobile phones, mobile learning, mobile web design, web design | Print | No Comments »