Prototype work done

By the end of March I was able to finish all the wireframe work and sent them to the host company so as to confirm the details on the phone. We had another meeting discussing on possible adjustments, then I was informed that my manager was leaving Canada in a week. As a result she might not be able to do the assessment on time, and we can only communicate through email or Skype. Further more, they haven't finished content preparation including all the writing and graphic stuff, which may cause some problems. But they insisted that I could start coding as the structure was clear enough. I had to go on with these concerns in my mind.

So my mission is to code a website using fake texts and images without a pre-determined colour scheme, which makes it more like a html version of wireframes. I decided to try some new development tools in this project. I used Bootstrap as its front-end framework, and SCSS as a more efficient styling method. Actually this was my first time using a front-end framework on a project, so I expected that it would cost me more time to study instead of saving time. As for the back-end php framework, I chose Code Igniter which I was most familiar with.

For the next 3 days I continued to work on html/css scripting. Most work is done so far. I guess I'll need another 5 hours to work on the interaction part, another 60 hours on CMS and database design, and a couple of hours on visual enhancements - if the client could give me their determined colour scheme as soon as possible.

Harder than expectation

To my surprise, it wasn't until one week later that I finally got the document from the client. And the contents seem to be a little clutter and unorganized. Some of them should be defined as functionality requirement, while some of them are more like introduction as whole, and some of them are repeated.  It took some time for me to confirm with the client about what they really wanted to present. I found that they could be very vocal when talking about what they want to achieve, for instance, increasing sales, or providing better online contact method. They also knew well about very specific function details like API installation. But they couldn't tell how they want to organize all the contents.

I started with grouping and labeling. There were over 30 sections of contents, according to their proposal, but of course it would be unpractical if we made a menu following a structure like that. However, dividing a site to 30 pages would probably be working. So my first step was basically categorizing after comprehending the concept of each section, which means, making a sitemap.

My client fully understood that the number of menu items should be limited, but we couldn't avoid debating when things came to a concrete plan. And as the contents they delivered were still not to an end, I was quite sure that there was a possibility of structure-altering in the future. As for me, there is a shackle that I have to accomplish a project during a certain period of time. So I suggested to remove some of unnecessary functionalities, or to replace some with pre-existing plug-in. Luckily we had a final verdict only after a few times of revisions.

By the end of the second week, I was able to finish most of information architecture plan including site purposes, site goals, user missions, user experiences, competitive analysis, functionality requirements, and sitemap. Still it took more time than I expected to achieve this because in reality the client always has different opinions in terms of whatever you can think of.

Mission Start

So I went to Pacific Link Language Centre this morning and had a meeting with my manager, who is basically responsible for all kinds of business in that department, from customer service to course scheduling. Though we spoke English when we first did the interview, I am allowed to speak Mandarin during meetings so we can communicate better.

PLLC already have a website built by wordpress but as they demand more functionalities like different language versions and highly customized template, they would like to re-build the website. It won't be a problem if the website remains its wordpress structure after revising, however, since I'm not a wordpress expert that customizing wordpress sites would take more time than an organic site, I decided to adopt the latter scenario. Though both scenarios will definitely take more than 200 hours for me to finish. I consider this as a practice.

They have no knowledge about building a website. I had to start with educating how the process would be like. I explained every step we must go through and why we had to do so. Considering that the manager initially thought that site-building was just as easy as installing any open source platform, educating could be essential to facilitate the progress. I explained how the planning work would be like by showing her the information architecture document. Having something in hand to show was really more helpful rather than just talking which might cause more confusion.

It took about 3 hours to explain, and another 2 hours to understand their needs and requirements. Unfortunately the client hadn't prepare anything before meeting that they even didn't have an organized backup for the website contents. I emphasized again on what I needed before going on to work. I mean, at least I need to know what contents they want to put on the site. And at this point of time all I have to do is just waiting.

Tips for Smart Phone App Coding

Mainly two ways to show different interface due to different devices:

1. Load matching stylesheet

<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">

2. Add media queries in CSS

@media screen and (min-device-width: 481px) { ... }

