Professional Workplace Trainers (PWT) are specialist providers of safety and health training in Perth. PWT wanted a completed solution including:

1. A revitalised logo design
2. Complete website update and implementation of a CMS
3. A boost in Google ranking
4. A payments page so they can securely accept credit card payments
5. Facebook Business page

Our Solution

1. With this kind of project we always start with the logo design as everything else flows from that. We presented 4 logo options and PWT fell in love with one of them which embodies their new look for 2013.

2. Using the new logo as a colour palette we designed a website which is modern and sleek with a mint green highlight colour. The homepage uses a large rotating showcase banner which communicates at a glance what the website is about and the target industries for workplace training (mining, construction, retail and transport). WordPress was the CMS of choice as it is simple, flexible and scalable for future growth.

Launching in 2013 will be PWT’s suite of eLearning courses were customers can study courses online at their own pace.

3. The majority of our clients require greater rankings in Google. Workplace training is a competitive market so SEO techniques were implemented to ensure PWT see positive results in their Google rankings. Having been live with the new website for only a couple of weeks the results have been startling so far.

4. Every website that handles sensitive data like credit card transactions requires security encryption (SSL), we assisted PWT through this stage. A merchant account is required for taking credit card payments so we brokered deals with their bank as well as eWay who will provide the payment gateway.

5. Finally a Facebook Page was created and the new branding was applied to match the look and feel from the website. The last task of the project was to sit down with the client to provide training so PWT can maintain their website via WordPress. PWT is another satisfied client Intertec Consulting has facilitated in getting the maximum business from their website.

The Shire of Peppermint Grove’s previous website was a static HTML site which was difficult to update internally. They were looking for a Content Management Solution (CMS) that would allow internal stuff who are not very familiar with web publishing to post and manage content on their website. The new website needed to be user friendly to cater to all in the community, especially the ageing population.

When revamping an existing website, there is usually some downtime. The Shire wanted to avoid this downtime all together as it provided a large body of important information to rate payers. This provided a further challenge.

Our Solution

The existing shire logo was starting to look dated so we started with giving the logo a refresh whilst still keeping the crest to give it a modern twist.

The next stage was the site design. We sent the shire several options to consider which included visually appealing design, user friendly navigation and clean lines. With a few minor tweaks to the conceptual design, a winner was chosen and we started building the website. One of the main criteria of the project was that the CMS was easy to use – with this in mind we choose a WordPress CMS as it’s proven to be one of the easiest CMS’s to use in its field.

Due to the ‘no downtime’ request we had to think of a clever work around. We developed the new website on a separate server and worked with a temporary domain. This also allowed us to show the Shire a work in progress and once everyone was happy we switched the domain and the new site was live – achieving the task of zero downtime.

Finally we provided training on using the WordPress CMS to a dozen of the Shire staff who would be responsible for the maintenance of their allocated sections. Since going live, the shire has easily managed Shire announcements and updates.

Typepad was still the second most popular platform in 2009, but now it has virtually disappeared from the rankings. Movable Type, which was still being used by 12 of top 100 blogs in 2009, is now down to 7.

Trend: Secrecy and Custom Platforms

Interestingly, this has also given rise to a new degree of secrecy. Pingdom, for example, was unable to determine which platforms some of the top 100 sites use and was even told by one site administrator that he “was under non-disclosure agreement to not reveal anything about the site.”

Source: techcrunch.com/2012/04/11/study-half-of-the-top-100-blogs-now-use-wordpress/

M68 Bioceramic Race Gear is a French company specialising in race gear and sports clothing.

Bioceramics are extremely durable metal oxides that are biocompatible, non-toxic and chemically stable within the biological environment. They are used in a range of scientific applications including joint replacements and dentistry. M68 applies a Bioceramic coating to its racegear that generates significant effects within the body, which enhances the performance of the athlete wearing them.

Intertec worked with the client remotely to developed a WordPress CMS website and integrated an Ecwid ecart to sell the exclusive garments.

Visit the website: M68 Bioceramic Race Gear

M68 Bioceramic recommendation:

It is with great pleasure that I write this letter of recommendation for the team at Intertec. I originally contacted Steve to discuss a website project for the company I was working for in 2010, Focus Mineral. During our initial meeting, I felt 100% confident that this was the company to put my trust into to bring the Focus Minerals website to life.

The professionalism, knowledge and enthusiasm that Steve, Petar and Seng portrayed was beyond what I hoped for. They understood my vision and requirements for the website and shared in my enthusiasm for the project. You can tell that the team at Intertec enjoy what they do and that each project- no matter how big it small- is just as important as the next one. I really appreciated how motivated they were.

