Search Engine optimisation (SEO). What exactly is SEO?
Search Engine optimisation is the process of setting up your website so it can easily be found during Internet searches, using the Keywords that your target market will typically use when conducting a search for the product or service that you provide.
The goals are:
• Determining the most effective Keywords that your target market will use to search for your business
• Including the most effective Keywords in key areas of your website optimising your content for search engines
• Link-building in partnership with other sites
You probably already use a number of targeted Keywords in your marketing endeavours.
SEO costs little or nothing to implement and it eliminates ongoing costs and fees. It gets your website found by interested online customers, but it involves a little effort.
To rank well in search engine results, you must persuade the search engines that your website is a recognised authority in your industry. The information displayed on your website should, therefore, be reliable and useful to people who are researching Keywords and search terms relevant to your business.
To select the subjects on which you will base your SEO efforts, ask yourself the following 4Ws:
• What product or service do you offer and how does that product or service aid your customers?
• What sets you apart from your competition?
• What is your website about? Are using your website to educate or to sell to your audience?
• Who is your audience? Are you targeting individual consumers, corporation executives or middle management?
These specific Keywords, will help search engines more effectively direct online customers to your site.
Once you have some very specific answers to the 4Ws, you will be ready to tackle your optimisation.
SEO Keywords is a new suite of five stacks from CosCulture, that will not only assist you with your keyword optimisation, but also add meta data to your pages and generate a report so that you can check the effectiveness of your optimisation.
The stacks included are:
Report stack – Generates the above report in RapidWeaver Preview. This report is not published to your website.
Links stack – Allows the SEO Report to generate the Keywords and Links reports Converts all external links on the page to nofollow, just by setting one option.
Automatically generates a keywords meta tag and adds it to your web page. This meta tag is generated from:
Words or phrases that you specify Words that you specifically do not want to be included will not be. These are known as “negative words”.
Words that it finds on the web page that are more than x characters long, and occur more than y number of times.
The Links stack is added to the bottom of your page.
Meta stack – Adds up to 3 different meta tags to your web site:
1. Facebook/Open Graph Tag
3. Structured Data.
Links Page and Links stacks – Used in combination to show related web pages, and enhance your site’s SEO performance.
You've probably seen search sites or search results that include "Pages similar to this"? These two stacks ensure that search engines can find these pages.
Go forth and SEOptimise your site!
You never heard of Weaver's Kingdom? You must have, it's been online for weeks now and is the rebranded Archetypon from Lucas Tsolakien.
Tickertape is considered useful, because it can display large amounts of text within a very compact space. It is often used to display upcoming events.
Typed takes the idea to a new level. Instead of a constant stream of text running across your screen, Typed types text, deletes, or untypes it and then types a fresh text in its place.
My first thought was "Duh! Not another one!", but then I took a look at a couple of examples and changed my opinion.
Lets say you have a number of different products or services available. You could type a list such as:
We Design Websites
We Design Logos
We Design Print Products etc, etc.
Or you could position your text "We Design" and let Typed fill in the blanks at intervals of a second or two.
You've got your message across and, because it's animated, it gets noticed and – it saves a lot of space.
When you drop Typed onto a Stacks page, you'll see a text container with a + button to add child stacks.
Type your text alternatives into the containers and add, or delete child stacks as needed.
In the settings panel, you can set the Typing Speed and the Start Delay. You may choose to Shuffle your texts and set the Back Speed [untype] and the Back Delay.
You will probably want the text display to Loop [repeat], but this option may also be deactivated.
By clicking the final stack option 'Detatched' you can insert the code <span id="typed"></span> into any text block and Typed will insert itself [i.e. your ticker text] into said block instead of appearing on the page as a separate stack.
Typed 'types' your text across the screen, so by default it displays a cursor. Show Cursor can also be deactivated.
The next settings are for the text formatting. Override Styles, [Text] Colour, Bottom Border [underline] and Border Colour.
Typed re-invents and modernises tickertape and makes it a lot more appealing than it used to be.
Take a look at the demo sites at the bottom of Lucas' product page and see for yourself.
Listify is a set of three stacks that will help you build professional lists within your Stacks pages. The basic stack, Listify, is a container for individual List Items. You can either click the stack's + button to create a List Item child, or drag in a List Item stack. The third stack is Listify Group; a container that allows you to create groups of list and automagically builds responsive columns to contain them.
The clever thing about Listify is that you can drop anything into it that you please…
Lets take a basic list. Drop Listify into a stacks page and add a List Item.
The List Item Displays an Icon and a Text Field. Enter your text, add a new List Item – as many as you need – and you have bulleted list.
If you need a headline, you can either enlarge the text in the first Item (see the image below), or you can add a container to the Item and drop in a Header stack (hover over the image below). You can, of course drop in an image, or a button into the List Item Stacks and switch off the default icon and text display.
Each List Item may be formatted individually, or – by leaving the default settings – the completed list may be configured as a whole. Once you've studied the settings panel you'll find that the configuration is really simple.
Tip. If you wish to set up individually formatted List Items, begin with one Item. Once you have finished the basic formatting, duplicate the Item and then reconfigure. You'll find it a lot easier than setting up each Item from scratch.
The basic Listify stack provides the settings for the overall look and feel of your list. The List Fill Mode determines the width of your list – either Full Width (of the container it is placed in), or Pixel Width. The List Radius is set to a default of 5px whilst with the List Padding and the List Margins are set to 10px T, B, L & R.
The Background is set to Off by default, but may contain a solid Colour, a Gradient, or an Image.
Both the Borders and the Shadow are Off by default.
List Items (Shared Styles). The following settings will affect every List Item within the Listify stack:
Indent Direction (Left/Right), Item Indentation (px), Align Content (Left. Centre, Right, Separate (Icon & Text)), Item Spacing (default 5px), Item Radius (default 5px), Item Margin, Background and Border.
List Item Fonts gives you a choice of 13 standard Google Fonts, or (just to prove that 1LD listens to their customers) Custom. Text Size (px) and Text Colour.
List Item Icons (Shared Styles). Here you get to set the standard formatting for the icons: Vertical and Horizontal Positioning, Icon Padding and Spacing, Icon Radius and Icon Size. The Icon Background can once more contain a solid Colour, Gradient, or Image. Oh, and the Icon Colour itself, of course!
The default Icon is a Google Material Icons star. The icons are set individually for each List Item, with a choice of GMI's, Font Awesome, or Ion Icons.
Listify Item. The individual Items may be Linked to an external source. The next setting is Item Level. Each Item may be set to up to 10 (in words TEN!) Sub Levels! Excuse the overuse of exclamation marks (points if you're American) but this is amazing!
Next you have the option to Override Shared Styles. If this option is activated, each List Item may be individually styled. With the exception of Custom Stack Content and the Icon setting, the list of formatting options that follows is identical to those already listed above, including the individual visibility settings for the three screen sizes.
Finally, we come to the List Group stack.
As already stated, if you drop two, three, or more individual Listify stacks into a Group, your list is automatically columnised.
The List Group Stack also has some interesting features, though.
The List Alignment is set to Centred by default, but may also be set to Top, or Bottom. Then you'll find a setting Wrap List for Mobile Tablet (Portrait) and Desktop. Then there are settings for the group's Background – again None, Solid Colour, Gradient, or Image, Group Radius and Group Padding. The whole group may, of course be hidden at different screen sizes.
Hover over the image above, and you'll see just how flexible Listify really is – and that's without having added button stacks, or images!
Kool, or wot?
'Velvet' refers to the velvety smooth transition that Velvet Video displays when transitioning from thumbnail to full screen view. It is really smooth.
There are two Velvet stacks – the Velvet Base stack that enables Velvet's functionality and Velvet Video – the thumbnail/video container. Once you have placed a Velvet Base stack on your RapidWeaver page, you can add as many Velvet Video stacks to the page as you please.
Velvet Video's flexibility is quite distinguished. You can place multiple thumbnails in a multi-column stack, or in a Foundation grid, or you can drop the Velvet Video stack into a slideshow of your choice. The stack is Mobile First, so when a thumbnail is clicked on a mobile device, the video will play 'in place' whilst on a desktop or tablet display it will smoothly open a full screen lightbox.
As you already know, I am not a fan of online videos, but I do have clients that require video implementation on their sites. Velvet Video is an ideal solution if you have multiple clips to present.
First you'll need to add a Velvet Base stack to your page and configure it.
Because Velvet Video is Mobile First, the first setting is Direct Play Break – the breakpoint at which the video will play in place and not open a lightbox. The next setting is Player Shadow. The default is set to 4px, but as the default Zoom Overlay – the lightbox background – is set to dark grey, the shadow won't be immediately discernible. However, the Opacity and the colour of the Zoom Overlay may be set individually, after which the subtle shadow comes into its own light.
The final Velvet Base Settings are optional Autoplay and Full Screen Zoom and Force Loading. The latter will force load the videos so that they may be previewed at responsive sizes.
The Velvet Video stack itself has two or three more settings. First, you should add a thumbnail image for your video. Next, you need to add either the YouTube, or the Vimeo ID.
Prevent Video Zoom doesn't yet have a text tip and I was unable to see a change between active and inactive states.
Play Icon Style offers a choice of six different icon overlays for the thumbnails. I like the fact that the Play Icon Position has a multitude of options and that the Play Icon Offset can be set between 0 and 30px. The Play Icon Size may be set between 0 and 30px too and the Play Icon Colour has options for both static and hovered states.
Also quite unique are the Thumb Overlay [colour] settings which may also be set individually for both static and hovered states.
Pricing Tables is so simple to set up that if you have your content prepared, your first comparison table will be complete within mere minutes – you just need to work your way down the stack settings! The example below took less than five minutes to set up.
When you drop a Pricing Tables stack onto your RapidWeaver page, all you'll see is a box with a logo inside it.
Oops! 'What did I do wrong?' Was my first thought.
However, when I switched to preview mode, I discovered the same Pricing Tables on my page, as demonstrated on the RWtuts website.
Huh? I didn't do anything yet!
So let's take a look at the settings:
Columns Styling. Pricing Tables is set up to display the 'standard' three options that we see online on a daily basis. No amount of juggling will allow you to add just a single price table, or compare four options – it's "take it, or leave it". So after choosing a Font from a choice of ten options (the dreaded Comic Sans is also included), your next option is the column width, set in percentage of the container stack.
The next setting is Space (in px) and governs the spacing between the columns.Next up – Border width, BG Colour and Border Colour.
Header Styling. Set the Header Colour for Headers 1 through 3, the Font Colour and the Font Size.
Price Styling. Price Colour (actually the background colour which also formats the background behind the submit button) and Font Size.
Button Styling. Button Colour, Font Colour and Font Size.
Once you have your formatting set up, you can add your content. Moving down the settings panel you will find containers for the contents of each panel.
These include Title, Price, Descriptions 1 through 6, Button Link and Button Text.
Once you've added this content, you can go proceed to publish – your setup is complete already.
Pricing Tables is a minimalistic stack that takes the work out of building a flat comparison table. There are no bells, or whistles, with the exception of the fact that the column that your visitor hovers over grows a subtle shadow. The setup is simple and the results will suffice in many situations.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16