Posts Tagged ‘tutorials’

The website optimization strategy in the SEO for 2012 Report tutorial released last month works, and this case study provides evidence. You must invest time to improve and promote your website to achieve online success.

A recent custom cms web design implementing the principles in that seo search engine optimization strategy blog post has performed beyond expectations in less than 2 months.

Launched on 4 December 2011, the new dog rescue custom cms website for Lifeline Dog Rescue, a division of Central Florida Weimaraner & Dog Rescue, Inc., demonstrates remarkable success.

In summary, the first strategy for attracting search engine traffic begins with providing a positive visitor experience by creating high quality original content often. You cannot launch a new website and then ignore adding fresh content if you want to motivate happy visitors to return.

Likewise, a dynamic site that changes often will attract search engines to return and index updates frequently.

The second strategy is creating off site content in social communities that directs visitors to your website. The seo report recommends becoming active on social network websites like Facebook, Twitter, YouTube, and even Flickr. A key feature on this new custom cms web design is social network icons linking to those sites and social bookmarking sites.

Those icons and links make social interaction easy. Being active on social networks and interacting with your contacts provides real time off site quality content that enhances your positive reputation for visitors and search engines.

Consider the following milestones achieved with the custom cms web design and social network accounts for Lifeline Dog Rescue. Clues to the success may be found by viewing the social site icons and statistics at the bottom of their home page.

In less than 7 weeks as of 31 January 2012, the stats show 92 likes on Facebook, 146 tweets on Twitter, 2 Google plus one shares, and 16 links to social bookmarking sites. Keep in mind those numbers are just for their home page.

Next, consider Alexa traffic numbers for the Lifeline website. Lower ranking indicates higher traffic in comparison to competition between 100+ million other websites. Lifeline launched ranked at 16 million. As of the date of this post the rank is 797,404. Any number under 1 million puts your website in the top 1%.

Stats tracking likewise shows 1) a steady increase in traffic, 2) a very low bounce rate meaning visitors land on one page and continue to expore more pages, plus 3) the rate of return visitors continues to climb which indicates popularity.

Why does this seo search engine optimization strategy work so well? It depends on quality content and natural methods for attracting search engines. The strategy is forward looking and considers the importance of human interaction and not just mathematical algorithms of Google crawlers to determine website ranking.

Is it simple? Yes. Is it easy? Not really. You must still invest time on website content and social connections. Site owners who recognize and implement this simple strategy will reap the benefits of staying ahead of their competitors who do not.

View and download the 2012 SEO Design Strategy Tutorial (pdf, 13 pgs., 96kb) and then apply these principles of website success.

Improve and enhance SEO search engine optimization of website content with this 2012 SEO web design strategy tutorial. Unlike printed marketing materials to promote your business product or service, your website content is easily changed.

This new 13 page SEO search engine optimization tutorial download provides readers an up to date strategy to implement on their website to enhance their online success in 2012.

Please note that you do NOT have to register or reveal your email address to get this free SEO and web design tutorial. Simply click the link in the last paragraph below.

Website owners can perform this annual website content review even if they outsource the actual web design to a web developer or delegate the task to an employee. Take one day to invest the time in learning these basics to apply to your website and help promote your business online, and then review the results with the person responsible for managing your website.

View the 2012 SEO Design Strategy Tutorial (pdf, 13 pgs., 96kb) online now, or open it to download to your computer and read later.

Capturing a detailed photograph of the moon with a compact camera is a challenge as documented in this moon HX9V Cyber-Shot photo tutorial. The Sony DSC-HX9V Cyber-Shot compact digital camera which features 16x optical zoom may provide one of the best options for amateur photographers on a limited budget.

A higher end digital camera with a telephoto lens at 5-10 times the cost of a compact camera would make taking detailed moon photographs easier. The series of photograph edits in this photo tutorial were from one picture taken with the Sony HX9V, and presents early attempts that came about somewhat by accident.

Versions here are approximately 1/8th actual size and cropped as widescreen for a better fit.

Original Photo of the Moon

The moon original photo above was taken handheld at 6:48 p.m. on 1 Nov 2011 using the HX9V auto mode at 16x zoom, then cropped, and then digitally enhanced in Xara Xtreme.

