Blogs by date "July 2012"

The Shape of Things to Come?

In recent conversations in the #exponent-cms irc chat on irc.freenode.net we’ve been discussing how best to maintain Exponent using the most current software technology.  Though Exponent has been based on YUI (Yahoo User Interface) for years, there are more commonly supported libraries which might be worth considering.  Some of these have familiar names in the developer community such as ‘jQuery’, ‘Twitter-Bootstrap’, and the ‘LESS’ css stylesheet compiler.  What’s more, several aspects of YUI are currently broken and unusable in Exponent (e.g., we ship v3.4.0 because newer versions such as v3.4.1, v3.5.x and the soon to be released v3.6.x break our displays).  (Rest assured, we'll maintain backwards compatibility) So here’s where Exponent MIGHT go within the next several releases.

The LESS css stylesheet compiler will likely be implemented and ship with v2.0.8, though not necessarily in its final configuration.  LESS allows a designer to create stylesheet templates with variables and other programming commands to allow the ‘machine’ to do most of the work rather than the designer needing to continually re-write redundant styles.  More information can be found at http://leafo.net/lessphp.  You will be able to fully use .less files in v2.0.8, however their location MAY have to be moved and their inclusion statements MAY need to be edited in future versions once we finalize support.

jQuery is a javascript library similar to YUI, but is designed for smaller projects.  However, it is more widely used and supported across the developer community.  If you were to browse the internet for examples of coding solutions, you’d most likely see several based on jQuery and very few solutions based on YUI.  There are tons of interface add-ons and other solutions available for jQuery.  More information can be found at http://jquery.com/.

Twitter-Bootstrap is a new user interface library of components and styles similar to YUI .  It uses both jQuery & LESS.  In many ways it is much simpler to implement than YUI and is more responsive to various display sizes without the need for multiple stylesheets or themes.  More information can be found at http://twitter.github.com/bootstrap/.
We already have locally running copies of Exponent using these technologies in the form of a custom theme which could easily be dropped into an existing v2.0.8 installation if desired.  So a future version of Exponent with a Bootstrap theme could look like this:

About the author

Dave Leffler
Exponent CMS Developer

(updated) Two Column Forms (or something like that...)

(Updated Aug 2nd) We've had several requests lately to 'make forms look like they did in versions prior to v0.97.'  Meaning, place the label and input control on the same line instead of the label above the input control.  Since we're trying to move away from using tables to format the layout (the html5 way of doing things), it's not an easy fix, HOWEVER we can simulate the look using css styles.  (NOTE: we have implemented a Single column/Two Column form settings option in the next version 2.0.9 which will easily implement this feature)

Forms in 2.0

Forms in 0.96

Restyled Forms in 2.0

Though you won't necessarily end up with an exact reproduction, it will look similar.  One drawback is the width of the label is a hard width and will truncate long labels.  This more robust styling below prevents the label truncation.  Enter/Change this into your theme stylesheet: (updated Aug 2nd)

.control  {
    overflow: auto;
}

.control .label {
    display: block;
    float: left;
    width: 150px;  /* non-flexible part truncates label */
    text-align: right;
}

.control.radio .label {
    width: auto;  /* make radio buttons look normal */
}

.control.checkbox .label {
    width: auto;  /* make checkboxes look normal? may not be needed */
}

.datetime.date, .control table, .control.radiogroup table, .control.radio table, .control.checkbox table {
    display: inline;
}

.control-desc {
    margin-left: 160px;  /* make description fall directly under input */
}

.formmoduleedit .item-actions {
    display: inline;
    float:  right;
}

 

About the author

Dave Leffler
Exponent CMS Developer

On-Page SEO Tips for Your Exponent CMS Website

On-page SEO is essential to ensure the pages of your site are indexed according to certain keyword targets. On-page SEO, or on-page optimization, is the art of using specific keywords throughout the content of a page.

As a result, pages of your site will be stored in the right 'search engine deck' or keyword category, and your potential to rank on those keywords is optimized. When it comes to on-page SEO, having an Exponent CMS website offers many advantages. Exponent aids the on-page optimization process by providing content editing fields for the page elements that have the most impact on SEO.

