Posts Tagged ‘design’
Google Plus One Button Tutorial
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.
Makeover of First Blog Ever Designed
I finally got around to a makeover of the first blog template I ever designed which seems overdue after being in custom web design full time since 2004 and doing websites more as a hobby since the mid-1990′s.
The screenshot here (smaller than actual size) is from the newly designed Growin’ Up in Maine personal blog where I tell stories of “Childhood Memories of Small Town Maine Life During the 1950′s and 60′s”.
While at it, I moved the blog from free hosting on Google’s Blogspot.com to a custom domain. Buying the custom domain through Google for $10 includes free hosting, so the old blog has a new template and home on a TLD top level domain.
The future cost to keep it online is $10 a year.
Originally the plan was to use the blog as a test site for offering custom blog design services, and the intent was to learn template design from the experiment then trash the blog.
To my utter surprise people my age in the boomer generation just loved the stories that brought back memories of their childhood. Based on the popularity and positive feedback I decided to keep the blog going.
The top header in the Blogger template design uses original photographs I took this summer in Maine for a widescreen view of the place we referred to as Down Back for 3 generations in the 1900′s.
Additional photos and video footage were used to create a YouTube video that you may want to view showing that special place including the old swimming hole Down Back on the Sebec River in Derby, Maine.
At times I’ve gone months without writing new stories, but that’s about to change after this makeover of the first blog I ever designed. Watch the video. Check out the new look of the Growin’ Up in Maine template and blog.
Bookmark the site or subscribe to the rss feed to read future stories about what it was like living life in a small Maine town.
Free 2012 Business Card Artwork
Back by popular demand, readers may now download free custom business card artwork with the release of my free 2012 business card artwork download.
New BONUS! I’ve added 3 new colors for 2012, so besides the original grey marble, white granite, and plain white, take your choice of marble in pale green, light blue, or pink salmon for 6 versions of the free business card artwork.
Click on the graphic to the right for an enlarged (low-res) view of all 6 colors!
FREE ARTWORK LINK
Use this link for free 2012 business card artwork to download now. (zip folder, 2.9mb)
Artwork is enlarged 300 dpi high resolution in CMYK 4-color for at home or professional printing.
Unlike some free resources, you do not have to register or reveal your email address to enjoy another set of free business card calendar artwork to add to the back of your 2012 business card.
Questions or blog comments are welcome.
CCleaner and Defraggler Boost PC Speed
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.
Web Design META Title Tutorial
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.
Page One Out of One Billion SERPs
This is a lesson in SEO Search Engine Optimization. Imagine a web design where your website is listed in Google results on page one out of one billion SERPs (search engine result pages).
The search term would need to be a very popular, very generic, or frequently used phrase just to have a billion search results.
Today I discovered that this blog acheived #10 on page one for a one-in-a-billion phrase I made fun of nearly 3 years ago.
Some site owners make the mistake of wasting home page seo search engine optimization value by using the page title: Welcome to our website.
For optimized content for seo use descriptive phrases with key words about your business.
In a blog post about seo search engine optimization on 14 December 2008 I wrote about that phrase and why certain page titles are inappropriate when trying to compete for search engine traffic in your web design. The phrase is so generic and mistakenly used so often by web design amateurs that I decided to do a search just to see who was #1. Someone had to be.
The problem is the phrase has zero key words to rank well for terms related to actual website content. Afterall, who really does a search on “Welcome to our website“? At the time of my blog post a university was the “winner”. While working on seo search engine optimization for a new project, I decided to see if they were still #1.
The university is no longer on page one out of one billion SERPs, yet this blog is, and maybe in another 3 years this post will make page one for “Welcome to our website“.
Don’t Shoplift Parts for Your Web Design
Web design is an art that requires being creative while providing a digital product that will compete successfully against others in the same field. Being creative means having an endless stream of web design ideas to capture the essence of the customer’s business in an attractive format.
The goal is a unique high quality web design that helps sell or presell a product or service. To achieve that goal don’t shoplift parts for your web design like graphics, photographs, illustrations, or html code. It is a crime to “borrow” copyrighted content from websites. Easy access does not mean that the content you discover and admire is free to use.
For amateur or do-it-yourself web designers there’s often the temptation to take shortcuts. The internet provides an almost endless world of content that appears free for the taking. There’s no storefront or door to breach, or any safe to crack to get to this wide choice of material for a web design.
Part time web designers who equate easy access as permission to use are either unaware or don’t care about violating copyright. There are viable alternatives for sources of public domain content, royalty based content, or paid content that allows you to use creative materials made available by others.
Some owners may provide creative content with or without restrictions. An example might be the yearly custom business card calendar designs that I offer my site visitors. Others could be manufacturers who allow their distributors to use product photographs. The bottom line is if you did not create or purchase rights to your web design content be sure to have permission in writing to avoid violating copyright law.
Browser Security and Quality Web Design
Website risk and vulnerability factors include browser security and quality web design. Site owners depend on the quality of their web design to help prevent hackers from taking control of site functions. Best practices by your designer and your internet service provider can help deter malicious visitors from doing damage.
However, a persistent hacker can invade almost any small business website if truly determined to gain access, yet most micro small business clients would be unaffected because hackers choose larger targets.
The majority of my custom web designs are informational websites instead of e-commerce, so only a handful process financial information which is commonly a target for identity theft.
For websites that are compromised, the next consideration besides site owner issues is the risk to site visitors. Readers may be unaware that website visitors could be more vulnerable depending on the software they use to visit a malicious website.
Recently, I came across an article about an annual hackers contest held each March since 2007. Your vulnerability can vary depending on the equipment and browser or mobile OS Operating System you use.
TippingPoint Digital Vaccine Laboratories or DVLabs does an annual pwn2own hackers contest in March with cash and electronic equipment prizes to hackers able to break into devices running on the most popular computing software.
The expert hacker contestants sign up and then attempt to hack into computing devices running on the following software listed here alphabetically under PC and then Mobile:
PC Browser Software
Apple Safari (hacked)
Google Chrome
Microsoft Internet Explorer (hacked)
Mozilla Firefox
Mobile Devices and Software
Apple iPhone 4 running iOS (hacked)
Blackberry Torch 9800 on Blackberry 6 OS (hacked)
Dell Venue Pro running Windows 7
Nexus S running Android
From the results above (hacked shown in bold), Google Chrome and Mozilla Firefox were clear browser winners and the iPhone and Blackberry under mobile devices were hacked. Besides the results linked above, you may want to read the pwn2own article on Wikipedia for a historical perspective.
Multiple options for a PC browser give users control over how they surf websites from a desktop or laptop computer. The same is not true for proprietary software used in mobile applications. Does this mean you’re defenseless if using a browser or OS that was hacked? Not necessarily.
You can be proactive about security. When evaluating browser security and quality web design our advice is being aware of risks and then take preventative action by using antivirus software for your computing device. Finally, use care before visiting any unfamiliar websites.
Web Design and Continuous Improvement
After 15 years in custom web design including the last 7 years full time, the relationship between web design and continuous improvement cannot be denied. The quality principle of continuous improvement is a lesson I learned 40 years ago before any websites existed.
In summary, the concept of continuous improvement means always strive to improve quality and processes in everything you do.
The result of continuous improvement is more efficiency which lowers cost while generating higher profits. At the same time you can balance a better product with price reductions to gain sales momentum and still grow profits based on higher volume.
Customers benefit from your goals of continuous improvement as you become better at what you do. Bigger customers may expect you to strive to lower prices every year, too.
Recent developments in the evolution of custom web design allow creating better websites faster. For my business, that means the price for a custom cms content management system web design at $1500 now costs $1000 less than a year ago.
For static informational sites that the client wants to launch and forget without growing or adding pages, a 5 page site at $500 is also $1000 less than a year ago.
Continuous improvement is a business quality principle that applies universally including the world of custom web design.
Real Estate Website Graphic Edit
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.
Web design full-time since 2004 and giving freely helps me learn what customers need. Call today for no obligation web design advice.