Social ColourMax

ezguide
easy to follow step by step guides

Summary

Social colourMax is our new highly responsive socially enabled website design. Its dripping with social media features including a built in live Twitter feed. As with all ColourMax designs, you can change all the colours to your taste and switch the featured image. Finally, responsive design means it looks great on mobiles, tablets and iPad minis as well as laptops and wide screen desktops.

Introduction

There are so many advanced features built into our latest off-the-shelf design that we felt it was essential to create a dedicated guide so you could get the most out of it. This guide is primarily for existing WebHealer clients who are already accustomised to the usual features available with our designs, and therefore focusses on new functionality. As with all our designs available from the Style & Design library, you can switch to this one whenever you like at no extra charge. Here's a quick summary of what is included:

  • Optimised to look great on all mainstream web browsing devices including iPhones, iPads, iPad minis, android phones, android tablets, small laptops and wide screen laptops
  • Rich with social media features including sharing buttons (to encourage your website visitors to share a link to your website with friends) and an optional live Twitter feed and links to your Facebook, Twitter and Google Plus pages
  • Two column design allowing you to show special offers, links to important pages, a twitter feed and much more on every page
  • Optional Themes - With variations of images and colour schemes, its like we're offering you 10 new designs instead of just one!
  • The design has also been built to accomodate pull down menus, although at present this is only available via bespoke design projects with our business partners.

New Format

As a major departure from all the "off the shelf" designs we have offered since our launch in 2002, Social ColourMax represents a completely different format, which will be recognised easily by the sidebar on the right hand side. The sidebar provides three great benefits:

  1. It is editable by you via the Sidebar link on the Administration Area menu. All pages have the same sidebar contents which gives you a lot of options for how to use it.
  2. It helps boost your search engine listings. By using the sidebar for "what's new" type information it becomes much easier to make regular changes which result in every single page on your website being updated or refreshed, and as we keep saying Google loves fresh content! See Making Friends with Google.
  3. It helps keep your website looking good on narrow screen devices like smartphones. Once the screen drops to phone width, the sidebar relocates to appear under the main content section to make best use of the narrow space.

Editing the Sidebar

The sidebar contains two types of content. The top few sections are preset by the design and can only be updated with assistance from the support team. These include the interactive Twitter feed and "click to email" sections as well as your feature image and location information. Underneath these preset sections are the ones you manage, and to do that simply log into your Administration Area and on the lefthand menu below the pages you have named yourself, you will see a new page called Sidebar. The sidebar edits just like any other page, but instead of appearing in the menu and displaying as a normal page, the contents appear in the right hand column below the preset sections.

Here's an example to show what we mean. Click the image to see it enlarged, and you'll notice the image, sharing links and phone/email links which are all preset. Underneath you'll see sections managed by the client called "Its for You", "Good Stuff for You" and "Events". You'll notice that each client section has block coloured subheading, and the way to achieve that is to use separate paragraphs in the editor for each section. If you aren't familiar with editing multiple paragraphs see our guide explaining the Paragraph Control Tool. As you'll no doubt have more questions about organising the Sidebar, we have additional information in the FAQ section below.

If you are wondering how you might use the side, here are some suggestions.

  • Add a "What's New" type section or "Upcoming Events" section, which will allow you to make regular changes, keeping your website up to date. This will reassure potential clients as well as enhancing your position on Google.
  • If you have some particularly interesting contents on your inner pages, you could make a section called featured links to give people quick access to that information, rather than having to go via the menu. This will require the use of Linknotes to make internal links. See our guide on Internal Links.
  • If you want to promote a special offer, this is an ideal place, especially if you combine it with an appealing special offer graphic which you can get from here.

Optional Themes - Not relevant for Silver or Gold Designs

When you select Social ColourMax from the Style & Design section of the Administration Area, you'll see a secondary list of options appear, which we call themes. It may look something like this screenshot below, though your list is likely to have around a dozen options for theme.

Just click the preview links to see which you prefer best. Here are a couple of examples to show what we mean by themes.

Social Features

Social ColourMax is brimming with social media features to help your website visitors share links to your website with their network of friends, or to help them click through to your own social media pages. Here's a quick summary of what is included:

  1. Links to your social media pages (Facebook, Twitter, Google Plus) in a bar at the top
  2. A live feed of all your tweets in the side bar
  3. A sharing module in the sidebar allows your visitor to share a link to your page with their social networks. Much more than Facebook and Twitter as almost 300 different networks are supported
  4. In the footer of every page are Facebook and Twitter sharing buttons which capture the moment at which a visitor has enjoyed what they have read and are keen to share it
  5. Finally don't forget you can add your own Like and Follow buttons anywhere you like on your main pages

To enable the sharing buttons (items 3 & 4) there is nothing you need to do, as they are built in. The Twitter feed (item 2) and Twitter link (item 1) and Follow button (item 5) all become available once you store your Twitter username in the Special Features section of your Administration Area. For links to additional social media pages of your own, please contact the customer support team on info@webhealer.net and tell us the web address of your social media pages, so we can store them.

Differences When Editing

