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.

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.

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.

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.

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.

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…).