My latest memories of the use of Flash all include gaudy Web Pages with techno music or annoying banner ads. Most business owners are ignorant in what is real cutting edge design and usually request some kind of Flash effect on their site. As a search engine marketer, I was taught that the use of Flash should be minimal, if at all, on a site that wants to be found on the search engines (SEO). This is because Flash sites and applications are not easily optimized. There is also a connection between high bounce rates and sites that have a Flash intro. Computer users will continue to expect faster functionality on a sight, and waiting for an intro to finish has become very un-cool.

The biggest sign that Flash is on its way out was made evident when Apple decided to discontinue the Flash capability for iPhones and Touch. These devices are changing the way we live and access the internet.

The Adobe Flash camp and the developers who like working with Flash are obviously not happy and have been vocal in their disagreement with Apple cutting Flash off. Recently, an Adobe rep for Flash named Lee Brimelow stated “Now let me put aside my role as an official representative of Adobe for a moment as I would look to make it clear what is going through my mind at the moment. Go screw yourself, Apple.”

There is new information that Adobe is no longer investing any further resources in the development of the product. If you want to have a high performance site with mobile visibility, shift your focus from incorporating Flash to start looking into animation with CSS3 and HTML5.

Well are you ready? Take out a pen and paper and start taking notes. There is a really awesome WordPress Theme Framework called Thematic. . Thematic is a theme that is made to be a foundation that can serve as a parent theme for building child themes which will be the one you create.

The people at Theme Shaper did a really good job in creating this framework, which basically did all the hard work for you. All you need to do is create a mockup of your theme in Photoshop and then start assembling your CSS style sheet and Voila you have begun making your very own theme.

The very first time I was asked to make a WordPress theme from scratch I thought to myself “Oh no! How am I going to pull this one off?” That’s because I didn’t know much PHP, but I did know Photoshop, CSS and HTML, and luckily I came across this amazing framework that allowed me to start my journey onto making custom themes for WordPress. You can make very nice themes and websites with Thematic by just using regular old HTML and CSS, but if you want to make something really amazing and interactive you should know PHP, Java script or any java library code.

Another cool thing about Thematic is that it comes with default CSS styles, which makes a nice foundation for you to base your code on and the beauty of all this is that, the style sheet you make overrides the default if you make it properly by adding it to a separate folder which will be your “child theme”. If you are just starting to make WordPress themes I would suggest you download thematic and play around with it and hopefully you will be able to make a great theme of your own.

In this article we’ll quickly walk-through the process of creating a CSS3 animation of an AT-AT Walker from The Empire Strikes Back. We’ll start off by reviewing some CSS3 properties that made this animation possible. Then, follow up with a list of the sections required to construct the AT-AT and the CSS3 code to move each section. I wont go too deep into the explanations of CSS3. There are various resources online to get you up to speed with CSS3.

Lets review some of the important CSS3 properties:

TRANSFORM: TRANSLATE(X Y) ROTATE(X)

-webkit-transform: translate(x,y) rotate(x)

These CSS3 transform properties are pretty self explanatory. Translate allows you to move an object left, right, up, down and the rotate property, well… rotates.

@-KEYFRAMES ‘ANIMATION-NAME’

@-webkit-keyframes 'bounce' {0 {top: 20px;}
40% {top: 0;}
60% {top: 20px;}
100% {top: 0}
}
#ball:hover {
-webkit-animation-name: bounce;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
}

The keyframes function/property allows us to define a keyframe animation over a specified amount of time. Let me describe how the keyframe property works by explaining the code above of the bouncing animation.

At 0%, the keyframes function is placing the object 20px from the top. 40% into the animation that object should move up to be 0px from the top. At 60% into the animation, the object should move back down 20px from the top. By the time the animation gets to 100% it should move back to 0px from the top again. In the second rule we apply this animated behavior to the #ball element upon hover.

When the user hovers over the link with an id of ‘#ball” it will activate the bounce function. We have specified that the animation duration should last 4 seconds. Meaning that it will take 4 seconds for the animation to run from 0% to 100%. Finally we allow the animation to run infinitely. If we wanted the ball to only bounce a couple of times and then stop we would just put a 1 or 2 in the webkit-animation-iteration property.

TRANSFORM-ORIGIN: X Y

-webkit-transform-origin: x y;

This is an extremely important property for animation. The transform origin property allows you to change the point from which animation or transformation for any given object occurs.

Figure (b – We have moved the transform origin point to the top, center of the arm image. Now if we rotate the image from this transformation point it would rotate correctly like a properly hinged arm.

Lets Move On to the AT-AT, Its Sections and the CSS3 Properties That Apply to Those Sections:

THE SHELL – one png image; keyframes and animated rotation properties are applied to coincide with the movement of the legs. The shell will sway a little as each leg steps forward.

@-webkit-keyframes rotate-shell {
0% {-webkit-transform: rotate(0deg);}
20% {-webkit-transform: rotate(3deg);}
40% {-webkit-transform: rotate(0deg);}
50% {-webkit-transform: rotate(0deg);}
70% {-webkit-transform: rotate(-3deg);}
90% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(0deg);}
}
#atat #shell {
-webkit-animation-name: rotate-shell;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes shin {
0% {-webkit-transform: rotate(0deg);}
20% {-webkit-transform: rotate(0deg);}
30% {-webkit-transform: rotate(23deg);}
50% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(0deg);}
}
#atat #leg-a .leg-shin {
-webkit-animation-name: shin-a;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 0;}

THE HEAD (neck and skull) – The animation on this is minimal. The skull and neck extend out of the shell of the at-ats body. then the skull section swivels up and down a bit.