Our new Social ColourMax uses the latest web technologies and one of these is the new standard for HTML, called HTML5. There are some consequences to this when it comes to editing your website contents. Quickly, whilst on the subject of HTML, less is always best and HTML5 encourages this more than before. Try to be sparing in colour changes, and use the Colour Scheme Editor to set a house style rather than individually colouring pieces of text. There are also some specific HTML codes that you have used before that are now invalid and for which we have created alternatives.

<RIGHT> replacing <DIV ALIGN=RIGHT>

Wrap the commands <RIGHT> and </RIGHT> around any text  you want right aligned. The old <DIV ALIGN=RIGHT> no longer works in HTML5, but don't worry as our system will automatically convert the codes when you switch to Social ColourMax. For techies only: Technically <RIGHT> is not real HTML. We call it "pseudo HTML" as our system will convert it to lower level code when your website is displayed.

<JUSTIFY> replacing <DIV ALIGN=JUSTIFY>

Wrap the commands <JUSTIFY> and </JUSTIFY> around any text you want fully justified across the page. The old <DIV ALIGN=JUSTIFY> no longer works in HTML5, but don't worry as our system will automatically convert the codes when you switch to Social ColourMax For techies only: Technically <JUSTIFY> is not real HTML. We call it "pseudo HTML" as our system will convert it to lower level code when your website is displayed.

Gold Design

If you have a brand or logo and are looking for a very high level of design, our Social ColourMax format has been created using the very latest web technologies and a lot of scope for customisation. Here are some examples of what our Gold Design partners can achieve using it. If you would like an obligation free quote and discussion with a design partner please contact the WebHealer customer support team. Here are some examples of what can be achieved.

www.northlondonacupuncture.org.uk is a fairly straightforward Gold Design, in which the client's branding is placed top left, and a strong extra wide image is placed at the top of each page above a distinctive subheading.

www.trishahiggscounselling.org includes lots of functionality which have been developed by our Gold Designers for Social ColourMax. The extensive menu displays very neatly using a 2 level pull down menu underneath "Therapies", as well as 2 column paragraphs and menu options in the footer of certain pages.

Search Engine Benefits

Keeping your website up to date with fresh content is good practice for many reasons. It reassures clients that you are still in business and are an active, engaged professional. Additionally Google gives preference in its listings to websites with up to date contents. Social ColourMax makes it much easier to keep your website up to date, using the new Sidebar (see above for information on the Sidebar). Just add a "What's New" type section or "Upcoming Events" section, and you'll find it much easier to make regular changes, keeping your website up to date. As the Sidebar appears on every page it means that every single page of your website gets updated, which is better than just changing one page.

Frequently Asked Questions (FAQs)

Q. My top main heading looks odd with this design. How do I correct that?

A. The space available for your heading is much larger than on most previous designs. Also this design, using modern technology, separates lines in headings slightly differently. For both these reasons, your heading may look poor now compared to how it looked before. That is easy for us to fix though. Just email WebHealer support and ask us to tidy your heading.

Q. How do I switch to this new design?

A. Simply log in to your Administration Area, and click the link to the Style & Design section in the left hand menu. On the right under the ColourMax Designs heading you'll see Social ColourMax. Just click the radio button to the left and then click Save Changes at the top of the page. Before you save, you may wish to make a note of the Active Design you're currently on, because if you don't like what you see you can always switch back to that design again.

Q. How much does it cost to upgrade to Social ColourMax

A. There is no charge. Social ColourMax is one of our "off the shelf" designs. You can switch to it (see above) if and whenever you like at no charge, and switch back again if you want. The only time a charge would be involved is if you ask one of our designers to help prepare graphics or customise the layout for you.

Q. Where is the Sidebar option in the menu? I don't see it.

A. Look at the menu where you normally choose which page you want to edit. At the bottom of that list is the option Sidebar. if you don't see it, that means you are not currently using Social ColourMax as your active design - see above for how to change that.

Q. How do I add my Twitter feed to the Sidebar.

A. The Twitter feed automatically appears once you set your Twitter user name. Do this from the Administration Area, by going to the Special Features section and updating the Twitter Username field.

Q. How do I change the colour block at the top (or any other colour) and how do I change the photograph?

A. Colours can be changed to your preference via the Colour Scheme Editor. See our Colour Scheme Editor EZ Guide for more details. The Design Customiser section under Site Management in your Administration Area will allow you to replace the photograph.

Q. Can I put my logo in the top left?

A. This is not possible at present without requesting assistance from one of our design partners. Due to the responsive mobile friendly nature of these designs, a logo in the heading area needs a lot of careful consideration as to how it is placed in relation to the heading and how it responds to the heading area shrinking. The designer needs to size the logo appropriately and build in placement rules for many different types of display device to ensure the design does not look broken to users of different devices.

Q. I like putting images on the left/right of my text, but I don't have that option for the sidebar. How do I do that?

A. This is not possible. It was a deliberate decision as the sidebar is so narrow and is liable to shrink with smaller screens and relocate on smartphones, the only options provided are above or below text.

Q. Can I re-arrange the order of the preset sections in the sidebar?

A. You can re-arrange the order of your own sections of the sidebar using the Paragraph Control Tool, however at present the preset sections of photograph, contact details, Social Links etc are fixed. We are looking at ways to allow re-ordering for the future.