Recently, there has been a lot of blog posting about the way Google has changed over the past few months.Again we’re not sure what to believe is true, and Google, being Google, don’t give much away. However, as I keep repeating, one thing is for sure. Google are trying to get the most relevant search results to the end user. Here is what is clear so far about how they are achieving this.

Firstly, Google have launched Google+ which is not just social networking. What Google+ is doing is building up a profile of you, based on your movements online whilst logged in. Very soon, you will notice that your search results will be based on the preferences that have been chosen for you by your movements.  They will also appear to be more local.

Another thing is for sure, Search Engine Marketers are getting frustrated by changes with the Google Webmaster Tools. One of the main issues they face now are not being able to track the search queries searchers are making, and are now finding it hard to build campaigns based on these findings. Can we assume that Google want you to ‘guess’ in order to earn more money through people doing adword campaigns? Or is there another reason for these changes?

As a developer, I would prefer to believe the reasons for making these particular changes to Google Webmaster Tools are to benefit the competition, as this would clearly give some website owners a greater opportunity to compete with other larger websites that always seem to be at the top. Google have always been known to ‘shake things up’, and quite rightly so, otherwise it would be like trying to source information in Einsteins study.

So what can we do?

Well, we still know so little yet there is still so much we can do. In one of my previous posts I talk about using Semantic Markup and Microdata formats in HTML Documents to help explain what your content is all about to search engines. I believe this will become very important in the future. It makes sense to explain your content rather than having a bot randomly try and guess. They have been sensing content in the past, but no where near as specific as what HTML5 can do.

We must make excellent efforts into making our documents as accessible as possible. It is about time everyone used HTML5 Semantic Markup tags to help clearly define the areas of the document. When thinking about Accessibility, we often think about the Americans with Disabilities Act 1990, this is associated with web development to make the documents clearly readable by text readers, and providing visual aids for the hard of hearing. But now there is even more reason to use it, and we’re going to tie it in with HTML5 Semantic Tags. These provide assistance with navigating things such as header, section, footer, sidebars etc.. The new rule of thumb here is that if a screen reader can understand the way your content is laid out, so can a search engine bot. Try running a few sites using a text only browser such as Elinks to see how the content of your document will flow to robotic reading tools.

Next, is it important to validate the markup of your documents? Well, I think so. I know it’s hard when you offer content management systems to clients as some WYSIWYG editors (including those that have restricted functionality) don’t always get it right. But at the very least developers can endeavour to get this right during development. It may be beneficial to search engines to wrap most large content managed areas in ‘article’ tags, whilst this makes sense, I cant be certain it helps – it cant hurt to use it though.

I have heard recently that permalinks that are too long are a hindrance. For example, in WordPress you will get a permalink structure like:

http://www.website.com/category/another-category/this-is-a-post

Although I cant be totally sure about this. It does make sense to remove the build up of permalinks. Let’s keep things simple.

http://www.website.com/this-is-a-post

Note for WordPress users: If you’re worried about losing the keywords to your categories – remember you can have permalinks set the same way for your categories.

http://www.website.com/this-is-a-category

Whilst I am on the subject of WordPress, I will give you the permalink rule to get this. Custom Structure : /%postname%/
If you preferred to go into greater depth as to how you would like your permalinks to appear. You can use the Custom Permalinks plugin.

One other note I would like to make, when using HTML5 Semantic Markup it is important to realise that these tags still cause issues in legacy browsers. The important ones to note are Internet Explorer 8 and below. What I’ve been doing is wrapping div tags around semantic tags that contain the styles as before. I did make the mistake once of trying to add styles to semantic tags, and that became a disaster for Internet Explorer. There is an excellent boilerplate available that I have started using, it makes adding javascript a breeze and minimal browser issues. It provides feature detection using Modernizr and the documents are flowed correctly to assist in load times for your site. It is completely HTML5 ready. You can download it here.

Download HTML5 Boilerplate

The answer is actually no, it’s pretty darn easy. Infact, we’ve been used to developing sites to suit legacy browsers for years and developing a mobile version of a web site is actually more simple than that. Most mobile computers have standards compliant browsers so we needn’t worry about rendering too much.

