Tuesday, November 26, 2013

Google Web Designer; Tips for Initial Design

Chef LeeZ, learned of the existence of Google Web Designer "GWD" from one of the near 300 social networks Chef LeeZ is a member of. Yup, you can Chef LeeZ on near 300 social networks. Check your favorite and follow or friend us and let us know the URL of your favorite site you don't find  ChefLeeZ.

Prior to GWD our websites were built using (MS Publisher) but they discontinued its related WYSYWYG (what you see is what you get) website part of the product and over the past 2 years Chef LeeZ has looked at and tested more than a dozen free WYSYWYGS rejecting all of them for one or more reasons. We were immediately pulled into building a test site using  GWD as GWD was promoted as a FREE CROSS PLATFORM HTML5 WYSYWYG.

It is important to understand GWD is a beta project which means its not for everyone as it is expected its users will find the bugs and report them so they can be added to a priority list of necessary fixes.  This blog is about what we discovered as work a-rounds for the bugs we found, and there are lots of bugs right now, which resulted in what you see as a GWD website for http://ChefLeeZ.com. and http://KruzOn.com.

The mobile device functionality of the new GWD sites were reviewed in Portland U.S.A on a Motorolla phone, from inside Canada on a I-Phone, and from inside Thailand on a Samsung Galaxy all having 5 inch or less screens so as to check the cross platform functionality.  GWD is not, out of the box, cross platform! It takes some muckin around to make it cross platform. We'll save you some time if you follow what Chef LeeZ did below to make GWD work cross platform.

Three other sites we have scheduled to rebuild with GWD were built with MS publisher are http://CookingSchoolsIntl.com, http://ThaiCookingSchoolBKK.com, http://xoproperty.com.

General Page layout:

First step will be to select the HTML option mid way down on the GWD menu options.

So lets start with a General or Template page design statement. We followed the basic design of Facebook, Twitter, and many many others being put the content in the middle and leave the sides blank for later design input. After many hours of muckin around we found that a left border of 150 px with a right border of 850 px worked on all platforms: internet explorer, Google chrome, smart phones and androids o/s above 4.0.

We recommend setting up with the default text size of 16 px and enlarge only where the text will have a minimum of 7 px to spare on the right margin so as to avoid overlapping texts on smart phone screens.

We adopted a basic two column site the first column starting at zero top and 150 left, the second column start left at 300 px but remember this is a WYSYWYG and you are not restricted by a static two columns so you will see text boxes on our sites that are a full 700 px wide while the text boxes following a two column concept will start at 300 px or 302 px (if beside a heavy picture like a logo) and be 550 px or 548 px wide depending on what they are up beside having a left margin 300 px.

Once you have your basic info input you will come up against the next biggest bug filled challenge and that is editing the content and EDITING GWD WEBSITES is the subject of our next post.

All this thinking makes me hungry for gourmet Thai cuisine. Chef LeeZ offers over 60 free vegan or meat gourmet Thai cuisine recipes and how to tutorial videos. Visit us and taste the difference.




No comments:

Post a Comment