Archive for the 'Tips and Tricks' Category

Bringing your Home Page back to basics: Logo, Navi, Intro and Highlights

Sound simple, isn’t it? But the toughest is actually getting the Web looks simple and yet useful for the targeted audience. We are often flooded with lots of information online, so why still flood your visitors with so many data? People usually come to your homepage, its either they like it or leave it, you only got few seconds to let them make the decision.

So how is this going to work? I have break them into 4 sections under the Homepage – Logo, Navigation Menu, Introduction and Highlights.

First of all, lets talk about the Logo, its all about branding here, there is no other way better than here to create a lasting impression or impact for the viewers. If you like, its also good to add some tagline below the logo, it can be the company vision/mission or simply things you are selling.

Secondly, its the Navigation menu, it must be clear and most importantly easy to click. If there are too many links, remember to create more space (targeting touch-based devices) around the texts and make sure it looks neat. Missing any clicks, can be frustrating for the users at times.

Thirdly, its the Introduction, it must be clear and conscise, visitors must be able to tell what you are selling. I would say no more than 3 sentences, however to continue this experience, for example, you can add in a “Read More” or “Contact Us”.

Last but not least, will be the Highlights of the site (it can be rotating banners, news or thumbnails), its always good to keep this section updated and look fresh for returning visitors.

Solution to MacBook Pro retina display battery is not charging

Before sending down your MacBook Pro for further investigation by the specialist, you might want to try the following method from Apple, which suggest us to reset the System Management Controller (SMC):

Portable computers that have a battery you should not remove on your own include MacBook Pro (Early 2009) and later, all models of MacBook Air, and MacBook (Late 2009).

  1. Shut down the computer.
  2. Plug in the MagSafe power adapter to a power source, connecting it to the Mac if its not already connected.
  3. On the built-in keyboard, press the (left side) Shift-Control-Option keys and the power button at the same time.
  4. Release all the keys and the power button at the same time.
  5. Press the power button to turn on the computer.
    Note: The LED on the MagSafe power adapter may change states or temporarily turn off when you reset the SMC.

How to integrate PHP, CSS, jQuery and reCAPTCHA into a contact form (with sample files)

Would you like to integrate a PHP Contact form with the authentication technology (to determine human or computer) from reCAPTCHA, and visual effect from jQuery within your website, just like how I have done it for tysoh.com? You can now download the source files  (View Demo) I have provided and follow the step-by-step walkthrough below:

recaptcha

1) Sign up for a reCAPTCHA account under: http://www.google.com/recaptcha, take note of the public and private keys generated for your account, you will need it later in order for the form to work properly.

2) Open the file – ‘contact_form.php‘. Under row 62, enter your reCAPTCHA public key here.

contact_form1

3) Open the file – ‘ajax.recaptcha.php‘. Under row 3 and 4, enter your reCAPTCHA public and private key here.

contact_form2

4) Open the file – ‘sendmail.php‘. Under row 3 and 5, enter your email address and email Subject title respectively.

contact_form3

4) Last but not least, upload all the files to your server, and point to the file at ‘contact_form.php‘, if everything is working fine, you should see the reCAPTCHA box appearing in the webpage. You can now start testing for the contact page.

5) If its still no good for you, you can proceed to edit the Cascading Style Sheet (CSS) under ‘style.css‘, to modify the look of the form to fit your website theme.

References:
http://jquery.com
http://www.google.com/recaptcha

Integrate Google Custom Search in your website using Two page Layout

I have started using Google Custom Search (Version 1) back in 2009, and until recently after re-launching tysoh.com, I have decided to give it a try for Version 2, however after trying it out for a while, I find that its still very difficult to use, the documentation provided is not clear enough, and I have to do many trial and error before getting to what I intended. Furthermore, many customisation options are still missing, for example the option to remove the google watermark logo, the option to change background colour for the Adsense Block, the option to move the search button to the next line. These are just some of the limitations I have encountered so far…

