Week 14 at WCB

Week 14 at WCB

This week I would like to talk about the case study I have been working on called Happy Tours. As I mentioned last week, I’m working out a case study which will be used by students following the web design intermediate course at the WCB training centre.

Through this case students will learn step by step to plan, design and build a website.

My assignment is to build this case study showing all of these different steps. So first I will have to work out all the whole process myself.

  1. The different steps are:
  2. choose a name for your website
  3. buy domain name (or create one free online with a thisistap.com extension)
  4. set up wireframe defining the site structure of the website
  5. make sketch of page layout (based on theme you want to use)
  6. make framework: the layout of every page (based on chosen wordpress theme)
  7. gather content
  8. build website in WordPress
  9. going live (theoretically)

It was already decided that the case study would be build in a word press theme called DIVI. This theme was published in 2013 and it’s since become a flagship product of eleganthemes.org. This theme company has touted the ability for non-coders to create endless and elegant page configurations.

Furthermore it was pretty clear from the beginning that the website for the case study should be about traveling: the website “Happy Travel” was born.

I started to make the wire frame for the website in bubble.us. This simple and free online tool allows you to brainstorm ideas and create concept maps with no special software. Bubble.us features some highly interactive abilities: saving your mind map as an image, sharing (emailing) your work with a friend, printing your organizer, creating colorful mind map organizers, embedding your work into a website or blog, and working with friends. You are able to “play” at this site without registering; however registration is necessary for saving, embedding, emailing, and other features. NOTE: the free version only allows you to SAVE three maps, so you will want to save your completed maps as images, then deleted them from your membership to make room for more freebies.

Screen Shot 2015-03-16 at 20.48.12

Next stage was to make sketches for each page layout based on the DIVI theme. In order to do this I studied the DIVI demo on). I also downloaded the theme in wordpress and started to experiment on my “thisistap” account.

After I found out more about DIVI and its possibilities I started to sketch the home page and all other pages.

image (2) image (1)

When the head teacher and WCB founder, Carl approved the sketches, I started to work out the framework of the website and gather the content. To set up a wireframe I can really recommend you to use Uxpin for this. UXPin ships you a design resource book for drawing out paper and pencil wireframes…. then it uses magic to turn digital pictures of said mockups into real, functional, digital wireframes.

Next week I will start with step 7 on my way to set up a website: I will actually start building the Happy Travel website in wordpress. So stay tuned when you want to find out more about this project!

Week 13 at WCB

hi you all,

Good to be back on my blog.

This week I worked on a new case study for the web design intermediate course given by the WCB training centre. During this course students will learn to build a fully functional professional site that uses advanced layouts and content and which is good enough to sell on to any clients you may have. If you are interested in following this course, please read more about it on: http://www.webcoursesbangkok.com/full/web-designer-intermediate/

I started to make a wireframe of this new case study and once approved by our head teacher, made a sketch of how the website of this case study could look like. Next stage will be to make a framework with an online tool we recommend to use: https://gomockingbird.com/. After aproval I can really start building the website, this will be a great practice for me.

Besides this project we, all interns at WCB, had a session about how to speed up your website. This is great knowledge for everybody working in webdesign business. If you are working in this field, please feel free to read and profit from my summary below:

How to speed up your website?

Scan your website performance on:

  1. https://developers.google.com/speed/pagespeed/insights/
  2. http://tools.pingdom.com/

A good score would be 80%.
The load speed should be about 3 seconds or below.
Each of these scans will give you an insight which components are slowing down your website.
This table shows you which things can slow down a website and how to solve or improve them:

Cause Solution
Big image
  • Save for web
  • Resize images and use jpeg format when you can
  • Use sprites if you got loads of images
  • Shrink PNG files (at smush.it, tinypng.com)
  • Use online services (picassa, Flickr etc)

NB A lot of your load speed can be kept by using right size and format of the images. Specifying image dimensions saves the browser time to sort out how to dislay the image which speeds things up.

