CSS3 techniques

Slowly but surely, things at my Girraf Creative website are taking shape.
I've got a few project websites up on there. Some are live and others are college projects but the main thing is that I'm gaining more knowledge and confidence with each one.
I'm really enjoying this new chapter and the leap I made from print design seems a bit less daunting now I'm finding my feet.

 

CSS ANIMATION

Most recently I've added a link to a really enjoyable CSS animation project. You can check it out  along with all my other web design work  on Girraf Creative.
The assets for the banner were all created on Illustrator by me. The banner itself was created in Dreamweaver using @keyframes
If you like what you see then please get in touch for any print or web design needs you may have.
Thanks for reading.

Girraf Creative CSS animated banner for Commonwealth Games

Learning Outcome 4 - Copywriting Techniques

Today I'm going to cover some topics that could help you to develop good web copy writing. If you apply these procedures logically, they will make your website more relevant to search engines and also more accessible.  I'll try and illustrate what I mean by highlighting some examples from www.bluewatermusic.co.uk

Page copy

Know what message or end result you have in mind for the user, whether it's a sale or a sign up to a service. This is crucial.
Keep your use of language simple in a way you can still get the message across. Keep the writing style informal and try and include a call to action for the user. After all, they are probably on the website looking for some need to be fulfilled.

   

 

 

Keywords

Keywords are also another way to make your website more visible in a Google search. make sure you write your copy inserting some of these in every chunk or paragraph of copy. Don't squeeze or overload the copy with these. It will make for a clunky read and search engine bots are also now programmed to look for keyword stuffing. This is frowned upon and could negatively affect your ranking. Use Google keyword planner to discover the right words to insert into your copy. Look at the image above for www.bluewatermusic.co.uk recording studio and music label.

There are obvious words and phrases in there that could possibly be part of a user's Google search.

Accessibility

You can make sure you apply these techniques to your site to improve its accessibility. Make sure all content is logically structured. I will cover this in a bit more detail later on. 
Firstly, its essential to have consistent, clear navigation. Use descriptive 'alt-text' on all image on your website. Add a content structured, text-based site map to your website. Like this one below...

Make sure you consider the page title tags in your HTML and word your URLs in a clear way. Make sure they are not a huge chain of random-looking numbers and letters. You should use descriptive link text link the example below. Don't just display 'Click here' for any links.

 

 

Headings 

Make sure you only use one H1 tag per page. This should be your most important message or article. try and get an SEO phrase in it if possible. Try and apply this SEO to any H2 tags on a page also. You can use a few more H2 tags on a given page but stick to only on H1. Do not use the tags as a means to style your headings, as they will lose their SEO clout. Keep the message clear in Especially H1 and H2 as Google places a lot of importance on them. Look at the image below. Anyone looking for a recording studio with analogue gear may wind up at this site...

 

Content Order

 The order in which you present your information is key to improving the overall user experience. Logically, well thought out ordering, will only improve the usability of your website. On a basic level it should make sense in a top to bottom way. Most important ifo at the top, decreasing in importance as you navigate downward.
Accessibility will also improve if you apply a logical structure to your content. For example, make sure your H1 comes before and H2 tags. Any lists should be compartmentalised and clearly headed so screen readers read it in the correct order. Look at the image below taken from www.bluewatermusic.co.uk

The CSS has been disabled and you can clearly see the hierarchy of info starting with the categories at the top. Then comes H1 with its accompanying P tag. The images in between have descriptive alt-text too. 

 


If you can consider everything in this article before you commit to any code, then apply all these techniques to your website you will enhance the experience. The second benefit is that visibility of your website should also improve too.

SEO Learning Outcome 1

This blog will be exploring a bit about how search engines work but mainly about SEO. I will be pouring over a couple of websites to offer my thoughts on their off-page SEO.
I'll also look at information architecture and consider the Web copy-writing on both, individually.

How search engines work

