]]>

Sure, web design and development might be a little over your head. Maybe you forked out for a designer to build your site, maybe you bought a premium theme or use a free one. Maybe you’ve heard this buzzword “responsive design” being bandied about here and there. But what has it got to do with you?

Well, the short answer is: a lot. But let’s start at the beginning.

What is responsive design?

I first heard about the concept in Sara Cannon’s presentation at WordCamp San Francisco last year. Basically, the idea is that your website design responds to the visitor’s screen size, so their experience is optimised no matter if they’re viewing on a high-definition display, a smartphone, or a tablet.

Unlike using a plugin to make your site more friendly to mobile visitors, responsive design allows you to have full control over what the user sees. You can set scale and position for images, text blocks, sidebars and navigation items.

How do you do it?

Firstly, check if your site is already responsive. If you’re using WordPress, there are many responsive themes out there already, including the default Twenty Eleven theme. Studiopress are in the process of making their premium themes responsive, so if you use a Genesis child theme you could just wait it out until an update is available.

If you aren’t using a responsive theme, then hold on to your hats, I’m about to get technical! You’ll need to add a few lines of code to your theme’s CSS file, which many normal website owners aren’t comfortable with. But if you are comfortable with tinkering around, responsive designs use media queries, to determine the visitor’s device screen size and make the appropriate CSS changes. Most modern browsers support media queries.

You’ll also need to look into an adaptive grid system, especially specifying sizes in percentages, rather than pixels, to make everything fluid. If that’s too techy for you, you can certainly enlist the help of a web designer to make your site responsive.

What does it look like?

As I mentioned earlier, Twenty Eleven, the current default WordPress theme, is already responsive. To see it in action, go to the Twenty Eleven demo site and try resizing the browser window all the way down to iPhone size. Notice how all the elements scale down and reposition themselves so the site is still usable and readable at various sizes? Cool, huh?

Another good example is the Food Sense website. Head over there and try resizing the window to see the responsive goodness.

Why should I care?

Can you imagine the frustration a visitor experiences when they navigate to your website on a mobile browser, only to have the page take a long time to load, the text unreadably teeny tiny, and having to scroll and zoom in and out to get where they’re going? That visitor is probably not going to stick around long.

In contrast, a responsive design will give your visitors a slick and customised experience, that will highlight the most important elements of your site. That translates to more time spent on your site, and more potential customers!

Extra resources

For more inspiration and examples of sites that are using responsive design, head over to one of these galleries:

• Media Queries
• Web Design Ledger
• Web Designer Depot

You’ve probably heard the term ‘call to action’ mentioned when anyone talks about effective marketing and websites. A call to action is a suggested action that guides people towards an outcome. It’s a clear direction, unambiguous and direct and it’s one of the factors behind driving real action from your marketing.

In fact, without action your marketing campaign is simply a promotional broadcast.

Call to action = action.

You want to grab your audience’s attention and get them to act. But what turns a regular call to action into a great call to action? This guide will show you how to create exceptional call to actions in your marketing so you audience is left with clear direction (without feeling hassled).

Make your call to action an action.

Verbs are essential when we’re talking about call to actions. Subscribe. Donate. Download. Email. Call. Buy. Compare. Think about the trigger words your reader might think of and use the same language.  If you are targeting a global audience, make sure your language is adapted to the local terminology. Will your readers check out to a shopping basket, or a shopping cart?

 VS 

Add some urgency.

Urgency is the difference between “Subscribe” and “Subscribe Now” and it can actually make all the difference. Use commanding words to imply there is a risk attaching to waiting too long. You could use “Buy Now” but “Buy Now – Limited offer” has a much greater sense of urgency around it. What if they miss out?

Make your call to action clearly visible.

Don’t be afraid to make your call to action BIG so that’s it can be seen a mile off. Make it contrast to the rest of your page and give it some breathing room so that your audience’s eyes are drawn right in. This applies to all kind of marketing from your website, blog, and email marketing right through to your brochure and promotional flyer.

Spell out how easy the action is.

If you are inviting your reader to become involved with you in some way, they may be worried that it will take a long time, or you’ll ask for too much information. You can push those fears aside by including some more details in your call action. “Download and Get Started Today. Sign up in just 60 seconds”.

Add an offer to seal the deal.

Even when you’re offering a complete solution to your readers needs it doesn’t necessarily mean you’ll close the deal. Offering a little extra can help push your reader over the line and it could be a free report, a consultation, or a free magnet!

Repeat your call to action.

Imagine someone reading your marketing. It could be online, or some printed material. At any point they could decide to take action and it’s crucial that they don’t have to hunt around for that action. Repeat your call to action on every page and make sure your contact details are just as easy to find.

Don’t overdo it.

