Desktop website vertalen naar mobiel - hoe?

[Verwijderd]

Hallo,

Ik wil graag een bestaande website vertalen naar een mobiele variant, gebruikmakend van jQuery Mobile. Het gaat om een vrij uitgebreide, dynamische website van een klant, waarvan de inhoud met PHP wordt opgehaald uit een database. Mijn vraag is hoe ik dit het beste kan aanpakken. Ik ben vrij ervaren met HTML, CSS, Javascript en jQuery, en heb ook een begin gemaakt met Ajax.

Ik wordt er echter niet wijs uit hoe ik dit het beste kan aanpakken. Moet ik de bestaande website skimmen op content om zo de mobiele website te vullen? Dus laten we zeggen, stel ik wil nieuwsheadlines uitlezen in de mobiele website, moet ik daar dan een $.get('nieuws.php') op los laten of een .load? Of moet ik juist toegang tot de database verschaffen en met mijn eigen PHP de benodigde gegevens opvragen. Wat is het handigst en effectiefst?

Ik ben erg leergierig en niet verlegen om nieuwe programmeertalen, maar op dit moment mis ik een juiste duw in de goede richting. Een klein stappenplan van hoe ik dit zou moeten aanpakken. Ik hoop dat duwtje hier te vinden.

Alvast bedankt:)

[Jaap-Jan]

Ik hoop dat in de huidige website inhoud en presentatie (template) gescheiden is. Zo niet: doe dat alsnog. Daarna komt het op hetzelfde neer: bouw een nieuwe template voor je mobiele site.

[johnkeates]

Zoals Jaap-Jan posste: als het MVC is, extra V maken, als het niet MVC is, gewoon eerst omzetten naar MVC, en daarna alsnog extra V maken.

[Verwijderd]

bedankt voor jullie antwoorden. de website is groot, maar een hobby project waar geen mvc gedachte achter zit.

het komt er dus op neer dat ik de desktop website moet los laten en dus geen data moet skimmen van de bestaande website? wat is daar de reden achter? is dit onefficient? tergend voor dataverkeer? sloom?

zoals ik het nu begrijp is het dus kwestie van database toegang krijgen en je eigen mvc maken.

[Ramon]

Skimmen, dat doe je toch met pinpasjes enzo?

Ik zeg, vergeet skimmen, ga mediaqueries gebruiken: maak een aparte CSS die geladen wordt wanneer de browser een bepaalde resolutie heeft.

W3C: http://www.w3.org/TR/css3-mediaqueries/

Voorbeeld gallery: http://mediaqueri.es/

[ Voor 20% gewijzigd door Ramon op 17-12-2011 01:22 ]

[Verwijderd]

Skimmen was inderdaad een verkeerde woordkeuze, maar ik bedoel dat je de bestaande website afzoekt naar content die je nodig hebt. Ik kan me alleen indenken dat dit qua dataverkeer nogal hoog komt te liggen. Media queries lijkt me niet echt een optie; daar laat je ook de gehele webpagina mee in. Veel content is overbodig voor de mobiele variant.

[Herko_ter_Horst]

Ik zou inderdaad in geen geval de output van de bestaande site gaan scrapen (dat is het woord waar je naar op zoek was).

M.i. heb je twee opties:

• zoals hierboven al aangeraden: de bestaande code refactoren zodat er wel een MVC opzet in komt (meest toekomstvast)
• de database in z'n geheel als M te nemen en een nieuwe C + V te schrijven voor de mobiele variant (kans op veel dubbel werk = dubbele fouten)

[ Voor 4% gewijzigd door Herko_ter_Horst op 17-12-2011 11:37 ]

[joint_me]

Ramon schreef op zaterdag 17 december 2011 @ 01:21:
Skimmen, dat doe je toch met pinpasjes enzo?

Ik zeg, vergeet skimmen, ga mediaqueries gebruiken: maak een aparte CSS die geladen wordt wanneer de browser een bepaalde resolutie heeft.