Let's look at Google, as it's the most commonly used portal.
Google's robots 'crawl' over webpages, scouring the content, indexing what they find to see if it's relevant to the end user's search.
The 'crawlers' take into consideration how popular a site is. They perceive this to mean that the website is trusted for that particular information and assume that it is more pertinent to the end user's search. All this info is run through complex algorithms to organise importance and relevance. This in turn is presented to the user in the form of search results.

Off-page SEO

Put simply, this is a range of techniques that can be employed to increase the ranking of a webpage.
Let me give you a few of the more common methods...

• Social networking:

'Tweet', 'like' and 'share' your way to a better Google ranking. This is an easy method, accessible to all.

• Blogging:

Writing an engaging blog is a way to make visitors return to your site again and again. It also keeps the Google bots happy as fresh content will make crawlers return to your site, pushing you up the rankings.

•  Comment posting:

This function can generate a lot of traffic. Back links can also be generated in this way by people posting links on the comments section.

Site Architecture:

Good site architecture can make your site more crawl-able or visible to the Google bots. Consideration to forward planning is crucial to the success of a website. 
You are trying to achieve is improving how Google bots and visitors can find their way around your site. 
Use a 'flatter' architecture to keep your most important information further up the website so the user has fewer clicks to reach what they are looking for.
Avoid having too much Flash and always make your links text so the bots can find and index them.  

 So, on to the Websites.... 

Website No1: keatingphotography.com

This website shows good use of suitable keywords in the title of the page.

 <title>David Keating Photography | Denver Family Photographer</title> 

Fortunately, the meta tags have been used well in this website...

<meta name="description" content="Capture the fun, unique, and expressive moments of who your family really is with Denver lifestyle photographer, David Keating." />
    <meta name="keywords" content="photography,photographer,denver,colorado,family,pet,commercial,outdoor" />
    <meta property="og:type" content="blog" />
    <meta property="og:title" content="David Keating Photography" />
    <meta property="og:description" content="Capture the fun, unique, and expressive moments of who your family really is with Denver lifestyle photographer, David Keating." />
    <meta property="og:url" content="http://keatingphotography.com" />
    <meta property="og:site_name" content="David Keating Photography" />
    <meta name="twitter:card" content="summary" />

It also has relevant keywords in the copy that appears throughout. The site also has descriptive URLs which reflect the information on a given page. This is useful for improving search engine rankings. Take this URL from the Commercial photography category on the site...

http://keatingphotography.com/denver-photo-galleries/denver-commercial-photography/

Content wise, the site has valuable, well-written copy offering relevant information pertaining to it's categories. Someone looking for a family photographer in the Denver area could come across this site ranking well in a Google search. Useful words incorporated in the copy without overloading it.

Here's a snippet from the Family Photography section...

'Family lifestyle photography is about capturing the true personality of a family or individual while they are relaxed and having fun just being themselves. Family shoots are always great time.'

The alt-text for images on the site also appears to be relevant, concise and clear. 

Site architecture-wise the site doesn't have an abundance of flash or animation. The navigation is text-based, which appears to be enhanced with some Java Script. It's clear and easy to follow and the Java Script applied doesn't seem to hinder usability.

It's got an external CSS style sheet which prevents the code from becoming bloated, however, the Java Script seems to be inside the HTML. This could also be put in an external style sheet to further streamline the code.

The site is in XHTML. Possibly updating to HTML5 could make it more SEO-friendly.

Website No2: samsung.com

 

Samsung.com shows good use of suitable descriptive keywords in the title of the page.

 <title>SAMSUNG UK - Home Electronics | Home Appliances | Mobile | Computing</title> 

Again, the meta tags have been used well in this website...

<meta name="title" content="SAMSUNG United Kingdom" />
<meta name="Description" content="Welcome to Samsung UK. Discover a wide range of home electronics with cutting-edge technology including TVs, smartphones, tablets, home appliances &amp; more!" />
<meta name="Keywords" content="samsung, samsung.com, samsung electronics, samsung website." />

The URLs on samsung.com are also very precise. Further investigation showed that this was throughout the whole site but I've included an example below to illustrate this. Words and phrases like 'mobile devices' and 'smartphones' are a surefire way to get hits from a Google search...