@-webkit-keyframes rotate-head{
0%{-webkit-transform:rotate(0deg) translate(0px,0px);}
40%{-webkit-transform:rotate(10deg) translate(15px,5px);}
80%{-webkit-transform:rotate(-5deg) translate(8px,5px);}
100%{-webkit-transform:rotate(0deg) translate(0px,0px);}
}
#atat #head {
-webkit-animation-name: rotate-head;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 0 50%;
}

Well, that’s it. That is the basic concept to animating a diabolical war machine using only CSS3. Feel free to post a comment or question. I’ll make sure to try and post a response quickly. Take another look at the demo, dive into the code and try to build your own.

Design that is easy on the eyes is all about aesthetics. Aesthetics is a philosophy of beauty.  We see; then we can judge if we like something or not. You are surely not to find something pleasing if the objects you see are either jumbled up or scattered about. In web design there are many methods that you can use to prevent this jumbled appearance; these include a grid system, clean typography, and white space. These organizational / design tools help present better composition and sense of balance.

The Grid system provides design in a more organized and cohesive manner. The system of using grids has been a basic part of the print world since the 1930’s. The amazing thing about the grid system is that it aids in many functions like spacing, aligning, and measuring. As a designer and illustrator, I automatically use this system every time I start to design anything. Your end result will be a sense of balance and focus on precisely what you want the reader to see and remember.

Typography is also essential and has its origin in the print world. The purpose of using typography is to create a visually coherent and satisfying experience for the reader. Wikipedia defines typography as “the art and technique of arranging type, type design, and modifying type glyphs.” If the reader is not able to clearly read your ideas due to your typeface or font, it will distract them from appreciating your website. Typography also can help establish the look, the feel, the mood you are trying to capture and transmit to the reader.

Last, but not least, using white space. When I think of white space, I remind myself that less is more. White space is a really simple technique for focusing on the main factor of the page and not having a cluttered design. When using white space you give a feeling of calm and bring importance to the main focus… Many elements on one page will communicate a feeling of busyness and desperation. A viewer can feel claustrophobic, or at least uncomfortable with a busy, hyperactive page. In real terms, lack of white space and too much “busy” space will increase your bounce rate; in other words you lose a potential customer because they have left the page or your site entirely.

Therefore, it is important to keep in mind that having a good sense of balance and harmony is needed to create an aesthetically pleasing website. We all have different opinions of beauty but the most simple design techniques for creating universally good design can be achieved by using a grid system, typography and white space.

It is never too late for SEO!

Creating a new site from scratch and using an SEO friendly site structure is easier than taking an older site and revamping it; however it is never too late to implement SEO.  A beautifully designed site that is hiding somewhere in the internet is pretty much a dead site. It can only count on direct traffic and will lose traffic from a lack of visibility on search engines.

What are your marketing goals? Even if the site has been running for many years, there may be concepts that should be revisited.

1. Does the site work for its main marketing purpose?
2. Refresh your keyword strategy to match your marketing goals.
3. Optimize Meta data with keywords to help visitors find your site and confirm they are on the right page

Information architecture including navigation and menu labels can also be optimized for SEO. Menus and navigation help the visitor figure out where they are and what they can do there. To optimize the experience and increase activity:

1. Use call-to-actions on the menu or navigation bar instead of naming the section. In other words, use action verbs instead of nouns.
2. Stick to logical structures to help the users read and the spiders to crawl your site correctly.

Optimizing your site structure, files or page links Helps search engine page rank and visibility.

1. Use keywords in your files and avoid using underscores.
2. Most keywords or phrase (long tailed keyword) searches are done in lower case so keep file names in all lower case letters.
3. Optimize “404” pages.
   1. Use a custom site template and use this space to add call-to-actions. If the visitor reaches this error page, then they will have a way out to keep navigating through your site.

1. All site structures should contain a body, H1 tags, textual content, related links, navigation links, a header, and footer.
2. Strategically place keywords in the content and in the H1 tags.
3. To enrich the content and provide important internal linking, use anchor text on relevant and topic-specific keywords.

SEO friendly sites are not just optimized on the outside but also on the inside. These techniques are used by the top search marketing industry professionals to help websites obtain visibility and get pages indexed without any hiccups. The amount of traffic generated from search engines is a significant number making SEO a very important part of web site strategy. Once switching over to an SEO friendly website structure, you will almost immediately start to see the results of your efforts.

The great thing about white space is that it illustrates consideration for your viewers. You do not want to burden your readers with a cluster of items or elements on screen. If you don’t use white space in a reader-friendly way, everything becomes unreadable on your site, no one will want to visit your blog and read what you have to say. That clearly defeats the purpose, doesn’t it? White space is like having a clean, organized room where everything can be found. Everyone loves to find things easily. Therefore, making white space is a critically important factor for a WordPress theme.

Another element that I like about the fusion theme is its’ built-in functionalities which makes it interactive. The interactive elements include some for resizing text and changing the spacing of the paragraphs within the theme. These functionalities allow the viewer to adjust the theme to their comfort. This feature alone makes the blog more user-friendly and inspires more interaction, more time on the site and an overall better user experience; good user experience generates return visits and loyalty. Finally, I like the sleek color scheme of the fusion theme. Color Scheme is virtually always important to aesthetically please the visitors and readers. Too many colors can cause a reader to be distracted and too little can cause disinterest and boredom. I believe that color portrays the blog’s mood, feel, and appeal. A good combination works wonders.

In conclusion, the fusion theme has the great qualities of white space, interactivity and a good color scheme which makes it an appealing theme that will make people want to come back to read more.