Here are the tutorial steps and 2 edits of the original that resulted in the final version.

Cropped Photo of the Moon

I opened the original moon photograph in IrfanView free edit software, created a 16:9 custom crop selection under edit, and then chose the apply to photo option. Next, I held CTRL to maintain proportions, and dragged the window to compose a large centered selection of just the moon. Finally, I chose the crop selection function and saved the results as the cropped version shown above.

Enhanced Photo of the Moon

Next I opened Xara Xtreme, a graphics program I’ve used for more than 5 years, and imported the cropped photo into the work area. I experimented with dragging different shades of black onto the photo which tints the entire picture. Darker tints ruined the details. 30% black turned out to be ideal though at first the blue background simply turned to grey.

Adjusting the brightness slider in Xara to negative -87 retained the moon detail and turned the grey to black to simulate a night sky. The image was enlarged to 4608 x 3456 size and exported at 96 dpi resolution.

What accident did you mean earlier, you ask? The original photo of the moon was taken at dusk simply as a test while out photographing a Florida sunset. The daylight moon seemed appropriate for attempting a point-and-shoot photo using the HX9V auto settings. The results were better than expected.

Of a half dozen shots the one selected and used here provided the clearest details. I’d left my tripod at home, so perhaps the details could have been even better using a tripod and time delay instead of handheld.

The final high resolution version of the moon in actual size has not been uploaded to my Flickr account. Technically speaking, the black tint makes this an illustration, and I prefer showcasing original photos only without modification or enhancement.

This moon HX9V Cyber-Shot photo tutorial is one step towards testing the manual settings for a high quality photograph without edits, and taken at night. Stay tuned. The next full moon will occur on 10 November, 2011.

This tutorial is for custom web designers looking to offer clients optional QR codes, those square barcodes that link mobile devices to websites. The target market to reach is users with an iPhone, smart phone, or other capable mobile device when thinking about adding mobile app QR codes in web designs.

After “What are QR codes?” and “How do you create QR codes?”, the big question becomes “Are QR codes appropriate in web design?” This tutorial answers those questions.

What Are QR Codes?

You’ve likely seen print ads with a box of complicated black and white coded squares and rectangles that remind you of common line bar codes. Perhaps you’ve wondered how to create the complex mobile app version that people scan with their camera, and exactly what data you can embed.

The graphic above shows two versions of QR codes as examples of what designers could use in a custom web design. The left one with the blue background decodes as a clickable hyperlink to the home page of this blog. The right one with a green background will display a simple text message of that same link though not clickable.

The background color is for illustration only and is not required for the QR code to function. The graphic could be further enhanced in a variety of colors for aesthetics, yet that doesn’t improve the ability to scan and decode them with the camera on your iPhone, smart phone, or other mobile device.

At least 7 types of data may be encoded in a custom QR code including: URL website link, text message, phone number, SMS message, email link, contact entry, or calendar entry. At present, and in addition from research I’ve done, less than half of mobile device owners know how to scan a QR code.

How Do You Create QR Codes?

How can you create the customized QR code graphic? This online tool to generate a custom QR code was used for this blog post illustration. Visit that link to try theirs or search Google for others, as well.

The example QR codes above were purposely put close together to make them difficult if not impossible to scan. Think about hyperlinked QR codes in a web design for a moment. That link is viewed while on your website, so it doesn’t make sense to force a site visitor to take the extra time to scan the graphic when a simple text hyperlink will do the job.

Are QR Codes Appropriate in Web Design?

Before adding a QR code to a web design, consider the practical point of view of your website visitor. They don’t need links for navigation. A well designed website will have contact methods to include mailto: links for emailing, your physical address, and certainly phone number info on every page.

A mobile device owner on your website likely has an app to use those links or copy/paste text of contact info. The other data options are secondary until an introduction is made and the casual prospect shows genuine interest in becoming an actual customer.

For those web designers staying in touch with the latest in technology, and hoping to justify adding mobile app QR codes in web designs, all is not lost. Whether you provide graphic design services or your client takes care of artwork for print, you can still use the advice in this QR code tutorial including that online tool to supply the “artwork” of the custom QR code.

