I have finally finished up my first full Flash Template Website for sale on Activeden, and its called Origins XML Website – Flash and Mobile Website Template and its a Flash XML Website that also comes with a mobile version of the template. All you have to do is update one set of xml files and it completely generates a mobile version of the Flash website for you. Origins is the accumulation of all my best selling files remastered into one website with added functionality and features. This file was 6 months in the making and its really exciting to finally get it live.

Origins Flash Website is deep-linking for added SEO (allowing the user to go to particular pages by direct links), fully XML driven, and modularly built. Create as many pages as you want, and reuse as many modules as you need. From the main logo and footer text, to the main navigation icons, everything can be changed by simply editing the XML settings files, so no Flash knowledge is needed.

The mobile site uses php to gather its content so the preview is hosted on my site, view the Origins Mobile Website Now!

Features

• Fully Generated Mobile Website
• Fully XML Driven
• SWFAddress Deep Linking Menu (Added SEO )
• 9 Page Modules (see examples and images below)
• Simple Page Module
• RocFolio 1 Page Module
• RocFolio 2 Page Module
• jQuery: PrettyPhoto LightBox Page Module (show images or movies, including YouTube, Vimeo, and QuickTime )
• Piecemaker 2 Page Module
• News Feed Ticker Page Module
• Contact Form Page Module
• Simple Link Module
• Loading Swf Page Module
• Full Music Player
• Page Specific Backgrounds Images
• Autostart Page Feature
• Social Links Menu
• PSD File of 48 Icons Ready for Use
• PSD Website Template File
• Detailed help file for installation and customization

Mobile Version Website

At the present time, Flash doesn’t run well on most hand-held devices. Heck, some devices don’t run it at all! To circumnavigate this, I decided to create a mobile version to accompany the Flash Website. It’s completely mobile-friendly and is created from all of the same XML config files used to create the Flash Site. This means there’s no need to update a ton of other files to create the site; Edit only one set of XML files to update both the Flash and Mobile versions of your site! The mobile website uses jQTouch which is a jQuery plugin for mobile web development on the iPhone, iPod Touch, Android, and other forward-thinking devices. View the Demo Here

Customizable Header Area

In the header section you can easily add your own logo image, and you can either display, hide, or just deactivate the music player altogether. All this is controlled through the XML config files.

Customizable Menu Area

In the menu section, you can easily add and remove as many menu items as you need. You can change the icon, text, text color, and text padding. Then easily assign each menu item to a particular module.

Customizable Footer Area

In the footer section you can easily add your own footer text, and include all of your own social media links with the associated icon.

Simple Page Module

The Simple Page Module is exactly that, a simple Page. You can change the image of the page we well as any text in the scrollable HTML text area. The text area supports changes in text size, color, hyper-links and images all formatted through HTML documentation.

About Page Module

The About Page Module is based off one of my best selling files called RocFolio. This module is perfect for an about page, staff page, or for anyone wanting to display their latest featured work. You can either populate the slides with a RSS feed (or any feed type), or use the sample XML file that’s included. If you use a feed, the content automatically updates when a post is made to that feed.

Portfolio Page Module

The Portfolio Page Module is based off my second version of RocFolio. This module is perfect for a portfolio page, feature page, services page, or products page. Similar to the About Page Module, you can either populate the slides with an RSS feed (or any feed type), or use the sample XML file that’s included. If you use a feed, the content automatically updates when a post is made to that feed. Also, this page module comes with three columns of editable text.

Piecemaker 2 Page Module

The Piecemaker 2 Page Module is built off the Piecemaker 2, a free 3D Flash image rotator gallery. This module is perfect for displaying any type of content including images, swf files, and videos. The Piecemaker 2 includes several new features including improved navigation, tooltips, animated shadows, and unlimited effects. The piecemaker module does not work with the cs3 version of the FLA .

Photos Page Module