To many requests
Absence of caching Enable caching
Chaching will reduce the need for returning visitors to download the same files from your server twice. Secondly, they reduce the number of HTTP requests made.
Caching can be enabled on 3 levels:

  1. Database
  2. Files
  3. Local server: CDN or Hosting Cache
  • Enable caching in the .htaccess file in your database. (find code below and paste it into your .htaccess file)
  • Instal caching plugin in WP (like w3.total cache plugin)
  • Install GZIP (to zip up documents at host server’s end) by login in on /wp-admin/options.php. NB this will only work if the hostcompany has enabled GZIP too.

NB: caching should only be activated website has been built. If caching is operating during development, you will not be able to see any changement you are making in the browser.

Not optimized CSS
  • Choose the right theme
  • Minimize CSS
  • Rework CSS
  • Put all CSS in one CSS file to reduce amount of requests.
Unused files/images/themes in database or WordPress
  • Delete unnecessary files. wp-optimize plugin can help to do the job for you.
Shared hosting
  • Get dedicated hosting
  • Delete files from your database causing the virus
  • Re-install WP
  • Delete unused WP accounts
  • Change WP password
  • Install security plugin
  • Optimize folders/file permission (Codex)
Bad Javascript
  • Rework Javascript
  • Put all JavaScript into one JavaScript file to reduce amount of requests.
  • Put (java) script in page footer
  • Linking CSS stylesheet to top of the page

Browsers won’t render (=read) a page before rendering the CSS file. JavaScript should be on the bottom of the footer, because browsers only parse content after javascript is fully loaded.

Bad hosting
  • Change hosting company
Bad coded themes
  • Check the page speed of the theme’s demo, using a tool such as Pingdom, to see how quickly it runs with nothing added to it. This should give you an idea of how well coded it is.
Absence of CDN
  • Set up a CDN

A CDN hosts your files across servers around the world. It enables to download the files from servers closest to users geographically. Because bandwidth is spread across many different servers, the load on any single server is reduced. Setting up a CDN can take a few hours, but it’s usually one of the quickest ways to dramatically improve page-loading speed.

Cloudflare offers free service in setting up a CDN.

Bad plugins
  • use p3 plugin (plugin performance profiler) to scan plugins influence on loading speed and exchange them if necessary

Turned on pingbacks and tranchbacks

  • Turn them off under the “Discussion” tab in “Settings.”

“Keep Alive” turned on

  • Enable Keep Alive, simply copy and paste the code below into your.htaccess file. Header set Connection keep-alive
Not optimized PHP
  • Replace PHP with static HTML.

calling information through PHP uses up server resources and should be replaced with static HTML where it doesn’t save any time.

The DNS response time = The time it takes for the browser to connect to the hosting server
CDN   = Content delivery network
Sprites   = A sprite is essentially one large image file that contains all of your individual
images next to each other. CSS sprites speed up a website because loading one big image is much faster than loading a lot of small images
Keep Alive              = Enabling Keep Alive allows the client’s machine to download multiple files without having to repeatedly ask for permission, thus saving bandwidth.


AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Week 12 at WCB

Hi you all,

This week there was a problem on the Eden-Thai website. Strangely enough some /< signs signs popped up on the French and German version of the projects page, where they were not supposed to. And two images were not displayed on the French version.

PowerPoint Presentation

I checked the back-end in wordpress first but I could not find any trace of /> signs or reasons that the images were not shown.

Edit Page ‹ Eden Thai — WordPress

In order to set up the French and German version of the website we installed a plug in called Transposh. This translation plugin is easy to use and very convenient to set up if you wish to have versions of your website in different languages. They offer good support too.

Once you have set up all pages of your new website, you are able to edit the different language pages individually. You need to open these pages (via view pages) in your dashboard. You can choose the option to edit the page (the French version in my example below) on top of the page.

Notre projet | Eden Thai

After clicking the little green icons in the text, you can adjust the by Transposh translated text. And for sure you will need to polish your Transposh translation text. Humans can just still do some things better than computer systems do.

Notre projet | Eden Thai-1

