Het design sluit goed aan bij de stijl van de volledige website en alle informatie wordt opgehaald uit het (custom) CMS dat al aanwezig was. ByteMotion heeft hiervoor een speciale interface geschreven zodat alle wijzigingen/ toevoegingen die gedaan worden in de content van de website ook meteen op mobiel beschikbaar zijn.

De mobiele web applicatie versie van 045juridisch is te bekijken op de volgende toestellen:

• iPod Touch versie 3 en hoger
• iPhone versie 3 en hoger
• Android versie 2.1 en hoger
• BlackBerry Torch 9800 / 9810 / 9850 / 9860

Bovenstaande toestellen worden automatisch gedetecteerd op de homepage en worden vervolgens doorverwezen naar de geoptimaliseerde mobiele variant van de website.

Hierdoor krijgen bezoekers van My Web een optimalere portaal beleving en is het makkelijker geworden om de mobiele websites en de content te vinden en te consumeren die ze boeit.

Bij de migratie hebben wij het project management, het testen binnen een gesimuleerde omgeving, het testen op echte mobiele toestellen en het issue management verzorgd. Op 9 december is het project succesvol door ons afgerond.

Een groot aantal minder populaire Vodafone live! diensten zijn verwijderd en de structuur is vereenvoudigd zodat de meestgebruikte diensten en content prominenter aanwezig zijn.

Veel populaire mobiele internetsites binnen de categorieën weer, verkeer, e-mail en sociale netwerken zijn op de homepage opgenomen zodat bezoekers snel uitkomen op de plek waar ze naartoe willen. De Games tab staat geheel in het teken van de populairste spellen en op de Shop tab staan content diensten zoals ringtones, wallpapers, mobile TV, muziek en Welcome Tunes.

Wij hebben de implementatie van het redesign deels uitgevoerd waarbij we een deel van de modules waaruit de tabs zijn opgebouwd in Vodafone PML hebben gecodeerd en het PSD design vertaald naar geoptimaliseerde afbeeldingen. Het project is geheel door ons gemanaged en alle mobiele toestel acceptatie testen zijn door ons uitgevoerd. Daarnaast hebben we de structuur van het portaal technisch doorgevoerd binnen de diverse backend systemen van Vodafone.

• iPod Touch versie 3 en hoger
• iPhone versie 3 en hoger
• Android versie 2.1 en hoger
• BlackBerry Torch 9800 / 9810 / 9850 / 9860

Bovenstaande toestellen worden automatisch gedetecteerd en doorverwezen als je ermee naar www.bytemotion.nl gaat. Op deze manier is het niet nodig dat bezoekers, bijv. met een knop die ze moeten zoeken op de homepage, eerst nog een keuze moeten maken voor een optimale gebruikerservaring.

Binnen de mobiele web applicatie wordt op de homepage vervolgens wel de mogelijkheid geboden om als bezoeker toch de volledige ByteMotion website te bekijken.

De web applicatie bestaat uit een Home pagina met informatie over wat er allemaal te bekijken valt, zijn er de laatste 10 Blog en Portfolio berichten te lezen, is er een Demo onderdeel en een Contact pagina van waaruit je ons gemakkelijk kunt bellen of een bericht versturen.

Binnen het Demo onderdeel hebben we diverse live demonstraties ondergebracht zodat je zelf kunt ervaren wat een aantal van de mogelijkheden zijn bij de realisatie van een mobiele web applicatie. Hierbij kun je onder meer denken aan:

• Tonen van Twitter berichten
• Tonen van Flickr afbeeldingen
• Google Maps en locatiebepaling
• Aanpassen van het grafisch thema
• Gebruik van diverse lettertypen
• Gebruik van video
• Uitgebreide formulieren
• Diverse lijstweergaves

De activiteiten van bezoekers binnen de web applicatie kunnen goed bijgehouden worden met behulp van een mobiele JavaScript integratie van Google Analytics. Hiermee weet je precies van waar, waarmee, hoe lang en wanneer iemand een pagina bezocht heeft.

Deze mobiele web applicatie is door ons gemaakt gebaseerd op het Sencha Touch ontwikkel raamwerk waarbij we gebruik hebben gemaakt van HTML, JavaScript, CSS, CSS3, Sass, Compass, Ext JS, HTML, Google Analytics en PHP.

De website bestaat uit een homepage met de laatste nieuwsberichten en een “in de schijnwerper” blok. Op iedere pagina komt de zijbalk aan de rechterkant terug. Deze is gevuld met de CamVan Flickr foto’s, een viertal gerelateerde posts, een zogenaamde tag-wolk, het berichtenarchief en op de producties categorie pagina’s een korte tekst met daaronder een categorie keuzelijst. Op de techniek pagina staat een hele lijst aan informatie waaruit blijkt wat alle mogelijkheden zijn en dat de CamVan qua materiaal ruim en up-to-date is uitgerust.

De CamVan is een 3-camera HD wagen waarmee bijvoorbeeld theatervoorstellingen, talkshows, evenementen geregistreerd kunnen worden. Hij is gemakkelijk uit te breiden naar 4, 5 of 6-camera wagen en er zijn buiten de video-faciliteiten ook standaard audio-faciliteiten beschikbaar.

Ik ben momenteel bezig met de realisatie van ByteMotion’s eerste twee Sencha Touch applicaties en ik moet zeggen dat bovenstaande uitlating niet overdreven is. Het gemak waarmee ik nu in één keer een web applicatie kan maken voor een grote diversiteit aan smartphones, de tijdswinst die het oplevert en het daarbij horende aantrekkelijke kostenplaatje voor onze klanten maakt dat het hebben van een eigen applicatie als bedrijf nu een haalbaar iets is.

