The time to ensure your website is responsive (optimised for mobile viewing) is NOW! On April 21st, Google will update its search algorithms and begin to penalise websites in mobile search which aren't mobile friendly.
Given that 60% of internet use is now mobile, this is an essential element to ensure the continuing success of your website.
Need help? Just ask us anytime, we're always around!
We receive many questions on adding and editing images when using the builder. We understand the value a well placed, cleanly edited image, which fits well onto your page, adds to your website, so have included some tips on image editing for you.
Adding Your Image to the Website Builder
When you upload an image to your website, the online builder will do its best to accommodate that image no matter what size it is. Many customers are unaware that they are, in fact, uploading an image which is VERY large, and, once its been uploaded, this of course leaves no more room on the web page for any text - or, it might even be so large that it extends out the actual width of the website itself. That doesn't look good, of course!
To ensure your image will fit in the space you have allowed for it, consider the width of your entire webpage. You can find this information in Design - Layout Properties. Most web page widths are between 980 and 1000 pixels.
Then, consider the width of any sidebars you have on your website - most tend to display a left hand sidebar at least, with submenus or links to product pages, for example, and this will usually take up anywhere from 150 - 200 pixels of the width of your webpage.
This leaves you with a total width of around 850 pixels in your page content area (and even less if you also have a right hand sidebar to consider).
If you want to add a really large image to display something of importance on your page (your storefront, or a featured product, for example) you could use the "Add" - "Text" feature in the builder, and select the option which shows an image on top of a text area. This will give you a lot of width to display a large image (anywhere up to 800 pixels wide), without having to also fit in text on either the left or right sides.
Otherwise, if you are wanting to include an image with text on the right or left relevant to that image, we would suggest that 400 pixels wide is perhaps the maximum to use. This will leave enough space for the text on either the right or left (depending on the layout you choose) to appear neat and tidy, and uniform beside the image.
Editing Your Image On Your Computer
To work out the current size of your image, and if it needs to be cropped or sized down at all, navigate to your image folder on your computer, and hover over the image you are wanting to upload. A pop-up should appear showing you the width and height of your image in pixels. If you dont see this pop-up, right click on the image, and select "properties" from the drop down list. This will also display the width and height in pixels for you.
If its clear the image is too large for how to intend to use it on your webpage, you can "Resize" or "Crop" it using an image editing application.
Paint - Many computers will come pre-installed with an application called "Paint". It can be located by clicking "All Programs" - "Applications", and then selecting "Paint" from the list. Easily open an existing image in here, and click the "Resize" button to resize down the entire image, or "Crop" to select a section of the image to use (this is helpful to remove unnecessary white space, or to highlight something inside an image).
Microsoft Office Picture Manager - The Professional version of Microsoft Office comes with this application, and it can also be purchased separately. We find it EXCELLENT for simple re-sizing, cropping and colour balancing.
Specialised Image Editing Software - If you believe you will need to do significant image editing in order to make the most of your website, programs like Adobe PhotoShop, GIMP, Microsoft Expression Design, CorelDraw and more are available to purchase both online and in stores.
Editing Your Image Using the Website Builder
If you dont have any of the above applications, or would simply prefer to edit your images online, you can do so via the Builder. Upload your image as usual either via the "Add Component" capability, or simply by clicking the "Insert Image" button while you are editing a text area on your website.
If you've used the "Add Component" section, save your upload even though it isn't the correct size, just to be sure the Builder has a copy of the file. Then, "Edit" the section. You will see a "Resize/Edit Image" button over the image now. Click this button and either resize down the image (in percentages or using the slider), or crop it, and apply your changes.
If you've simply used the insert image button while editing some text, once the image is uploaded into the text, hover your mouse over the sides or corners of the image, and you'll see arrows around the edges of the image. Move these arrows to resize your image down.
When building an Australian website to address an Australian audience, the most common choice, and, in general best performing for search engines, is a .com.au domain. In order to register a .com.au domain, your domain name of choice must be a copy of, or very similar to, your business name.
Choosing a Business and Domain Name
To best utilise your website, and to give it a good starting point when working out your search engine optimisation strategy, consider carefully your choice of both a business and domain name. Your name needs to express what it is you offer, and be unique to you, but also will benefit by having popular internet search terms in your field included.
So, if you were building a website selling, say, ovens, and your name was Mr Smith, you may choose the business name Smiths Ovens Online, and the domain www.smithsovensonline.com.au. This is unique, in the sense that it contains Mr Smiths name, but also clearly indicates what it is people can expect to purchase from this business, and website. Having the terms "ovens" and "online" in the domain name will also of course help with search positioning when potential customers type these terms into the search engine.
It is best to have several possible business and domain names and variations of these ready, as you will need to choose up to three variations for your business name registration, and it will save time to check that BOTH the business name and domain name of your choice are available to be registered.
You can then apply for your business name at the Department of Fair Trading in your state. A state by state guide to the application process can be found at the registration and licences section of business.gov.au, along with a wealth of information on starting your own small business.
Once you have your business name registered and connected to your ABN, you will be able to register the .com.au domain name of your choosing, if it is available.
Check for availability of domain names via any domain supplier, including via the DIY Website Builder. You can also use the the domain supplier of your choice to purchase available domain names and transfer them over to your DIY Website Builder hosting plan, or simply purchase a .com.au domain directly via the DIY Website Builder system.
With a domain name which matches your business name, you have an easy to remember URL for your returning customers to type in, and a starting point for your search engine optimisation efforts! Read our post on optimisation of page titles to take the next step in your SEO journey!
The goal of search engines, when choosing which pages to display in search results, is to locate the information most relevant to the users search. Page titles are used by search engines as a starting point to determine what your page is about - how will it help the user answer the question, or find the service or product, they are looking for?
When we talk about page titles, in terms of SEO, we do not mean the actual written title on the page, but the title displayed by the browser in the upper left hand corner of the screen. This page title is located in HEAD the section of your webpage, and is indicated by the TITLE tag. When using the website builder, to access the page title, simply access the page list, click on "properties" next to each page, and add your chosen title into the "Page Title" section.
How to Create an SEO Friendly Page Title
Page Title Length
At SiteFresh Web Design, we aim to create page titles not more than 67 characters in length (this includes spaces). This is because titles longer than this can be truncated by search engines (when you see the .... at the end of a longer title) and so do not provide your viewer with any information, and also because the longer the title, the less weight is attributed to each individual word in the title.
Stop Words
As the importance of each individual word is relevant to search engines, we also choose not to use "stop" words - these are words such as "and", "the", "or" and so forth. These words, while perhaps grammatically correct in a sentence format, are not required in a page title, and simply take up space which could be used for adding information relevant to your page.
Your Business Name Adding your business name to each page on your website is not essential - nor is it necessarily a great idea, unless you have a brand which consumers will actually enter into the search engine - like Nike or Apple, for example. It is enough to add your business name in, perhaps, the page title of the Contact Us or About Us pages of your website. Search engines will find your business name from the copyright notice at the bottom of your site, and also, of course, from your domain name, if you have used your full business name. So, a page from your site will display for searches which include your business name without needing to add it into every page title.
Relevancy to Content So, taking these ideas into consideration, then decide what it is your page content is really about - what main keyword phrases are you expressing in your content? Use these phrases as your page title, and seperate any points with - or | for neatness and ease of reading. In example, this blog, on our site, includes information on website design, SEO marketing and on how to best utilise the Website Builder's WYSIWYG editor. So, we created the page title
Website Design Tips | SEO Marketing Tools | WYSIWYG Editing
You'll see this title is 59 characters long - yes, there's room to add more characters, but we had already indicated what the page was about, so chose not to add more. This title contains no stop words, just naturally formed, easy to read phrases which describe what the page is about. This title also does not include the business name.
Page titles using information in this way provide both search engines, and consumers, with a clear idea on the content of yor web page. A good page title can then be enhanced by adding an engaging and interesting page description, further encouraging consumers to click on your web page. Our next SEO blog will cover creating effective meta-descriptions!
For those of you using the DIY website builder, you may notice when copying and pasting text that the formatting (bold, text size, colour etc) sometimes doesn't seem quite right. The following tips will help you design visually appealing pages and stop those pesky glitches!
Using a WYSIWYG editor
The DIY Website Builder uses a WYSIWYG editor (what you see is what you get) allowing you to view your web page exactly as it will appear to your visitors. However, behind the scenes, all websites use code which tells the editor what type of font you want to use, whether you want the text centred or left-aligned, whether you are adding a title, and so forth.
So, when you copy and paste sections of information from, say, another website, or from a Word document, any code contained in that text section will also be pasted into your editor. This is what can cause some issues.
To create content using the WYSIWYG editor, follow these simple rules -
Adding New Content
When typing information directly into the editor, add all your information FIRST, and then add your formatting. So, type out your titles, paragraphs, links, sub-headings etc in your default font and then, once complete, go back over your text and format the areas you want to make titles, bold, centered etc. This is the best way to add content as, if you format text as you are going, occasionally when you press the enter key after, say, creating a title, the editor will bring that title formatting onto the next line.
Copying and Pasting
When you need to copy and paste content, it is best to "clean it up" first - which means, to remove any formatting the text already has so that it pastes neatly into your editor, where you then add your own formatting.
Any content copied from another website will undoubtedly also contain code. To tidy this up, the best practice is to paste it into NotePad first. NotePad is a text editor added as an application (usual in "Accessories" on most PC's. Simply paste your content into NotePad, then copy and paste it from their into your editor for neat and tidy text which can then be formatted to suit your website.
If you don't have NotePad, or are not inclined to use it, the next best thing is to paste the content into a Word document, and then copy from here to paste into your website. You'll notice, when you do this, the editor pops-up to say "You are pasting from Word, would you like to clean it up first" - this is a fantastic help, and just follow the prompts to have the editor clean up the text for you!
Visual design covers many areas, but to ensure your website is aesthetically pleasing wewill work with you to follow a few simple rules -
Planning Your Website
Who is your site for? What message do you wish to relay? Consider carefully the audience, in terms of age, preferences and computer literacy when choosing a layout for your site
Who is the site for - a pensioners club will generally have slightly different requirements to a heavy metal band.
What is the purpose of the site - is it a private ecommerce site for employees, a site to promote products for a retail outlet, or an informational site for a community organisation ...
Who is the target audience - if the target audience is mainly teenagers then the site may have lots of loud colour and animations, if however the main audience are accountants then the site should be very plain and easy to navigate.
Content - what actual content will go on the site
Layout - determine the basic layout and navigation for all pages in the site. Consistency is important.
Colour
When designing your website, you have a particular message to deliver, and colour is a very direct tool to stir emotions and direct user behaviour.
Subtractive Colour Wheel
The subtractive colour wheel is composed of a sample of colours that include the three primary colours and a number of secondary, intermediate and tertiary colours. Using this wheel when selecting your main website colours can be helpful in deciding on the use of complementary versus contrasting colours, or a mixture of both.
Using the wheel, colours that are alongside each other are considered to be similar. Those that are opposite each other on the wheel are said to be complementary, and those at least three colours away from another on the colour wheel are said to contrast.
For website display, most sites choose to select a single base colour (in this website, for example, we chose a shade of pale brown) with one secondary colour which is either complementary or contrasting (in this website, we chose pale green), and then additional tones (for borders or subheading, in example) which are similar to both these colours (in this website, that is a darker brown and a darker green).
Culture and Colour
In Western culture, each colour has a particular significance. Red for love, passion and heat; green for peace, nature, fertility; blue for clarity, dignity, truth; yellow for joy, energy; purple for wealth, sophistication; brown for masculinity, stability; black for death, elegance, rebellion; white for purity and cleanliness.
Be aware though of other cultural perceptions. In many Eastern cultures, white represents mourning, and purple, a sign of royalty in Western culture, represents prostitution in the Islamic world. Know your audience before making final colour choices!
Alignment
Look at each paragraph and element on this page. You will see two basic alignments: centred, which is used for the heading and left-justified which is used for the balance of the page and sub-headings. Most designers would say "choose one alignment and stick to it for the whole page". So, as per this page, main headings are centred then sub-headings, text and images are left aligned. But most designers will also break their own rules from time to time - just to add interest to the page!
So, for example, if you had one single message on your page that you wanted to draw attention to, you could add an image and right-justify it, with some bold text as a heading above it, or, you could add a centred heading within the text of your page to make those words jump out at users. In general, however, when designing your page, use alignment as a tool for consistency, neatness and appeal.
Proximity
In general, an image, or a heading, which relates to text should be in close proximity to it (near/next to). For example, when discussing the Subtractive Colour Wheel above, the text is immediately to the right of the image. This proximity allows your readers to clearly follow your information, and it is easier to guide customers to products they may need.
Repetition
Repetition is about repeating certain elements all the way through a site. For example, you'll see that on this page there is a single page heading, then left-justified text with headings throughout. Also, note that every page in this website has a banner, centred at the top, shows the top and left menu, and the page footer. Plus the background is constant on every page.
All of this repetition gives a sense of identity to each page. When you move from this page, the next page will look similar. This gives a sense of reassurance that you haven't left the site and wandered off somewhere else by mistake.
One drawback to repetition, of course, is that the pages all have a certain sameness about them. There are a few tricks you can use to allow repetition, but with some variety. We discuss these in "Contrast"
Contrast
Contrast draws your eye into the page and makes you want to look at it. With careful design, contrast will lead your eye around the page - a great tool for website designers looking to guide customers to a certain product or point of interest in your website or page.
To use contrast, the first thing you need to do is to create a focal point for the page. Often this will be a graphic or combination or graphic elements. The real focal point of the page is the most important element on the page. If everything on the page is the same size, then everything has the same level of importance. This will never be the case: there is always something on the page that is more important than everything else.
Some of the techniques you can use to create the focal point are to use a large, well-chosen graphic, a headline within your text or an illustration (photograph or drawing) of the main subject.
"Moving your new venture into the on-line world can be overwhelming, but not when you work with SiteFresh. I received such great service and finished product, not to mention subsequent assistance and follow up support. Responsive, professional, creative, supportive, and patient. Public feedback has all been extremely positive. From the moment you engage SiteFresh, you can absolutely relax knowing you are in safe hands." Margaret,
Caring Kids
"I cannot reccommend SiteFresh Web Design services enough! They have been fantastic to work with and have created the most amazing website and it is better than I ever imagined. Have loved working with them and so excited and proud to refer others. Thank you so much! ♥ lots of love." Talya,
Feeling Ostomistic