The plugin settings of Transposh determine how Transposh needs to translate the original text into the requested other languages. Does it need to start translating after every dot? Or after every comma? The biggest pieces of text intervals in the Transposh text editing box, you will get by putting the settings like in screenshot below, by adjusting the “parser related settings” in Transposh advanced settings. They already warn you that it is dangerous to play with these settings. In the Eden-Thai case, after the site was build, the wish was to be able to edit bigger chucks of text. Reason for us to change these”parser related settings”.

Advanced | Transposh ‹ Eden Thai — WordPress-1

You may ask yourself: nice this Transposh story, but what has this to do with the /> signs and non displayed images I started this blog with? Well, by adjusting these advanced settings in Transposh, your translated text does change (back to english) and somehow these /> errors can occur apparently. My advice: make up your mind what you want from Transposh in the first place before even building your website and do not change its settings afterwards. This saves you al lot of fixing and custom translation work afterwards.

So how did I solve these issues of /> symbols and disappeared images?
As there was nothing to be found in the back-end version in wordpress, I decided to remove the images from the page and save it without the images. Than, I re-upload the same images again in wordpress, put them back in the page and saved it in wordpress. Guess what? It worked: no more /> signs in the French and German page and the two images were shown on the pages again. To finish this mission however, it was necessary to do some new CSS for the ipad and iphone screen settings, because their breakpoints were not pretty anymore.

Now its time for me to think about all the things I learned at WCB during my holiday break, I will get back to you in 2 weeks!

Week 11 at WCB

Hi you all out there, it’s me again!

Past week I worked on different assignments, partly to help the WCB training centre and partly for the WCB agency.

WCB training centre will start a new course soon called: “professional freelancer for web design”. This course will be very useful for all people who want to become a professional web designer. All the necessary tools and tricks will be discussed to run a organized and profitable business. As I have the ambition to run my own business one day, I like to help developing this course. Next week will be the first trial session (of 4 sessions in total, 3 hour each), we are all very exited. Its going to be very interesting.

One of my other tasks for the WCB agency was to add a “book now” button on the baantebpitak.com website. It had to be placed in the slide show on each page. We used the revolution slider to built these sliders. Luckily, within the revolution slider plugin, you can add an extra layer to each individual slide. And within this application you can edit your layer and link it to the desired location.

Revolution Slider ‹ Baan Tebpitak — WordPress

On the baantebpitak.com contact page however the head image is not a slider but a normal image. I imported an .png image of the “book now” button in the WP media library. Next step was to place the button on the right place, precisely on the same spot as all the other “book now” buttons put in the revolution slider. In the WP text/html mode, I gave the image an id (“contactpagebutton”) and after the famous inspect element exercise, I could add the necessary coding in the CSS sheet.

Screenshot 2015-02-05 10.58.34-1


inspect element

After these adjustments, I thought my mission was complete. After checking all the baantebpitak.com webpages on all devices and in all browsers, I found out that the slide show on the about page was not visible in the firefox browser. This was the point that my assignment became suddenly more complex. Did you ever heard of the Z index? I didn’t.

The Google’s definition of the z-index: The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

This appeared to be the key for making the slide show appear again on the about page. Via inspect elements in the firefox browser, I could determine which value the Z index needed to have to make the slide show surface again. In my case: just trial and error with all amounts you can think of like 0,04 or 100000, and everything in between. For me z-index 1 did the trick.

