FAQ
Responsive Design
Auteur Datum Versie
Tim Ariesen | Serviceteam – Fulfilment Allrounder 20-03-2014 1.0
Inhoudsopgave
Pagina
1. Wat is responsive design? 3 2. Wat is er toegevoegd aan onze mono werkomgeving? 4 3. Wat zijn de voorwaarden om responsive design toe te kunnen passen? 4 4. Is er een mogelijkheid om terug te keren naar de oude instelling? 4 5. Wat is een responsive template? 5 6. Hoe zie ik dat de optie responsive design geactiveerd is? 5 7. Wat zijn de directe veranderingen in de editor omgeving? 5 8. Worden bestaande live websites beïnvloed? 5 9. Hoe kan ik bestaande klanten upgraden naar responsive design? 6 10. Kan ik de responsive design activeren op D3? 6 11. Kan ik toegang krijgen tot zowel de afzonderlijke desktop – en mobiele tabbladen en de samengevoegde tab voor responsive design? 6 12. Kan ik in het responsive design nog onderscheid maken tussen content op mijn desktop site en mobiele site? 7 13. Wordt bij het activeren van responsive design alles 1:1 overgenomen en weergegeven? 7 14. Worden teksten ook responsive mee geschaald? 8 15. Kunnen de desktop site en mobiele site nog afzonderlijk van elkaar worden gepubliceerd? 9 16. Hebben de desktop site en mobiele site nog steeds een afzonderlijke ‘laatst gepubliceerde datum? 9 17. Kan ik na het activeren van responsive design nog terugkeren naar de afzonderlijke tabs voor desktop en mobiel? 9
pagina 3 van 9
1. Wat is responsive design?
Responsive design is de benaming voor een webdesign dat, ongeacht het platform of browser, een optimale ervaring voor de bezoeker geeft. De website ziet er door het responsive design altijd goed uit, of dit nu een mobiel, tablet of desktop is. Voor het werken met Mono betekent dit dat er nog maar gewerkt wordt in 1 editor in plaats van 2.
pagina 4 van 9
2. Wat is er toegevoegd aan onze mono werkomgeving? De optie om responsive design in te schakelen. Volg de handleiding voor het activeren van responsive design.
3. Wat zijn de voorwaarden om responsive design toe te kunnen passen? Om gebruik te kunnen maken van de responsive functie is een D4 template vereist. Deze templates zijn te herkennen aan de toevoeging DTG COPY in de template titel. Daarnaast is het activeren van de responsive alleen mogelijk wanneer er zowel een subscription aangemaakt is voor een website_n en een mobile_n. Zie de handleiding voor toevoegen van de subscriptions.
4. Is er een mogelijkheid om terug te keren naar de oude instelling? De responsive optie is na inschakelen ook weer uit te schakelen. Zie hiervoor de handleiding. Let op: er dient dan wel een losse mobiele website gebouwd te worden. Wanneer dit niet het geval is zal er op een mobiel device een leeg of standaard template te zien zijn bij het bekijken van de website.
pagina 5 van 9
5. Wat is een responsive template? Alle D4 templates zijn geoptimaliseerd voor responsive design. Deze templates zijn te herkennen aan de toevoeging DTG COPY in de template titel.
6. Hoe zie ik dat de optie responsive design geactiveerd is? Als onder het kopje ‘Responsive’ aangevinkt is, is responsive design actief. Dit kun je doen onder ‘mijn account’. Zie hiervoor de handleiding. Daarnaast kun je het responsive design ook herkennen aan de twee tabbladen voor mobile en desktop onder pagina structuur in de editor.
7. Wat zijn de directe veranderingen in de editor omgeving? Wanneer je een subscription hebt ingeladen voor zowel website_n als mobile_n zie je dit terug in de editor als twee losse tabbladen.
Wanneer het responsive design is geactiveerd is er nog maar een tabblad zichtbaar en is het onderscheid gemaakt onder het kopje ‘Pagina structuur’. Vanaf nu worden de wijzigingen 1:1 doorgevoerd, ongeacht in welke omgeving (desktop/mobiel) je de aanpassing doet.
8. Worden bestaande live websites beïnvloed? Nee. Responsive design wordt niet automatisch geactiveerd.
pagina 6 van 9
9. Hoe kan ik bestaande klanten upgraden naar responsive design? Om bestaande websites te upgraden naar responsive is een mobile_n subscription vereist. Let erop dat deze ingeladen moet worden on dezelfde site ID als de websit_n subscription. (zie hiervoor de handleiding) Daarnaast moet er een D4 template ingeladen zijn. Wanneer er al een mobile subscription is ingeladen en er gebruik is gemaakt van een D4 template kan responsive direct geactiveerd worden. Let op: A: als er een losse mobiele website is gebouwd wordt de content overschreven met content van de desktop versie. De content wordt echter niet verwijderd, bij het deactiveren van het responsive design zal de oude mobiele site weer zichtbaar zijn. B: de mobiele versie zal na activeren van responsive dezelfde content bevatten als de desktop.
10. Kan ik de responsive design activeren op D3? Nee dit is niet mogelijk. Een D4 template is vereist.
11. Kan ik toegang krijgen tot zowel de afzonderlijke desktop – en mobiele tabbladen en de samengevoegde tab voor responsive design? Nee. Wanneer responsive design geactiveerd is, is het niet mogelijk twee aparte tabs te zien voor een desktop en mobiele versie. Dit is dan samengevoegd onder de ‘pagina structuur’.
pagina 7 van 9
12. Kan ik in het responsive design nog onderscheid maken tussen content op mijn desktop site en mobiele site? Ja. het is mogelijk om onderscheid te maken voor het tonen op mobiel en niet op de desktop site (en omgekeerd). Je kunt dit per pagina en per module instellen onder: pagina instelling > geavanceerde instellingen.
Let op Wanneer je een pagina alleen toont op de desktop site verdwijnt deze uit het menu op de mobiele site maar blijft de pagina wel zichtbaar onder de pagina structuur in de editor.
13. Wordt bij het activeren van responsive design alles 1:1 overgenomen en weergegeven? Ja wanneer je hebt gekozen om responsive design aan te zetten zullen alle wijzigingen synchroon lopen. Dus als je een module in de desktop versie aanpast zal dit ook op de mobiele versie zichtbaar zijn (en omgekeerd). Let op! Er zijn een aantal uitzonderingen: 1. Footer Alleen de social icons en de eerste tekstkolom worden vanuit de desktop versie overgenomen in de mobiele versie. 2. Achtergrondafbeelding De achtergrondafbeelding wordt wel overgenomen maar schaalt niet mee op de mobiele versie. Als alternatief zou je een full width module kunnen gebruiken. 3. De flash module is niet toonbaar op een mobiele website. 4. De broodkruimel (breadcrumb) is alleen van toepassing op de desktop website. 5. De share icons werken alleen optimaal op de desktop website. 6. Teksten hebben een vaste grootte. Deze worden niet mee geschaald. Let dus ook op bij het gebruik van modules (Jumbotron) waarbij er tekst op de afbeelding staat. Zie 14.
pagina 8 van 9
14. Worden teksten ook responsive mee geschaald? Nee de grootte van de tekst staat vast. Bij het gebruik van een groot lettertype is het dus aan te raden onderscheid te maken tussen de tekstgrootte op de desktop versie en de mobiele versie. Dit kan op de volgende manier: 1. 2.
Kopieer de module in de desktop versie van de website. Selecteer eerste modules de optie: ‘show module on desktop only’
3.
Selecteer in de tweede module de optie: ‘show module on mobile only’
4.
Je kunt nu in de mobiele versie de grootte van het lettertype aanpassen. Dit zal alleen worden doorgevoerd op de mobiele website. Let erop dat je de website dus goed doorloopt op het mee schalen van de gebruikte modules.
pagina 9 van 9
15. Kunnen de desktop site en mobiele site nog afzonderlijk van elkaar worden gepubliceerd? Nee. Dit is niet mogelijk zolang het responsive design actief is.
16. Hebben de desktop site en mobiele site nog steeds een afzonderlijke ‘laatst gepubliceerde datum? Nee. Bij het activeren van responsive design is de desktop versie en mobiele versie 1 html bestand en wordt deze in een keer gepubliceerd.
17. Kan ik na het activeren van responsive design nog terugkeren naar de afzonderlijke tabs voor desktop en mobiel? Ja. Heb je eerder een mobiele website gebouwd en besluit je over te schakelen naar responsive design wordt de nieuwe mobiele website overschreven met de content vanuit de desktop website. Wanneer je besluit toch gebruik te maken van de losse mobiele website kun je het responsive design uitvinken. De oude mobiele website zal dan weer zichtbaar zijn.