As I’ve discovered before, there is a magic number for the iPad that will cover the screen width – and that number is 960px. But what about for smaller devices?

Well, since the browsers are modern standards compliant – lets use a bit of CSS3.


@media screen and (max-width: 600px) {
.wrapper {
width:550px;
margin:0 auto; }
}


What we have done here is conditioning the display of the wrapper css element if the screen size is within 600px. This little blighter is called a Media Query – one of the all important new features of CSS3. By using a simple Media Query we can change the look of the entire site depending on it’s browser width. Much easier than using javascript to detect the window sizes and passing it to the server to generate new stylesheets or whatever.

But what if you wanted to streamline your entire site to fit on the mobile browser. For example, you have a fixed website layout which looks great at 960px on a large screen – but not so good at 600px on a smaller screen, as the position of your elements are fixed to the specific width.

The best solution for this would be create a 100% fluid width site. It will be designed with only the most important, relevant, scalable information on your site – and it will be entirely dependent on whether the user is viewing it using a mobile browser. You will probably need to determine a whole new stylesheet for your site.


<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />


My solution, is have 2 stylesheets, mobile and main, selected after being detected using CSS3 Media Queries – and each selecting the same DOM elements. The mobile.css wouldn’t use all the DOM elements. For ease, perhaps the elements would contain separate classes of Media Query specific areas, like so..


<div class="main-content mobile-main"> // Content </div>


Joe B

Imagine saying to Google, this is my companies address, this is contained in the header. This bit is my portfolio, and inside that portfolio are case studies with information about my projects, and this is contained in the main content of my site – so please index this information as a matter of relevance.

The general idea is that you use whats known as a vocabulary from such resources as schema.org and data-vocabulary.org – call the defined content within its vocabulary to your site – this then sends the information to search engines, telling them to index the content as this.

How is it implemented? Well actually that’s really simple, and it also makes loads of sense. Consider this code.

<div itemscope itemtype="http://data-vocabulary.org/Organization">
<h1 itemprop="name">My Companies Organisation</h1>
<div itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">Company's Street Address</span>
<span itemprop="locality">Company's General Location</span>,
<span itemprop="region">Company's Region</span>
<span itemprop="postal-code">Company's Post Code</span>


I think the above code would be fairly self explanatory if you have knowledge of (X)HTML. We are displaying this information on the website as normal, but also telling the search engine what this information is. Before that, search engine bots are just crawling the web trying to index complete blocks of content by sense rather than specification.

As per the future of web document specifications, HTML5, it is becoming increasingly important to wrap your content as per the specific areas of your site. This also helps the search engine bot to understand how your content is laid out, and what areas to target most importantly. Consider this code.


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<h1>My Site</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<h1>My Article</h1>
<article>
<p>...</p>
</article>
</section>
<footer>
<p>...</p>
</footer>
</body>
</html>


This is an example of HTML5 Semantic Markup – defining the elements of your site. Again this does make quite a lot of sense – but it’s probably wise to check the w3c guide to HTML5 Semantic Markup.

The best reason I can give for introducing this practice to your websites is that it helps search engines retain the most specific relevant information on your site, and in turn gives better search results to users who might search it – making for better search results. So, in my opinion, that would be making your website far more search engine friendly – and future proof.

What about styling HTML5 elements in Internet Explorer less than 9?

I don’t like talking about it, but I have to, since a lot of the population of the world are still using legacy browsers. I have a very simple solution for this – it’s not ideal, but it works. Javascript!! For HTML5 Semantic Markup, place this javascript in the head of your document. It creates the new elements on the fly. Add the other HTML5 semantic tags as well if you need to. This will allow you to style these new elements.


<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>

Once again, I hope you have enjoyed reading my post.

Joe B

• Your website may not require this but custom fields can come in handy for different banners, or selected images on your pages.

If we are designing a website we will advise the client on the custom fields section specially set up for their site:

Heres an example:

You may have a website that has a custom banner set with an image on at the top of each page, or you may have a banner that has different text quotes on for example.

• Go to your page and you will see the custom field tab at the bottom of the editor.