To make the css coding, browser specific I used the url-prefix:
@-moz-document url-prefix() {

Within this prefix I could add the custom css codes, like:

div.rev_slider_wrapper div.rev_slider {
z-index: 1;
position: absolute !important;
} /****** All rev slider in the site ******/

Theme Editor ‹ Baan Tebpitak — WordPress

Meaning that all these codes within the {} after @-moz-document url-prefix() will only be used when the website is opened in the Firefox browser.

These were my most important lessons for this week. Nice to see you again next week!

week 9 & 10 at WCB

Hello again,

It has been a while since my last post. That doesn’t mean I haven’t learnt anything. On the contrary; I learnt again some interesting new things about web designing.

Today I woud like to talk about a tool called “gather content” and a WordPress hosting platform named ” This is Tap”.

Soon, the new website for WCB will be launched. The WCB team is very busy making the necessary preparements. One amongst these is to gather content for the new website. How convenient that there is such thing as an online tool called “gather content”, which allows you to put your website structure online and share it with those who need to provide or generate the content. Actually their slogan says it al: “Painlessly plan, organize and collaborate on web content”.

Website Planning Tool and Content Organization — GatherContent

You can sign up for trial period of 30 days. If you think the tool is useful you can pay $49 monthly to become a full “gather content” customer. Once signed up, you can create your own project and create all pages you need content for.

Overview — WCB.com Re-design 2015 — GatherContent-2

Overview — WCB.com Re-design 2015 — GatherContent-1-1

In each page you can create the structure you would like to have. And you can create subcategories per page. For the new WCB website I will use these tabs to specify each element on each of the individual web pages.
Home — WCB.com Re-design 2015 — GatherContent-1

Once your project is set up in gather content, you can share it with everybody involved. The system even sends out reminders to the ones who are asked to deliver content. A very user friendly and useful tool for each web designer I would say!

Another program which is useful knowing about, is “This is Tap”. The days of managing your website hosting through complicated control panels is over. This is tap is a fast and easy way to host and build your WordPress website.

Signing up is really easy. If you would like to find out more, please continue reading my post: this is the manual I have written for the WCB Web Designers course (during which you will create your own website named “happy restaurant”).

I. Create your website
For this exercise we will be creating a website on an online platform called “This is Tap”. By creating your website on this platform, your website will be hosted by “This is Tap” and it will be automatically linked to WordPress as well. 

A. Creating a “This is Tap” account: 
1. Go to https://thisistap.com/
2. Click on [get started]
3. Sign up by putting in your name, email and creating a password.

Tap | WordPress Hosting Built & Designed for Everyone

B. Create your website 
1. When signed up for “This is Tap” click on [Add New]
2. Create a Wordpress username and password.
3. Create a unique domain name for your Happy Restaurant website, by adding a unique number behind it (for example: happyrestaurant10).
4. Wait until your website is built in “This is Tap”.
5. When website is built, click on the site you just created.
6. click on [view site] and find your url at the top. Your domain name will be something like: http://happyrestaurant10.thisistap.com/

Tap - Your Dashboard

Tap - Your Dashboard-2

Tap - Your Dashboard-4

II. Logging in to WordPress

1. On your email account, you will receive welcome emails from “This is Tap” and WordPress. Do not delete them: WordPress will send you your WordPress login-username!

New WordPress Site - audrey@webcoursesbangkok.com - Web Courses Bangkok Mail-1

A. Logging in
1. To continue building your website please go to your new domain adding /wp-admin to it. Following my example above, this would be the url that allows me to login to WordPress:
You are now able to log in with the username sent to you by WordPress and with the WordPress password created in “This is Tap” for your happy restaurant website.

week 8 at WCB

Welcome back to my blog about all my learning at WCB. Its already more than 2 months ago that I started my internship at WCB: the training centre for all web design (related) topics. Im happy that I can help with WCB agency projects as well, because it allows me to learn web design on the job. As a result I even start to feel comfortable working in wordpress and do some html and CSS coding.

This past week was about jotform, jot form and even more practice in jot form. This is a very easy but slightly restricted online program where you can set up your own online registration forms. After struggling through the logic behind the programm and adding the necessary CSS codes, I managed to finish the form:
screenshot-form.jotform.me 2015-01-11 20-39-08

As said, Jotform is easy but your options to edit the form are limited why custom CSS coding is required to get the wanted result. And the CSS coding field is not really user friendly. Its hidden in the “preferences” menu.

JotForm · Form Builder

Another good tip I can give you when you want to use a jot form format is to insert the mobile responsive widget. The registration form I built is meant for ipad. While using this widget, don’t forget to put the settings of the images in the form: height and width on auto. Otherwise your images will be wrongly displayed and aligned.

responsive widget jotform

img size combination widget


Another thing I worked on is setting up an auto response email in wordpress. On the eden-thai website its possible to send of a contact form or to request a brochure for more information. Whenever somebody sends his enquiry, an automatic generated email reply will be send.

Eden Thai – Contact Us 2

A good plugin to use for this is contact form 7. Easy to do, you install the plugin and there you go. Well at least if you know where to find it..

this tutorial I found helped me to where to find it. Do not be to annoyed with the very enthusiastic tone of voice of the speaker…:

Below email shows the auto respons email. However, by default wordpress is called as sender of the auto respons email:

0Thank you for your request - audrey@webcoursesbangkok.com - Web Courses Bangkok Mail

With this php coding you can change this on the server. You have to put this code in the functions.php file. I have to admit that I did not do this all by myself. My helpful colleague explained me how to do this. Now I can always watch my blog when I want to use this code again!

01Theme Editor ‹ Eden Thai — WordPress-2

This is the result after inserting this php code in the file:

02Thank you for your request - audrey@webcoursesbangkok.com - Web Courses Bangkok Mail-1

Apart from these exercizes, we had a very interesting workshop this week on Javascript. It was an introduction to Javascript. Next week will will have a second course. I will update you about it on my blog next week.

week 7 at WCB

hello dear readers,

welcome back on my blog. I’ve got some new things I want to share with you this week.

The Eden Thai website needed to be polished before it can go live. The list of things that needed to be done is:

1. Make sure font sizes are used in same way on every individual page.
That seems logic but when you are building pages, you can be so focused on designing perfect individually pages that design becomes more important than consistency.

For example: The “living option” page starts with 4 columns; 3 images and a text box. My goal was to get the title “apartment types” on one row. Because of the limited column size, I initially choose to set up the text title in fontsize H2 and made it strong. However, in terms of consistancy this title should be in H1. So I changed it into H1. To avoid the title to break into 2 lines; it was needed to increase column width in CSS.

screenshot-www.agencyclients.com 2014-12-21 13-50-47

Theme Editor ‹ Eden Thai — WordPress

2. Aligning and optimize pictures.
Is every image correct aligned with text boxes or other items on the website? Especially if you are changing font sizes last minute, some redesigning might be needed :)).