http://www.samsung.com/uk/consumer/mobile-devices/smartphones/

A lot of the content in the consumer section is image based. It does give technical info on each product but doesn't seem too concerned with keyword-laden copy for crawlers. For example, here is a snippet of copy for one of their phones currently available. Phrases like 'smartphone' and 'mobile phone' are notable by their absence...

'Sharing is a beautiful thing. Make the most of your lust for life and love of making connections through convenient communication, social networking and content sharing features. Huge 4” screen is designed for brilliant viewing and staging your content for sharing. Enjoy the best multimedia and enjoy interacting with friends and families through your favourite apps, games and video calls while keeping pace with your go-go-go lifestyle.'

There's a distinct lack of alt-text on many of the images throughout the website so users utilising screen readers may face some problems.

Again, site architecture-wise, navigation is text-based, which also appears to be beefed up with some Java Script. On the face of it, it's clear and easy to follow and the Java Script enhances the look without becoming messy . It's a massive site and the navigation runs pretty deep but there is a site map at the bottom of every page so if you get lost it's not too trick to find your way home. There's also breadcrumbs for this purpose too.

Much like the first website reviewed, it's got an external CSS style sheet which prevents the code from becoming bloated, however, the Java Script again seems to be inside the HTML. like the website above, this could also be put in an external style sheet to avoid bloating the code.

The site coded in HTML5. This can help reduce use of flash animations, making the website sleeker.

 

Taa-Daaaaa: www.bluewatermusic.co.uk is online

Just a short post to say that my project website  for Blue Water Music recording studio and independent record label is up online at...

http://www.bluewatermusic.co.uk

Feel free to have a look.

Thank you.

Learning Outcome 3: Site Architecture

Having a clear game plan about structure and importance in your website is crucial to it's success and level of visibility to the user. 
There are a range of strategies you can implement to help push your website up the rankings. Here, I will discuss a few of the techniques you can employ.

Site Hierarchy 

Hierarchy is a way to let search engines know what is important in your site. Think of the site as a pyramid with the most important information at the very top represented by the Home page. The next layer of most important information should be below this in the categories sub-level and so on. The further down the pyramid you go, this should be of less importance.

Categories & sections

Categories should show users at a glance the topics available to them on the website.
These should be accurate and concise descriptions of each particular topic. If the Home page is the major 'theme' of the website then categories are the secondary themes. They must help the user to easily navigate the site. 
Google bots will think that these top level categories are linked to every other page on the website so these pages will rank better.
Identify why users are coming to the site and try and name your navigation categories appropriate keywords.

For BWM the categories could read as follows...

About Blue Water Music | Our bands | Music Links | Blue water Music Sitemap |  Contact Blue Water Music

Pages

Pages should contain specific content or services pertaining their name. Write keyword-rich copy for these pages for optimization. Keep your more important content for pages further up the hierarchy. Mapping out page types in the architecture can also help further down the road with any SEO issues that arise as you can decipher if a problem is on a single page or a page-wide issue. 

Internal linking

Good Internal links can make it easier for users to navigate around a a website. Keep it logical and think what the navigation the user will find useful relevant to where they are on the website.

 

 

Writing for websites. Do you copy?

I've been asked to go and find out a bit about the art of web copy writing. It's a crucial part of any successful website. Read on for some interesting information about writing good copy for the web. 

Don't waffle, write snappy copy

Keep your words to a minimum, about half of what you'd write for a regular article.  These days it's hard to their attention for a few minutes so be concise. Paragraphs and sentences should be short yet get the message across. Try not to use too many big word either. Keep it simple. 

Scan a-head

Make pages easy to skim over. Break your info up with crackling headlines ad sub decks. Bulleted lists are useful too. Readers want to find what they want ASAP. This way the can lock in or quickly decide to go elsewhere if you don't have what their looking for. Use pictures to illustrate your point and break up the copy a bit. Remember to keep the info in easy to digest chunks. 