Conclusions and QR Code Tutorial Tips

My advice is avoiding QR codes in web design, yet web designers can demonstrate sophistication by teaching clients how to use a QR code with an embedded link to their website for print ads, brochures, and more. Don’t try embedding a lengthy amount of data in a QR code. It may be too complex to scan for some devices and others might give up trying.

Bonus QR code tutorial tip: Before adding mobile app QR codes in web designs or providing a custom QR code graphic for print, make sure to test the artwork to confirm it actually works. Test on a variety of devices, not just top of the line mobile phones.

Don’t offer QR code artwork for print if you do not have software to generate a high resolution version at 300dpi or better. It would be a disaster and likely ruin your reputation if the client pays for 10,000 post cards or 500,000 newspaper ads with a defective QR code.

This Google Plus One (+1) button tutorial gives site owners an easy way to add the social button to each post or page of their blog. Instructions include tutorials for Blogger and WordPress format blogs or you may want to include the Google plus one +1 button on your main site pages.

First, here’s some background information about the new Google +1 application. With the release of Google +1 yesterday going from “by invitation only” to everyone, this allows all users to sign up for the beta version and begin socializing in new ways that are similar yet superior to Facebook.

Where you see the +1 button on any site you visit you may click the +1 button to add and save that post or article to your free Google +1 account. Your +1 feed will look familiar if you’re already using Facebook. Similar to Facebook you may share content you like with a circle of contacts that you can specify by groups as friends, acquaintances, family, and more.

Visit the Google Plus One website to learn more basics.

As with anything new, the technical aspects may be daunting for novice site owners. Adding the Google +1 button to your website and blog should be easy with this +1 button tutorial.

To get the Google +1 application working you need two things. First, you need a script callout to the Google API or Application Programming Interface. Secondly, you need to add a chunk of code that automatically adds the +1 button to your site and blog posts. In layman terms you need 1) a connection to Google to add the function, and then 2) code to display the button on your website.

Important: ALWAYS backup your template before making changes. A single typo can ruin a web design layout, so protect your website to insure a roll back option if something goes wrong.

Blogger with Blogspot Address Instructions

If you have a free Blogger blog with a Blogspot address, the Google +1 button setup is added from the admin backend. Log into your account, select “Design” and then select the “Edit” link to the right under “Posts”. In the popup window of options and settings slide down and select the square radio button for “Show Share Buttons” if not already checked, and then slide to the very bottom and click “Save”.

That’s it. You’re done! Exit and visit your blog to confirm the +1 button has been added to every post.

Blogger Custom Domain, Template Site, or Static Web Pages

If your Blogger blog is on a custom www domain (like yourblog.com, not yourblog.blogspot.com), a template based website, or you have a static website design (no template), begin by inserting the following line of code between the opening <head> and closing </head> tags near the top of your template (or static page).

<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>

This code will “connect” to Google’s secure server to provide the functionality for your +1 buttons.

Step 2 is adding code that displays the Google +1 button. Copy the code shown below to insert in your Blogger blog, site template, or each individual page if your site uses static pages. Insert the code in the specific place where you want the Google +1 button to appear.

<div style=’float:right’>
<g:plusone size=”medium” expr:href=”data:post.url”/></g:plusone>
</div>

For example, I decided to use the above code as-is modified and placed the Google +1 button (with 3 others) near the top of posts on my Blogger platform personal blog “Growin’ Up in Maine” with childhood stories and floated to the far right on the same line as the date posted. Visit that blog to see it in action.

The code may be customized, also. You may change the Google +1 icon size from small to medium (middle) or standard depending on the size you prefer and where you want it placed. In addition, you may want to change the float right to float left, also.

Note: Once placed in your blog or site template the buttons publish automatically with each new post or article. If your website design doesn’t use a template, but only static pages, you must manually insert both of the above codes each time you create a new page.

WordPress Blog Format Instructions

