Part 3 of your Free Guide to Building a Website

By now you should have the hang of adding pictures and editing text in the existing text boxes. You should also know how to add new pages to the site by adding them to the menu (see previous tutorial). Now let’s look at adding extra elements to a page and adding pages without them appearing in the menu – it’s the next step to help you create your own website using Webeden. Lets do it – here’s 10 steps to adding extra elements to your pages

Step 1

Click on Files to open the File Manager and then select the Library tab and click on Animations / Handwritten. Click on “Circle it” and select Use this. The animation will be added to the page. By default, the line drawn is white. Select the animation object and in the Editor dialog click on the Style tab and change the colour to black. You can also resize and rotate the animation on the Info tab (see previous page). Position the circle over the top of an area of the page that you want to draw attention to, like a picture.

Step 2

Now add the arrow from the Handwritten section in the same way. Use the Rotate feature on the Info tab to enable freehand rotation using the object’s handles. When you add a page to your site, you can choose from a list of different page types. There are different templates readily available so you don’t have to design a complicated page from the ground up, which makes for a handy shortcut when you’re website building. For example, the blog/news page will create a ready made weblog for you, together with an integrated editor to allow you to add items.

Step 3

You can also add links only, so a button appears in the menu, but no page is created (the opposite of adding a page, but not having it visible). There’s even an image gallery – one tip with images you upload is to ensure the dimensions aren’t larger than you need to keep download times down, somthing you should take not of when you create your own website.

Step 4

Now click on Insert and select Button Link. This will add a bevelled image to the page. Move it to within the left column. Click on the Link tab in the Editor dialog and enter the URL you want to link to, like http://www.webeden.co.uk/. Click on Apply and you’ll see that the text on the button changes also. Click on the Style tab and you can now change the text on the button. Do it in this order, as changing the link will overwrite the text.

Step 5

The next step on your website building fast track is to click on the More arrow in the Editor dialog (top right) and select Body Text Box (you can hover over each icon to get a tooltip). Drag the text box to the left column, underneath the button we just inserted. Use the handles at the corners and bottom of the text frame to resize it to fit within the column. Now select the Style tab and click on the Background button to enable a background for the text frame, and select a colour from the drop down menu to the right, and do the same for the border.

Step 6

An alterative when you make your own website to using the text frame’s background and border is to add a background frame, such as a shape with bevelled edges from the Library, and then add a text box on top, which will show the frame beneath it through it.

Step 7

Now go to Insert / New page and click on the Add new page button; just make it a blank page. Label the page “Chat” and then disable the radio button in the Page visible column. This will add the page to the site without it being added into your automatically generated menu. We will add a link to this new page within the master page, but to do this, you must create the page first as you cannot add a link to a non-existent page, even if you know what you are going to call it. You can still access the page to edit it from the Pages menu – a perfect website building tip.

Step 8

On the new page, double click in the title text box to edit the text and change it to “Chat to other user online” and then single click on the main text box and click on the Delete icon.

Step 9

Now click on the Files button to bring up the File Manager and from the library, select Functional and add the Chat object to the page. Close the File Manager and then resize the chat object to fill the content element of the page underneath the headline. Click on Design / Page master and remember to save the page when it asks you. Always remember this if you want to quickly build your own website!

Step 10

Add a new button link and drag it to the top right of the page, above the date. With the button selected, choose the Link tab in the Editor and select the Pages icon (it looks like horizontal lines). This allows you to link to a page on your site. Select Chat from the drop down menu and click Apply. As before the button’s text will change.

Step 11

In the Style tab change the button text to “Chat to other users”. Click on Save and Exit.

Step 12

Change to the View my site, so you can see the site as a user, rather than editing it, and you will see that we have added a fully featured chat feature to our site, all within the space of a few clicks. What an amazing what to create a website that looks professional and advanced.

Expert tip

When you add a page to WebEden, you can choose from a list of different page types. There are different templates readily available so you don’t have to design a complicated page from the ground up. For example, the blog/news page will create a ready made weblog for you, together with an integrated editor to allow you to add items. You can also add links only, so a button appears in the menu, but no page is created (the opposite of adding a pgae, but not having it visible, as we did in Step 3). There’s even an image gallery – one tip with images you upload is to ensure the dimensions aren’t larger than you need to keep download times down.

That’s all for now

Check in for part 4 to find out how to add some really cool stuff to make sure that you can build a website, and it’s the best one possible!

Function & Form: Building a Website That Works

When having a website built, it’s great to think of how you want your website to look…most designers will appreciate you having a “vision” for your site. However, do not let your vision overshadow your purpose for building the website. If you do, the site will could end up falling short of, not only your needs but also, your expectations. So, how do you avoid that pitfall? Well, in order to build a website that works—literally and figuratively—for you, the site must be functionally correct first and the visual elements used should work with the functionality.

Functional For Site Visitors & Site Owners

