Category — Design Tips & Tricks

Last few weeks I work on the project for PhD student in England. She needs a reliable online survey application which will reside on her web server. It should be open source, php based system and it should support MySQL database with the possibility to give each repondent his/her own username and password. I first tried out LimeSurvey, but it uses tokens for restricted access which are not sufficient for this poject. Later I found phpESP and as far as I have tested it, it should be perfect for the job. However, I found it will be harder to make it look good. Cross your fingers!

One of the most simple online applications is http://tagcrowd.com/

All you have to do is to enter text, number of tags to display, frequencies, which words the engine can ignore or group and you are done. You can also upload txt file with text.

Have fun with it!

As I many times surf the web and find an interesting solution to a “web” problem I might have I often find some cool feature I have seen before but was unable to find out exactly how it works. The same happened with Image Cross Fader Redux. It consists of JavaScript code, CSS and HTML and makes some kind of gallery of fading images. You can see an example: 45royale.com/ and on many other pages.

The Basics

Files are available at these two web sites

http://slayeroffice.com

http://www.javascriptsearch.com

To sum up: write HTML code in your document (with correct names of pictures and their sizes), write CSS in the file xfade2.css, write CSS in the file fade2_0.css, write Javascript code and add CSS and Javascript links to the head of your HTML document.

I’ll use it in my next project.

As only few hours a day and weekends are considered as my free time I often spend them studying web, making web pages, testing applications, exploring the web and Web 2.0 world.

I can imagine you might want to know how a web page gets created, which are the steps that work for me and maybe you’ll get a simple tip on how to make web design more pleasurable. Today I would like to describe how my last web site was made - in a week.

When I got the offer to make a web site, the content was already written, so I began with coding the content of the index page with correct XHTML markup. That was done in approx. 10 min and the next step was CSS.

Design of the index page

I usually begin designing the layout of the page either in PhotoShop or in CSS (usually when I already have the content). This is the time to decide which colours to use, how many columns will be used, where the navigation will be … In this case I had:

- logo or branding info

- main navigation,

- three boxes of information about the company and

- footer with copyright information

For the purpose of lighting up the design, and breaking chunks of content I also used a picture (which was made in PhotoShop).

While coding in CSS new divs were created in XHTML to accommodate all the content in appropriate groups. Therefore divs like #wrapper, #header, #main, #action, #bottom, #legal were used and stiled with CSS.

At the end of this process a picture of the mock-up web page was created and sent for approval to the client.

When, a few days later, the design was approved I have began to seriously think about how to make this web site work. The first changes had to be made with design. I have tried several options and was finally content with the outcome.

As I have checked the design only in Mozilla Firefox browser I was “just a bit” surprised to see it in Internet Explorer - a bit broken. So another hour or two went by the time I managed to fix all inconsistencies.

Design of sub-pages

After the first page was done, sub-pages became my main interest. I knew the basic structure will be taken form the index page, however the layout had to be somewhat different as the content will more vertical than horizontal. I have therefore decided to put the box form the main page in sidebar and leave 2/3 of the page for text - headers and paragraphs.

Sidebar was then placed to the right side and a picture at the top of the sidebar was added (to lead eyes across the page). Then I had quite a hard time with header styles. Both h2 and h2 made some problems as they didn’t look so good (as in the final version) and still I think I might find even better solution someday, however this one will also do.

Design is ok

When design was finalized I began to save sub-pages as new files and changing the content. At the end I had six pages with content, but a form that didn’t work.

The contact form

At first the form fields were written of the paper, then coded in XHTML and the the search for the right script began. I wanted to use only php and no CGI scripts as php would be easier to implement on the server. Finally I found the php script that would satisfy my needs (I have no idea how to code the whole thing however I manage to adapt them pretty well). So I spent the next hour to code my form right, to make a thank you/you have a problem page, make it look nice and add additional fields for telephone and test it at least 20 times.

Additional tasks

So now everything works on the test server and it is time to open an account on Google Analytics and add tracking code. This is the best way to have some meaningful statistics!

Then metadata was added - description, keywords, robots.

And all pages were again tested and checked with HTML and CSS validator.
Here is the end result I am so proud of:

http://www.odvetnik-grebenc.si/

Another tip on how to make backup files. As all html files have to have the same name all the time to work properly the best way is to make copies of the root folder. If you can make a doc file versions Word001.doc, Word002.doc … name folders as Web01, Web02, Web03 … (or any other name instead of Web). The number of zeros can be one, two or more - depends on the number of versions you need to make. In the folder I advise you to include PhotoShop files with the versions of images that are in the current version of HTML and CSS files. This can save you a lot of time!

I have just learned a lesson - disable cookies and forget about the access to this WP’s admin dashboard!

OK, another lesson learned today - how to add php.ini functions to .htaccess file on Apache server.

Two examples:

php_flag register_globals on

php_flag output_buffering on