W3C: http://www.w3.org/TR/css3-mediaqueries/

Voorbeeld gallery: http://mediaqueri.es/

Als je hier iets over wilt lezen, raad ik Responsive Web design aan, leuk klein boekje. Hierin wordt best goed uitgelegd, hoe je een website om kan bouwen naar Media Queries.

Daarnaast, moet je goed na denken waarom je een website wilt omzetten naar mobiel, Content in Context.

Voorbeelden:
1. Bij een website voor een conferentie, kun je ervan verwachten dat je mobiele bezoekers eerder de route willen zien, het programma, etc. Terwijl je desktop bezoekers misschien andere informatie willen zien, zoals waar kan ik mijzelf inschrijven. Dan zou ik gaan voor een aparte view.

2. Voor een nieuwssite, zoals geenstijl.nl (gebuikt ook media queries), waarbij het niet uitmaakt of je een mobiel of desktop gebruikt, zou ik kiezen voor media queries.

[ Voor 1% gewijzigd door joint_me op 17-12-2011 12:23 . Reden: betere zins opbouw ]

[Ramon]

Verwijderd schreef op zaterdag 17 december 2011 @ 11:16:
Skimmen was inderdaad een verkeerde woordkeuze, maar ik bedoel dat je de bestaande website afzoekt naar content die je nodig hebt. Ik kan me alleen indenken dat dit qua dataverkeer nogal hoog komt te liggen. Media queries lijkt me niet echt een optie; daar laat je ook de gehele webpagina mee in. Veel content is overbodig voor de mobiele variant.

Dat "afzoeken naar content die je nodig hebt" met $.get('nieuws.php') (dat lijkt op jquery) lijkt me anders nog vééél slechter. Je wil dan op de client complete html inladen (met ajax?) en daar selectief (met xpath ofzo?) content uit weergeven op je mobiele site. Wat nu als de site aangepast wordt en de content die je weer wilde geven niet meer op de goede plek staat, dan is je mobiele website ook stuk.

Mediaqueries zijn dan handiger omdat het eigenlijk alleen een andere css is, en ja de html wordt dan wel volledig geladen maar ook dit kan je indien nodig opvangen aan de server kant natuurlijk.
Maar de vraag is natuurlijk: Hoe ingewikkeld is de html van de site? Een beetje overbodige html hier en daar zal echt niet het verschil uitmaken en qua verloren performance niet opwegen tegen het moeten onderhouden van een mobiele view of zelfs een complete extra mobiele site.

Simpel voorbeeld:

- Tweakers.net Frontpage
html 14.8 kB
al de andere content, incl JS, plaatjes, css e.d. 350 kB

[sanderdw]

Ik ben zelf deze week met een 'dirty' oplossing begonnen voor een nieuwe mobiele frontend met behulp van Jquery Mobile.

Ik had dus www.vvosc.nl met als cms Joomla 1.7. Nu zou ik daar een mobiele template aan kunnen hangen maar door bepaalde problemen toch maar besloten om dit apart te doen.

Zo heb ik dus m.vvosc.nl gemaakt die puur met php en mysql de gegevens rechtstreeks uit de database haalt. Dit was redelijk simpel omdat ik niet alle content hoef te laten zien zoals in de desktop versie.

Voor mij werkt dit goed maar kan me voorstellen dat dit bij een complexe website niet te doen is. Alleen al raak je door directe toegang op database gebied alle website functies kwijt en zul je deze zelf opnieuw moeten schrijven.

[Verwijderd]

sanderdw schreef op zaterdag 17 december 2011 @ 16:25:
Ik ben zelf deze week met een 'dirty' oplossing begonnen voor een nieuwe mobiele frontend met behulp van Jquery Mobile.

Ik had dus www.vvosc.nl met als cms Joomla 1.7. Nu zou ik daar een mobiele template aan kunnen hangen maar door bepaalde problemen toch maar besloten om dit apart te doen.