The majority of my blog designs are in the WordPress format because of ease of use and the large number of plugins designed to do functions automatically. Search and you’ll find several 5-star rated plugins for adding the Google +1 button function. I tested 3-4 and then chose the Google ‘Plus one’ Button by kms for my WordPress blogs and as featured in this tutorial.

The fast and easy way to install the WordPress Google +1 button is from the admin backend. Log into your account and then click on the down arrow in the sidebar heading for Plugins. Select “add new” and a new screen offers a search option. Input “Google ‘Plus one’ Button by kms” then select the Search Plugins.

The only option that should appear is in fact the plugin by kms. Under the name are links to details and install. Click on install and then “yes” on the following “Are you sure” nag message. The plugin will be installed automatically. When you return to the plugin options select “Activate”.

Next, under Settings in the left sidebar you should now see a link to Google +1. Click that to complete the setup. Set the first two options from the dropdown menus. My choices were “middle” under “size” (medium button), “below the post” for location, and then 3 of the 4 check boxes under that leaving “on first page” blank. Select “save changes” and you’re done. (Update: With additional testing, I moved the +1 to the top and added Twitter, Facebook, and a bookmarking dropdown.)

Choose alternate options from those I recommend to suit your preferences. Please note that this blog is a WordPress custom design. View the +1 button after the last line of the text and right above the “Share and Enjoy” date as subsequently moved to the top of posts next to 3 other social icons.

Closing Comments on the Value of Google +1

Besides the social value of Google +1, eventually those “votes” by visitors to your site may affect seo search engine optimization and page ranking. Google has dominated the search engine market for years with superior robotic algorithms to evaluate website content to rank pages.

The human factor of real people making real choices and recommendations that may be measured will certainly enhance Google’s position. Their reputation depends on relevant results to search requests. The human factor of +1 will certainly help.

For site owners, the early adopters adding Google +1 buttons to their website gathering +1 fans may likewise have an SEO advantage over their competition.

Comments are welcome. Feel free to call or email me with any questions, and keep in mind I may be available to handle the Google +1 button installation for a modest fee if you run into problems or lack of patience.

When your personal computer performance slows down and makes you miserable you may want to consider CCleaner and Defraggler to boost pc speed. A custom web design client recently asked us to replace a few photos on their website, then couldn’t see the new graphics later after the work was done.

The reply and pc speed tutorial and review of CCleaner and Defraggler from Piriform may help other website owners, so here’s the email to the client explaining what happened, why, and the solution when old web page graphics persist after replacement photos are uploaded:

Those new photographs are there as referenced. Your computer is displaying old versions stored on your computer. Here’s why, and the solution.

Your computer stores temporary text and graphic files or cache, of web pages you visit, and displays those on return visits. Some genius software geek at Microsoft decided saving a nanosecond a billion times over a lifetime was important without realizing a billion times is just one second.

What makes things worse with all those temporary files is over time your computer speed becomes sluggish.

Follow this tutorial to view missing replacement website graphics: For a fast solution press the browser top menu refresh button or the shortcut top row F5 key once. If still missing, or do this first, do a hard refresh. Hold the CTRL key and press the F5 key once. When I encounter a graphic that doesn’t update to the latest when doing changes I jump right to the hard refresh.

Computers come with built in software tools to clean up cached temporary files and other fragmented file storage that slows down computer speed and performance. I prefer third party methods rather than the default Windows tools, and use CCleaner and Defraggler free computer maintenance software from Piriform. Learn more or download those (not just trial software – actually free) at http://www.piriform.com/products.

Running those 2 programs every 3-6 months helps keep your computer up to speed.

Piriform offers other computer related informational or maintenance software including Recuva and Speccy, as well.

Here’s a web design META Title tutorial with positive advice to follow after the post recently about page titles and what NOT to do.

Each page META Title on your site is like a newspaper headline to grab attention. A single sentence that web designers use is the META Description that states the essence of the content on that page. These elements appear in the code and require key words to optimize the seo value and rank well with search engines. This strategy is part of the technical aspect of writing for the web.

The title of your page is usually the visible headline at the top in the on page content, plus if properly used as the META title it will appear off page at the very top of the screen next to the logo of your browser brand. If bookmarked as a favorite the title becomes a summary or reminder in your visitor’s bookmarks, too.