Write! Keep it informal 

A conversational style of writing will connect better with your readers. Relaxed yet informative is the way to go. Use an active voice to make the reader feel involved.  Easily-read copy can also help accessibility too. Screen readers will perform better. Try and throw in s few keywords too if possible.

The sweetest link

Hyperlinks are a great way to offer more information without adding to many words to your own pages. If you feel something needs a bit more explaining, just make a descriptive link. Make sure you you open in in another window of course. You don't want to make it hard for a user to get back to your site. Back linking makes your site more credible and is good for improving SEO. 

 Go on.. make your web copy crackle!

Be on the same page with On-page SEO

Imagine if you have just spent a considerable amount of your hard-earned cash on an amazing new outfit or item of clothing. Part of the satisfaction of this is when you go outside to show off your new duds. You would never dream of wearing a cloak of some kind or cover over the top, reducing the visibility of the new clothes, would you?
Maybe my metaphor isn't the best but I hope as I go on you will understand what I'm trying to say about On-Page SEO for your website...

On-page, on target

On-page SEO is vital to improvement of ranking of any website. On a fundamental level, good content is always a good area to focus. After all, this is probably why the user came to the website in the first place. Try to have content that is original, informative or useful. Updating content regularly, keeping things fresh is of importance too.  Try not to rely too much on graphics. These may improve the look of your website but it is text-based content the Google 'bots love to crawl over. 

Create a sitemap

A sitemap is a good way, at a glance to see where pages of your site will connect as well as the structure of your website. These can be linear or hierarchical, the latter being the most usual kind on the web. This normally starts from a home page and branches out like a tree into categories and then sub-categories.

Include content specific URLs

Try to keep these relevant and concise as possible. For example, if you have a music agency website and you have a page promoting your new bands then try to word the URL like the one below, using hyphens to separate keywords in the URL...

http://www.bluewatermusic.net/new-band-nameofband-blue-water-music/

dont have...

http://www.bluewatermusic.net/band1

or...

http://www.bluewatermusic.net/p?165

Shot at the Title

The title within the head of the code is crucial to your website's success. The title describes your web page. Try to express a clear, succinct description that is front loaded with keywords relevant to your website. Aim to keep it under 70 character as Google will only display this amount in it's results. It will appear at the top of a browser, in search page results. It could read like the snippet of code below...

<head>

<title>Blue Water Music: Band agency and music PR, Recording studio, live music promotion<title>

<head>

Header the right direction

Search engine spiders understand the relevance of the <h> tags. Your <h1> tags should always be about the main subject on your page. Again, make the <h> tags keyword-rich. Good <h> tags can improve accessibility too for screen readers. For example, a band sub-page on BlueWaterMusic.net may have an <h1> as follows...


<h1>(Band name) release new track and album exclusively through Blue Water Music<h1>

This header give the name of the band, the fact they are releasing a new track and album through the company Blue Water Music. (Band name) new track, (Band name) new album, (band name) or Blue Water Music are all terms a potential user could search for on Google. 

Short and sweet

Metadata is a summary of what your website is all about. Most importantly it helps bots to find  the page to present to the user. It appears in the snippet of text that appears directly under the title in a Google search to give the user at a glance a brief description of what the site is about. This can be a deciding factor in whether or not a user chooses your website or another as they will only scan the page when it appears. Getting your keywords into your description is good practice. Keep it relatively short as Google will cut off after 155 characters.

<META Name="Description" Content="Blue Water Music is a PR agency for bands and music, Recording studio and live music promoter">

Keywords

These should be short, one, two or three word phrases relevant to the content and services of your website. Think of ways that a user could try and look for your site and apply this to your keyword planning. Be as relevant and specific as you can. Brainstorm a load of words you feel are relevant to your site and use Google Keyword Planner to refine your ideas. These keywords should appear fairly frequently throughout your site in headers, copy and also in the metadata as below...

<meta name="keywords" content="Music, Live bands, recording studio, music agency, live gigs, music public relations, music promotions">