Category Archives: Design

Best practice for deferred image loading


The speed a website loads and is ready to interact with is a very important element is web design and has nothing to do with graphics design.

One method to decrease the time for the browser to be ready for interaction is by having parts of the page load after the basic initial graphics design is presented.

Elements that have depth that can be deferred include slide shows and perhaps some interactions and animations. These elements can be loaded after a small delay.

$(document).ready(function() {
setTimeout(images, 750);
}

An onload event may also be used with images but it is buggy with IE. Specifically if the images have been cached. The work around has to do with the order of functions in the Javascript.

Bad:

var img = new Image();
img.src = "image.jpg";
img.onload = function() {
/* function */
}

Good:

var img = new Image();
img.onload = function() {
/* function */
}
img.src = "image.jpg";

This can be handled with jquery.

$(document).ready(function() {
var newImage = "images/002.jpg"; //Image name

$("a.tnClick").click(function() {
$("#myImage").hide() //Hide it
.one('load', function() { //Set something to run when it finishes loading
$(this).fadeIn(); //Fade it in when loaded
})
.attr('src', newImage) //Set the source so it begins fetching
.each(function() {
//Cache fix for browsers that don't trigger .load()
if(this.complete) $(this).trigger('load');
});
});
});

Web site design should match traditional marketing materials.


I’ve recently been looking at a number of design companies that seem to overstep on their recommendations for sites. Granted these are template makers and so they may be locked in a template mind set when they are publishing their recommendations.

In reality the design company is providing a service to another company and the other company is their customer. The design company knows how to design and their client knows what message is best for their company.

At San Diego SEO by Design I put it this way:

The design inspiration should not come from other websites for a restaurant site but rather should come from the owner himself. The developer and designer need to understand the vision he has for his restaurant and reproduce that on the site. I am not going to tell a restaurant owner what colors are best for his venue, the colors for his website should be consistent with those used in the restaurant, menu, and other marketing materials.

Deadly website mistakes – slowing down visitors with intros.


From San Diego Seo By Design

It should be considered one of the seven deadly mistakes corporate websites commit. Human behavior research shows when people are in task mode they are blocking out information not related to their task. Sometimes this is far more subtle … in Why We Buy: The Science of Shopping, social anthropologist Paco Underhill talks about an experiment conducted in a bank. Brochures were placed between the door and the teller window And no one stopped to look at the brochures, no one considered taking one. Paco Underhill suggested brochure stand to be moved along the path that bank patrons take after seeing the tellers, patrons started stopping and taking brochures.

I can relate to the experiences of people visiting sites with a bunch of junk between them and the answer to the question they seek.

Rotating border created with jQuery and a image


One of the many effects seen on TV is border animation for text boxes. For website applications this is ideal for places that the designer wants to bring people’s attention to such as a “click here to get a free quote” – Examples posted on http://wsmith-animations.cz.cc/

Here is the coding:

<style>

.rounded-corners {

-moz-border-radius: 30px; /* Firefox */

-webkit-border-radius: 30px; /* Safari, Chrome */

border-radius: 30px; /* CSS3 */

}

</style>

<div style=”position:relative; width:200px; height:200px; overflow:hidden; ” >

<img src=”light.png” style=” width:300px; height:300px; position:relative; left:-50px; top:-50px;” id=”rot”>

<!– center image in divide –>

<div style=”position:absolute; top:5px; left:5px; color:white; background:blue; width:190px; height:190px; “>

<!– overlay content on top of image so rotating image becomes border –>

</div>

</div>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js”></script&gt;
<!– cross browser CSS for rotation handled by jQuery with Canvas and VML fallbacks–>

<script src=”jQueryRotate.2.1.js“></script>

<script>

var angle = 0;

setInterval(function(){

angle+=3;

$(“#rot”).rotate(angle);},50);

</script>

Fall backs for browsers that do not support CSS image rotation are Canvas and for IE VML. Note: Canvas and VML are only able to rotate images not divides with backgrounds.

Progressive content not using AJAX is bad SEO.


Quote from SDfreelance: SEO Secrets Revealed

Progressive links and progressive content is the name given to content that is not displayed until the mouse click or hover on a certain part of the page. Researchers have determined that many of the sites who lost traffic after google’s panda update …

… HTML5 provides AJAX as a standard and AJAX allows for additional progressive content to be downloaded – using AJAX for progressive content provides the best experience for the user.

The researchers post at webmasterworld Can a Mega Drop Down Menu create problems? also it should be noted that to much or to many progressive elements may not be the best user experience … “One moment of truth came for me when I tracked which menu links were actually being used by site visitors. That analysis showed me that all those hover menu options were NOT being used by visitors. Only a small subset mattered, and there were other ways to help people find those pages.” … the only reason to use progressive content is to enhance user experience – keyword stuffing will clearly be seen by the search engine robots.

Using AJAX is the ideal method to provide progressive eye candy. Pages load faster because these hover elements are loaded after the page loads, these elements can be loaded before the hover event or streamed and load seconds before they are displayed with the buffer time being the animation of the view port opening.

jQuery being employed to make this development faster and compatible with older (pre HTML5) browsers.

How to avoid … “The designer took the money and did not finish the site”


This is something I’ve heard from business owners; And, I’ve heard from designers that the business owner wants him to do 40 plus hours of work for only $200 – He bent over backwards to try make him happy but $5.00 an hour is below min wage – he can not continue the insanity.

I place the blame on the salesman if a agency is involved and the designer. It is the designer who has the experience! not the salesman. It is the designer that knows how much time he needs to finish a project: But only when he has all the specifications – Communication is critical!

Quote from San Diego Freelance: HTML5 Web Design Direct

An experienced designer takes the initial consultation seriously. Does not begin any billable work until what is needed on the site has been determined. If the designer does not do this then he is headed down the path; 40 hours of work; The site is not done; And, there is no budget for the overtime taken. Neither side has a contract of what the site will have to be “completed.” It is the salesman’s (agency) and designer’s fault.

The only way to avoid this problem is solve the communications problem. The problem does not exist if all the details have been communicated and estimated. It is the designer’s experience that should avoid the problem – the business owner is seeking a “professional” who can give him accurate costs.

Using Canvas Processing.js to build custom fonts.


When dealing with logos and intellectual property rights (copyrights). It becomes necessary that the font used is not a standard font. You can not for example type your company name in times roman and then get copyright protection for it as a logo. Instead you must build your own font then you can get copyright protection. For either or both the font and the logo.

processing-js allows you to build a font using svg. Then displays text using your custom font. It also allows you to have fonts on your site that do not exist in the computer browser. But there is a limitation – the text is rendered as graphics so it is not seen by search engines. None the less there are many uses for custom fonts not seen by search engines: when somebody logs in to a web 2.0 site their name is normally shown; Shopping cart items are based on a secession with the visitor …

Although the canvas tag renders as a graphic for downward compatibility alternative content (the same words in a normal font) are included on the page – it is up to the search engine if the alternative content is given the same weight as if a canvas tag was not used. It is not a given that it will or will not be – or that search engines will not make adjustments in the future.

Another benefit of using Canvas is the content can be animated to focus the attention of the visitor.

As side notes: True Type Fonts can be converted to SVG fonts using Batik TTF to SVG Convertor. Changing a font into vectors is the first step to changing them into a true 3d object for use in webgl or other 3d animation applications.

IE6 RIP – Microsoft launches IE6 countdown.


Microsoft’s site Ie6countdown.com is not the first attempt to retire the browser – in May 2010, when Microsoft last tried to enroll netizens into its cause, Redmond said, that using IE6 is like drinking nine-year-old milk because of the risks involved.

10 years ago a browser was born. Its name was Internet Explorer 6. Now that we’re in 2011, in an era of modern web standards, it’s time to say goodbye.

This website is dedicated to watching Internet Explorer 6 usage drop to less than 1% worldwide, so more websites can choose to drop support for Internet Explorer 6, saving hours of work for web

You can join the cause by using microsoft’s banners at http://www.ie6countdown.com/join-us.html

Friday freebies 3d graphics models


Obj files are an old format for 3d graphics meshes. The file format is in text but lacks information which is needed to animate. Poser character files are also in text and have the necessary information. Poser files use the obj format for the mesh itself but include information for how to transform groups in the obj. A basic skeletal structure is needed which identifies what parts are connected and need to move when another group moves IE fingers move when the hand moves.

To port these to webgl the faces (surfaces from the mesh) need to be extracted from the obj files and textures applied. An engine would need to be used to animate the objects and it would also need skeletal data if the object has joints.

The models are posted on sharecg in poser prop format.

California life style surf board, In this case textured as signage.

Gift box suitable for animation as the lid can be picked up.

CMS systems make the starting price for sites insanely low.


Competitive Pricing

… Custom wordpress sites which have unlimited pages begin at very low rates. Literally prices start with the design of one PHP page. The system places the content created by you into this page …

… Wsmithdesign is very sensitive to prices and is constantly looking at how to save time and be more competitive …