Our blog has moved!
Inline with the new refresh of developer.vodafone.com we now have an integrated blog. As such all future Vodafone developer blog posts will be found at, http://developer.vodafone.com/blog
We’ve updated developer.vodafone.com
Check out our refreshed developer website! We’ve been listening to your feedback and have been working hard to rid our site of pdf’s, there’re still a few to go but we hope to be relatively pdf free very soon, hurrah!
We’ve also integrated our blog, added a Labs area for our Open Source projects and content, and the site is fully searchable now!
In the coming months we’ll be adding more content, features and functionality to the site so please bookmark us and keep an eye on our updates.
Vodafone 360 Shop Image Style Guide
Are you looking to publish your application to the Vodafone 360 Shop? Then before you do, please check out the Vodafone 360 Shop Image Style Guide here.
The Vodafone 360 Shop Image Style Guide is a document for anyone that wants to submit content to the Vodafone 360 Shop. The guide contains information regarding the necessary imagery that is required when submitting content to the Vodafone 360 Shop.
Below are a couple of examples from the guide,
Vodafone Mobile Clicks 2010 – last few days to enter!
Registration for Vodafone Mobile Clicks 2010 ends at midnight on August 22nd, 2010, don’t miss out! Find out more here www.vodafonemobileclicks.com and follow the news via the Twitter tag #vmc2010.
London Ajax User Group Happening: JavaScript MiniConf
On Saturday18th Sept we’ll be hosting the London Ajax User Group Happening: JavaScript MiniConf at our offices here in London.
This is a great opportunity to network and learn from likeminded JavaScript developers.
The current schedule looks like this:
- 9:00am: Meet & Greet, Introduction
- 9:30am: Talks about Client-side JS
- 12:00pm: Lunch
- 12:45pm: Talks about Server-side JS
- 2:30pm-4:30pm: Talks about Mobile JS
- 4:30-5:00 Wrap-up
- 5:00-? Union Bar
Find out more about the event, see who’s attending and sign up here.
Directions to the Vodafone Paddington offices can be found here – How to get to One Kingdom Street.
Vodafone Mobile Clicks Open to Spanish Entrants
Hola todos! Vodafone’s Mobile Clicks competition is now well underway with registration open until August the 22nd. For those of you who are unaware, the aim is to find the best mobile internet startup from participating countries, with entrants competing for a total prize fund worth 150,000 euros! The winners from each country are invited to the PICNIC event in Amsterdam in September where the overall winner and runner up will be selected.
After last year’s success in the Netherlands and United Kingdom, the competition has been extended to include Portugal. Now seeing the interest generated among the rest of Europe, Vodafone are delighted to announce that they will also be opening Clicks to Spain! This means a whole new wave of talent will be joining us so don’t miss out.
If you would like to know more about the competition or how to sign up then head over to vodafonemobileclicks.com and don’t forget to check out Mobile Monday’s blog post too. You can also follow the action through Twitter using the tag #vmc2010.
Building Scalable Mobile Widgets – With Examples
This is the first in a series of posts that will attempt to address building mobile widgets that will scale properly between multiple devices. We will look at how we can deal with multiple screen resolutions, varying screen PPI (pixel per inch) densities, as well as gracefully switching between portrait and landscape modes.
This article is going to build on the concepts that were introduced in the “How to really cope with varying screen sizes and pixel resolutions in Vodafone Widgets”. Here we will actually build a sample widget that scales dynamically.
This post is going to set the stage by addressing the layout issue. Future posts will dive into more advanced topics and customizations.
The Goal
Our goal is to create a widget that will scale properly, no matter what mobile device it’s loaded on. Here are our objectives:
- Allow for dynamic resizing when switching between portrait and landscape modes
- Render properly on different screen sizes
- Render properly on screen sizes with different PPI (Pixel Per Inch) densities (using CSS media queries)
It is said that a picture is worth a thousand words. Here are two mocks showing our end result in both portrait and landscape modes.
Portrait mock:
Landscape mock:
The Markup
Since this article is meant for developers, let’s just jump into the markup. Since we’re building a basic widget here, a foundation if you would, the markup is quite simple and self explanatory.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Header Footer Sample Layout Widget</title>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
</head>
<body>
<div id="layout">
<div class="header">
<div class="header-left">
<button class="button">home</button>
</div>
<div class="header-right">
<button class="button">options</button>
</div>
</div>
<div id="containerWrapper">
<div id="container">
Your content goes here...<br/><br/>
And will grow vertically (with scrolling) as needed.
</div>
</div>
<div class="footer">
<div class="footer-text">
Footer Options
</div>
</div>
</div>
</body>
</html>
The CSS
Below is the CSS we’ve used to get this layout. Notice the use of media queries to deal with various screen PPI densities.
/* resets and font sizing */
html, body{
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
}
body {
background-color: #FFFFFF;
font-size: 1em;
}
@media all and (min-resolution: 50dpi) {
body {
font-size: 0.88em;
}
}
/* Added Media-Query support for Low resolution Nokia (I.E N95,E65…) */
@media all and (min-resolution: 96dpi) {
/* Here you can specify your own classes and attributes */
body {
font-size: 1.0em;
}
}
@media all and (min-resolution: 145dpi) {
body {
font-size: 1.13em;
}
}
/* Added Media-Query support for Medium resolution Nokia (I.E N97,Nokia 5800…) */
@media all and (min-resolution: 200dpi) {
body {
font-size: 1.25em;
}
}
/* includes Nexus One (JIL reports ~240dpi vs 252 to spec) */
@media all and (min-resolution: 240dpi) {
body {
font-size: 1.5em;
}
}
/* Main Layout */
#layout{
background-color: #FFFFFF;
color: #000000;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#container{
padding: 1em;
text-align: center;
background-color: #FFFFFF;
}
#containerWrapper{
height: 76%;
background-color: #DDDDDD;
overflow: auto;
}
/* Header */
.header{
background-color: #444444;
color: #FFFFFF;
height: 12%;
position: relative;
display: table;
width: 100%;
}
.header-left{
height: 100%;
margin-left: 3em;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.header-right{
height: 100%;
margin-right: 3em;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.button {
width: 5em;
}
/* Footer */
.footer{
background-color: #444444;
color: #FFFFFF;
height: 12%;
position: absolute;
bottom: 0;
width: 100%;
display: table;
}
.footer-text{
text-align: center;
display: table-cell;
vertical-align: middle;
}
Notice that we have set the header and footer sections to be 12% of the total available height. We did this so that we can maintain as much space for content when switching between portrait and landscape modes. You can also define the height in pixels so that you’ll always have fixed height. The choice is yours 🙂
The Results
So what does it actually look like? We use the Ripple Mobile Environment Emulator (FREE for use while in beta) for most of our testing, so here are a couple of screen shots showing off our dynamic widget in portrait and landscape modes.
Now we must also always test on real devices. Here are a couple of screen shots of our widget loaded on different phones using the Perfecto Mobile service. Access the Perfecto Mobile service for FREE, details here in the testing section.
Resources
If you’d like to get the full source code for this widgets, we invite you to visit the open source repository.
Repo: http://github.com/tinyhippos/MobileWidgets
The sample widget: http://github.com/tinyhippos/MobileWidgets/tree/master/sampleWidgets/HeaderFooterLayout/
Stay tuned for more posts in this series where we will get into more advanced topics. We will continue to enhance this widget with features like route based navigation, using the Accelerometer, GPS, as well as explore other parts of the JIL API .
Happy coding!
Dan Silivestru – CTO at http://tinyhippos.com
mobilewidgetdev.wordpress.com 