gsc_0

In case you haven’t heard about this service by Google. Custom Search Engine is a tailored search experience, built using Google’s core search technology, that prioritizes or restricts search results based on websites and pages you specify. Your Custom Search Engine can be tailored to reflect your point of view or area of expertise.

Nevertheless, if you are still interested to have GCS in your website, I have figured out a straight forward method called Two page layout, and below is the step-by-step guide to get your started:

1) Go to: www.google.com/cse/‎ and sign up for an account

2) Create a new Search Engine, and you will be brought to the screen below, just click on ‘Look and Feel’ link located on the left hand sidebar, and select Two page layout. Click on ‘Save and Get Code’ link below the page:
gsc_1

3) Copy and paste the following code into your web page where you wanted the search box to appear:

gsc_2

4) Click on the Search Results Details button located near the top of the page, and enter the URL of your desired search results page.

gsc_3

5) Last but not least, click Next to proceed to the next screen to get your code and paste it into your Search Results page, remember that the name of this Search Results page must be the same as the one you specify in Step 4.

gsc_4

6) If its not good enough, you might want to click on the ‘Customize’ tab and set the colour for the search box, search results page:

gsc_5

Absolute or Relative values to set font size for your web pages using CSS?

Sometimes, the web technology is just moving too fast for us to catch up, and we human are so resist to changes and spoilt for choices. And this resulted in the topic I gonna cover today, when it comes to do font sizing for your websites, it can be quite confusing which is the best practice we should follow, in order to provide the best experience for the users.

Today there are basically 4 ways that you can set font sizes for your web pages, there are known as PX, PT, EM and Percentages. PX and PT are known as absolute values, while EM and Percentages are known as relative values. I have been using PX since I have started doing web design backed in 2004.

However, due to the dominance of touch-based smart phones, as well as tablets in the recent years. People are using different screen resolution, so the tendency for the browsers to rescale the font according to screen-size is unavoidable.

I have recently moved on to switch all the CSS to using relative values (EM and Percentages) instead, as its not based on absolute units, meaning the web pages resolution is not fixed on the user screen, they can adjust it accordingly.

So how do I actually use it? Percentage is only use once, which is set under the Body as 100%. The font-size: 100% is used to specify a “base” size and have all the subsequent HTML elements font-size set relative to it. Below is just an example:

body {font-size:100%;}
P {font-size:1em;}

That way, people who visited your site will see the text at the right size for what they have set in their browser preferences. For example, people with low vision may set the text size larger. If your font-size is set to 100%, they should see it exactly as desired. After that, you could set the sizes on your h1, h2, p, etc. with em

The only tip for using relative font sizes, is to use as few font-size changes as you can, to avoid too many nestings.

How to optimise your site for Retina Display – The fastest and most efficient way by CSS

Have been looking around on the web for some quick solution to this, and I know it should not include Javascript hacking or whatsoever, as this will include some additional checking by the browser, every time before the page is being loaded. After much testing, CSS approach is still the best future proof method.

My solution to this, is simply resize all your current images to twice the actual resolution you wanted to appear on-screen. For example, if your current image size is 200 x 400, just increase the resolution to 400 x 800, and use CSS coding to resize the image according to your desired size, following is some code snippet:

#header {
background-image:url(your_image_res_400_800.png);
background-size: 200px 400px;
}

If you are just using a simple img tag, below is the code:

<img src="your_image_res_400_800.png" width="200" height="400" />

The only minus point of using this method is that the page will not check whether the user screen is retina or not, it will just download the image in full resolution, and of course this will take up more bandwidth for the normal screen user, whom don’t even see any effect.

However, I don’t really see this a big problem, as more and more people are shifting to High Speed Broadband and even Fibre Optic. And more computers will quickly catch up with this “retina” effect. If you are still wondering whether to join the “retina” boat now, consider no more. You will be surprised at how good your site appear on high res display.

Travel to top