• select name:  Here you will select the custom field name, this may be ‘banner’, ‘image’, ‘quote’  (basically anything that has been set up)

• Next to it will be the value:  in the attached example above there is a image url.

• So if you wanted a new banner image  you would simply upload your image in the media section, and copy the url and paste it here in the value box. Or if  the custom field was set up for text, you would write in your required text into the value box.

• Once the value is written in this will be saved and you can see this in action on your website.

If you go to Appearance > Widgets

Once you are inside the Widgets page you will see the available widgets on the left, and unavailable widgets to the bottom. Here are the most common widgets that have been installed, or set up with the design.

• You would simply drag and drop the widgets into the selected side bars to the right.

• When we design a website the side bar will be correctly named like the attached example below: Home sidebar, Blog sidebar, Page sidebar, and we would place the relevant widgets in the correct sidebars to your websites design.

• You shouldn’t need to go to this section if this has been specially set up for you, But you can open up the widgets and edit them if you wanted a new image to appear or some new text slotted in.

Sometimes if your not to savvy on the web, its best remember what you did incase you need to revert back as they start to look messy.  If the theme and design is set up correctly and widget you place in the sidebar will flow well with the site design, but if you place too many widgets or numerous text ones in it can look out of place or impair the general design of the site, or images too big will flow off the side.

Display your side bar widgets on selected pages

We use a great plugin called ‘Display widgets’ this comes in handy if you want to display certain images or text on the side bar on certain pages.

• Here is a typical widget for some images in the side bar, you will see some html code for the link to the image, Underneath is the plugin.

• You would simply select either ‘hide on checked’ or ‘show on checked’ and select your pages you want this particular image or text to appear on and save.

Please see our next post on Menus, Pages & Posts  and Custom Fields.

The Menu System

• Go to the left hand side and select Appearance > Menu

• Within your site design code you can create as many menu’s as you like, whether its in the footer, sidebar or main menu.

These will be created for you into the menu system. We normally call the primary menu top-nav.

• To the left you will see a list of pages, simply select your page and ‘add to menu’

• This will appear on the right hand side. You can drag and drop the blue bars into your menu order, this goes from top to bottom on how this will look.

• For the sub menus simply drag and indent them under the page name. (as shown in the example above.)

• If you click on the page and expand the box you can re-name your page, or delete a page.

• Once done you can ‘save menu’ and your menu will be created. Refresh your site to see the menu changes.

• This way you can control what pages are shown on your site. You may have pages created but decide not to include them into the main menu, but if they are published they can still be found online.

• Custom links – You can have a custom link in your primary navigation that links to another page or website, simply type in your url, then underneath the page name and add to menu.

To add a new user:

You may need to do this if you have someone else maintaining your blog or helping add new content to your website. This may be a  partner or assistance that needs limited or full access to your website.

• Simply click on Users > ‘Add New’

• Fill in the details, and select the user privileges

• Administrator – Somebody who has access to all the administration features
• Editor – Somebody who can publish and manage posts and pages as well as manage other users’ posts, etc.
• Author – Somebody who can publish and manage their own posts
• Contributor – Somebody who can write and manage their posts but not publish them
• Subscriber – Somebody who can only manage their profile

Please see our next post on Pages and Posts, Widgets and Custom Fields.

WordPress can be quite daunting to begin with but when you know how is really simple to use.

To be honest you will find the basic fundamentals really easy and self explanatory, from making your first post to managing custom fields and plugins.

Once your website has been set up and ready to go this will make more sense especially if you are not very computer savvy.

Here we will talk about the pages & posts section.

Login to your admin panel and you will see your dashboard.

• Click on Posts and to the left hand side you can view all posts or Add New.

• Click on Add New and you will see your WYSIWYG editor (Editor very similar to word)

• Enter your page or post title, this is very important for your URL permalink title. I would suggest adding something keyword rich as this will be the title in the Google address bar.  Please find the example below:

http://www.white-fire.co.uk/wordpress-basic-guide-example

• Write your content in the editor as you would with word.

If you prefer to work with HTML select the HTML tab to enter your HTML or if your knowledge is limited use the VISUAL tab.