It is critical to keep the purpose of the website you’re building at the forefront of your mind. That’s to say, what do you want site visitors to (be able to) do while visiting the website? Are you building a community site where you want people to interact? Maybe you’re looking to sell products. Or perhaps you’re a business owner or non-profit organizer and just need an online presence so people can learn more about what you do. They’re all valid reasons to have a website built but the functional requirements for each is different. The community site needs an element that will allow site visitors to communicate with each other but the product site needs a way to process transactions and the online presence site simply needs to be informative.

Seems simple enough, right? Well, sometimes it is and sometimes it isn’t.

 Many of today’s websites serve multiple purposes. Some large sites may even have different purposes for different sections or pages within the website. That may result in the overall site needing a variety of functional capabilities—search result generation, form submission, multimedia interfacing, e-commerce, or even customized databases. Therefore, asking yourself, “What do I want site visitors to do / to be able to do on my website?” may seem like an easy-to-answer question but it really is a question that anyone wanting a website designed should seriously consider before contacting a web designer.

Beautiful AND Smart Design

Once you have clearly thought out the functionality requirements for your website, then you can turn your attention to how you want your website to look. Here’s a look at some things to keep in mind as you’re imagining how you would like your website to look:

• Use The 3-Click Rule Whenever Possible.

The 3-Click Rule is an unwritten rule that many professional designers adhere to when designing website. The rule states that it should not take a site visitor more than three clicks to get to a particular function. Translation: Make sure that the website’s navigational structure you decide on for your site is super simple. If it takes more than three clicks for a site visitor to get to a particular link or page, it isn’t likely the site visitor will get there. Instead, most will give up and move on to the next website in the search engine results.

• Don’t Fight What The Consumer Has Been Conditioned To Do.

Web users are accustomed to going to certain links and locations to find certain information. For instance, most web surfers automatically look to the left or top of the screen for main site navigation options; site users have also become increasingly used to being able to click on a company logo to get back to the homepage. Don’t fight these web surfer design preferences…go with it! The exception: You can consider straying from these “norms” if you’re attempting to create a specific surfing experience for your site visitors.

• Plan To Add Purposeful Content!

Don’t just put text on your website for the sake of “having something up there.” Site visitors will see right through fluff copy…especially if you attempt to fill the site with keywords to improve your search engine ranking without providing valuable content along with those keywords.

Also, think about how you speak to your site visitors. Your tone and writing style that you choose should fit the overall purpose of your site as well as the “vibe” you want site visitors to have when visiting the site. For example, if your website is going to be the equivalent of an online brochure, make sure that the design and text read as simply as a brochure would. If your site is geared towards children, use age-appropriate wording. Or, if your site is supposed to be a profit powerhouse, generating thousands of dollars each month from product sales, make sure that you have copy that sells on every page intended to sell site visitors on your product / service. FYI: Hiring a professional copywriter or working with a website design company that provides copywriting services can come in handy here!

Finding The Right Web Designer For Your Website

Once you have determined the basic functionalities of the website you’d like developed as well as some of the aesthetics you’d prefer, the next step is to find a professional website designer to actually build the website for you. The best way to begin is to ask friends for a referral but do not stop there. Website designers have different capabilities and specialties. The referred website design company may or may not be the right provider for the job. So, the next step should be to find one or two other potential website designers. When selecting designers for your short list, keep the following in mind:

• Budget & Price: Have a budget range in mind for your website that’s appropriate for the functionalities your site requires. Let your budget determine the designers who you consider for the job. However, the designer who wins the project should be determined first by their ability to design the website as you envision and second by price.

• Professionalism: Take note of the professionalism of the provider during phone conversations and / or email correspondence. It’s indicative of what the experience of working with them will be like.

• Work Samples: Request to see work samples but do leave room for some speculation. Work samples, unless created specifically for you, are always the result of the provider’s client’s preferences and not solely the designer’s abilities. Designers can make suggestions to clients for how a website should look or operate but in the end, it’s what the client prefers that goes.

• Value-Added Services: If you will be requiring more than just web design to make sure that you have an optimal website, consider finding a provider that offers value-added options. Some value-added services that design firms sometimes offer that simplify website operation or improve website effectiveness include website hosting, website maintenance, domain services, copywriting, and search engine optimization (SEM).

When you find the professional designer that you want to work with, explain what you have in mind for your website in detail, including your functional requirements. Then, be prepared to listen; a true professional designer will have additional questions to clarify your “vision” as well as insight about what else you may need in order to have the website look and operate the way you want it to.

The final tip for building a website that works: Be open-minded to all of the designer’s suggestions. You don’t have to go with all of the design firm’s recommendations but you should at least hear the designer out. Remember: You’re hiring a professional web design firm because of its expertise and creative abilities! Don’t cripple your designer by not allowing for at least some free flow of ideas. After all, the designer is the professional and there’s always more to beautifully designed and user-friendly websites than meets the eye!