3. Fix contact forms of “contact form 7” plugin.
This is actually an easy plugin to use. You create a tag and the plugin will generate the codes that need to be in the form presented on the website and in the message box; the automatically generated email the website owner will receive as soon as one of his/her users sends of requests via this form.

screenshot-www.agencyclients.com 2014-12-21 13-30-15

Somehow my form, did not work. It seemed that one tag was incorrect. I put in “my email” under the telephone tag. The online form will give an error and it will be impossible to submit the form. Another thing I wanted to change is to enlarge the text area in the form under the question tag. People should be able to read there own input. Asking a question will take more area than putting in an adress. Originally I put in a text tag. I changed it to “textarea”, which will enlarges the text field in the form.

Edit Contact Form ‹ Eden Thai — WordPress

Eden Thai – Contact Us

4. Check spelling.
Check spelling throughout the whole website. Do not just copy paste the contact you get from the customer. It could have some misspellings too…

5. Check responsiveness on all different devices.
A new CSS lesson was to manage the responsiveness of the website. Apparently I need to update my IOS, in order to have some extra features, that will help to determine the screensizes that will need custom css. For example: if you take “the concept” page. If you try to resize it to a smaller screen, to a certain extend the PC page set up will be in tact. But if you decrease the screensize to much, the page set up will change automatically to be able to display all elements in a smaller screen.

Screen shot 2014-12-21 at 14.37.27

Screen shot 2014-12-21 at 14.37.51

This is arranged by a default setting of WordPress. However this is not always beautifully done. You need to check each individual page on Ipad, Ipad mini and mobile. You can find their exact screensizes online. On your PC you need to check the design of each page with these different screen sizes. Most probably that custom CSS is needed to remain a beautiful design on portable devices as well.

Theme Editor ‹ Eden Thai — WordPress-1

In the example of ‘the concept’ page the set up has been changed for screensize with max-width of: 800px. The image on left side will disappear beyond this point in order to have text displayed in stead of this image with empty space next to it (sorry, I forgot to make the screenshot before I fixed this…).