The page title continues to be THE most important seo high value item on each website page. It makes sense to give extra thought to your equivalent of a newspaper headline to capture the interest of readers and motivate them to continue exploring your site.

A good website page or blog post title often takes as much time to write as the actual article. Keep the POW factor in mind as you write title headlines. Less is more is an old yet accuracte advertising adage. In the case of titles my advice is using 6 words or less for website page or blog post titles. “Man Bites Dog” is a favorite example of a short headline that grabs attention.

This advice bears repeating: The page title continues to be THE most important seo high value item on each website page.

If you take all the advice written by dozens of experts, the ONE top key seo factor for ranking well is something you can learn to your advantage over competition to attract search engine traffic to your website.

Interested readers may want to learn more about seo for META Descriptions and search engine strategy in a blog post written last week at my collaboration web design site opened earlier this year with my son.

The following web design tutorial demonstrates how to do a real estate website graphic edit to enhance a photograph of a Florida home to use in a new custom web design. As you view each part of the illustration concentrate on the lawn. The color of the lawn is all that changed.

The above photo collage shows the original photo (left) with a less than ideal lawn likely taken off-season because the grass is dull, not green. The after version (center) shows the identical photo with a lush, green lawn. The final graphic (right) shows the mask overlay used to create the perfect lawn effect.

How the enhanced web design illustration was done:

1) The dull lawn (left) was traced using vector graphics software to zoom in 500% and create a mask.
2) The mask was used to crop an overlay of very green grass from a photo of a perfect lawn.
3) The cropped overlay then had 20% transparency applied so the shadow of trees appear “on the lawn” for realism.

Use the help files of your vector graphics software to learn about masking and then try the advanced techniques in this real estate web design graphic tutorial.

Site navigation and usability in your website may be enhanced with a tree structure and cms web design. Besides the home page, about us, or general topics like a blog linked along the top navigation the site layout usually includes additional tabs of broad categories for the cms website.

For illustration purposes, let’s assume you offer products and they fall into general categories of Product A, Product B, Product C, and Product D.

Your website could grow to 10, 100, or 1000 pages yet everything you do falls under one of those broad categories. It would be too confusing for visitors to see a link for each of those 1000 pages in the top navigation.

Instead, this tree structure allows people to follow one link by Product A, B, C, or D for each of those tabs, and takes the visitor to a “directory” of the rest of the content relative to that category.

Think of this tree structure like a funnel that directs a person from the top navigation to general categories and then specific topics under that category. This makes a complicated site easy to navigate to get to content of interest. My site looks simple at a glance yet actually has over 500 pages of content.

The tree structure of navigation and links to more content can be seen on my site if you follow any of the top links. Follow the link to Web Design www.jimdegerstrom.com/web-design-services.html and then study the “tree” structure. This is not an article written about web design, but instead is more like a directory to web design related content on my site with a list of summaries with links to more content by following the “Read more…” hyperlinks.

Consider the lessons on optimizing pages presented in the 50 page seo and do-it-yourself web design tutorial sent to each customer. It teaches the importance of keyword research and then writing proper titles and descriptions for seo optimization, and explains how it is entered into the backend admin of the cms.

As you view my sample tree structure on web design as linked above, note the following important fact.

The headline and description for each item listed on that web design page “directory” is the title and description used in the code. There’s no better way to link to content deeper in the site structure than by using the actual title and description already chosen on the destination page for search engine optimization.

The value of describing what people will find at the destination is good for human visitor usability as well as helping search engines index your overall website content.

Do-it-yourself custom cms web design site owners need to understand the importance of optimizing their text content for search engines. This SEO or Search Engine Optimization tutorial explains free online tools for tweaking content such as testing in DupeFree Pro and SEO keyword density. Watch this video for details. (0:10:34 min./sec.)

Follow these links to download the free resources mentioned in the video:
DupeFree Pro for tweaking and testing keyword density
GridinSoft Notepad Lite customizable text editor review

Learning how to attract search engine traffic using content optimization is important for site owners who choose a cms content management system web design so they can control and manage their website. Optimized content using this tutorial can help.