Category Archives: Design

Google’s New Software To Design HTML5 Animated WebPages

Here is the Google’s new Software to weave a webpage with animations and purely compatible to  latest HTML 5 Standards. If you are a web designer you must have heard about Adobe’s EDGE tools. EDGE is the set of tools and services provided by Adobe for Web Designers to create wonders in HTML 5. “Google Web Designer” is Google’s ‘EDGE tool’.

I had had an hands on with Adobe’s Creative Cloud services, especially with EDGE Animate and EDGE Code. And now playing with ‘Google Web Designer’ for the last few days. In my view it’s a replica of EDGE tools, nothing more. As of now I am not working on any HTML 5 projects, just playing with features. It got all the basic features to create a animations, but the options are little low when compared to Adobe’s. You can notice some insignificant bugs if you are using the current beta versions of GWD.

Even though it’s still in its earlier stages, it has to do more things in future to impress the designers. JavaScript editor is also not much impressive. But for naive designers working on HTML 5 animations, it will be too simple, direct (If they worked in other animation softwares) and sleek.

The one wonderful thing GWD offers which Adobe can’t is adding of advertisements to your animations or designs. It supports 3rd party ads through ‘Double Click’ – Google’s publisher service, AdMob -Mobile App based Ad delivery service. Adding them is solid simple and it didn’t involves any code changes.

Google Web Designer is a must try software to convert your imaginations to HTML 5. Caution: It is still in its beta mode, so wait for Google to surprise you soon with new releases and features.

Download Google Web Designer Here

Adobe’s EDGE Tools & Services page

Avoid Web Pages Jumping To Top While Using OnClick Event

When you use empty or ‘#’ reference in a href of a anchor tag (<a href=”#”></a>) to define any onclick or other functions like hover, ondblclick, you can find that the page jumps to the top or else it reloads again. I came across this problem when I tried to implement a tabs like design using JQuery’s “.click()” function. When ever the tab link (with # in the href) get pressed, JQuery comes in to play and hides the visible tab and shows another tab in the line according to the button clicked.

This problem persists over any where # link is used. The below code explains the problem. I am not certain why it happens, it may happen because the browser tries to find the # link, due to the failure it pose top of the page in the view port, or it may happen because the browser tries to re-render or redraw the page again using the available html source. While using empty href, you can able to see the page reloads, every time the particular click action is made irrespective of what functions used inside the onclick or any other functions used.

<a href="#" onclick="alert('After you click Ok, the page will jump back to the top')">Click to see the above code in action</a> 

Click to see the above code in action

The above code demonstrates the problem. The solution to avoid this is very simple. You have to replace # or empty href with a void JavaScript function ( JavaScript:void(0);  ). The demo and the code is given below.

<a href="JavaScript:void(0);" onclick="alert('This stops page jumping')">Click to see the above code in action</a> 

Click to see the above code in action

So here after never use empty or # reference in  anchor tag, particularly when you design some dynamic page or using transitions with the help of JQuery or any other JavaScript libraries.

How To Design A Faster Loading WebSite

A faster loading websites gives the users (readers) pleasant experience, and a faster site scores bonus and the slower ones dumped even though it has some good content and design.

To design a faster loading web site, we have to enlist the factors that affects the loading speed of a website. And they are

  1. HTML & CSS Rendering
  2. JavaScripts loading & running
  3. Files like pictures, background images, flash, sound files etc.,
  4. HTTP requests
  5. Cookie Access

Factors other than design issues are Network speed, server loads, that can be solved by choosing good hosting solutions. I westhost for shared hosting, vpsnet for cloud and buy cdn from vps.

Design Heuristics For Faster Loading

HTML & CSS

HTML and CSS is the basic building blocks of a web page. Always use externally linked css at the top of the html page in the head section and avoid internal and inline CSS codes. why? because

  • Inline Style sheets (CSS) are more often repeated again and again in a page, results in increased texts indeed increased size & rendering time.
  • Browser need CSS to show the content properly, so CSS should loaded before any other page elements.

Follow W3 standards for coding your page design.

Java Script

Use always external javascript, that written in a separate file like “script.js” and link this at the bottom of the page, before body tag. Java script only works after every page elements loaded, and loading of a java script should not delay a page display. A page is visible well before the loading of js, and it is only needed for some actions.

Some page design needs large javascript, to make a javascript load faster, minify it. Minifying in sense compressing, and eliminating spaces and comments in a javascript. There are lot of web service like MinifyJavaScript and JScompress

If you are using JQuery as your java library, then make use of Google APIS for hosted javascripts. For example alvistor is now using (at the time of writing this article) below link for latest version of minified JQuery JS. http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js So this loads faster from Google, instead loading your server.

Pictures & Background Images

Do not use the image as it is, try to compress it to the extent, at which there is no loss of quality. JPEG is common image extension, but .png, .gif plays better that .jpeg images.Here I am not talking about content images, here I pointing images that integrates with design like background images, buttons, etc.

There are many desktop software s for compressing a image, Smush.it from Yahoo developer network is a good online service for loss less image compression.

It is very important to make a image sizable and cache able. All the theme or design images should not load again and again for various pages of the same site, provided all the pages of the site uses same design. Making the images cache able, site only loads content not the images.

Reduce HTTP requests

Consider a page has 1 html file, 2 css file, 2 js file, 15 icons & buttons, 5 background images, totally there are 1+2+2+15+5=25 http requests are made to load a page. So to reduce the request, just reduce the files. How to do it.

Combining all CSS files in to 1 file and all JS files in one, there is another concept called gzip which compresses all the needed files in to one file. Regarding buttons and images there is anther concept in CSS called CSS Sprite.

Avoiding URL Re directions to reduce http requests.

CSS Sprite

Spriting is a concept of combining all images in to one and particular image is used by specifying the position of the needed image in the combined image. Here is an example, alvistor uses the single image for displaying icons. A particular image in this can be used by specifying  the position.

Here in this combined sprite image there are 15 icons for different purpose. If I upload this 15 separate images and link to my design, it needs 15 extra http requests for downloading each single icon of this. A browser can handle 1 request at a time, even though modern browsers are capable of handle 4 to 8 requests per time. Even if it is 4 it need 4 batch to download all icons completely. But in CSS Sprite, it the http request is reduced from 15 to 1, that means pretty faster loading.

This is not difficult as it seems. SpriteMe offers you a service, all you have to run your site under spriteMe, it will combine all your image in to one and re-write your CSS, all you have to do is just merge the CSS created by SpriteMe with your existing CSS.

Empty hooks & Cookies

These are some trivial things sometimes do its part in speeding up a site. Empty hooks for ‘href’ in anchor tag and ‘src’ in image tag should be eliminated.

Some complicated designs like eCommerce websites need cookies, if your design is going to set cookie make it small and less accessible.

Hooks and cookies are not going to affect the speed in considerable rate, but if you plan to optimize a design to the core, just take this also.

Flash & Other multimedia Components

I strongly recommend, not to use multimedia components and flash. It makes your site slow and occupies large amount of browser memory. HTML 5 is capable of doing all the animations that a flash can have. So stay away from Flash, up to my knowledge, flash don’t works for some operating system like apple’s ipad, and some other. If you want your design to work in all environment don’t in include flash and tedious multimedia components.

I hope, this article gives you some clear vision about designing a faster website design or theme. If you have any doubts and need clarification, I am eagerly waiting to respond your comments below.

Note: Test your site design with other sites at alvistor.com/speedtest