Guidelines for Making W3C Compatible Mobile Websites

W3C MobileOk Checker performs tests on a web page to determine its level of mobile-friendliness. http://validator.w3.org/mobile/

This also helps in page speed.
Following are some basic guidelines to make mobile sites W3C compatible.

  • The total size of the page should not be exceeded 20 kilobytes (Primary document, Images, Style sheets)
  • Big pages require a possibly high cost and a long waiting time in many mobile networks. For instance, on many mobile networks, downloading 100KB worth of data takes as long as 1 minute.
  • Scale down images to a reasonable size. Remove images that are not essential to the layout of the page.
  • Make CSS & Javascript external. Eliminate inline CSS & javascript code. It increases page size as well as blocks initial content from loading.
  • <input type=’image’> assumes that the user will click on a specific area of an image, which is not possible on many mobile devices. So don’t use the image input type, try to use another input mechanism like “button”, “submit” or <img> etc…
  • The size of the document’s markup should not exceed 10 kilobytes. Mobile devices have limited screens. Long pages on small screens are confusing, because users can’t see the big picture and feel lost. The 10Kb limit ensures that the page is still usable on devices with small screens. Continue reading →

Which PHP CMS You Likes Most?

Eureka!

We can use to detect the browser such that it would redirect user to another if the request comes from a .

1. Create the .

View original post 31 more words

Best Techniques for Web Page Load Time Optimization

Followings are some best techniques to speed up your websites:

1.    Include CSS in head – always render CSS file in the head section

2.    JavaScript in footer – move JavaScript calls to web page footer.

3.    Avoid inline CSS and JavaScript expressions. It increases html size and http

4.    Avoid duplicate CSS & javascript code. Keep optimized files.

5.    on window.onload

a. Render heavy JavaScript based objects on window.onload event. Like

  • JS widgets
  • Social media sharing buttons scripts

It will help to improve web page content loading time.  Once browser completed rendering of main content then objects written on window onload event will be rendered into background and doesn’t require user to wait for them

Continue reading →

Use of Media Queries for Standard Devices

CSS3 provides a way to make CSS conditional to write the CSS as per device resolution.

See following HTML5 compatible CSS to design your mobile websites for various standard devices. It includes iPhone, iPad, smart phones etc…


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Reference URL

usort() PHP Function Issue with PHP 5.3

Most of you may be faced this issue, usort() behaves differently in PHP 5.1 & 5.3 versions.

E.g

<?php
class myClass {
  public static function mySortMethod($object1, $object2)
  {
     if ($object1->order == $object2->order) 
    {
         return 0;
    }
    return ($object1->order < $object2->order) ? -1 : 1;
  }
}

usort($arr, 'myClass: mySortMethod');

?>

This would be working fine till PHP 5.1, but in latest version means PHP 5.3 it doesn’t sort properly.

Solution:

Continue reading →

Select box skinning Jquery plugin

If you want to design/skin your HTML  select box, you can do it using jquery.select_skin plugin.

Find following link for more information and to download this plugin:

http://www.verot.net/jquery_select_skin.htm