Three of those page elements are the Page Title, Meta Description, and Page Copy (or text). In short, it's critical that you establish keyword relevancy in these three areas of the page. For the context of this article, we'll assume you've done your keyword research and move forward with the on-page SEO process.

Optimizing Page Titles

The page title highlights the main focus or subject matter of a page. The text of the page title makes up the hyperlink that's shown on a Google search engine results page. Page titles have the most weight for on-page SEO and establishing keyword relevancy for a page.

It is thus important to write well-balanced page titles that are both keyword optimized and user focused. Below are several tips to keep in mind when creating well optimized page titles:

  1. Always include the exact phrase match of your primary keyword target for each page. It also helps to introduce the keyword phrase as early as possible in the page title.
     
  2. Make sure the page title accurately describes the content of the webpage (and is not overly keyword-stuffed.) This gives search engine users a good representation of what the page is about.
     
  3. Try to keep the length of each page title between 60 and 70 characters. Google will only display so many characters, so keep your titles tight and to the point.
     
  4. Ensure that the title for each page is unique. This is extremely important for ecommerce SEO, for some deep websites have automatically generated page titles that are duplicated throughout the site. Taking the time to customize and keyword optimized the title for each page is critical for SEO.

Optimizing Meta Descriptions

In essence, Meta descriptions are short summaries of a page that are displayed just below page titles in a search results listing. Similar to page titles, Meta descriptions are not visible on the actual page (only in the search results,) yet they still carry a great deal of importance for SEO and establishing keyword relevancy.

In addition to including keywords for SEO, good Meta descriptions are informative, value-oriented, and will usually include a call to action. Below are a few tips for writing quality Meta descriptions with both SEO and users in mind.

  1. Keep your Meta descriptions about one sentence long, or between 150 and 200 characters. Google and other search engine will only display about 160 characters.
     
  2. Use your primary keyword target early in the Meta description. If you have room or if it makes sense in the copy, try using a keyword variation towards the end, but do this respectively and avoid keyword stuffing.
     
  3. Write creative and compelling Meta descriptions. Include verbs and call to action statements, and really promote what’s unique and valuable about the page or what's being offered.

Optimizing On-Page Copy

The on-page copy or visible text is what users read while on your pages. It is also what spiders crawl after they hit the page title and Meta description. Thus it is important that your page copy is user-focused in that it reads smoothly and expresses value to visitors, as well as keyword-focused in that the copy includes a balance of keywords in the right places. Writing keyword-optimized copy is not always easy. The process is a balancing act of writing with a natural, creative flow while making sure your targeted keywords are mentioned throughout the copy. Below are some on-page optimization tips to keep top of mind while scribing optimized webpage copy.

  1. Use different types of headers in your page copy. That is, group or chunk your copy based on various ideas and concepts, and make use of H1's, H2's, and H3's while separating each idea. Think of H1's as the primary title of a page, while h2's and h3's are supportive sub-headers for each topic. Respectively include your keyword targets in headers.
     
  2. Strong tag (not bold) instances of keywords in the copy. This tells search engine spiders that a specific word or phrase is a bit more significant.
     
  3. Apply other text styling attributes, like italics or underlining, to the copy. Whether or not your keywords are involved, these styling elements can offer a bit more stimulation for users when reading your page copy.
     
  4. Reference your primary keyword target a few times in the page copy. Mention your keyword target in first H1 and in the first few sentences of the copy, but avoid keyword-stuffing. Use keywords naturally while writing optimized copy.
     
  5. Try to include a sufficient amount of text on each page. Pages that have been well optimized will have between 200 and 2,000 words of text, depending on the nature of the page. Typically, the more (unique and valuable) content you include on your optimized pages, the better potential they'll have of ranking well in the search engines.

Optimizing the Page Title, Meta Description, and Page Copy is not rocket science, and neither is search engine optimization. The focus of on-page SEO is to establish keyword relevancy with creative and logical use of certain semantics. Although this phase is essential for SEO, it is only half the battle of achieving a top ranking. Off-page SEO holds just as much importance to the website optimization process.