The Photos Page Module uses the popular jquery lightbox clone called prettyPhoto. This module is perfect for an image gallery or slideshow. Each image gives you the option for an description field as well.

Videos Page Module

The Videos Page Module uses prettyPhoto just like the photos page module. But for this page module, you can add as many youtube, vimeo, or .MOV video files as you want. Each video gives you the option for a description field as well.

News Feed Page Module

The News Feed Page Module is another one of my best selling files called Flash News Feed Ticker and its compatible with all feed types (RSS and ATOM , directions included on how to handle these feed types). This module automatically grabs the first image in each feed post to display, and updates automatically. If you don’t want to use a feed then you can use the news feed sample XML file. You can easily change the colors, size and several other options all through the XML configuration file.

Link Module

The Link Module allows you to make the navigational item a link to anywhere you like.

Contact Page Module

The Contact Page Module allows you to setup a contact page with email validation already included. There are also two HTML text areas included on this module that are editable.

Music Player

The Musicplayer can be easily customized through an XML configuration file and you can change the colors and add as many songs as you like. The music player shows the song name, the artist name, the album name, and supports album art.

Yesterday, I finished developing another website called The Dreamy Spoon. The Dreamy Spoon is a Self Served Frozen Desserts Store located in Maumelle , Arkansas and it a full flash website that also has a wordpress blog with it. This has to be one the most fun websites I have done in a while, partly because of the silliness of the design (which was done by Cody Scott of  Kinetic Media Solutions ). Some of the special things about the website are they it uses SWFAddress to increase SEO and add the ability to go straight to a specific page, as well as a custom MP3 music player, and all the animations were pretty cool too. The website includes everything from a flavors page, a contact page, and links to the social media websites.

One of the hardest things to code for the website was getting the stage to resize correctly when the user resizes the browser window, because the grassy hills had to stay at the bottom and the cloud background had to scale correctly.

To increase SEO, I created the The Dreamy Spoon Blog (made from WordPress) that the owner could add news posts and I also duplicated the flash pages  into wordpress pages and basically hide them from the user (meaning no actual links to them), but when I submit a sitemap to Google Web Mastertools I will include those links so they get indexed.

This might be the best flash website I have done so far and it was a lot of fun to work on, let me know what you guys think.

Cya

I have finished redesigning another website called changeofstatus.com. The purpose of the site is to help simplify and minimize the confusion involved in an employee’s change of status (sometimes called a “life event”) as it pertains to their various healthcare benefit plans. When someone gets married or looses a dependent, usually things like this are considered life events and allow the employee to change their benefit package accordingly, so they are not paying for something they do not need. Also on the change of Status website there is a tool that converts the complicated employee change of benefits status matrix to an easy-to-use, three-step wizard, allowing employees, employers and administrators to determine what life events are permitted under IRS rules and regulations. I redesigned the site completely, you can see the site images above. The image on the right is the ‘before’ image, and the image on the left is the ‘after’. I used this template before on other company websites and I thought I do the same for this site to keep the branding consistent overall.

The site uses the jQuery Cycle Plugin for the banner rotater so that its visible even on devices like phones that don’t run Flash. Also, the website is completely SEO friendly. This is another case where I put my SEO checklist to work and it has helped tremendously. Previously the site was around 500 hits a month. Now even after a couple weeks, it has raised to over 1,500 hits a month. I’ll post the google analytics pictures as soon as I can.

Cya

