Mobiele website maken, niet responsive

[gilligan]

Hallo,

Momenteel ben ik bezig met een website en zou daar graag een mobiele website voor maken. Ik weet dat dit zo zijn nadelen heeft ten opzichte van een responsive site, maar voor mij is het in dit geval praktischer.

De gewone site is alleen geschikt voor desktop. Ik heb er wel Wordpress achter zitten vanwege het gebruikerssysteem (niet verplicht, wel mogelijk), maar heb het verder helemaal uitgekleed. Ik heb een eigen thema gemaakt en verder geen mobiele variant. Alleen een desktop style.


Er komen alleen nogal wat vragen bij me op:
- Waar moet ik de pagina's en style voor de mobiele website stallen? Kan dat in een aparte map in Wordpress?

- Hoe kan ik de achterliggende Wordpress blijven gebruiken? Ik moet dat wel aanroepen (header enzo), maar die pakt automatisch de desktop style natuurlijk.

- Is het mogelijk om de site als domain.com te bezoeken en automatisch de mobiele website te krijgen? Kan dat gedetecteerd worden? Of als m.domain.com ofzo?

- Hoe kan ik de gebruiker laten switchen tussen mobiele en desktop site?

- Hoe doen andere websites dat, of is dat allemaal responsive tegenwoordig?


Hopelijk kunnen jullie me een beetje op weg helpen. Met de viewports en css lukt me wel, maar ik zie door de bomen het bos even niet meer.


Groet

[deathgrunt]

Makkelijkst is gewoon een https://mobiel.website.extensie/ subdomein aanmaken en daar alles op plaatsen voor mobiel.

Eventueel kan je dezelfde WP installatie aanroepen, je kan gewoon je eigen DB config in WordPress zetten - via de WP DB API kan je dan parsen wat je wil, DB in kwestie hoeft niet eens van WP te zijn.

Of je gebruikt twee losse installaties... als je double-content wil voorkomen, pak je er één en roep je die vanuit mobiel en desktop aan.

[RobIII]

Als je alle wijzigingen twee keer wil doorvoeren (en testen) moet je vooral zo gaan werken. Of je maakt, met een klein beetje (initieële) extra moeite je site responsive en dan heb je al die vragen niet meer en lost 't probleem zichzelf op.

Er is meer dan voldoende informatie online te vinden (en nog een orde van grootte meer responsive templates) dus dat is allemaal geen enkel probleem.

[Ramon]

Yep, responsieve is echt de way to go!

Als je een aparte mobiele site hebt kan je allerlei fancy dingen doen met browserdetectie, redirects, cookies e.d. om het te laten werken maar echt lekker werken zal het nooit. En zeker met de vragen die je stelt lijkt me responsive CSS veel makkelijker voor je.

[deathgrunt]

Ook een optie;

Gewoon een thema maken dat geen multiple-responsive-breakpoints heeft.

Dus niet desktop, tablet, phablet, mobiel, watch, magnetron, whatever, maar gewoon OF desktop OF mobiel.

En dan niets maken qua fluid-design (zodat elementen uitwaaieren over de breedte), maar min of meer een fixed-width hebben.

Dan heb je één codebase, één plek voor je content, en ziet het er toch totaal anders uit op mobiel / desktop.

Issue is natuurlijk wel dat iemand op een tablet dan een te kleine desktop, of te grote mobiele weergave krijgt... maar dat is de bron van je wens.

[gilligan]

Mjah, ik weet niet of de site zich echt leent voor responsive design. Het is geen nieuwssite of bedrijfssite, meer een presentatie van data. Layout is af en niet echt onderhevig aan wijzigingen.

Als ik het responsive zou maken zou ik hele delen van de site of hele pagina's weglaten. Dat moet dan met display: none in css? Maar komt de prestaties toch ook niet ten goede als je iets wel laadt eigenlijk maar niet weergeeft? En menu-buttons zou ik dan moeten weglaten. Maar die pagina's zijn dan eigenlijk nog steeds te bezoeken toch?

