Eén van de belangrijke nieuwe features van WYSIWYG Web Builder is Responsive Web Design.
Hiermee wordt het mogelijk om verschillende layouts voor de zelfde pagina te ontwerpen voor die zijn geoptimiliseerd voor verschillende devices/scherm afmetingen.
Alhoewel het concept is vrij eenvoudig is, kan het voor bestaande Web Builder gebruiker even wennen zijn.
In deze FAQ hebben we de meest gestelde vragen over Responsive Web Design verzameld.
Belangrijk: Leren omgaan met Responsive Web Design kost tijd. Begin bij de basis! Learn to walk before you run (leer lopen voordat je gaat rennen)...
Wat is Responsive Web Design?
Responsive web design (RWD) is een benadering van webdesign waarbij de web developer streeft naar een optimale webervaring voor een breed scala aan apparaten (van desktop computerschermen tot mobiele telefoons).
Het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface.
Meer informatie:
http://nl.wikipedia.org/wiki/Responsive_webdesign
Hoe kan ik een responsive website maken met behulp van WYSIWYG Web Builder?
Voor een introductie tot Responsive Web Design in WYSIWYG Web Builder zie deze tutorial:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Nederlandse vertaling via Google Translate:
https://translate.google.com/translate? ... t=&act=url
Wat zijn breakpoints?
Een breakpoint (breekpunt) is een andere weergave van dezelfde pagina binnen WYSIWYG Web Builder. Een pagina kan meerdere breakpoints hebben, elk geoptimiliseerd voor een specifieke scherm breedte.
Je kunt bijvoorbeeld een weergave hebben voor de standaard desktop, één voor tablets (1024 px) en een andere voor mobiele telefoons (320 px).
Gebruikelijke breakpoints zijn:
• 320 px, Mobiel portret, 480 px, Mobile landschap
• 768 px, Tablet portret, 1024 px, Tablet landschap/Netbook
• 1280 px en groter, Desktop
Welke breakpoints moet ik voor mijn pagina maken?
Er is geen algemene regel voor het implementeren van breakpoints. In principe maak je geen breakpoint voor een specifiek device of specifieke scherm resolutie.
Breakpoints worden bepaald door je design/layout. Het idee achter breakpoints is dat elk design op een gegeven moment 'breekt' bij een bepaalde resolutie/scherm breedte.
Bijvoorbeeld : de tekst is niet langer leesbaar, een menu is te klein of de browser geeft (horizontale) schuifbalken weer. Waar een design breekt kan verschillend zijn voor elk design.
Eén design kan prima worden weergegeven op alle displays tot 320px ... en dan vervolgens breken. Dat betekent dat je dan alleen een breakpoint voor 320 nodig hebt.
Andere designs kunnen breken bij allerlei verschillende resoluties. In dat geval moet je meerdere breakpoints implementeren.
De designer moet beslissen waar te beginnen met ontwerpen: van klein naar groot of van groot naar klein. Alhoewel het meestal eenvoudiger werkt als je met de standaard layout begint (dus van groot naar klein).
Zodra je de initiële layout hebt gemaakt, kun je gaan testen waar deze breekt en hiervoor een breakpoint maken.
Wat zijn 'responsive objecten'?
'Responsive objecten' zijn objecten die een andere afmeting kunnen hebben bij verschillende breakpoints.
Niet alle objecten zijn responsive, bijvoorbeeld vormen en andere tekengereedschappen (dynamisch aangemaakte afbeeldingen) hebben dezelfde afmetingen bij verschillende breakpoints.
De reden hiervoor is dat er maar één afbeelding is voor een vorm, dus wanneer afmetingen hiervan verschillend zouden zijn in breakpoints dan zou deze vervormen.
Maar je kunt wel verschillende vormen gebruiken, één voor elke breakpoint en dan de andere verbergen.
Welke objecten zijn niet responsive?
Alhoewel we ons best hebben gedaan om zo veel mogelijk objecten responsive te maken, kunnen helaas niet alle objecten verschillende afmetingen hebben bij verschillende breakpoints vanwege hun 'vaste afmeting' aard.
De volgende objecten zijn niet responsive:
- Banner (*)
- Carousel
- Curve
- Curved Text
- Flash Video Player
- Lijn
- Navigatiebalk
- OLE
- Polygon
- Vorm (*)
- Tabel
- Text Art
- Wrapping Text
- Afbeeldingen waar een effect/filter/schaduw/rotatie wordt gebruikt.
(*) Opmerking: Vormen en banners kunnen responsive worden gemaakt door het output formaat (publiceren) in te stellen op 'CSS3'
Wanneer je verschillende afmetingen in breakpoints nodig hebt dan kun je een kopie van het object maken en het origineel verbergen. Je kunt ook snel een object dupliceren en verbergen met behulp van de optie 'Dupliceren en verbergen' optie in het rechtermuis menu van het object.
Kunnen objecten verschillende eigenschappen hebben in breakpoints?
Objecten kunnen verschillende afmetingen, posities en zichtbaarheid hebben per breakpoint. Echter alle andere eigenschappen (zoals kleur, lettertype) zijn hetzelfde!
Bijvoorbeeld wanneer je de kleur van een object aanpast dan gebeurt dit voor alle breakpoints omdat het object gedeeld wordt tussen alle weergaven.
Maar je kunt wel verschillende objecten in breakpoints gebruiken. Dus je kunt een ander menu in een breakpoint gebruiken en het originele menu verbergen.
Waarom is mijn tekst niet responsive?
Tekst is alleen responsive als het output formaat is ingesteld op 'Default' (in de compatibiliteits eigenchappen van het tekst object) .
Als het output formaat is ingesteld op 'Gebruik <div> voor elke regel' of 'Gebruik <div> met positie voor elke regel' dan kan de tekst maar voor één afmeting worden geoptimaliseerd.
Tekst is ook niet responsive wanneer line spacing wordt gebruikt.
Is er een snelle manier om te zien welke objecten om mijn pagina responsive zijn?
Ja, je kunt de toetsenbord combinatie Shift+Ctrl+R gebruiken om alle niet-responsive objecten op de pagina te omlijnen. De omlijn kleur is op dit moment vast ingsteld op rood.
Waar plaats ik "verborgen" objecten (menus, vormen enz)? Plaats ik deze binnen of buiten de randen van het breakpoint?
Je kunt verborgen objecten het beste binnen de pagina afmetingen plaatsen, zodat deze geen invloed hebben op de pagina breedte.
Kan ik breakpoints in master pagina's en master frames gebruiken?
Ja, maar je moet er wel voor zorgen dat je dezelfde breakpoints waarden in zowel de master pagina/frame als de pagina waar deze wordt gebruikt.
Hoe kan ik mijn responsive designs testen?
Er zijn veel gespecialiseerde websites om responsive designs te testen. Bijvoorbeeld: http://responsivepx.com/
Sommige browsers hebben ook ingebouwde test tools vor RWD. Bijvoorbeeld in Firefox kun je CTRL+SHIFT+M gebruiken om naar responsive test mode te gaan.
Er is lege ruimte aan de onderkant (of rechterkant) van de pagina
Wanneer je objecten op een breakpoint hebt geplaatst die verborgen zijn in de default weergave dan beinvloeden deze objecten nog steeds de (default) pagina afmetingen. Ze staan immers nog steeds onderdeel van de pagina, alleen je ziet ze niet.
Dus zorg ervoor dat alle objecten (zelf als deze verborgen zijn) binnen de pagian grenzen vallen.
Voorbeeld:
- default view is 800x600
- mobile breakpoint is 320x1200
- in het mobile breakpoint staat een object op positie 0, 1000. Het object is verborgen in de default view, maar heeft dezelfde positie als in het breakpoint.
Dit betekent dat de hoogte van de default view is 1000 + object hoogte
Oplossing:
- Ga naar de default view
- maak het verborgen object (tijdelijk) zichtbaar (bijvoorbeeld via de Object Manager).
- verplaats het object binnen de pagina grenzen (in dit geval 800x600).
- verberg het object.
Tip: In WYSIWYG Web Builder 10.3.3 en nieuwer kun je verborgen objecten zichtbaar maken mbv de optie 'Verborgen objecten weergeven' in het Beeld menu, dit maakt het eenvoudiger om layout problemen op te lossen.
Zijn er ook alternatieve manieren op responsive websites te maken?
Web Builder heeft diversen andere methoden voor het maken van flexibele en responsive websites.
Je kunt bijvoorbeeld ook meerdere versies van een pagina maken en vervolgens een 'redirect' script gebruiken om de bezoeker naar deze andere pagina te sturen.
In 'Kant-en-klare-JavaScripts' (beschikbaar in de Toolbox en 'Invoegen' menu) staan diversen redirect scripts.
Een andere oplossing is om een grid-achtige layout te maken die zich automatisch aanpast aan de huidige scherm resolutie.
Hiervoor kan de jQuery Masonry extensie worden gebruikt (http://www.wysiwygwebbuilder.com/masonry.html).
Voorbeeld: http://www.wysiwygwebbuilder.com/suppor ... metro.html
Het is ook mogelijk om met behulp van layers stretchable of floating layouts te maken (voor geavanceerde gebruikers).
http://www.wysiwygwebbuilder.com/using_layers.html
http://www.wysiwygwebbuilder.com/anchored_layers.html
http://www.wysiwygwebbuilder.com/floating_layers.html
En tot slot heeft Web Builder ook een aparte omgeving voor het creëren van mobiele websites.
http://www.wysiwygwebbuilder.com/mobilewebdesign.html
Dit is een zeer uitgebreide omgeving, niet alleen voor mobile websites maar ook een prima manier om flexible layouts te maken.
Zie bijvoorbeeld grid met afbeeldingen (gemaakt met behulp van standaard afbeeldingen en het layout grid):
http://www.wysiwygwebbuilder.com/suppor ... index.html
Waarom zijn nieuw toegevoegde objecten verborgen in andere breakpoints?
Nieuwe objecten zijn standaard verborgen in andere breakpoints. Dit is meestal de beste optie omdat nieuwe objecten over het algemene niet dezelfde positie en afmetingen in andere breakpoints zullen hebben, dus dit zou de layout in andere breakpoints rommelig maken.
Je kunt de Object Manager gebruiken om het object zichtbaar te maken in andere breakpoints en deze daarna verplaatsen naar de gewenste positie.
Het is ook mogelijk om dit gedrag aan te passen met behulp van de optie 'Verberg nieuwe objecten op andere breakpoints' in Hulpmiddelen->Opties->Algemeen
Bij gebruik van events, wordt de zichtbaarheid beïnvloed door breakpoints.
Bij Responsive Web Design zal de software automatisch code genereren die de positie, afmetingen en zichtbaarheid van objecten bepaald (met behulp van CSS3 media queries).
Echter is sommige gevallen kan het aanpassen van de zichtbaarheid een conflict geven met andere functionaliteit op de pagina, zoals bijvoorbeeld events die objecten weergeven of verbergen.
De optie 'Gebruik Visibility' in het context menu van een object maakt het mogelijk om de 'visibility' (zichtbaarheid) attribuut uit de media query weg te laten, zodat dit geen invloed heeft op de status van het object bij gebruik van events.
Merk op dat wanneer 'Gebruik Visibility' niet actief is dat dan het object dezelfde zichtbaarheid heeft in alle breakpoints!
Je kunt de beginwaarde van deze optie bepalen in Hulpmiddelen->Opties->HTML->Gebruik 'visibility' als default voor nieuwe objecten in Responsive Web Design.
Nadat ik breakpoints ben gaan gebruiken werken sommige extensies of zelftoegevoegde HTML niet meer.
Bij het gebruik van Responsive Design Design/breakpoints zal de software alle inline styles van objecten naar de <style> sectie in de header van de pagina verplaatsen.
Dit is nodig om de positie, afmetingen en zichtbaarheid van objecten via CSS3 media queries te kunnen controleren.
Echter in sommige gevallen kan dit een probleem geven met objecten, HTML code of extensions.
Om dit gedrag te controleren hebben we een optie toegevoegd: Hulpmiddelen->Opties->HTML->Behoud inline styles met Responsive Web Design (gebruik !important).
Wanneer deze optie actief is dan zal de software inline styles niet aanpassen, maar in plaats daarvan '!important' gebruiken in CSS3 media queries.
Wanneer moet ik 'Gebruik 'min-width' in CSS3 media queries' toepassen?
Opmerking: deze optie is beschikbaar in het 'Breakpoints beheren' venster.
Deze optie bepaalt hoe breakpoints zich gedragen in de browser. Standaard worden breakpoints geactiveerd als de breedte van het browservenster gelijk of kleiner is aan het gedefinieerde breakpoint.
Wanneer de optie 'Gebruik 'min-width' in CSS3 media queries' actief is dan wordt het breakpoint geactiveerd als de breedte van het browservenster gelijk of groter is dan het breakpoint (en kleiner dan het volgende breakpoint).
Hier zijn een paar voorbeelden om het verschil te demonstreren (pas de breedte van het browservenster aan om de verschillende breakpionts te testen):
Voorbeeld 1
Gebruik 'min-width' in CSS3 media queries is actief:
http://www.wysiwygwebbuilder.com/support/rwd/index.html
Gebruik 'min-width' in CSS3 media queries is niet actief:
http://www.wysiwygwebbuilder.com/suppor ... ndex2.html
Voorbeeld 2
Gebruik 'min-width' in CSS3 media queries is actief:
http://www.wysiwygwebbuilder.com/suppor ... width.html
Gebruik 'min-width' in CSS3 media queries is niet actief:
http://www.wysiwygwebbuilder.com/suppor ... width.html
En tot slot, een belangrijke tip: DOE 1 DING TEGELIJK!
Wijzig niet te veel dingen tegelijkertijd. Als je maar één ding tegelijk doet dan maakt dat het eenvoudiger om terug te traceren wat je hebt gedaan als er iets mis gaat.
Bijvoorbeeld bij het gebruik van master frames, voeg eerst één breakpoint toe in het master frame, maak één wjjziging om mee te beginnen (verplaats een object of verander de afmetingen).
Voeg daarna hetzelfde breakpoint toe aan de content pagina. Test de pagina vervolgens in de browser. Als het werkt ga dan door met de volgende wijziging en als het niet werkt probeer er dan eerst achter te komen waarom het niet werkt voor dat je verder gaat.