www.wysiwygwebbuilder.com

It has been an "Interesting" journey.... To go from the old site:
to this Responsive site : http://www.beleuramyhome.org.au

I designed the original site based on the assumption that the target audience will have an easy navigation and simple website... Over time and while watching the statistics, it became apparent that I was wrong. Turns out that close to 50%were using mobile phones, tablets, iPads... for which the original designed ignored completely! That was a hard lesson to learn - I had to redo the whole thing from scratch.

The tutorials Pablo provided state "Learn to walk before you run...". This is indeed an excellent advice, but only applicable if you have time to play. I was faced with an urgent need to publish the new design (will ignore the reason for it), so I had to learn to run...

I have been using WWB for some years now, and must admit that only through this project I learnt many new things that are equally applicable to the Non-Responsive style.

Here are some examples:

1) If you have multiple slide show objects on the same page, make sure the images you are loading for each has a unique file name, or else, the same images will show up in all the slide shows on that page.

2) If you intend using Gradient colouring for background, make sure you have the CSS3 option checked in Tools->Options->HTML, or else the page will not resize properly when moving between devices.

3) I was using throughout the development the built in device emulation available in Firefox. This is not bad, but the real test must be conducted on actual hardware devices and be prepared for differences. The emulator is just that!

4) Be careful when using Extensions. Those are provided as-is and avoid those if you can for a new concept of "Responsive". Some of those that I used for several years Some , no longer work properly under RWD.

5) I started the new project from a RWD template, several times from a number of them. I gave up and started again from a blank screen, adding things and trying to grasp the many new concepts involved.

6) Consider what is the intended site for, how ill visitors navigate, and think maybe to use a Master-Frame as the envelope for it. In my experience at this point, the combination of Master-Frame with Layout Grids gave me the result I was after.

7) Make sure you have no floating objects outside the Master-Frame, otherwise you screen will have blank space on the right. In one case I had the header text too long for a 480px break point.

No need to "Centre in browser", the envelope is doing it for you depending on screen size. For each grid, set Width to full-page, this will stretch the objects inside each column nicely.

9) AND - the biggest challenge I discovered... is making it work on iPhone, iPad etc...

I can go on and on... but I think I touched on the main points. Read and read again the provided tutorial, there are also a few good YouTube clips on the topic.

Thank you Pablo for the fantastic feedback and help along the way and for the powerful package you offer us.

Cheers

Alex - GREAT post and some very good advice! Thanks for sharing that - those that are starting off will do well to heed the above. In the idea world, extensions once created would stay compatible, but with all the changes in browser rendering, WCS3 etc - that's just not practical.

Pablo, and those assisting him have done a fantastic job in keeping WB relevant, powerful and useful - moving from the original 970 "single" BP to responsive website design and elastic design - we even have a choice between the two.

WB is a very powerful and resource/feature WYSIWYG and you can't have that without complexity - although a LOT less complex than the days where your WYSIWYG was a Notepad editor for fear of using "Web Builders" that created terrible over bloated code - thankfully CSS came in and that killed those off.

Website Design/building and Web Builder is a ever ending discovery and adaption journey and, as excellent as WB is, I've still had PLENTY of frustrations, but I've also had lots of "Light Bulb" moments Inevitably, in 99% of the time, the frustrations have been caused by my own error. 99% is a darn score for WB and Pablo in any ones books .

Colin,
Thanks for your supporting words. It is positive feedback, constructive feedback and prompt help - like that recent one you told me how to fix my repeat pictures in a page with multiple Slide-Shows (Point # 1 in my article) that makes this collaboration as great as it is.

I still have there a few points I want to improve, and as you mentioned (to which I agree), I have a long way to go to learn from you

Cheers

Hope you dont mind me saying that you should really consider using a plain white background on the text.. the gradient green colour really doesnt work very well

Not at all, I was thinking about it myself.
All comments welcome
Thanks

alex4orly wrote:Colin,
Thanks for your supporting words.

I still have there a few points I want to improve, and as you mentioned (to which I agree), I have a long way to go to learn from you

Cheers

You're most welcome Alex and there are MUCH better people to learn from LOL

andyp wrote:Hope you dont mind me saying that you should really consider using a plain white background on the text.. the gradient green colour really doesnt work very well

Please check again, is this better?

Not really sure about having green swirl.... try it without any background for the text.

Think of it as reading a newspaper.. or book....

One point about this is to test it with the residents... trial it as is.. then remove the background... see what those elderly eyes have to say....

Also.. I would put the slideshow at the top... and slow it down to a fade....

Also consider that there is a lot of 'movement' on the page which can be distracting......