Posts Tagged ‘tutorials’

An important tool in writing cms web design optimized content for search engine optimization is keyword research. For small site owners the web design and online research tools at Keyword Discovery are by subscription yet they do offer a keyword discovery truly free trial.

Here’s a graphic of part of the search page (slightly smaller than actual size):

If you want a custom web design that can compete online you need to know what site visitors type when they search for someone like you, not phrases that you know about your product or service and imagine people will search. You will probably be surprised at phrases in the search results that you did not consider. Your research will allow you to adjust key words in your web design and attract more traffic.

The free online tool version of Keyword Discovery has less features such as only the top 10 results for a given search phrase and a limit of 50 searches per day, yet that is usually enough unless you’re in the business of offering seo or web design services to clients. Unlike some seo software free trials that have a time limit, there is no expiration date.

Here’s how to get started optimizing your custom cms web design. KeywordDiscovery.com is owned by Trellian, so visit the Keyword Discover signup page and submit your request for a Trellian account and then check your email. Click the activation link in the confirming email then log-in to begin using the tool.

Finally, there’s a great online keyword discovery tutorial (html) or view and download their Quick Start Guide (pdf).

FireFox browser users may share online gems with a tweet on Twitter or post a message on Facebook while surfing the web as you share page content instantly. In addition you can quickly email links to the content via GMail, as well. The following graphic illustrates how the F1 FireFox extension may be used in Twitter, Facebook, and GMail.

The tiny “V on its side” icon (left) takes up very little real estate in your FireFox browser menu toolbar. While on a page of content you want to share select the “V” icon and choose from Facebook, Twitter, or GMail (center). Finally, insert a message and hit the share button (right) to instantly share the link.

The Facebook post will include a snapshot from the page, the Twitter tweet uses bit.ly shortened URLs to save characters, and the GMail option automatically inserts the URL into the message body. Download and then install the F1 social sharing FireFox extension or watch the video and begin using it now.

I’m a big believer in custom cms web design to meet W3C standards with zero or near zero code errors. A site created in xhtml is more likely to display well today and in devices yet to be invented compared to older html web designs. Those same design practices may not provide an equal experience on mobile devices.

If your web design was not originally designed to meet mobile device web design validation then it likely has errors or violates mobile design best practices. If you don’t know, it probably wasn’t. Regardless, this tutorial will show you how to test your web design.

The W3C or Worldwide Web Consortium creates the standards for recommended web design related specs, and they have an online mobile device web design validation tool for testing if your website meets their recommendations.

Note that most websites are designed for personal computer browsers, so this may not mean your website will have display problems on a mobile device. It simply grades your site on a scale of 0-100% for mobile web design best practices.

Specific checks are graded as low, medium, severe, or critical. I tested the home page of this site and it’s rated 86% with no severe or critical issues. That’s better than a competitor website that I checked. Their web design was rated 0%. Drop down arrows allow you to view failure data in great detail, so you can analyze and fix problems to improve your web design.

Here’s the tutorial. Follow the link above to the W3C mobile device web design validation tool and type your domain in the input box, and then select the check button to view results for your site’s web design. Be patient as it may take 30-60 seconds to run the test.

Keep in mind that the W3C recommendations are ideal standards for very small screens, so a low score may not indicate a poor web design. Not all of us in web design would compromise larger physical or file size content that we feel meets the purpose of a web page message just to satisfy mobile user experience.

In fact, file size and rendering recommendations have not been an issue viewing 480 x 360 videos that I’ve created and viewed on tiny iPhone or Android mobile phone screens. The quality of the video and xhtml in the custom cms web design is excellent when reduced by the user to fit the smaller screen.

Regardless of results, check out all failures for opportunity for improvement. The trend to more smaller computing device screens for viewing content online is unlikely to get much smaller. Therefore, it makes sense for those of us in custom cms web design to add mobile device best practices and validation to our long term strategy.

Spice up your blog design with photo or graphic illustrations to enhance the look and value to readers. This blog illustration design tutorial shows how I did just that on my personal blog Growin’ Up in Maine on a recent blog post about a childhood story called First Plane Ride Ever.

Follow the link above to read the story and see the blog design illustration.

The finished Piper Cub plane illustration is shown larger than actual size as used on the blog post to make the tutorial easier for viewers to imagine how to combine elements into an illustration.

Here is the step by step plane illustration tutorial in 4 graphics marked A through D and explained below.