Daarnaast kom ik dan met Adsense in de problemen denk ik. Ik had eerst de automatische Adsense geprobeerd, waarbij Adsense zelf de locatie kiest voor de ads, maar die zet de reclames overal maar tussen, ook middenin javascript gebieden, dus heb nu handmatig aangegeven waar welke grootte waar moet komen.

[Ramon]

Je kan gewoon beide kanten op natuurlijk maar een aparte mobiele site levert gewoon behoorlijke uitdagingen op die het m.i. niet echt waard zijn.

Je hebt ten eerste browserdetectie nodig die ervoor zorgt dat ofwel de gebruiker met een redirect doorgestuurd wordt naar de mobiele site als hij/zij met een mobiel komt en vice versa. Dit is te doen maar er zijn zoveel uitzonderingen dat je hier gewoon veel tijd in zal moeten steken om het juist te krijgen. Daarnaast zal je een mechanisme moeten maken voor gebruikers zodat ze de andere variant kunnen bekijken dus daar heb je dan een mechanisme met bijvoorbeeld cookies voor nodig als een gebruiker de keuze die jij voor hem maakt heeft overridden. Misschien zijn er wel kant en klare wordpress plugins die dit voor je kunnen doen, geen idee.

Als je site responsive is, is het niet erg dat bepaalde html niet getoond wordt. Ik geloof niet dat dat invloed heeft op de performance. Hooguit dat het laden een fractie langer duurt als je veel verstopt wat je normaal niet mee zou nemen in je html. Menu-buttons weglaten is ook geen probleem maar vind ik wel wat apart, waarom zou ik op mijn mobiel bepaalde pagina's op jouw site niet mogen bezoeken? Als je content niet mobiel-ready is dan nog kan je de gebruiker de keus geven om de pagina te bezoeken. Als hij/zij het dan op de correcte wijze wil bekijken dan kan er altijd nog een laptop of desktop aangezet worden.

En ik weet even niet hoe je met adsense in de problemen zou komen?

[deathgrunt]

gilligan schreef op vrijdag 16 november 2018 @ 16:20:
Mjah, ik weet niet of de site zich echt leent voor responsive design. Het is geen nieuwssite of bedrijfssite, meer een presentatie van data. Layout is af en niet echt onderhevig aan wijzigingen.

Als ik het responsive zou maken zou ik hele delen van de site of hele pagina's weglaten. Dat moet dan met display: none in css? Maar komt de prestaties toch ook niet ten goede als je iets wel laadt eigenlijk maar niet weergeeft? En menu-buttons zou ik dan moeten weglaten. Maar die pagina's zijn dan eigenlijk nog steeds te bezoeken toch?

Daarnaast kom ik dan met Adsense in de problemen denk ik. Ik had eerst de automatische Adsense geprobeerd, waarbij Adsense zelf de locatie kiest voor de ads, maar die zet de reclames overal maar tussen, ook middenin javascript gebieden, dus heb nu handmatig aangegeven waar welke grootte waar moet komen.

Data kan je toch ook responsive opmaken?

Desnoods in een tabel (als de semantiek dat toelaat) - https://johnpolacek.github.io/stacktable.js/

Of grafieken - https://github.com/gionkunz/chartist-js/

- edit - of je probeert ipv. responsive gedrag eens context awareness responsive gedrag uit...

https://www.filamentgroup...t-aware-image-sizing.html

Dat is al zo oud als de weg naar Rome, en houdt in dat je niet enkel naar de afmetingen van het scherm kijkt, maar ook naar de hele context - bv. hardware / locatie / referrer, etc...

Op die manier kan je ook andere content / styling voorschotelen.

[Voor 16% gewijzigd door deathgrunt op 16-11-2018 17:55]

[danslo]

Niemand PWA (Progressive Web Apps) nog genoemd... Behoorlijk hip op dit moment, en zit precies tussen een native app en responsive website in. Sinds versie 4.5 heeft Wordpress een REST API. Ga wat leuks in React/Vue bouwen en praat daar tegen aan.

[deathgrunt]

danslo schreef op vrijdag 16 november 2018 @ 17:55:
Niemand PWA (Progressive Web Apps) nog genoemd... Behoorlijk hip op dit moment, en zit precies tussen een native app en responsive website in. Sinds versie 4.5 heeft Wordpress een REST API. Ga wat leuks in React/Vue bouwen en praat daar tegen aan.

