{"id":58,"date":"2011-07-21T06:39:09","date_gmt":"2011-07-21T05:39:09","guid":{"rendered":"http:\/\/blogs.kent.ac.uk\/webdev\/?p=58"},"modified":"2011-07-21T16:57:21","modified_gmt":"2011-07-21T15:57:21","slug":"kent-mobile-web-application","status":"publish","type":"post","link":"https:\/\/blogs.kent.ac.uk\/webdev\/2011\/07\/21\/kent-mobile-web-application\/","title":{"rendered":"Kent mobile web application"},"content":{"rendered":"<p>The web development team have recently finished the first\u00a0iteration\u00a0of the new University of Kent mobile web application, and we hope to get something usable up for you to look at\u00a0soon.<\/p>\n<h2>Why not native?<\/h2>\n<p>The decision was made to approach the mobile demographic with a web app as it will provide us with the easiest way to reach multiple devices.\u00a0 A look at our web stats reveals that the split is about 70% on iOS, 18% on Android, 7% on BlackBerry, with the rest being made up of Symbian, Nokia and Windows. Whilst this shows that there would be a vast amount of the student population able to use a native app (should we have developed both iOS and Android versions), it was felt that this would still have excluded too many people. To <a href=\"http:\/\/developer.yahoo.com\/blogs\/ydn\/posts\/2010\/10\/how-many-users-have-javascript-disabled\/\">quote yahoo<\/a>:<\/p>\n<blockquote><p>While the percentage of visitors with JavaScript disabled seems like a low number, keep in mind that small percentages of big numbers are also big numbers.<\/p><\/blockquote>\n<p>Ok, so we&#8217;re not dealing with JavaScript in this case, but the principle still holds true.<\/p>\n<p>So what&#8217;s the common ground? The device&#8217;s web browser.<\/p>\n<p>The one thing that is true of the mobile market more than any other is that it constantly pushes the boundaries of technology. \u00a0The smartphone market is leading the way with their support for HTML5, CSS3 and all the other buzzwords that are being thrown about at the moment. \u00a0This approach means that we can create one solution that fits all, with some graceful degradation for older devices &#8211; something that IE6 has forced any web developer worth their weight be good at.<\/p>\n<h2>What&#8217;s in it for me?<\/h2>\n<p>The team worked on getting some of the most requested features from the <a href=\"http:\/\/www.kent.ac.uk\/is\/surveys\/2010\/mobile\/mobilesurvey11.pdf\" target=\"_blank\">student-focused mobile devices survey [pdf]<\/a>, which took place earlier in the year. We decided in the first\u00a0iteration\u00a0to focus on:<\/p>\n<ul>\n<li>Feedback system, including statistics<\/li>\n<li>PC availability<\/li>\n<li>(Simple) Campus map<\/li>\n<li>Connectivity guides<\/li>\n<li>Timetables<\/li>\n<\/ul>\n<h2>Technology<\/h2>\n<p>To help us do some rapid development we chose to use the <a href=\"http:\/\/www.jquerymobile.com\">jQuery Mobile<\/a> framework. This allows developers to write simple html, with some simple standard attributes. \u00a0The javascript then loads in the page and presents you with a standard view on your device.<\/p>\n<p>For mapping we chose to use <a href=\"http:\/\/www.openstreetmap.org\/\">OpenStreetMap<\/a> as it provides the best map of campus, but we can edit it if we want to improve it. To display these tiles we are using the <a href=\"http:\/\/leaflet.cloudmade.com\">leaflet<\/a> javascript library which provides very similar functionality to the Google Maps interface which most users are used to.<\/p>\n<p>We have also started to look into <a href=\"http:\/\/www.sencha.com\/products\/touch\/\">Sencha touch<\/a> as a delivery method for some pages.<\/p>\n<h2>So whats it look like?<\/h2>\n<p>Here are some screenshots of what it looks like at the moment. \u00a0In the next iteration the design of the launch page will be enhanced.<\/p>\n<div class=\"mceTemp\">\n<figure id=\"attachment_65\" aria-describedby=\"caption-attachment-65\" style=\"width: 200px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/home.jpg\"><img loading=\"lazy\" class=\"size-medium wp-image-65\" title=\"home\" src=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/home-200x300.jpg\" alt=\"\" width=\"200\" height=\"300\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/home-200x300.jpg 200w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/home.jpg 320w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><figcaption id=\"caption-attachment-65\" class=\"wp-caption-text\">Launch page<\/figcaption><\/figure>\n<dl id=\"attachment_80\" class=\"wp-caption alignleft\" style=\"width: 210px;\">\n<dt class=\"wp-caption-dt\"><a href=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/feedback1.jpg\"><img loading=\"lazy\" class=\"size-medium wp-image-68 \" title=\"feedback\" src=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/feedback1-200x300.jpg\" alt=\"\" width=\"200\" height=\"300\" \/><\/a><\/dt>\n<dd class=\"wp-caption-dd\">Feedback page<\/dd>\n<\/dl>\n<\/div>\n<figure id=\"attachment_67\" aria-describedby=\"caption-attachment-67\" style=\"width: 200px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/pc.jpg\"><img loading=\"lazy\" class=\"size-medium wp-image-67\" src=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/pc-200x300.jpg\" alt=\"\" width=\"200\" height=\"300\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/pc-200x300.jpg 200w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/pc.jpg 320w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><figcaption id=\"caption-attachment-67\" class=\"wp-caption-text\">PC availability<\/figcaption><\/figure>\n<figure id=\"attachment_68\" aria-describedby=\"caption-attachment-68\" style=\"width: 200px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/pcmap.jpg\"><img loading=\"lazy\" class=\"size-medium wp-image-68\" src=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/pcmap-200x300.jpg\" alt=\"\" width=\"200\" height=\"300\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/pcmap-200x300.jpg 200w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/pcmap.jpg 320w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><figcaption id=\"caption-attachment-68\" class=\"wp-caption-text\">PC availability map<\/figcaption><\/figure>\n<figure id=\"attachment_66\" aria-describedby=\"caption-attachment-66\" style=\"width: 200px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/map.jpg\"><img loading=\"lazy\" class=\"size-medium wp-image-66\" src=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/map-200x300.jpg\" alt=\"\" width=\"200\" height=\"300\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/map-200x300.jpg 200w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/map.jpg 320w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><figcaption id=\"caption-attachment-66\" class=\"wp-caption-text\">Campus map<\/figcaption><\/figure>\n<figure id=\"attachment_64\" aria-describedby=\"caption-attachment-64\" style=\"width: 200px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/help.jpg\"><img loading=\"lazy\" class=\"size-medium wp-image-64\" src=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/help-200x300.jpg\" alt=\"\" width=\"200\" height=\"300\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/help-200x300.jpg 200w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/07\/help.jpg 320w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><figcaption id=\"caption-attachment-64\" class=\"wp-caption-text\">Help guides<\/figcaption><\/figure>\n<h2>But what about&#8230;?<\/h2>\n<p>This is only the start of this project, there is still more development to come. That means if you think something is missing, it may be on its way soon.<\/p>\n<p>It is important to us that we develop things that users want. The best way for us to find out is if you tell us, so we have set up a feedback form which will collect your comments.<\/p>\n<p>Alternatively please leave a comment on this post.<\/p>\n<h2>Where is it?<\/h2>\n<p>Initially it will be at <a href=\"http:\/\/www.kent.ac.uk\/mobile\">www.kent.ac.uk\/mobile<\/a>. For now\u00a0this space contains a proof of concept showing simple PC\u00a0availability, but soon we will add the features you see above.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The web development team have recently finished the first\u00a0iteration\u00a0of the new University of Kent mobile web application, and we hope to get something usable up &hellip; <a href=\"https:\/\/blogs.kent.ac.uk\/webdev\/2011\/07\/21\/kent-mobile-web-application\/\">Read&nbsp;more<\/a><\/p>\n","protected":false},"author":62,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[125],"tags":[1071,8967,841,1064,8969,843,8970,8974,8968],"_links":{"self":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/58"}],"collection":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/users\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":16,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/58\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/58\/revisions\/78"}],"wp:attachment":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/categories?post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/tags?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}