Uit meerdere onderzoeken is gebleken dat steeds meer mensen het internet via hun smartphone raadplegen, hierdoor is het hebben van een mobiele website die naadloos aansluit bij de eigen website nu geen overbodige luxe meer te noemen. Het Sencha Touch raamwerk bedient momenteel meer dan 90% van de toestellen die gebruikt worden om mobiel mee te internetten en wordt binnenkort uitgebreid met bijvoorbeeld IE9, WebOS en Meego toestellen zodat het nog aantrekkelijker wordt om het in te zetten.

Sencha Touch is gebaseerd op de kracht en mogelijkheden van HTML5, CSS3 en JavaScript, dit maakt het ook erg gemakkelijk om bijvoorbeeld audio en video te integreren binnen een App of om data offline op te slaan zodat een App ook zonder internet verbinding te gebruiken is. Aangezien de toestellen waarop Sencha Touch draait allemaal touchscreen bediening hebben is ook hierin ruimschoots voorzien en is interactie met bijvoorbeeld het swipen van een vinger geen enkel probleem.

De komende maanden ben ik van plan om meerdere Sencha Touch applicaties te ontwikkelen en live te zetten, houdt dus onze portfolio goed in de gaten!

De Sencha Touch website

Bij de vertoonde V-Cast worden foursquare gebruikers weergegeven met hun profielfoto, burgemeesterschap, waar ze vandaan komen en de incheck tijd. Hiermee worden Vodafone werknemers uitgedaagd om actief foursquare te (gaan) gebruiken en komen werknemers op een leuke manier in contact met hun collega’s. Het zien van jezelf op een TV scherm werkt aanstekelijk en nodigt uit tot interactie.

Binnen het project hebben wij de integratie verzorgd van informatie uit de diverse Vodafone foursquare locaties binnen een XML feed die de V-Cast voorziet van informatie.

Foursquare is een bekende sociale netwerksite, speciale software voor mobiele telefoon en een spel. Gebruikers ‘checken in’ op een plaats (venue) via een mobiele website, sms of via speciale applicaties voor mobiele telefoons. Hiermee kunnen zij punten (points) verdienen en soms badges.

Gebruikers kunnen vervolgens deze zogenaamde check ins delen met hun vrienden, familie en kennissen via Twitter, Facebook of een combinatie daarvan. Gebruikers kunnen ook felbegeerde badges verzamelen door in te loggen op venues met bijvoorbeeld speciale tags (steekwoorden) op speciale tijden of binnen een bepaald tijdspatroon.

Heb je als gebruiker vaker ingecheckt op een bepaalde venue verspreid over verschillende dagen dan andere gebruikers binnen een periode van 60 dagen, dan krijgt deze gebruiker de titel Mayor (burgemeester). Andere gebruikers kunnen de Mayor titel overnemen, wanneer zij op den duur weer vaker hebben ingecheckt dan de huidige burgemeester. Zo blijft het spel actief en de mayors relevant.

Ook kunnen foursquare gebruikers tips toevoegen aan venues voor andere gebruikers, die deze dan kunnen bekijken en vervolgens op hun to do-list (nog te doen-lijstje) kunnen zetten.

Binnen onze nieuwe website heeft de portfolio een prominentere plek gekregen en is er een blog dat regelmatig bijgehouden wordt. Daarnaast zijn op relevante pagina’s social media knoppen geïntegreerd die het delen van interessante/nuttige informatie gemakkelijk maakt. Ook het diensten onderdeel heeft een flinke facelift gekregen, we zijn van een eenvoudige opsomming van termen naar een uitgebreide en gedetailleerde beschrijving gegaan.

De website zit qua code uitstekend in elkaar en valideert volgens de geldende standaarden, ook op het gebied van zoekmachine-optimalisatie hebben wij onze kennis veelvuldig toegepast.

Om “het oudje” in ere te houden staan er op deze pagina screenshots van hoe alles er in het verleden, op onze volledig animerende in Flash gemaakte website, uitzag. Zoals je ziet begonnen de jaren te tellen en was hij echt niet meer bij de tijd op alle fronten.

De Muse tool gebruikt de laatste web standaarden zoals HTML5 en CSS3 en biedt een innovatief raamwerk voor het toevoegen van navigatie, widgets en HTML zodat de gemaakte website er niet alleen goed uitziet maar ook beschikt over geavanceerde interactiviteit.

Eigenlijk is de Muse tool ontstaan uit de talrijke verzoeken van Adobe InDesign klanten die graag gemakkelijk websites wilden realiseren op basis van een door hun gemaakte pagina opmaak. Zo vertelde Adobe’s design en web product directeur Lea Hickman. InDesign is de Adobe tool voor het maken van paginalayouts voor drukwerk of digitale distributie.

Met de Muse tool kan een grafische designer zich richten op wat hij/zij ook echt goed kan, het maken van een adembenemend design in plaats van te worstelen met code om te komen tot een werkende website.

Ik ben even op de website van Adobe gaan kijken waar onder meer de volgende speerpunten van de Muse tool beschreven staan:

• Sitemaps: Je beheert gemakkelijk al je paginas in een sitemap waarbinnen je snel een website structuur op kunt zetten en wijzigen.
• Master pagina’s: Definieer en beheer design elementen die voorkomen binnen meerdere pagina’s door ze aan de master pagina opmaak toe te voegen.
• Dynamische pagina grootte: Muse pagina’s zijn flexibel qua opzet waardoor ze automatisch in de hoogte meegroeien als nodig is om je content weer te geven.
• Afbeelding optimalisatie: Daarmee weet je zeker dat jouw afbeeldingen er het beste uitzien voor het internet maar ook dat ze snel inladen.

Het complete artikel van ZDNet UK is hier te vinden:
ZDNet UK: Adobe unveils beta of ‘easy’ web design tool