• Graphic A: Original Piper Cub photo from Wikimedia Commons prior to any crop or edit of markings
• Graphic B: Graphic elements including the plane cropped, text to be added, and alternate plane markings
• Graphic C: Crop of personal sky and fluffy cloud photo I took and chose as a replacement background
• Graphic D: Final illustration actual size 300×200 as used on the blog post for a more dramatic look

The original Piper Cub photo (A) was cropped to remove the background, and then (B) graphic elements for the illustration were created: plane (resized and different angle), text caption, and new plane markings “July 1957″. The photo (C) is an original that I took recently of a blue Florida sky and fluffy clouds used as a replacement background, and then (D) shows the finished illustration actual size. Edits were done using Xara Xtreme software.

The personal blog about Growin’ Up in Maine has over 100 childhood stories that feature a photo or graphic illustration on every post. While having a graphic for every post adds pressure to staying creative, even an interesting graphic on every other post is better than none. Perhaps this blog illustration design tutorial will help readers become inspired.

A new video tutorial has been added to the main site. An advantage of owning a custom cms web design is you may add, edit, or delete content unassisted.

With a matching custom WordPress theme for your blog or podcast, you also have a comment spam magnet which prompted this WordPress anti-spam video tutorial.

Here’s an excerpt explaining results:

“Today’s tutorial using SI CAPTCHA solved my comment spam problem. The advice in this custom cms training video tutorial allowed me to reduce that 100 per day to zero instantly.”

Mini-review: The SI in SI CAPTCHA stands for Secure Image which is a spam solution I have used for years in custom cms web design. The WordPress plugin version uses many of the same files and was already proven to be an effective tool to fight spam robots from putting comment spam in contact forms, so it was an easy choice.

Watch the video to learn how you can download, install, and activate this WordPress anti-spam solution in less than 3 minutes! After making the video I used a stopwatch to time the installation on another blog and actual time from log-in to done was 1:23, yes 1 minute and 23 seconds.

This tutorial about digital photo edit magic explains how an ordinary palm tree being sniffed by my dog was turned into an elephant leg for a humorous effect. The photograph collage below includes 4 photos marked A, B, C, and D that are used to explain the final step D (shown here smaller than actual size) as posted on the Corky the Shelter Dog Blog.

Photo A: The original untouched digital photo of Corky the Shelter Dog sniffing a tree before any edits are done.

Photo B: An elephant leg photo is cropped and superimposed over the palm tree in a rough outline before detailed edits.

Photo C: Details marked 1, 2, and 3 on the elephant leg point out details done as follows:
1. The photo is cropped to fit the tree, lightened, and given transparency.
2. More leg is cropped around Corky’s head to make it appear behind the dog.
3. Additional edits of the foot allow grass blades to show for more realism.

Photo D: The finished illustration and digital effect is ready for Corky’s site, so take a look at the full-size dog photo edit on his blog.

The graphic software for the edit is by Xara. While capable of creating vector graphics artwork similar or equivalent to PhotoShop, the price is around $100 USD and suitable for creating novice to professional results. You may download Xara Xtreme trial software free for 30 days to see how versatile it is for all types of online illustration or artwork for print.

Skype for VOIP services is a great way to stay in touch with clients, conduct conference calls, or hold project progress meetings. One customer recently contacted me because Skype links with flags and the Skype logo appeared automatically for each phone number displayed on their custom cms website that I designed.

They assumed the Skype link was part of the website design when instead it is an annoying Skype add-on in IE. The activated add-on and not the custom cms design is the reason the links appear. Their purpose is to allow instantly connecting by phone through Skype if you have their service. If not, and you prefer email or picking up the phone, here’s the solution to disable that display.

For people wondering “Where or how did that add-on originate and get on my pc?”, it is bundled with the browser, so you didn’t have a choice or do anything wrong. This short tutorial explains how to disable the Skype add-on for your pc when enabled in Internet Explorer IE8. The tutorial steps should be similar for older versions of IE, also.

While in Internet Explorer using the menu at the top of the page select Tools and then Internet Options and then select the tab for Programs. In that view select the button near the bottom for “Manage Add-ons”. The next screen may take a moment to fill and then you’ll see a list of programs that are either enabled or disabled. Find any add-ons for Skype and disable them. That should do it.

You may encounter the annoying Skype add-on if you run older versions of Firefox, also. The steps are very similar to those given in the IE8 tutorial, so search Tools, Manage Add-ons, and disable the one for Skype.