During the process of creating the website, I spoke to Petar probably once a day and if ever I had a question or needed help they were always available to talk to. This was also another thing that really stood out for me- they really kept me updated and involved in the process every step of the way.

I cannot stress how easy the entire process was- the only thing that delayed the project was how fast I could work to give them the content and photos they needed to put onto the site!

It goes without saying that the Focus minerals website was completed successfully and to the exact specifications of which we envisioned from the beginning, if not better than expected.

Since this project, I have worked with Intertec again to create another website- this time for my own business called M68 Bioceramic Race Gear. Again, Intertec worked their magic and produced an amazing result.

It is without a doubt that I will continue to use Intertec for future projects that may come up and would highly recommend them to anybody who wants a great looking website made by true professionals.

You can imagine our excitement when GaragePro approached us to design their eCart website. Featuring a site developed using the Joomla content management system and an eCart enabled by world-class eCart solution, eCwid, the GaragePro website is a sleek combination of style, ease-of-use and powerful functionality.

At the heart of the GaragePro site is the eCart, powered by eCwid, where visitors can view, order and pay for a range of car care products and garage accessories. The Joomla CMS makes it easy for updates to be made to site content, and also allowed us to pack in a photo gallery and news blog into the site.

Have a look at the GaragePro site to see what we’ve done. We bet you’ll get excited too!

Visit the: GaragePro website

We recommended WordPress – a powerful and very flexible industry standard content management system – and worked the design to present a very clean, polished interface that foregrounded Focus Minerals’ key business activities, projects and resources for investors. Part of the challenge of creating this website was the creation of repositories of publications, reports, media releases and multimedia resources (video and audio) which could be managed and populated by Focus Minerals staff. Harnessing WordPress’s versatile blogging engine, we developed libraries of reports, publications, documents and media that could be easily accessed and searched.

Intertec created a new site for Focus Minerals – one which was a great deal more user-friendly, well-structured and which actively engaged with the company’s stakeholders and customer base. Deploying the site in WordPress also meant that the company could manage the general day-to-day maintenance of the website without having to engage web developers – a great cost-saving for them!

Visit the website: Focus Minerals

Designing and indeed front-end development for a website that will have content edited by non-technical users poses some problems over and above those you will encounter when developing a site where you have full control over the output mark-up. However, most clients these days want to be able to manage their own content, so most designers will find that some, if not all, of their designs end up as templates in some kind of CMS.

By considering the CMS as you design, you can maintain far more control over the final output. If your designs will be implemented and integrated into the CMS by a developer, then taking control at the design phase will help you to keep control over the design as opposed to leaving decisions to the developer or the content editors.

Know your enemy

Content Management Systems vary greatly in how much control they give the designer and the content editors. As a designer, you should first find out how much control over the templating system of your chosen CMS you have. Control may vary from simply being able to edit the existing templates to being able to shape the CMS completely around your designs. In some older CMS products you may find that you have little control over the mark-up that is inserted into the pages.

Where the content editors are concerned you should find out:

• Will the editors be able to insert any HTML tags into content areas, either by way of a WYSIWYG editor or directly?
• Is content simply large blocks of marked up content inserted by the editor or does the CMS use any kind of structured content?

Many people use WordPress as a CMS. In WordPress, users can add any mark-up to the Page content area

If users of the CMS will be able to insert their own HTML, then you need to consider how your design will hold up when that happens. The ideal situation for a designer is where the user has limited ability to enter their own mark-up and the CMS uses blocks of structured content to guide them into adding content in the right way that can then be marked up correctly by the templates. The more freedom a user has, the more defensively you need to design.

Keep it consistent

However flexible your CMS is, it is important to consider the consistency in your design templates. Training content editors is far easier if the elements that they have to work with are consistent across all pages of the site.

If working with any kind of structured content in your design (for example an article listing that displays a list of titles and excerpts from articles on the website), think of each section as a repeating block. With CSS3 we can more easily target every other item, or the last item, but this is not available for older browsers and it may not be possible to edit the back-end code of the CMS to add a class to every other item or the last item. Ensure that the design will hold up if each repeating block is the same — you can always add extra finesse for those browsers that do support CSS3.

When dealing with areas that are essentially large blocks of content where the user has control over the mark-up, don’t assume the user will remember to add lots of different classes to the mark-up to trigger the CSS effects you envisaged. Either keep things simple or use CSS3 selectors to target areas of the design.

Do not assume content length or height of blocks

On the web it is never a good idea to assume you know how tall something will be — as even where you have control of the content, text resizing can blow your assumed heights right out of the water and cause overlaps or text running off background images.