• Click the Upload/Insert button if you want to upload images, This is quite self explanatory you can align the image, assign a link or make the image smaller all within the options in the pop up box.

• Next to this button you can add videos or music files, or paste in any you tube video code into the HTML section.

• Within the editor there is no need to style your text and fonts like you would do in word.

If you have a well built design, this should have all the CSS styles in place. To keep your site consistent and professional different fonts, colours and styles will not be available.

There’s nothing worse that someone trying to put red text as comic sans on to a website and centered, then underlined.

• You can use something called H tags to style any headings and titles within your text to format.

• To do this in your editor you will see Paragraph, go to this drop-down and you will see your heading tags:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Here you can see our styles, H1 is generally the title of the page or may be underlined, coloured, bigger or bold and they go down in size. These are all styled in your websites colour and theme so that the site is consistent clean and in keep with the fonts.

Tip – when highlighting the piece of text you would like H1, make sure you press space after highlighting the text and selecting H1, Otherwise this may highlight all of your paragraph which you would need to return to the paragraph text.

• At the bottom of your post or page you will see the – All-in-One SEO Pack installed.

The all in one seo pack is highly recommended for organic rankings, although this depends on your local competition.

Meta titles and descriptions are key information for Google, although keywords aren’t as important these days it’s still worth mentioning. This information will be what shows up in Google as the example below.

• On the right hand column there is a Preview, Draft and Publish button and below that are your Categories.

• Once you finish writing your post, or page you can click on Publish and this will publish to the web instantly.

• This is exactly the same principle for both Pages and Posts.

 It’s that easy! as long as your website has been built well then the admin section and updating your site will come naturally.

Please see our next post on Menus, Widgets and Custom Fields.

Please Note:

WordPress is no longer supporting IE6.

This is great news for any web designers and web developers, and more importantly we don’t have the nightmare of this anymore.

We will support IE 7+ and your sites will render correctly but you can all-ways expect it not to be 100% perfect than firefox, safari or chrome.

Developers and Designers may like this:  http://dearie6.com/

We are pleased to say that we have just launched the new website for Harmony House.

Harmony wanted a professional, caring, positive, reassuring , informative bright and modern website.

The role of the site is to clearly and simply market to the target audiences what Harmony Children’s Services can offer.

This will be achieved part through re-assurance and part through the supply of relevant information and documentation.

Our role for this project included; full branding from logo design right through to the website design and development process with the ability to be able to update the website with news and documents throughout the year.

We created a full bespoke wordpress theme which will enable the client to have full control over the pages.

Development features include a bespoke carousel plugin to showcase the house gallery. Custom widgets, widget logic for the side bar pages, and contact forms

Website feedback

Director: “great!, really like it. Looks nothing like the other companies/competitors. Ours is much more vibrant, real life words, no jargon.”

Other investors
“Jonny and i have looked at this in detail and in principle it looks excellent”

View Harmony in action here

www.harmonycs.co.uk

Website Launch for M.Y. evolution – in source business development solutions, M.Y. evolution are a business development agency based in Milton Keynes and specializing in British & French industries.

The old site was lacking punchy information, although the site’s message was clear it didn’t communicate the exact benefit as to why people should be using M.Y. evolution for their business development projects and left the potential client confused with what M.Y. evolution offered as a service, also there was no call to actions and no message.

This re-design is much more tidier and showcases the USP’s much more clearly, with a clean and bespoke design.

Built as a bespoke word press theme we have made the site easy for the client to manage with widgets and plugin development to allow for future development.

View the website in action here

www.my-evolution.eu

It may appear we have been quiet for the past few weeks,  but things have gone hectic and we have been in high demand! leaving us no time to blog!

We have been very busy with a number of online shops recently for EKM Powershop; Recently launched last month was Fotobyte – a photography store for studio equipment and this week has been the launch for a new lingerie shop again through EKM.

We have developed both shops from scratch.. No templates. Making us proud that these are bespoke developments from the design branding through to the development stages. Perfect for the small business wanting to get online.

you can view both shops now on our portfolio page for more information and to see them in working action.

We have some new exciting projects coming up, from festivals to corporate websites, shops to blog designs, and we shall look forward to updating you very soon.