1. First, you need to validate all of your webpages on your site (meaning your  html code needs to not have any errors or warnings in it). This is the most important step because if the bot can’t index your page then how is it going to know how to categorize it. You can do that here: w3c Markup Validation Service
2. Select the keywords that pertain to your particular post or page. Its important to select your keywords using a Keyword Tool, like Google Adwords Keyword Tool, so you know how many people are searching the specific terms you are choosing and which ones have the least competition.
3. Insert your keywords into these parts of the webpage:
   1. Title – Very important, the title appears in the search engine results page as the link, Google uses the title tag for determining page relevance and ranks the page higher if the saearch phrase is found in the title.
   2. URL – Your keywords should be used in the url that specific page,  either in the directory or file name. Its good to use hyphens instead of a space in naming convention.
   3. headings – Every page should have a heading <h1> tag, and the keywords should be used in this and the h1 tag should be used only once.
   4. Text – In the text on your page, its very important to use the keywords in the first part of your webpage content. Also, if there is a small amount of text on the page it could cause the page to be ranked poorly too.
   5. keywords Meta Tag – Every webpage should have the keywords used in “Keywords Meta Tag”.  You add this line of code in between the <head> tags:<meta name=”keywords” content=”Your specific keywords” >
   6. Description Meta Tag – You add them like this:<meta name=”description” content=”A description sentence about your page or post pertaining to your keywords” >
4. Links – Use keywords in your links instead of using “click here” or phrases like that.
5. Images – all <img> tags should use the alt attribute using the keywords
6. Include a robots.txt file in the site root of your website. Even if the robots.txt file is blank upload one to your server because it will prevent your site from producing error messages every time a search engine spider visits your site.
7. Include a sitemap.xml file in the site root of your website. There is a website that will automate or help you create/ edit  a sitemap.xml file, it called xml-sitemaps.com.

This is just  a really quick seo check list that will dramatically help with your websites overall SEO, but if you don’t think your site is being indexed by google still, you can go to google.com/addurl and add your site url and google will start to index your site.

Cya

To increase SEO of the site, we updated the text, added meta descriptions, added Google Analytics stat tracking, and I validated all the pages.

Cya

First, I make sure all the pages of the website are validated. Which means all the html, css, and javascript code is correct and in valid markup, and you do this so that bots that search engines send out to read your site can easily extract and classify what’s relevant on your page. If your web pages can’t be read by the search engine bots then how will the search engines know your relevance.  To validate your site, you go to The W3C Markup Validation Service and input your website’s urls in the search field, hit “Check”, and then fix the errors and warnings on that web page.

Secondly, I make sure that all the link tags in your website aren’t “‘Click here’ to read more.” Links hold a lot of weight when bots read your site. The text of the link is what is important, so I make sure that it is relevant to what you are wanting to see. For example, look at the links on this post.

Thirdly, I make sure that the title tags are different on every page and rellevant to what is on each page. Also, make sure to add the description meta tag within the head tag, which is what is displayed under the title on the search engines results page.

Also, I create a sitemap.xml file and robots.txt file on the website. These give the bots a easier way to see the structure of your site, including the robots.txt file which blocks the bots from crawling certain parts of your site that you don’t want indexed.

There are some cheap and easy ways to get your sites’ page ranking to increase but they do not last and it can cause search engines to penalize your site. So be  weary of easy quick fixes such as adding duplicate content.  Also, other things that might hurt your page ranking are broken links and images, and not putting alt and title attributes with your image and alt tags. But usually the W3C Validator page will let you know about these problems. You can check for broken links and image links by going to The W3C Link Checker. And make sure your css  is validated too, by going to The W3C CSS Validation Service.

Some other techniques I use to help SEO is to have logical or friendly url names for your pages. If you have a bunch of products with a page for each one, have those pages under the folder products, it’s as simple as that and remember that any page on your website shouldn’t be more than three clicks from the root page. Also, if your site is large enough, its good to use breadcrumb navigation for user friendliness.

Finally, when I finish the website I implement Google Analytics and Google Webmaster Tools into it. Google Analytics is the enterprise-class web analytics solution that gives you rich insights into your website’s traffic and marketing effectiveness, which basically means that it is a very comprehensive stat tool for the traffic on your website. Google Webmaster Tools shows you how Google crawls and indexes your website to help diagnose any problems.

These are just some of the things I do to increase SEO and it really seems to help. All these points are backed by an article titled 20 SEO Tips That Ever Web Developer Should Know. Sometime later I will talk about user friendliness and the importance of it.

Cya