Zo heb ik dus m.vvosc.nl gemaakt die puur met php en mysql de gegevens rechtstreeks uit de database haalt. Dit was redelijk simpel omdat ik niet alle content hoef te laten zien zoals in de desktop versie.

Voor mij werkt dit goed maar kan me voorstellen dat dit bij een complexe website niet te doen is. Alleen al raak je door directe toegang op database gebied alle website functies kwijt en zul je deze zelf opnieuw moeten schrijven.

Je noemt het zelf een 'dirty' oplossing, maar eigenlijk vind ik dat helemaal niet. Je maakt eigenlijk alleen gebruik van de database gegevens en schrijft alle functionaliteit opnieuw voor de mobiele variant. De vraag is hoe 'opnieuw' iets is als je de vergelijking tussen desktop en mobiel trekt. Is het namelijk niet veel beter om de mobiele variant juist te zien als een losstaand project dat verder weinig samenhang kent met de desktop versie, maar daarmee wel volledig geoptimaliseerd is voor het mobiele platform?

Overigens, naar welke MVC gaat jullie voorkeur uit mbt mobiele ontwikkeling? CodeIgniter bijv?

[ Voor 3% gewijzigd door Verwijderd op 17-12-2011 20:41 ]

[Kiphaas7]

Door een cms (zoals joomla) te bypassen en meteen de db te querien is een nachtmerrie zodra je:

1. Gebruikers content wil laten toevoegen
2. Je bepaalde content alleen aan een selectie van gebruikers wil laten zien
3. ... Je uberhaupt gebruikt maak van cms features.

Dus alleen als je zeker weet dat je geen gebruik maakt van features van je cms op je mobiele website, is het geen dirty oplossing. Echter heb je dan een zeer beperkte mobiele site. Als je die features al niet gebruikte op je desktop site, moet je jezelf afvragen of je wel een cms nodig had in de eerste plaats....

[sanderdw]

@rp89 Aan de buitenkant lijkt het niet echt een 'dirty' oplossing. Een simpel voorbeeld is de willekeurige foto die ik op elke pagina ophaal. Deze code staat totaal niet in lijn met de gebruikte foto beheer applicatie. Zo kan het maar zo zijn dat als ik de titel van een album wijzig op de 'desktop' site de foto al niet meer laad.

@Kiphaas7 Inderdaad. Bij mij was het dan ook zo dat ik voor de mobiele app alleen wat simpele data nodig had.

Misschien kan je het zo stellen: Wanneer je alleen 'select' op een database (bij een cms/pakket) 'kan' dit een goede oplossing zijn. Maar wanneer je de database wil gaan wijzigen, insert ..update.. delete.. moet je je toch wel heel goed gaan afvragen of je het wel op deze manier wil doen.

Kiphaas7 schreef op maandag 19 december 2011 @ 19:02:
Als je die features al niet gebruikte op je desktop site, moet je jezelf afvragen of je wel een cms nodig had in de eerste plaats....

Dat heeft er niet zoveel mee te maken. Zonder die features is een cms vaak aantrekkelijker dan een framework. Denk aan gebruikertoegang, menubeheer, categoriebeheer enzovoort. Maar goed dat is weer een ander verhaal.

Ik gebruik zelf overigens geen framework met jQuery Mobile. Ik heb wat simpele data en de theming voor deze data zit al in jQuery.

[OkkE]

Het klinkt misschien cliché en het is vast niet wat je wil horen, maar er is geen silver bullet voor zoiets als het "omzetten van een 'desktop site' naar mobile".

Wat is het doel van de 'desktop site' (webshop, informatie, dienst/webapp, ...)? Wat is de doelgroep (zakelijke BlackBerry, ICT professionals, scholieren)? Wat is het doel van de 'mobile versie', verschilt die van de 'desktop site'? Moet (en net zo belangrijk, kan) de inhoud precies het zelfde zijn?