Forget the old time carnival barker yelling “Step right up…” when your goal is drawing a crowd to your website. There are other methods to keep visitor interest once they land on your website by providing value that is instantly recognized. A method that I use and recommend is valuable expert tips and advice written as a report or ebook in pdf format that your visitors can download.

People go online shopping for information. They bounce from site to site comparing notes before they stop shopping and decide to buy. The home page is the most frequent landing page on typical sites, so have a free download graphic and link there to share your expertise. The report or ebook topic of interest will likely be related to what brought them to your website, so quite often the pdf will be downloaded.

Unless you need to build a mailing list, my advice is allowing people to download without registering or revealing an email address. I am blessed and busy, so all the reports and ebooks on my website are grab it and go.

What makes this philosophy of sharing interesting is people will trust you and your motivation more if they can commit without worrying about being on a junk mail list forever. Provide quality, and many will forward your pdf report or ebook to business owners, peers, family, or friends.

One copy sent to two people who each send it to two more is like the snowball rolling downhill. In no time you can develop brand recognition and momentum by giving away quality information that others try to sell or at least trade for an email address. Thousands of my pdf reports, ebooks, and tutorials have been downloaded directly from my site. Email feedback from happy visitors promising to tell a friend confirms the value of paying forward.

One of the most popular is the 50 page ebook for people interested in diy seo and cms web design. You may download yours now or read it online, and then please tell a friend.

Bonus Tip: Do not ZIP your pdf report, ebook, or tutorial for download. As a raw pdf visitors may view it online including search engines. Yes, Google can index and send you traffic based on the quality of your pdf download. Win-win.

This tutorial provides advice for sorting posts when telling a story in WordPress. The default display of posts in WordPress is chronological with the most recent being first at the top of the page. For storytelling you may want your posts to display in a more logical order for the reader. There are options for bloggers telling a story in WordPress to have posts display with episodes in a series much like a book chapter by chapter.

The first tutorial method is a simple modification of the code in your template. To display posts in reverse chronological order (oldest first) modify the index.php file in the wp-content/themes/[your theme]/ folder. Look for the line of code and above that add this line of code to have posts display in reverse ascending order.

The next tutorial advice is a WordPress plugin to handle sorting. To allow multiple options for the sort order, you may want to search WordPress for sorting plugins. Some provide options from the backend admin so you can set options for a variety of query types by date, time, author, and more, and then within each of those you may sort results with a second option. For example, the main sort could be by author with those results further sorted by a second field like category or date.

Caution: After reviewing several my advice is checking plugin compatibility to your WordPress installation version before installing.

Finally, this third tutorial and option comes from a WordPress hosted blog of poetry written by my late Grandmother. My choice was to override the WordPress default maximum posts listed, which is 15, and have all 39 poem titles listed alphabetically in the sidebar. After all poem content was prepared and later published in one day in a random order, I created a custom html/text widget to replace the list of recent posts with the alphabetical list of all poems here.

The custom html WordPress widget concept works when the blog content is fixed like that one-time list of all poems, or in a story that gets posted as episodes and the last chapter is published. Just add new links to the sidebar widget as new episodes are posted until complete.

There are more WordPress sort plugins and tutorials, and certainly may be new ones by the time you view this post. The good news is there are options for controlling post chronological sorts when telling a story in WordPress.

The illustration below shows the 6 steps used in the avatar photo edit tutorial to create a new graphic for this Life with Corky puppy website and his CorkyStory Twitter account.

The large photo left is the original photo of the dog taken while going for a ride. The large photo right is the new avatar with a more dramatic look including a blurred background and better contrast on the puppy’s face.

Tutorial steps from before (left) and after (right) are included below the illustration:

Tutorial sequence for avatar photo edit in 6 steps marked A through F:

A: Original photo without any edits. Zoomed in to trace the puppy’s head.
B: Photo mask filled form (in red) made by tracing in the previous step.
C: Clipped puppy’s head in vector artwork with all background removed.
D: Original photo (A) cloned with blur applied to the entire photograph.
E: The cropped head from (C) is placed on top of the blurred photo (D).
F: Brightness adjustments of the cropped head creates the final version.

Besides the links above to the home page and the Twitter account, the original photo of Corky the puppy before cropping may be viewed on Corky’s website on page 3 of his Fleet Peeples Dog Park photo gallery at LifeWithCorky.com.