It’s okay to have a few call to actions but it’s important to separate them visually to you don’t baffle your reader. Your primary call action should have prime position on your page as the most important action you want your reader to take. You can back this up with secondary call to actions but use a different colour, or font, or position your secondary actions in a different part of the page.

  VS  

How do you call to actions compare? Did you pick up any tips to improve them? Let us know!

]]> The Australian Open is in full swing in Melbourne at the moment and as a huge tennis fan I’ve been adding loads of new content to my tennis blog and also sharing other people’s content regularly via Twitter.

Several times I’ve wanted to share articles that I enjoyed reading but gave up either because I couldn’t find a Tweet button or because when I clicked the Retweet button the Tweet looked ugly, took too much fixing or didn’t make sense. And sometimes the Tweet button just doesn’t work.

Getting your content Retweeted by a lot of people can make a huge difference to your web traffic. Here are some things to check to find out:

• If it is easy for people to share your web/blog content on Twitter
• Whether or not the Tweets look neat.

1. Do you have a Retweet button?

There are a lot of different plugins available for sharing your WordPress content on Twitter. My favourites include “1-Click-Retweet/Share/Like”, “ShareThis” and “Tweet Meme”.

You can see our Tweet button from the “ShareThis” plugin at the end of this article.

If your website is not built in WordPress, check with your web developer about the options.

2. Is the Retweet button easy to find?

The button can be at the start or end of the article, or scrolling down the side. Wherever it appears, make sure it’s big enough to be seen easily.

3. How does the Tweet look?

Click on your Retweet button to find out if the tweet reads like something you would retweet. Ideally test with a smart phone and an iPad as well as a laptop or PC as I recently discovered my Retweets don’t look quite right on an iPad – gotta investigate that further!

• Often the tweet is created from the Page Title of your article (which can be a copy of your headline if you haven’t custom written the Page Title).
• Do the words work well as a tweet, or should you modify them a little, keeping in mind that your headline ideally needs to be compelling and keyword rich?
• Remember to keep the headline short enough to fit in a tweet while allowing space for your Twitter handle and a hashtag to be added
• If the tweet says something like “Currently Reading:” or doesn’t directly referencs your content, then you might want to try a different type of sharing button.

4. Does the tweet include your Twitter handle?

Sharing plugins give you different options for including your Twitter handle as part of the tweet that is created.

I like to include it so that I know when the article has been Retweeted and can say “thank you” whereas some people prefer not to have it included, which makes the tweet shorter and easier to manually Retweet.

However, if your Retweet button includes the words “via @AddThis” or “via@Wordpress.com”, see if you can change the settings to include your Twitter handle, or nothing at all.

5. Does the Retweet button include a counter?

You should be able to set whether or not a Tweet count in shown as part of your Retweet button. Personally, I like to see how many people have Retweeted each article, but if the count is low you might prefer not to show it.

As well as using a Retweet button on your website, people can also Retweet your Tweet directly from Twitter. You’ll see this activity in the “@Mentions” tab in your Twitter account.

Even if you’re not on Twitter, making it easy for people to share your content there is a great way to market your website. And if you are on Twitter, when you are lucky enough to get people to Retweet your content, I think it’s polite either say “Thank you” or acknowledge the Retweeters in some other way

Do you have any other tips for Retweet buttons that you like or don’t like using?

Until next time

Search-Mel

Being more Social than Search today!

]]>

Last year we had the pleasure of working with Karl Staib from Party Biz Connect who runs Twitter parties.

The whole concept of Twitter parties was new to us (and everyone else!), but we were excited at figuring out how it would work for our Grassroots community.

The result was something that was really quite fun and from the feedback we received from all those who attended a great learning session. Here is the recording so you can hear for yourself!  It includes:

Melinda Samson who will show you how to get set to get into Google

Linda Coles on using LinkedIn to network in your pyjamas

Serena Star Leonard on blogging to build communities that care

And Lara Solomon on growing your business with a Facebook page

Secret Web Business – Twitter Party! by kungfukitty_oz

The format for this party was simple. The hosts and guests spoke live on the session, and our audience were all able to listen in live to the audio. Everyone was tweeting away during the session on Twitter and our host Karl managed the Twitter side of things giving away prizes and making sure that questions were asked of the presenters.

Afterwards we got a report on the tweets and activity during the event which was a great bonus as it can sometimes be hard to measure social media efforts.

Twitter is still a mystery for some business owners on how they can use it to build rapport and connect with their audience, and while there are great success stories, there are also over 50% of accounts that lay dormant.

What Karl is doing with these events is harnessing the best of the benefits of social media and personal connection and we think this kind of event was pretty ingenious for connecting the two!

Stay tuned for more Twitter Parties in 2012!

]]>