When designing for a CMS, you have the additional issue of more or less text being added to an area that you envisaged. If creating the initial designs in Photoshop or similar, consider how each box and the surrounding content will react to a greater or lesser amount of content. If providing PSD files to someone else to build, ensure that any background images on these boxes are provided with instructions on what happens if the box is taller. For example do we show more background or matt onto a flat color?

Grid type layouts of boxes can be a particular problem in this situation. A common design might have several boxes with header areas. They look lovely and neat in the PSD comp with regular lengths of lorem ipsum. However, once the content editors have added content, we find that some headings are on one line, some on two and the boxes are wildly differing heights leaving the neat grid looking rather messy. Considering this at the design phase may have dictated a different layout here.

The lists on the homepage of the Dubbed Creative website do not depend on height of content: some points have more text than others. This type of layout looks tidier than attempting to create equal height boxes with non-equal lengths of content.

If you are handing over to a front-end developer, thinking through these scenarios keeps the control on your side. Decide how you want it to look and explain to the developer how it should react to text resizing, additional content and so on and you don’t run the risk of leaving these decisions to people without an eye for design.

Avoid using image replacement for text

It is possible to generate images on the server side using PHP and other languages, however your CMS is unlikely to offer this capability as a standard feature. Therefore you should consider how any non-standard fonts will be included in your designs if that text needs to be managed by the CMS.

The situation with fonts is becoming far easier as there are now a number of services that allow you to use fonts that are not installed on your user’s computer but that would otherwise be difficult or impossible to license to include on your website. If you need a specific font you may be lucky and find that one of the below services have it available, or they may have something available which is close enough to get the visual effect you want.

Services such as Fontdeck and Typekit mean that using images for text is not neccessary to use a specific font.

• Fontdeck
• Typekit
• Fonts.com Web Fonts
• Font Squirrel
• Review of Popular Web Font Embedding Services (here, on Smashing Magazine)

Consider the CMS when designing navigation

The CMS that you are using is likely to dictate the navigation to some extent, so find out by checking the documentation or speaking with the developers what will be possible. It is useful to know what control content editors have over navigation. If they can add elements to the main navigation for example, it may be that you are best to avoid a neat row of tabs at the top of the site as additional tabs added by users may wrap.

An attractive row of tabs such as these on the Long Hollow Church Website may look untidy if editors have access to add new top level navigation elements.

Questions you should get answers to include:

• How many levels of navigation will be displayed? Is this configurable?
• Can content editors add to or change the main top-level navigation?
• Can you highlight the current page or section?
• Does the CMS offer breadcrumb style navigation?
• What mark-up will the CMS output for the navigation? Can we change it or add classes?

Design and create CSS rules for all possible HTML elements

In your design and dummy content you may only use two levels of heading and never add an ordered list or blockquote, However, if these elements can be added in the CMS, then at some point someone will use them. If you have used a CSS reset stylesheet you may not have styles defined for these elements at all — which will mean they look rather strange when used. Ensure that you have created CSS for all HTML elements in the content areas of your site.

I find it helpful to start my stylesheet with the default styling for all elements as this then acts as a fallback if I don’t add specific rules for styles later on in the document. I can always overwrite this CSS to make level 2 headings look different when they are in the main content area to when they are the heading of a sidebar box, but if I don’t add any specific CSS and then the user adds these elements, they do have some thought put into them.

Assume HTML elements can be stacked in any order

When creating your design, it is easy to assume that the content will look very much like your structured sample content. The h1 will be followed by a couple of paragraphs, never stacking headings and so on. The reality will be different once content editors get their hands on the design, so test the elements in different combinations.

Ask yourself questions such as:

• Does the design still hold together well with stacked headings? Is there appropriate spacing between them?
• What happens if a heading is used inside a list item?
• What happens if different list types are nested? Is the spacing correct at the bottom of each list?
• If the user can insert and align an image, what will then happen to the text around that image? Will there be a margin or will the text run right up against it? What happens if they put an image inside a list item?

Use CSS to enforce the style guide and semantics

This is something we tend to see once users become comfortable with their CMS: they begin to realize that, for example, an h1 heading gives them large bold text. You then start to find h1 headings in all kinds of strange places — wherever the user thinks something should be marked as very important. This can include half of the content of some pages. In the first instance we all need to try and educate our users and provide them with a style guide to help them understand the importance of semantics and correct usage of mark-up but the person you originally train will probably not be the person who manages the content forever and ultimately you will find users being creative with their mark-up.

