SEO « Scott Rockers' Blog - Website Designer and Developer, Flash, Wordpress, jQuery, and Other Scripts

SEO

Origins XML Website – Flash and Mobile Website Template

Monday, April 18th, 2011

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.

Tags: Actionscript 3, ActiveDen, CSS, Design, Development, Flash, Mobile Website, Origins, SEO
Posted in Sellable Items | No Comments »

The Dreamy Spoon Website

Thursday, March 3rd, 2011

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

Tags: Actionscript 3, Development, Flash, music player, SEO, SWFAddress, Wordpress
Posted in Freelance Projects | No Comments »

Change of Status.com Website

Thursday, August 19th, 2010

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

Tags: Design, Development, html, jQuery, SEO
Posted in Work Projects | No Comments »

SEO Check List

Friday, March 5th, 2010

I wanted to create a SEO check list for every website that I work on, that way I could go back and reference it after finishing up a site. These methods are proven and if you follow this SEO checklist as well, then you will have increased traffic on your site too. If you want proof of it working, you can check out my other post Search Engine Optimization Techniques where I explain more in detail about all these points. This check list is just a quick guide to help remind you of whats left to finish on the website to optimize it for Search engine ranking. Here we go:

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
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.
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” >
Links – Use keywords in your links instead of using “click here” or phrases like that.
Images – all <img> tags should use the alt attribute using the keywords
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.
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

Tags: Development, html, SEO, seo checklist
Posted in Useful Websites | 1 Comment »

Health Savings Accounts Website

Friday, December 4th, 2009

I have just finished redesigning and developing another website for DataPath. HSA223.com is an informational website about HSAs (Health Savings Accounts). The redesign image is on the left and how it looked before is on the right. I implemented CU3ER into the banner of the website where I created all the graphic and slides for it. I also changed the navigation using some simple javascript and CSS to handle it all. I think overall it looks cleaner and more up to date, and it’s easier to use, and the pages are lighter weight. Finally, I converted all the table formatting in the pages to use div’s.

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