Have you ever been frustrated by the way something appears on your website? Perhaps you thought some text was going to be green, but it actually looks red. Or perhaps you formatted text to be aligned to the left, but it’s actually centred. Maybe an image has an ugly-coloured border around it that you didn’t intend.

Code

Websites are made up of files. Sometimes, a lot of files. And those files are filled with code. Sometimes, a lot of code. And if you don’t know what the code means, it can be really difficult to understand why sometimes things just don’t look right on your website.

Without knowing exactly how your browser is getting the information to display a website, it’s impossible to know how to fix the way it appears. That’s where Inspect Element (or Firebug) comes in.

Webkit browsers, such as Apple’s Safari and Google’s Chrome, have built-in “developer mode” tools that are very useful for inspecting the different elements making up your site. For Firefox, there’s a free add-on called Firebug which will do essentially the same thing. A simple right-click on the page item you want to check reveals much about that item’s formatting, allowing you to troubleshoot problems.

I made this video to walk you through the steps of using Inspect Element or Firebug to see behind the scenes of your website. See below the video for some step-by-step instructions.

Instructions:

1. If using Safari, go to Safari>Preferences>Advanced then check the “Show Develop menu in menu bar” checkbox. If using Firefox, download and install the Firebug plugin.
2. Right-click on the element you want to inspect, and choose “Inspect Element” from the menu.
3. A new pane will open at the bottom of the browser window, showing the page’s HTML code (on the left-hand side) and relevant CSS code (on the right-hand side).
Choose any HTML tag, then make changes to the CSS code to preview the changes you want to make.
If you choose, you can then apply these changes to your stylesheet.

I hope you found this tutorial useful. Please leave a comment or get in touch with me if you’d like to know more.

- Tessa

Feature image adapted from image by: vichie81 / FreeDigitalPhotos.net

]]>

Having presented on the ‘Essential Elements of Website Success‘ in the Grassroots Website Boot Camp I thought it would be useful to share my top 7 tips for those who haven’t seen the webinar.

My top tips of website success are things you can do yourself – you don’t necessarily need big budgets or a web designer to do these things.

If you want to read more about planning and marketing a website, check out this article on How to Plan a Website Like You’ve Done It Before which links to loads of articles on relevant topics.

You’re also welcome to leave a comment at the end of this article and we can discuss it further.

1. Set a goal for your website - this will help you determine if your website is working for your business.
2. Focus on a website outcome - what do you want visitors to do (call, email, download, signup)? Your website should constantly lead your visitors towards that action
3. Know your audience - the more you understand them the more you can engage them on their level, which leads to more conversions!
4. Use engaging content that is clear and easy to read, and remember your Call To Actions
5. Use design to draw attention to the important parts of your website – like the buy button, or the contact link
6. Market your website, don’t just expect people to come. Promote your URL, do some SEO, advertise, network and get involved in social media
7. Use visitor tracking software like Google Analytics to get an insight into how people are using your website (and where they’re coming from).

There’s nothing like experience when it comes to running a successful website. What advice would you give to others that you have learned along the way?

]]>

Have you heard of the term “Gravatar”? What is it and do you need one?

Well, okay.  No, it’s not some character out of the successful Avatar movie, although perhaps in a way, it is kind of substantiated in its effect.

Have you ever been reading a blog post and then gone to leave your comment and wondered why a lot of people have a photo next to their name when they leave their comment? But then when you make your comment, you don’t have a photo?  You are faceless! (like the image above).

That’s because they have a “gravatar” and you can too. It’s easy and quick to get one.

Let’s first find out exactly what a gravatar is. A gravatar is in fact an abbreviation for a globally recognized avatar from the company Gravatar created by Tom Preston-Werner.

Bascially, your gravatar is photo, your image that will appear with your name and comment on a blog or post in a forum.

Over at Gravatar, all you need to do is register an account using your current email address (usually connected to your business although you can add multiple email addresses), and then upload your photo/avatar (usually a head shot of you) that you want others to see when you make comments on blogposts and in forums.

Gravatars are available on most popular blogging platforms that require you to leave your email address with a comment on the blog, such as you would see on WordPress blogs where gravatars are naturally supported.

You can also upload various photos to use with different email addresses and these are rated by you with an MPAA style/age recommendation. (MPAA ratings are G, PG, R and X – very much like the movie ratings when you choose a movie to go and see).

That’s all you need to do and as simple as it is. You can come back to Gravatar at any time to update your avatar or change or add email addresses. It’s as simple as signing in on their website.

So pop on over to Gravatar now, if you don’t already have your avatar, register (it’s all free), and you are on your way to not being the “faceless” blog commenter any longer.

Here is my Gravatar

Till next time

Toni-Louise