A considered use of CSS can prevent this from happening. For example, we generally only want one h1 per page. If the main page heading is in a container, then you can use CSS selectors only to target that h1 with the main heading styling and reset the browser defaults on all other h1 headings to the same as the main body copy. This means the user has no benefit to using h1 in a non-semantic manner. The advanced selectors found in CSS3 can be very useful here.

CMS Editors may want to get creative when given a “WYSIWYG” editor such as CKEditor – use CSS to protect your design as much as possible.

Test with real content

Once your design has been developed into (X)HTML and CSS, test your assumptions in terms of how the content will behave. I find it helpful to do this before the templates are incorporated into the CMS. Points to test:

• Take each headline or small box in the design. Put in three times the amount of content you would expect it to have. How does it look? Does the box expand nicely or do you run off the background image or overlap another element?
• Grab a chunk of HTML from anywhere — just View Source on some site and grab a bunch of content complete with HTML tags. Paste it into your main content area in the template. How does it look?
• If using structured mark-up to display an event or similar — does the design hold up if certain items are removed or do you end up with obviously empty areas such as the word “Tel:” with no phone number after it if a phone number was not entered for a contact?

Help your content editors to maintain the design

If you hand over the CMS with little instruction for your users, then you can’t really expect them to read your mind and maintain the design as you would like. Even if your initial content editor is thoroughly trained on how to edit the site, as time passes by they may forget, or decide to get a little bit creative, or the initial editor may leave and someone else takes over with little training. At the end of the project, keep control over the design by helping your editor to do things the right way.

Remove functionality from the editor

The WYSIWYG editor in your CMS may by default give the user the ability to add all kinds of styling, even adding inline CSS. However, with many editors it is possible to trim down the toolbars to just offer a limited subset of icons and therefore functionality that is exposed to the user. If you can trim down the editor to only offer the ability to add basic HTML elements, you will have far fewer problems to deal with.

Add CSS to the WYSIWYG editor

If content editors have access to a WYSIWYG editor when editing content, add the CSS rules used on the site to the editor CSS. That way, editors can see how their changes to the content will actually look. In combination with using CSS to enforce the style guide, this can help users to maintain the consistency on the site.

Create a style guide that also includes semantics

Include a style guide for the site as part of your handover documentation. It is easy to just handover documentation on how the CMS functions and forget to also explain to content editors which elements they should be using when adding their content. This is particularly important if editors have a lot of control over the mark-up which they enter.

By considering how content will be edited on your site and the possible ways in which, over time, that content will grow and change, you can maintain far more control over a CMS website than you might think. If you have any additional tips or would like to discuss problems you have encountered when designing for Content Management Systems, leave a few lines in the comments below.

When choosing a CMS for a business or corporate website these days, it is hard to go past WordPress as a consideration.

The top 5 reasons to use WordPress for a business website are:

1. It’s Free: It sounds amazing, but the the WordPress engine is completely free to use.
2. Search Engine Friendly: WordPress platform is much liked by the top 3 search engines (Google, Yahoo & Bing) – this alone should be a big motivator for small business to go the WordPress route especially if your business is in a competitive field. There are a few tweaks you need to make to really maximize the SEO potential – but its all done via free plugins.
3. Easy to Use: Weather you are a developer or a end user, the WordPress interface is very easy to use. Adding plugins to extend functionality or just editing content its done within a few clicks.
4. Extendable: WordPress is infinitely extendable, with over 10,000 free plugins that integrate seamlessly into your site. Popular plugins are ecommerce and SEO based.
5. Themes: There is a thriving ecosystem of developers creating themes. Themes are used to quickly change the appearance of your website. There are many free themes and premium themes, which makes transforming your website appearance a breeze.

These are the reasons most web design firms are in a loving relationship with WordPress. Most of the recent web design projects we do at Intertec are harnessing the power of WordPress.

At Intertec, most of our new website design projects feature the WordPress engine. We love it as it gives our clients the ability to update their own website using the easy to use interface and with over 10,000 plugins which extend the default installation – its hard to not choose WordPress.

Mashable released a excellent summary article on the top 5 new features with version 3.0:

WordPress (WordPress)  has long been known as a dedicated blogging platform, giving users the tools they need to publish their message and interact with readers.  However, with the official release of version 3.0, set to drop this month, the platform will be much closer, if not well within the territory of a content management system (CMS).

The list of new features in WordPress 3.0 isn’t very long in comparison to previous releases.  However, the changes that are coming will certainly have a significant impact, particularly if you use WordPress as a CMS.  Here is a rundown of the most important new features arriving in version 3.0.

Let us know in the comments which features of WordPress 3.0 you are most looking forward to.

For the full details, go to: WordPress 3.0: The 5 Most Important New Features.