Nieuwe mobiele website, deel 1: Kickoff nl

Door creator1988 op woensdag 9 februari 2011 16:06 - Reacties (6)
Categorie: Frontend, Views: 3.056

In de komende weken wil ik aandacht besteden aan het project waar ik op dit moment de lead voor ben: de herbouw van ons mobiele platform. Niet alleen puur technisch, maar ook een kijkje achter de deur wat betreft project management, planning en bepaalde keuzes. Vandaag deel 1: de kickoff.

http://www.100procentjan.nl/tweakers/mobiel_oud.png



Voortraject
In de afgelopen maanden heeft ons UX-team nagedacht over de specs, design en ondersteunde devices; wat resulteert in een Functioneel Ontwerp (81 pagina's), een volledig functionele demo (HTML) en een stapel telefoons om op te testen:
http://www.100procentjan.nl/tweakers/mobiel_telefoons.png

Kickoff meeting
Wanneer het voortraject klaar is wordt het projectteam (1 UX'er, 2 Devs, 1 Project Manager, 1 Tester) in een hok gestopt waarin er in een uur of twee door het FO en de demo wordt heengelopen. Vooral de demo is nogal prettig omdat alle interacties al zichtbaar zijn; bovendien is de opgeleverde HTML al productie-waardig (UX is verantwoordelijk voor de HTML en CSS) en kunnen we wat betreft de frontend-code al beginnen met knippen en plakken.

Architectuur
De keuze qua architectuur ligt in handen van de developers in het team, in samenwerking met de Software Architect. Binnen dit project heb ik allereerst mijn plannen beschreven in samenwerking met mijn fellow dev, en hierna vrij snel accoord gekregen vanuit SA. We kiezen binnen dit project om verder te bouwen op de API die we toch al op de plank hebben liggen en waarop momenteel de andere mobiele platformen die we hebben (iPhone, Layar) ook draaien. Voordeel hierbij is dat we ook voor deze platformen kunnen profiteren van de investeringen die we nu doen in onze service-laag.

Eh dus?
Dus gaan we ervoor zorgen dat onze website zo min mogelijk code bevat. Neem je als voorbeeld de resultaatlijst, dan ziet deze er globaal zo uit:
http://www.100procentjan.nl/tweakers/mobiel_nieuw.png
Dat betekent dus dat de informatie over:
  • Soort object dat je nu ziet ('Koopwoningen')
  • Beschrijving van je zoekopdracht ('Purmerend | ¤ 100.000 - ¤ 200.000 | etc.')
  • Vorige en volgende pagina (beschikbaar? nieuwe URL?)
  • Huidige pagina, en totaal aantal pagina's
Als nieuwe metadata moet worden toegevoegd aan de API. Wanneer we dit doen hebben we nauwelijks logica in onze website. De code van onze resultaatlijst wordt globaal iets als:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h1><%=Model.ObjectType %></h1>
<a><%=Model.Omschrijving %></a>

<div class="results-list">
    <% foreach(var obj in Model.Objects) { %>
        <% Html.RenderPartial("ZoekresultaatItem", obj); %>
    <% } %>
</div>

<a href="<%=Model.VorigeUrl%>">Vorige</a>

Pagina <%=Model.Paginanummer %> van <%=Model.PaginaTotaal %>

<a href="<%=Model.VolgendeUrl %>">Volgende</a>


Wanneer onze iPhone app van dezelfde metadata gebruik gaat maken hebben we bovendien altijd een consistente weergave.

Next up?
Nog geen idee, we zijn net begonnen :-)

Volgende: Waarom Javascript zo awesome is 02-'11 Waarom Javascript zo awesome is
Volgende: MSIL injection met PostSharp 02-'11 MSIL injection met PostSharp

Reacties


Door Tweakers user Steffannnn, woensdag 9 februari 2011 19:29

Mobiele website .. :D Iedereen loopt nu rond met zijn eigen webserver?!

Door Tweakers user TeeDee, woensdag 9 februari 2011 23:38

Steffannnn schreef op woensdag 09 februari 2011 @ 19:29:
Mobiele website .. :D Iedereen loopt nu rond met zijn eigen webserver?!
Hahahahahaha.... :|

Maar goed: een FO van 81 pagina's en een front-end waarbij de front-end al zo goed als klaar is. *doet me denken aan de uren waarbij ik zei; mijn ingecalculeerde uren * 3*.

Waarom zou je trouwens buiten jullie eigen bestaande api's moeten gaan denken om iets voor elkaar te krijgen? Bouw het intern (het is tenslotte iets van funda) en kijk daarna of je het kan integreren. Zo niet, tough shit.


Door Tweakers user SpaceK33z, vrijdag 11 februari 2011 10:38

User Experience (gebruikerservaring dus).

[Reactie gewijzigd op vrijdag 11 februari 2011 10:38]


Door Tweakers user Atmosfeer, maandag 18 april 2011 13:18

Is het mogelijk om je FO in te kunnen zien? :) Mooi project verder!

Door Jeroen Mulder, maandag 18 april 2011 16:48

@Atmosfeer, er valt weinig te zien. Onze FO's zijn grote Word documenten die alle data, functionaliteit en interactie nauwkeurig beschrijven. Aanvullend wordt door UX een interactieve demo (HTML, CSS en Javascript) ontwikkeld. Hierin is de HTML en CSS van productieniveau, maar de demo wordt voornamelijk gebruikt als prototype tijdens het ontwerpproces. Er is immers maar één manier om er achter te komen of iets goed genoeg werkt zoals je had bedacht en dat is door het te bouwen en uit te proberen. :-)

Reageren is niet meer mogelijk