Aan PWA heb je niets, net als SPA in dit geval.

Het gaat hier puur om het ontsluiten en presenteren van data, niet welk protocol of framework je daar voor gebruikt...

[energydrank]

Bootstrap, out of the box responsive en hoef je zelf ook niet rond te gaan kutten, moet je misschien wel wat zooi zelf aanpassen in een custom CSS file enzo maar het is minder werk dan een compleet aparte mobiele site te maken

[gilligan]

Hmm, browserdetectie en cookies schrikt me al wat af. Dat is niet echt mijn ding.

De site heeft wat pagina's met tabellen (divs) over de gehele breedte, die zich niet echt lenen om gepresenteerd te worden op een mobiel formaat. De buttons naar die pagina zou ik dan willen weglaten ja. Als de gebruiker alle features wil die de volledige site heeft moet hij maar de desktop versie gebruiken. Zolang hij de belangrijkste pagina's maar kan bezoeken.

Maar er zijn dus ook pagina's waarvan ik sommige delen zou willen weglaten. Maar die dan dus wel uit de database opgehaald worden zonder dat ze worden weergegeven. Anders wordt het denk ik ook teveel voor de mobiel. Dat is niet optimaal. Maar display: none is heel gebruikelijk voor responsive design?

Met Adsense doelde ik op dat ik op de mobiel een andere indeling van de ads zou willen dan op de desktop. Maar hij is dus handmatig ingesteld. Op de desktop versie heb ik bijvoorbeeld horizontale ads toont met een breedte van 900 pixels. Maar dat gaat op de mobiel dus niet passen. Zou ik ook een soort van detectie moeten inbouwen of met Ajax ofzo welke ad-breedte moet worden opgehaald? En dan ook in divs zetten met display none op mobiel/desktop. Zou Google dat kunnen waarderen als je ze ads wel laadt maar de div waarin die staat niet weergeeft?

En dan heb ik nog een soort van menu in de vorm van een aantal divs op een rijtje. Dat zou in een responsive design in een dropdown menu ofzo moeten komen.

Mijn kennis beperkt zich overigens tot PHP, CSS, HTML, SQL, beetje Javascript. De site bevat verder geen Framework qua css, gewoon zelf in elkaar gedraaid. En ik ben eerlijk gezegd niet van plan om aan de desktop site te gaan sleutelen qua structuur.

[deathgrunt]

gilligan schreef op vrijdag 16 november 2018 @ 18:03:
Hmm, browserdetectie en cookies schrikt me al wat af. Dat is niet echt mijn ding.

De site heeft wat pagina's met tabellen (divs) over de gehele breedte, die zich niet echt lenen om gepresenteerd te worden op een mobiel formaa

Een tabel is geen div, en een div geen tabel...

Je kan wel divjes formatteren zodat ze lijken op een tabel, maar semantisch is dat niet correct (los van het feit dat een tabel een hele andere DOM heeft dan een single div).

En zowel een DIV als TABLE kan je responsive maken - met of zonder plugin voor de table (zoals ik hierboven al meldde).

https://johnpolacek.github.io/stacktable.js/

Zelf heb ik aardig wat complexe data (in tabellen) op die manier 'responsive' gepresenteerd, oa. het tonen van de uitkomst van diverse berekeningen op het gebied van kubieke meters icm. de opslag-capaciteit per unit (x aantal tafels, x aantal stoelen, etc...).

Met StackTables is the sky the limit...

- edit - ik schrijf ook veel responsive email in html2 en html3 (omdat emailing niet verder gaat dan html3) en dan bestaat responsive gedrag natuurlijk niet.

Maar zelfs met html2 en html3 kan je out of the box gewoon responsive tables maken.

https://tedgoas.github.io/Cerberus/

Dit is een extreem goed uitgewerkte boilerplate hiervoor, die zowel fluid / responsive als native table-layout kan schalen (zonder plugins, html2 en html3, compatible met alle devices ter wereld).

[Voor 19% gewijzigd door deathgrunt op 16-11-2018 18:13]