Viewport Meta Tag Options

1. Make the viewport width match user's device-width

Moving wordpress site to a new address

Suppose you've built a wordpress website on www.abc.com/one, now you want to move it to one.abc.com --

Step 1. Create your subdomain and folder on your server. You don't want to destroy your original wordpress folder,  so you should use a different name, or alternatively you may rename the old folder before creating a new folder/subdomain.

Step 2. Move all files under the old folder to the new one. Be attention not to move the folder but the files under it, since you want to use one.abc.com as your root folder.

Step 3. If you're using a different database for the new location, make sure that the database is accessible. Check the configuration in "wp-config.php" to get your database name and password.

Tips for Facebook Social Networking

Having been working on my personal blog for many years, I think I am not a complete newbie in this field. I have a Facebook fan page which has over 8500 fans, and the number remain increasing though I now have very few time to maintain it. I ran another fan page for my company, whose fans reached as much as 1000 within 3 months. I have the confidence to make a new-created fan page's fans reach 100 in a week, if enough free time, and if I was allowed to use my mother tongue.

Social networking is a time-consuming work that requires lots of practice and patience. No one can become an expert without actually doing it, and you may find social networking for different events, companies, and websites, demands different ways to do it. The result varies depending not only on your efforts, but also on many factors like the base number of your targeted audience, current trends, the resources you own, etc. For instance, two fan pages, A and B start from the same day. A is a famous singer's fans club, and B is for collecting moral examples in our city. I should expect the former one will grow much faster. But if A is not an official page and  B is run by the government, the situation may change.

Apply URL Rewriting to PHP

This summary is not available. Please click here to view the post.

Keep prototyping simple

I find those "powerful prototyping tools" so pointless.

Before I became a web developer, I was a website editor. I learnt how to design user interface when my superior required all the people in our department to participate in the building work of  our company website. That year a software Auxure was imported to Taiwan and was recommended by many "experts" in the industry. I tried it, not bad. Using it you can actually generate javascript files demonstrating a bench of beautiful effects.

Auxure has so many amazing features allowing UI designers to show how this interface is working. But to be able to do that, you need to spend time studying it, and there is definitely a learning curve. Auxure can be one of the hardest "wireframing tool" I've ever known. One of my partners (after I became a freelancer) was so excited when she firstly experienced this. She kept asking me questions about how to manipulate the layers to make the effects exactly the same as jQuery UI could do. Finally I said to her, "Well, after you spend so much time to make it work like a functioning website, it's still not a website. I still have to write all the codes. Though you don't need to explain what results do you want but instead I have to explain why we'd better not to do that on a real website.  No mater how fancy your prototype is, the result makes no difference. I believe you can save the time you spend on building these effects by talking to me."

I just found it too complex and unnecessary. A prototype is a prototype. If the tool enables people to communicate effectively, I would love to embrace it. But if the advantage is merely seen?

Upgrading GoDaddy Hosting to PHP 5.x

I found the PHP version too old when I install a new wordpress application on my server. The PHP version was 4.3, ’cause it was a long time since I bought this host service from GoDaddy and haven’t updated yet. Fortunately, there is an updating solution. The Unix server provided by Godaddy allows users to install essential software as they have needs.

To upgrade it manually, create (if not exsits) a .htaccess file in the root folder of your website server with the content below:

AddHandler x-httpd-php5 .php

AddHandler x-httpd-php .php4

Save it, done.

Still like the instructor told us, GoDaddy is apparently not a good choice for hosting, since its C-Panel UI design is totally horrible. When I firstly bought an 1-year plan from GoDaddy, I was surprised that I had to wait 2-3 hours everytime after setting a new sub-domain or modifing some lines in .htaccess file. I also had a hard time finding where their domain management panel was. Everything was so frustrating. The No.1 reason driving me away was that most IPs of GoDaddy servers are banned in China, which could be a problem if you have a marketing plan in that country.

So I switched to Bluehost.com though I still have a few websites hosted on it. Some websites are occupied and sadly I have no time to deal with the coming issues if I'm gonna move them. But I will do it sooner or later.