SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 1 SITXICT001A Build and launch a website for a small business WORKBOOK SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 2 Contents Contents ........................................................................................................... 2 INTRODUCTION ................................................................................................. 7 Unit Outline. .................................................................................................... 7 Assessment Methods and Tasks. ......................................................................... 7 Skills required for this unit. ................................................................................ 8 1.Plan website structure ................................................................................... 9 1.1.Develop website style and structure to suit the business purpose and intended target audience according to business website strategy. ........................................ 9 1.1.1 Website purposes ............................................................................... 10 1.2.Identify and include appropriate features and capabilities within the website structure. ...................................................................................................... 13 1.2.1Thumbnail images ............................................................................ 13 1.2.2Text and tags in HTML ....................................................................... 14 1.2.3Navigation buttons ........................................................................... 14 1.2.4Downloadable files ............................................................................ 18 1.2.5Search facility .................................................................................. 19 1.2.6Forms ............................................................................................. 20 1.2.7Shopping cart and electronic payment facilities ..................................... 24 1.2.8Legal information ............................................................................. 25 1.2.9Privacy and confidentiality requirements .............................................. 25 1.2.10 Authentication facility ........................................................................ 26 1.2.11 Colour, sound, video, images and graphics ........................................... 27 1.3.Determine layout and navigation requirements in relation to appearance, readability, links and ease of operation. ............................................................. 31 1.3.1 Usability ............................................................................................ 31 SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 3 1.3.2 Readability ........................................................................................ 33 1.4.Identify and apply accessibility requirements for website to ensure maximum accessibility. .................................................................................................. 34 1.5.Document structure clearly and accurately to facilitate an efficient development process. ........................................................................................................ 36 1.6.Develop and integrate appropriate interactive forms into the website structure to capture customer data. ................................................................................... 37 1.6.1 Contact forms .................................................................................... 37 1.6.2 Opt-in forms ...................................................................................... 37 1.6.3 Feedback forms .................................................................................. 39 1.6.4 Payment form .................................................................................... 40 1.7.Select authoring tools and software based on website requirements. .............. 41 1.7.1Adobe Photoshop .............................................................................. 41 1.7.2Adobe Dreamweaver ......................................................................... 41 1.7.3Wordpress.org ................................................................................. 42 1.7.4Wordpress.com ................................................................................ 45 1.7.5Wix ................................................................................................. 45 1.7.6Weebly ............................................................................................ 46 1.8.Identify and integrate website security requirements into the development process. ........................................................................................................ 46 2.Develop website content .............................................................................. 48 2.1.Select and use business information to create website content according to business website strategy. ............................................................................... 48 2.2.Define appropriate information for inclusion in interactive forms based on the purpose of the form. ....................................................................................... 50 2.3.Adapt information for inclusion on the web to ensure site is clear, scannable and readable. ....................................................................................................... 50 SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 4 2.4.Use language style and tone suited to business image to be conveyed and intended target audience. ................................................................................ 51 2.4.1 Case Study ........................................................................................ 51 2.5.Integrate content features into the website according to website structure and plan. 53 2.5.1Marketing features - product and service promotion .............................. 53 2.5.2Frequently asked questions (FAQ) page ............................................... 53 2.5.3Company profile ............................................................................... 54 2.5.4Staff profiles .................................................................................... 55 2.5.5Client testimonials ............................................................................ 55 2.6.Check content for accuracy, currency and relevance according to website plan and purpose. ................................................................................................. 56 2.6.1 Following a process ............................................................................. 56 2.6.2 Definitions ......................................................................................... 57 3.Create website pages .................................................................................. 57 3.1.Create a plan for website pages and active links to meet layout and navigation requirements. ................................................................................................ 58 3.1.1 Site map ........................................................................................... 58 3.1.2 Wireframe ......................................................................................... 60 3.1.3 Hi-fidelity Mock-ups ............................................................................ 61 3.2.Select page titles and key words to reflect business purpose and website content, and to assist access via search engines. ............................................................ 61 3.2.1 Search Engine Optimisation (SEO) ..................................................... 62 3.3.Improve page presentation by adding features to enhance web pages. ........... 63 3.4.Develop linked web pages according to website plan, ensuring links are clearly named and unambiguous. ................................................................................ 64 3.4.1 Relative links .................................................................................. 64 SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 5 3.4.2Absolute links .................................................................................. 64 3.5.Use appropriate techniques to create interactive forms within website pages. .. 66 3.6.Create all pages to be consistent with site design specifications. .................... 69 3.6.1 Using Wordpress.com .......................................................................... 69 3.6.2 Using Wix .......................................................................................... 76 3.6.3 Using Weebly ..................................................................................... 81 4.Select and use a web hosting service ............................................................ 85 4.1.Identify relevant sources of information on web hosting options. .................... 85 4.2.Evaluate different web hosting services and select according to business and technical requirements. ................................................................................... 85 4.2.1 Free Hosting services .......................................................................... 85 4.2.2 Upgrading to a paid plan ...................................................................... 86 4.2.3Paid hosted servers ........................................................................... 88 4.3.Upload files to selected web hosting service according to technical requirements and business agreements. ............................................................................... 90 4.3.1 Uploading content ............................................................................... 90 4.3.2 Publishing your site ............................................................................. 93 5.Test and critically evaluate website ............................................................... 95 5.1.Test website functions, processes and navigation to confirm operational status, appearance, accuracy and ease of operation. ..................................................... 95 5.1.1Alpha Testing ................................................................................... 95 5.1.3Beta Testing .................................................................................... 96 5.1.4Cross-browser and cross-device testing ............................................... 97 5.1.6 Eye tracking .................................................................................... 99 5.2.Evaluate effectiveness of interactive forms to ensure that required sales data is collected for the business. ............................................................................... 99 SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 6 5.3.Evaluate website according to business website strategy to ensure it projects a business image suited to the e-business model. ................................................ 100 5.4.Identify any problems, develop a range of strategies to solve them and select appropriate and sustainable solutions. ............................................................. 100 SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 7 INTRODUCTION Unit Outline. Unit Summary This unit describes the performance outcomes, skills and knowledge required to design the interaction for interactive media products. No licensing, legislative, regulatory or certification requirements apply to this unit at the time of endorsement. Prerequisites There are no prerequisites for this unit. Assessment Methods and Tasks. Assessment Method Delivery: Classroom based face-to-face delivery Classroom based blended delivery Self-directed online delivery Assessment Tasks:There is one project that is broken into three parts, to completed by the end of this unit. You are to build a website for a small business, in a selected hosting service.The scenario for this assessment is built on the previous web units, contact your trainer if you received RPL for CUFDIG506A. Re-Assessment: Re-assessment for a completed assessment that is deemed Not Satisfactory will be rescheduled as soon as practical. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 8 Skills required for this unit.Communication, techniques for using colour and enhancing text within a website Techniques for capture and manipulation of digital images and graphics, including insertion into a website Writing skills to develop and review website content for diverse purposes and audiences. Knowledge required for this unit. General understanding of the internet and world wide web and their application and relevance to individual businesses Current e-business environment for a particular business context General overview of different services and operation systems used by internet service providers General principles of website architecture and design Role of a website in the marketing mix and ways in which the marketing effectiveness of a website can be enhanced Key features of a marketing-oriented website General features of browsers, search engines and web crawlers, including how these impact on website design, decisions and meta-tags Relationships between content and site design Functions and features of micro-content elements such as headings, highlighted words and hyperlink text Underlying impact of hypertext markup language (HTML) and cascading style sheets on site design Features and uses of frames, forms and tables within a website Privacy issues, codes of practice and legislative requirements in relation to the development of a website including: oOECD Guidelines for Consumer Protection in the Context of Electronic Commerce oWorld Wide Web Consortium (W3C) guidelines ocopyright laws odefamation laws oprivacy legislation and confidentiality requirements ointellectual property Legal and regulatory policies affecting e-business. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 9 1.Plan website structure 1.1.Develop website style and structure to suit the business purpose and intended target audience according to business website strategy. So, you are beginning a web development project, assuming you have already performed your research and requirements gathering, it is time to develop the style of your website. Whether this is a new project or an extension of an existing project, you will need to determine this style based on the technical requirements of the web environment. If you are using a hosting service, like Wordpress.com, Wix, or Weebly, the style and format of their templates will dictate some of the style you develop. These will be explored in greater detail in Section 1.7. If this is the case, you may need to adjust any previous design mock-ups you created. Your approach will also depend on how you want to communicate to the user, and the level at which they engage and respond.Again, this research shouldnt be prepared in isolation but in communication with team members associated with the project, either the client, project manager, developer, other creative personnel, or all of the above. The following contexts require varying degrees of interactivity and may provide a reference point as to how you can craft interaction within your own work, and from there you can consider what your user needs from you. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 10 1.1.1 Website purposes Communication Dialogue with the user is created where both participants are active and can affect one another. Before computers, we relied solely on face-to-face communication with people within our communities; technology has rapidly increased the opportunities for interactive communication across mediums, disciplines, cultures, social classes, and locations. From a business perspective, companies now have their own virtual personalities and can interact with their customers on a seemingly more personal level. Examples: product forums, social mediaPresentation of data Interactive graphics provide viewers with the option to dive deeper into the information being presented and can help keep the viewers attention on the data being presented. Information that is constantly moving can overwhelm the viewer and be counter-productive in communicating the intended information. https://infoactive.co/data-design/ch16.htmlSITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 11 Examples: http://www.shopify.com/2013, http://mailchimp.com/2013/#by-the-numbers, https://www.youtube.com/watch?v=vATSkM6Qf6Y Games Games can be entertaining or educational or sometimes both, although what separates games from other entertaining activities is that they provide/demand a high level of interaction. The gaming context relies very dominantly on interactivity to engage the user. If the provided interaction is misdirected, people will get frustrated playing your game or wont be able to play it at all. Examples: http://type.method.ac, http://bezier.method.ac SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 12 Information/newsAs news websites continue to replace newspapers, you can either subscribe to regularly updated stories or rely on aggregated information (factual information gathered from various sources into one place). Online news reports can be delivered and updated immediately and most websites offer comment areas where the public can respond to the information, interactivity is available but optional.Examples: news.google.com, www.news.com.au, www.theguardian.com Virtual world or simulation Virtual experiences have been imagined since the 80s but technology has always seemed to hold it back. To interact with this medium, the user needs to wear a head mounted display and the power is given to the user to move from place to place inside a virtual environment. It is an interactive experience for the user if they manage to navigate. The interactivity needs to keep the excitement in the user alive, poorly designed interaction can hamper immersion to a great extent and the user may simply stop getting involved in the virtual environment. http://www.fastcodesign.com/3042928/the-laymans-guide-to-virtual-realityWeb environment The web environment delivers a great variety of interactive possibilities dependent on the subject matter and target audience. It is an ever-changing entity that consistently demonstrates new media and new ways to interact with information. Even if the product isnt delivered via online channels, the web is the place to go to find out about it.E-commerce The web as a shopping medium continues to expand as more users learn to trust the security of online commerce. Web commerce competes successfully with traditional retailing, offering many advantages compared to traditional shopping, such as being able to shop overseas, and being able to find the best deal from the comfort of your home. Other types of commerce on the web include stock trading, airline ticketing, online banking, auctions, and more. Many e-commerce software packages are available and SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 13 can be integrated with existing databases to speed the development of a commerce site. A good electronic commerce (e-commerce) site provides users with quick access to the items they want, shopping carts, wish lists to store their choices, detailed product descriptions, and secure ordering and checkout. Examples: www.ebay.com.au, http://au.strawberrynet.com/, http://www.rmwilliams.com.au/1.2.Identify and include appropriate features and capabilities within the website structure. If usability is top priority when creating websites, you must understand how features function and what they enable the user to do. This will ultimately depend on the platform you choose to build you website in, however there are some universal principles you will follow. 1.2.1Thumbnail images Thumbnail galleries allow for quick browsing of multiple images and should give users the ability to click and see a larger view of single images.Thumbnails allow the user to scan multiple objects or stories without getting in too deep. This ensures the user always knows where they are within the navigation of a website and that they are in control and can delve deeper if they want to. You can do this by showing the total number of images within your thumbnail view and provide easy access back to the full thumbnail gallery. Image: https://www.behance.net(2015), [ONLINE] SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 14 1.2.2Text and tags in HTML Hyperlinks connect web pages and are what make the web work. We can venture from page to page with a click of a mouse. Users look for links to delve deeper and the web would be a series of unconnected pages without them.For users to notice links they need to stand out, you can do this by underlining them, making them a different colour to the standard text, or making them bold. Users also like to know where theyve been, so you need to consider the state of visited links so they can visually see the pages theyve already accessed. Image: http://colly.com (2015), [ONLINE] Further resources http://www.smashingmagazine.com/2010/02/13/the-definitive-guide-to-styling-web-links/1.2.3Navigation buttons Buttons that sit within the navigation menu are a vital element of a website because it is the most consistent element that can be accessed from every page, enabling visitors to move easily from page to page within the website. There are a few styles of navigation buttons you will frequently see, these are: Horizontal navigation bar underneath the header SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 15 Horizontal navigation bar at the top of the screen Horizontal list navigation inside of the header Vertical list inside a button (most often used for mobile or device websites) Mobile This is the hamburger menu button (popular on mobile websites). SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 16 Vertical list on the left or right side. This is most often seen in blog style sites. These vertical lists can also be used as sub-navigation, often seen in e-commerce sites to show filtering options. The style of your navigation buttons is also a consideration. If you are using a template hosting service, you will generally be stuck with the style that is in the theme, however these considerations could change the theme you choose. Text only SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 17 Icon and text Taylor, R. (no date) 43 great examples of WordPress websites. Available at: http://www.creativebloq.com/web-design/examples-wordpress-11121165 (Accessed: 21 July 2015) Icon only Text with extra detail Other navigation buttons can include the back and forward arrows for easy access, social media icons, and an x button to close (as seen on previous the example). Image by Simon Collison (2015), Flickr https://www.flickr.com/photos/collylogic/19695551205/ [ONLINE] is licensed under CC BY 2.0 SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 18 Further resources http://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/1.2.4Downloadable files When needing a link that initiates the download of a file in a variety of formats (i.e. video, sound, images, graphics) you need to communicate very clearly the type of file it is to the user. If its a document containing an image or a formal document you might let the user know what kind of file it is by including the file type as an icon or using a thumbnail image or if its video, a thumbnail with a play icon. Other information you could include is a short description of the document and the file size. Always ensure your design accounts for the ease of recognition for the user so they are able to find it amongst the rest of the content.SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 19 You need to remember that the size of each of the downloaded files that appear on a page will affect the user and the overall size of your website. 1.2.5Search facility For large websites, a search box can be the most frequently used element. Especially if the content is not structured the search box can be crucial for the success of a website. Generally, the search box is offered on the home page and is displayed simply. You need to remember that users are scanning for relevant information, so a search facility should be in a box and should be easy to find. Sometimes the search facility will be a box, a box and a magnifying glass icon, and sometimes just the icon. The magnifying glass is now embedded iconography in users minds, so you need to use it, whether in isolation or with a text box. The example below indicates poor placement of a search box, see if you can find it. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 20 Here are some examples of well-placed search boxes. When hovered over, the text box appears. http://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/1.2.6Forms Interactive forms on a website create a way for the customer to communicate with the publisher of the website about their product/service. Some websites create forms requiring potential customers contact details for continual communication and others are looking for specific feedback. Whatever the purpose of the form, all information is collected into a database.When designing an interactive form, consider how valuable the information is to your client and the users time investment to give you their personal details. No one likes to fill out these forms in fear of being spammed, so if we have the target audience filling one out they have already connected to the brand/tone. They already value the information they have found but we need to hold them by making the form easy to use.SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 21 Smashing Magazine describes the six components of interactive web forms: 1.Labels a description that sits with each field 2.Input fields the areas (usually boxes) that the user inputs data into 3.Actions can be in the form of a link or a button that encourages an action by the user 4.Help provides help for the user to complete the field requirement 5.Messages feedback to the user in response to information thats been completed, it can be positive (e.g. an email has been sent to our sales team) or negative (e.g. the user name has already been taken) 6.Validation indication to the user of incomplete information Following is an example of a simple and fun contact form, with clear validation. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 22 The following images also show clear validation errors and indicate where the user needs to input more data to complete the form. They also demonstrate a variety of methods of creating these forms. These examples at least have error handling and show the user what the error is in the text, however the relationship between the error and the changes that need to be made could be clearer. This could be done, by placing the error box closer to the field that is incorrect. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 23 These final two examples are more effective, as: It is clear there is an error A relationship between the error message and the field to be changed is clear through proximity The error message tells the user exactly what is wrong SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 24 The next image shows a clear confirmation message. Taiyab Raja Freelance UI/UX Designer http://www.taiyab.co.uk/#! Further resources http://www.smashingmagazine.com/web-form-design-showcases-and-solutions/http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/1.2.7Shopping cart and electronic payment facilities An online shop can open up big opportunities to a business, benefits include: The shop is open 24/7 The market is global Reduction in overheads (i.e. staff, premises) New stock can be instantly communicated through the e-commerce website ore-newsletters to existing customers Payment can be received instantly via credit card of Paypal type services E-commerce websites offer a variety of payment and delivery options to cater for all potential customers. Customers can make purchases from the other side of the world and have the item delivered within a few days. Items chosen sit within a virtual shopping basket or shopping cart from within the particular website for purchase, at this stage discounts are offered to the customer to entice them to continue shopping. Image: www.threadless.com (2015), [ONLINE] SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 25 1.2.8Legal information A legal statement, terms and conditions or a disclaimer displayed on a website covers issues that exist within operation of a website. It may cover how the website may be used and limitations of liability and state compliance to privacy laws. Depending on the purpose of the website, legal information will vary. Displaying this on your website is advised but not mandatory. However, a business must clearly communicate a Privacy Policy if it is a small business with an annual turnover of $3 million or more and if it: Is related to a business that has an annual turnover of more than $3 million Provides a health service and retains health information Is in the business of disclosing personal information Is a contractor for the Commonwealth Reports to the Anti-Money Laundering and Counter-Terrorism Financing Act 2006 Opts in to the legislation https://www.communications.gov.au/what-we-do/internet/digital-business/security-and-legal/legal-tips https://www.webindustry.asn.au/news-and-events/news/a-privacy-statement-is-compulsory-righthttp://www.oaic.gov.au1.2.9Privacy and confidentiality requirements If a website collects personal information it falls under the Privacy Act (1988). Personal information collected data about an identified person can include customer name, email address and other contact information, photos or videos, and information about the persons opinion or preferences. An entity must have a clearly communicated privacy policy and must contain: The kind of information held How the information is collected and held The reason why the information is collected, held and used How an individual accesses information about themselves seeking correction How an individual complains about a breach of the APP code SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 26 Whether the entity shares the information with overseas recipients Which countries the entity may share the information with Further resources https://www.communications.gov.au/what-we-do/internet/digital-business/security-and-legal/customer-privacyhttp://www.oaic.gov.au/privacy/privacy-resources/privacy-fact-sheets/other/privacy-fact-sheet-17-australian-privacy-principleshttps://www.comlaw.gov.au/Details/C2015C00279 1.2.10 Authentication facility A Login form allows users to enter a restricted page of the website using authentication credentials like a username and password. If a user cannot provide the correct details they will not be given access past the login form. This is useful for users when inputting sensitive information such as payment details, or if the website has a paywall restriction to certain content. Further resources http://stackoverflow.com/questions/549/the-definitive-guide-to-form-based-website-authenticationhttp://www.webdesign.org/5-simple-ways-to-enhance-your-website-login-process.22487.htmlhttp://www.smashingmagazine.com/2011/08/22/new-approaches-to-designing-login-forms/CAPTCHA (Completely Automated Public Turing Tests to Tell Computers and Humans Apart) CAPTCHAs are designed to deter spammers from inputting information onto a website using automated input systems. Automating the process allows SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 27 spammers the high-speed efficiency that can sink blogs and forums with unwanted advertising spam.Image by Torley (2015), Flickr https://www.flickr.com/photos/torley/3410984391/ [ONLINE] is licensed under CC BY 2.0 Further resources http://www.w3.org/TR/turingtest/http://www.google.com/recaptcha/intro/index.htmlhttp://www.smashingmagazine.com/2011/03/04/in-search-of-the-perfect-captcha/1.2.11 Colour, sound, video, images and graphics Including rich media within a website is becoming much easier due to evolving technology; however, just because you can doesnt always mean you should. In every situation you will need to test its usefulness to the overall design and business purpose. Weve all clicked on a link where the destination overwhelms us with unwanted noise and in our surprise we panic and struggle to find the mute button.Colour When selecting colours for your complex layouts, you will either work from an established Style Guide or follow the basic principles of colour theory. As you have learnt in many of the other units so far, colours have certain connotations. This can be used to manipulate how the audience interprets your websites and alter their impressions. Colours are very much a conversation between the audience and the designer; you will get a better response by considering which colour will communicate best. The audience participation can be dependent upon colour. For example, the colours used to gain the attention of children. Sound Adding sound to a website design requires careful thought, it usually annoys people rather than assists their experience so use it sparingly and VERY thoughtfully. Most people are already listening to music when browsing the Internet so if you are going to use it: Dont make it auto-play allow the user control over the play button Keep them short SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 28 Set it to low volume Match the sound to the design Make sure it improves the user experience Video Adding video or an animation to a website can create a richer user experience and with the advent of HTML5, its easier to include. Video can now be added into the full background of a page (usually a welcome to the home page), this can assist in communicating the tone of voice or can show a product in action. Other simple ways of adding videos are embedding the codes of the videos available on Youtube and Vimeo.Images Images within a website set a good first impression and can send the intended message to the target audience very quickly. The trick is choosing the right ones, but if youve done all of the research into how to speak to the target audience and the tone of voice to use, you have a benchmark to compare images to.Here are some hot tips for selecting images as content: Avoid selecting an image as a content-filler Evaluate the image against target audience research Evaluate the images against the clients style guide Ensure its a useful element within the page SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 29 Apple is the brand that communicates perfect user-friendly products, the website features desirable product images with minimal content. https://www.apple.com The Colossal Media website showcases their service as a big, loud image on their homepage and communicates exactly what they do in a simple and exciting way. http://colossalmedia.comSITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 30 Flat lay images of products are particularly appealing on e-commerce sites. Graphics When choosing or creating graphics to include in an interface think about how they all work together, or in some cases contrast against one another. For example, when you use want to use a call to action (an element that actively encourages a user to take action; i.e. a click here button asks the user to click the button), you make this a contrasting colour or size to other elements on the page.Use tone, colour, shape, and size to make an element contrast but not overwhelm the rest of the design elements in the layout.Further resources http://www.creativebloq.com/colour/choose-colour-theme-712364 http://www.digitalartsonline.co.uk/features/illustration/10-colour-secrets-from-leading-illustrators/ SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 31 http://www.everydaylistening.com/articles/2009/6/21/10-tips-for-effective-web-sound-design.html http://www.creativebloq.com/web-design/video-backgrounds-2131982 http://webdesign.tutsplus.com/tutorials/the-web-designers-guide-to-photo-selection--cms-21592 1.3.Determine layout and navigation requirements in relation to appearance, readability, links and ease of operation. 1.3.1 Usability Usability is the act of making sure a web interface or individual elements within it, behaves the way a user expects. The average user must be able to use it for its intended purpose without getting hopelessly frustrated or lost. In his book Dont Make Me Think Revisited, Steve Krug defines usability is when, A person of average (or below average) ability and experience can figure out how to use the thing to accomplish something without it being more trouble than its worth A website must be an intuitive experience for users; dont make them think about what they have to do at any given moment, make the actions self-evident by making the process logical. Ensure everything you place on your site saves the user as much time as possible; i.e. if you ask them to fill in a form and they provide an incorrect response in one field, dont make them fill in everything all over again, only ask them to change the incorrect field. Also ensure images are optimised correctly so that the user isnt waiting for content to load. While a balance between the functionality and the aesthetic appeal of a site is essential, ultimately it is the usability of a website that determines its success (or failure). User-centric design is a top priority because it is the user that determines how they interact with the product. Users get comfortable with methods of interaction, and habits ensure they dont have to think and remember entirely new pieces of information every time they SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 32 go to a new website. For example, there are accepted interaction methods for creating logins or navigating around a site. Unless you have created an entirely new process that is much better than existing ones, dont arbitrarily change the way users interact with your site.Try and make all of your content relevant and to the point. Dont waffle or use overly flowery marketing language; users will see right through it. Develop a voice that matches the business purpose, but dont patronise your users, be clear and direct. Make it easy for users to go home; the home page is generally used as a snap shot of the entire site and users will return here to determine where else they wish to go. Make it easy for them to return by placing a clearly labelled home button in the navigation and making the logo link back to the home page. If you only remember one guiding usability principle, it must be Dont make me think. A well designed web page should allow users to quickly scan it and see the elements they need and think oh there is the link I need or there is the contact form, etc. A poorly designed web page will leave question marks above each element. Your job as a web designer is to remove those question marks. Make everything on the site self-explanatory and obvious to anyone who lands on your page. Small things you can easily do to reduce the amount a user has to think: Make buttons or links look clickable. I.e. use underlines or make it look like a button. (NB the accepted aesthetic style of elements will changed based on current trends; make sure you check these before making any final decisions). Use words or phases that are more obvious to everyone, rather than quirky or jargon filled. I.e. jobs instead of job-o-rama. Further resources http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/ http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 33 If you really want to understand Usability, purchase Dont Make Me Think Revisited (3rd edition) by Steve Krug. This is available in hard copy or Kindle. http://amzn.com/03219655151.3.2 Readability Readable text is essential for a well designed website as it affects how a user processes information and makes decisions about the brand, product or service. It is important that users are able to read your content and absorb it easily. Some elements that effect the readability of a website are: Information Hierarchy this defines how the text should be read and in what order. Larger text elements are most important and to be read first, while smaller text is least important.Contrast in addition to size, contrast can be used aid in creating a sense of importance to a text element and draw attention. Contrast also refers the colours used for background space and foreground text. If the contrast is too low, then a user will begin squinting and will only be able to read for a short time. This is some text to demonstrate why good contrast is essential for readable text. This is some text has much better contrast and is much more readable. This is a heading This is a caption This is some body text to demonstrate poor information hierarchy. THIS IS A HEADING This is a caption This is some body text to demonstrate much better information hierarchy. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 34 Further resources http://www.smashingmagazine.com/2009/03/10-principles-for-readable-web-typography/http://blog.usabilla.com/8-guidelines-for-better-readability-on-the-web/ http://read-able.com/http://webdesign.tutsplus.com/articles/typographic-readability-and-legibility--webdesign-12211http://designshack.net/articles/typography/the-importance-of-designing-for-readability/User-friendly headlines make your headings meaningful and keyword rich. Dont assume your users will know what they are searching for. They may spot your headline and decide based on its description, that its the content they want to know about. http://www.webdesignerdepot.com/2009/10/blog-headers-20-great-examples-and-best-practices/White space Dont fill every part of the website, give users a chance to breathe and find what they are looking for. White space is as important in web design as it is in print design. White space can be used to naturally group content into content modules and it can be used to create scannable and readable text. 1.4.Identify and apply accessibility requirements for website to ensure maximum accessibility. Now that you are into the stage of building your website, you will need to pay close attention to accessibility requirements. Review these carefully and ensure you understand how the various hosting services implement each one. W3C Accessibility Inclusive design, design for all, digital inclusion, universal usability, and similar efforts address a broad range of issues in making technology available to and usable by all people whatever their abilities, age, economic situation, education, geographic location, language, etc. Accessibility focuses on people with SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 35 disabilities people with auditory, cognitive, neurological, physical, speech, and visual impairments. Web accessibility initiative [ONLINE] http://www.w3.org/WAI/users/Overview.html [Accessed 24 June 15]. Today, web designers need to consider all browsers, operating systems and devices when building websites. The term interoperability refers to the production of web pages viewable in standard web browsers across various operating systems such as Windows, Macintosh and Linux, and across a range of devices such as PC, tablet and mobile. Below are some examples that will help you understand the importance of building accessibility into your online designs: Visual impairment: Use alt text on all images; this provides users access to the content of images including people using screen readers or Braille output devices. Alt text is supported by most document formats, including HTML, Microsoft Word, and Adobe PDF. Use headings and subheadings to form an outline of the page. They help non-visual users (including search engines) to understand how the page is organised, and make it easy for screen reader users to navigate. In HTML, use the and in PDF, use tooltips so that non-visual users will know which labels or prompts are associated with form fields. Be sure foreground and background colours have adequate contrast. Users that experience colour blindness may find it difficult to distinguish between low contrast colour combinations. There are many free tools that can help with this. Since users may be unaware they can increase font size using browser hot keys, use a reasonably large font size by default; then, users can make it smaller if desired.Providing plenty of space between lines and blocks of text can help users who have difficulty tracking text horizontally. Adequate white space also contributes to a cleaner, more aesthetically pleasing interface for everyone. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 36 Use text instead of pictures of text, and control its appearance using CSS. Pictures of text become blurry when enlarged, take longer to download, and are inefficient for the website author to edit. They also inhibit users using screen readers. Keep your content simple to read and understand. Often web authors use larger words and longer sentences than is really necessary. Hearing impairment Put captions on videos or provide transcripts of audio content. There are many free, easy-to-use tools available that support the process of transcribing and captioning videos. Other support systems Choose a dropdown menu system that works for all users. Ask questions like: can this menu be operated by keyboard alone? If so, is doing so efficient or does it require dozens or hundreds of keystrokes? Make sure that your organisation's LMS or CMS supports accessibility. Make sure there are accessible themes, plug-ins, and modules available that will meet your needs. Further resources http://www.adobe.com/inspire/2012/04/what-are-web-standards.htmlhttp://www.w3.org/TR/WCAG10/http://www.w3.org/WAI/http://www.w3.org/1.5.Document structure clearly and accurately to facilitate an efficient development process. Your projects design and technical specification documents are now your road map to guiding the project through the next stage the development of the website. Consider the specification documents from the viewpoint of the client; it is the only tangible thing they have until the website is live. Now consider them from the viewpoint of the developer taking on the project to make the site active. Clear communication through your document will ensure the final stage is smooth. Even if you are the developer that SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 37 builds the website, using a hosting service, this document with ensure you meet all design and technical specifications. Now that you have written and modified these specification documents, you can understand why they are important, that there is a lot of content and thinking that can easily get lost if it isnt correctly tracked and managed. Here a few extra tips for future documents: Time spent on the document should be proportional to the clients budget Not making a decision is a bad decision Ensure the functionality described in the document is achievable Avoid misunderstanding by using client-friendly language in your document 1.6.Develop and integrate appropriate interactive forms into the website structure to capture customer data. The requirements of your Brief will dictate the types of interactive forms you need to include in the design of your website. Some possible ones include: 1.6.1 Contact forms Contact forms are a standard part of most websites and they can be critical to a businesss growth. Forms are usually used to create a relationship between user and business, and they can allow collection of data that is added to a database of visitors details. However, there are some strict guidelines surrounding when and what information can be collected and used.1.6.2 Opt-in forms Each contact is a potential loyal customer and can be communicated to through avenues such as e-newsletters notifying them of current product offerings. In order to collect and use this information you must comply with the Australian Spam Act 2003. The Spam Act 2003 prohibits the sending of unsolicited commercial electronic messagesknown as spamwith an Australian link. A message has an Australian link if it originates or was commissioned in Australia, or originates overseas but was sent to an address accessed in Australia. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 38 You must have: Express consent; a record of all consent must be kept, who gave the consent and how. The sender must be able to prove that consent was provided. An unsubscribe link You may not: Pre-check a tick box Send unsolicited emails, even if they send you a message first via a contact form. You must have express consent. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 39 Further resources http://www.austlii.edu.au/au/legis/cth/consol_act/sa200366/http://www.acma.gov.au/Industry/Marketers/Anti-Spam/Ensuring-you-dont-spam/key-elements-of-the-spam-act-ensuring-you-dont-spam-i-acma1.6.3 Feedback forms Customer feedback forms help a business improve customer satisfaction in a very direct way. But they can be executed badly and leave the user feeling like they have wasted their time with complicated questions with nothing coming back. Lets look at some good ways to engage the customer: Look at the business objectives before designing the form, this will assist in the tone of voice of the questions Design relevant questions e.g. were you served quickly? instead of what newspaper do you read? SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 40 Image: Caspio (no date) Free App: Feedback System for Your Websites and Blogs - Caspio Blog. Available at: http://blog.caspio.com/caspio-news/free-app-feedback-system-for-your-websites-and-blogs/ (Accessed: 22 July 2015) 1.6.4 Payment form A good example of customer usability is GitHubs payment form where functionality is priority. When you enter your credit card details, the credit card provider is automatically recognised and visually highlighted, a good example of invisible design.

https://github.com/join SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 41 1.7.Select authoring tools and software based on website requirements. When building websites there is a range of authoring tools and software you can use. Ultimately the one you choose will depend on the type of website you are creating and your proficiency with code. If you are familiar with HTML and CSS and can code a website, then you may use tools like Notepad ++, Sublime Text, and Coda, to name a few. If you are using a hosting service like Wordpress.com, Wix or Weebly, then you will be using a visual interface to author your website. This will most often involve drag and drop functionality or visual design editing facilities. If you were to use Wordpress.org or Drupal, then you would use the text Editor that is built into their CMS interface.We will discuss a few of the different options you have, however you may need to conduct independent research to determine which is the most appropriate option for you and your project. Other text editors: https://www.elegantthemes.com/blog/resources/the-11-best-code-editors-available-in-20151.7.1Adobe PhotoshopPhotoshop is used to create prototype artwork ready for a developer and also to optimise image and graphic content for inclusion in website development software. Photoshop is part of the Adobe Creative Suite available by monthly subscription. 1.7.2Adobe DreamweaverDreamweaver is software used by industry professionals to develop websites and it includes features that help beginners that are learning HTML and CSS. Some of these features include: Code highlighting helps you scan your code and spot errors, with each type of code there is SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 42 a different set of highlights to help you differentiate between the various languages. WYSIWYG editing (what you see is what you get) allows you to have a visual of what your code is doing as you are coding. Code suggestion lists become available tags as you type, which helps if you are learning HTML. Dreamweaver is part of the Adobe Creative Suite available by monthly subscription. 1.7.3Wordpress.orgBefore we get into the free hosting service options that are available, lets quickly talk about the paid Wordpress.org platform. Wordpress started out as a simple blogging system but has since evolved into a full CMS (content management system) through the inclusion of a multitude of possible plugins and paid themes. The core software is built by a community of volunteers as an Open Source project that means its made by the people, for the people. Wordpress.org requires a domain name and an independent hosting server to run a website. You will also need some coding knowledge to fully take advantage of its editing capabilities. You have access to thousands of plugins that build functionality into the based Wordpress template. There is a large community of developers involved in building and selling robust and well-coded template themes for Wordpress.org The wordpress website contain free themes here: https://wordpress.org/themes/browse/popular/Paid Wordpress templates are available too which often come with user support and instructions which can get you out of hot water, you can find a range of paid templates for various categories at the following websites: http://themeforest.net/category/wordpresshttps://wordpress.org/themes/commercial/SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 43 Before you choose your template, investigate its features carefully and be sure it has the functionality required for your project requirements, e.g. does it offer a shopping cart feature? Wordpress.org provides many more options for editing structural code and additional drag and drop editors. The code editor requires you to have some knowledge of HTML and CSS, and PHP if you intend to editor the structure not just the styles. Wordpress.org also gives you the ability to add additional functionality through plugins and add ons. To use Wordpress.org you must have your own external hosting and domain name, which is an added cost. You have access to free and paid themes; the paid themes are usually more robustly created and it is important that you check reviews and support forums to ensure the theme is a well created one. Case Study Paid themes To give an example of the things you should be looking for, we will look at a popular theme on Themeforests website, the theme is called Salient. http://themeforest.net/item/salient-responsive-multipurpose-theme/4363266The initial view is designed for the customer, the themes features listed, the license options, the price, comments and support tabs are all displayed very clearly. As we scroll down the page, we are shown the number of sales, user comments and buyer ratings. All of this information is vital in choosing a user-friendly template. We are also shown examples of the theme in use in a variety of applications. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 44 Scroll down the page further to read a list of included features. Scroll further down to peruse customer feedback and extended feature lists. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 45 1.7.4Wordpress.com https://wordpress.com/The advantages It is free It has well designed templates It is a robust platform It is easy to give clients or other team members access to add content The disadvantages Unlike Wordpress.org, Wordpress.com is still the base blogging system with limited editing capabilitiesYou cannot use or add plugins to extend functionality You cannot edit the code without paying extra There is minimal design editing capabilities There is no drag and drop, so you cannot edit the content structure You dont own the website itself, Wordpress.com does. SO if you wanted to sell it or move it, it would be difficult, if not impossible 1.7.5Wix http://www.wix.comThe advantages Its free It has visually appealing templates It has a easy to use drag and drop system It is easy to customise the layout and visual elementsPreviewing is simple Forms are easy to create There is an app market for extending functionality The disadvantages It only has sub-domain names unless you pay extra More robust e-commerce functionality costs extra SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 46 1.7.6Weebly http://www.weebly.comThe advantages Its free It has a drag and drop interface for easy customisation It has blank templates available that make it very easy to turn your prototypes into working websites It is easy to updated media It is easy to change the layout of content It is easy to change visual elements to match your Style Guide The disadvantages You dont get your own unique domain name unless you pay extra costs Some of the themes have very mediocre aesthetics You dont get to control the user flow as much as a coded website There is very little available to extend the built in functionality 1.8.Identify and integrate website security requirements into the development process. When a business operates online, its imperative to have effective security of the website. Even more so if you are planning to sell product online, providing your customers a secure environment to perform transactions is critical in the success of the business. You have a legal obligation to keep your customers information secure (see section 1.2.10 Privacy and Confidentiality requirements). Some points to ensure a secure website: A login facility for customers with encrypted password protection Up-to-date software including your operating system and any software used by your website (e.g. a CMS) Not all hosting services offer the same level of a websites security, background research is important to finding the appropriate host If using a CMS (ie. Wordpress) be sure to apply security patches quickly SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 47 Use strong passwords to your server and website administration area and advise customers to do the same within the form layout Use a website security tool SSL (Secure Sockets Layer) When entering sensitive information consider when you press the send button, the information is sent from your computer to a web server and from the web server back to your computer. This information, unencrypted, could be viewed by anyone. SSL uses key exchanges to encrypt the data before transmitting it across the web giving you a secure connection.Users can check whether the website is secure by the web page beginning with https instead of the standard http. The s means the username and password will be encrypted before sent to a server. Another way to check is to look for a lock icon. Further resources http://www.creativebloq.com/web-design/website-security-tips-protect-your-site-7122853http://info.ssl.com/article.aspx?id=10068https://www.communications.gov.au/what-we-do/internet/digital-business/security-and-legal/your-computers-securityhttp://www.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 48 2.Develop website content 2.1.Select and use business information to create website content according to business website strategy. You may be provided content directly from a client, by a Copywriter or be expected to create it yourself. Regardless of where the content comes from, you will most likely need to edit and adjust the text to make it fit the tone of your website style and user. A content inventory/audit/assessment is a great way to ensure it fits with the clients brand personality and business purpose.A content inventory may include: Page title and URL for every page List of all downloadable files (publications, resources, fact sheets, etc.) List of all graphics to be uploaded (file name, file location if already provided) List all text content being provided by the client (description of text or actual text if already provided) Content relationships usually the site hierarchy Is the tone of voice correct Is it accurate or are there mistakes to be fixed Date last updated Content owner Any copyright clearances that have been sourced The best way to evaluate this information would be to put it in a table like the one on the following page, to track your audit progress. Use one of these tables for each page of your website and track the content coming in or being created to ensure it suits the business purpose and personality.SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 49 Create a new table for each website page. !"#$ &"'$ ( )*+, -./ !"#$% $' ( )**+,--./0/12.34536758.9-/:.;*( )*+#, /*&3+-, %- #(%: #?#(,4# /-%4 /+')(&%'&'$ %- 1,&'$ +#*13,7 "# *' ,'.*'),4,'( %- :+-,3? *,#(.,(&) &' 9*3+,2 1+( 6%,#'>( &4:*)( %' /+')(&%'*3&(? %- +#*1&3&(?7 D.&"!" .%$,%&88E&8$C7&/BC$8&/ 6'0'+8"# &' (., :-%),## 1+( .*# '%( 1,,' #(*-(,6 ?,( @*# 1,,' #(*-(,6 *'6 1,&'$ 0%-=,6 %'7 A33 #+,# .*9, 1,,' -,#%39,67 B. :*-(&)+3*- #+, .*# 1,,' /+33? -,#%39,6 *'6 &( )3%#,67 Further information https://snowy-evening.com/ free version of issue and bug tracking software. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 58 3.Create website pages 3.1.Create a plan for website pages and active links to meet layout and navigation requirements. Your design specifications document for your project will include your strategy for the naming of all navigation links within your website. You should also document your planning of the titles of links that sit within text content and how they relate to other pages within your website. For ease of navigation, both top-level links and in-text links need to stand out in contrast to other elements on each page for the user to identify them as they scan the pages content. Links can be made to stand out by using one of the following techniques: Underline Bold Colour change If you decide to apply a style to links, make sure that style is applied to nothing else within your layout design, if your links are coloured green and you have applied green to headings within text, users will become confused. http://www.smashingmagazine.com/2010/02/13/the-definitive-guide-to-styling-web-links/Refer to your specification documentation for your site map, wireframes and hi-fidelity mock-ups to plan out your website structure. 3.1.1 Site map Sitemaps are an excellent resource for tracking and organising the pages you will build and how they interact with each other. This is a planning tool that you will use to: Map out the structure of your site Determine your top level navigation Organise your page hierarchy Categorise content into logical groups Organise the order of pages to create a logical flow Organise content to meet business purposes and goals SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 59 You can represent your sitemap data in two ways: Sitemap Outline 0.0 Index 1.0 About us 1.1 Company background 1.2 Biographies2.0 Shop 2.1 Individual item 2.2 Cart 2.3 Checkout 2.4 Success 3.0 Contact 4.0 Blog 4.1 Individual blog post Sitemap Diagram SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 60 3.1.2 WireframeDigital wireframe example: Sketched wireframe example: SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 61 3.1.3 Hi-fidelity Mock-ups 3.2.Select page titles and key words to reflect business purpose and website content, and to assist access via search engines. The title of each of your web pages is important, some people use a generic title and apply the same name for each of the pages within the website. Labelling each page title to include keywords helps the user figure out if they are in the right place or not because the page title appears in the URL of their browser. Not only that, each page will show the keywords in search engine results pages. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 62 3.2.1Search Engine Optimisation (SEO) Common search engines include Google, Yahoo and Bing. They show and rank web pages and content according to what they consider most relevant to users. Page titles of web pages, images, videos and other content is shown in search engine results and well-named content can confirm to users that they have found what they are looking for and are more likely to click through to the page. Search engines perform several activities in order to deliver search results. Crawling - Process of fetching all the web pages linked to a website. This task is performed by software, called a crawler or a spider (or Googlebot, in case of Google). Indexing - Process of creating index for all the fetched web pages and keeping them into a giant database from where it can later be retrieved. Essentially, the process of indexing is identifying the words and expressions that best describe the page and assigning the page to particular keywords. Processing - When a search request comes, the search engine processes it, i.e. it compares the search string in the search request with the indexed pages in the database. Calculating Relevancy - It is likely that more than one page contains the search string, so the search engine starts calculating the relevancy of each of the pages in its index to the search string. Retrieving Results - The last step in search engine activities is retrieving the best-matched results. Basically, it is nothing more than simply displaying them in the browser. http://www.tutorialspoint.com/seo/what-is-seo.htmFurther resources http://www.hobo-web.co.uk/seo-tutorial/http://webdesign.tutsplus.com/series/seo-fundamentals-for-web-designers--webdesign-9715 SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 63 3.3.Improve page presentation by adding features to enhance web pages. Your web pages have already been developed using the design process and should reflect good use of the elements and principles to ensure an overall balance of all elements. As your project develops, if additional ideas come to you as it has evolved, apply evaluation methods to ensure these ideas fit within the project requirements and the expectations of the client and that they arent just another good idea.If these good ideas havent gone through the design process (drawn, drafted, redrawn and redrafted) then its highly probable that they are just adding unnecessary fluff to the project.If you have applied the design process to new ideas and they fit within the project specifications and requirements your project team members should have been kept in the loop even at the earliest stage of your thought process. Make sure you communicate your intentions to your client, project manager, other creatives, or all of the above. Once you bring your designs into a web environment and hosting service, you may realise the technical restrictions of the available themes will increase development time too much to change. At this point it may be quicker to adjust your design mock-ups to meet the requirements of the theme template. You should still take your new ideas through the design process to evaluate their ability to meet the Brief, business purpose and user requirements. If at all possible, find a theme that matches most of you existing design mock-ups. Adjust any existing content with user experience as the top priority. You may choose to include elements such as: Animated sequences Sound Movie sequence Downloadable files Add bold or italics to text content to emphasise or highlight SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 64 Different fonts and font sizes to improve information hierarchy and scannability of content Colour make sure any colours you use fit the established colour palette. It can be used to highlight or emphasise elements Include images, e.g. photographs and graphics Bulleted or numbered lists to arrange text content this increase readability of content and improves user experience as it breaks content into manageable chunks Tables to arrange tabular content Interactive forms for bookings, enquiries, shop purchases, feedback, or email list sign up 3.4.Develop linked web pages according to website plan, ensuring links are clearly named and unambiguous. As discussed earlier on in the unit, page titles and keywords should be strategically named. Similarly, links should be clearly named and user-centric. This level of planning should happen in the early stages of developing your design specifications document with a future-friendly system of naming in place. Your website will include relative or absolute links. 3.4.1Relative links Relative links are used when linking between pages of the same website, the source and destination anchors sit within the same domain name.3.4.2Absolute links Absolute links are used when linking between two different websites, the source and destination anchors are under separate domain names.http://www.smashingmagazine.com/2014/05/02/responsive-design-begins-with-the-url/Jessica Hisches website shows examples of both relative and absolute links, the image on the left shows one of her own portfolio pages within her website which is a relative links and the image on the right is a link to a blog source for web design topics. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 65 When using Wordpress, you will use Permalinks to link to content. You have the ability to create top-level navigation from pages and blog categories. These can be added automatically or manually to create the user flow you desire. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 66 3.5.Use appropriate techniques to create interactive forms within website pages. Each hosting service has very detailed documentation on how to integrate a Mailchimp form into their website themes. Those thinks are below. Most hosting service themes will also have build in contact forms. You will need to evaluate them to determine if they include the required information in them. If they dont you may custom create a form in Mailchimp and embed it into your contact page. Instructions for Mailchimp integration in each hosting service: Wordpress.com - http://kb.mailchimp.com/lists/signup-forms/add-a-signup-form-to-your-websiteTo add a generic contact form, Wordpress.com has an Add Contact Form button. This allows you to add any fields you wish and set up an email notification. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 67 To add a Mailchimp opt-in, you will need to create this in Mailchimp and then copy paste the embed code into the Text widget; as seen on the next page. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 68 Wix - https://connect.mailchimp.com/integrations/wixs-mailchimp-subscribe-formhttp://www.wix.com/app-market/ SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 69 Weebly - https://connect.mailchimp.com/integrations/weebly-signup-formhttp://kb.weebly.com/newsletter-form.html3.6.Create all pages to be consistent with site design specifications. Your client and the rest of your project team are expecting to see a certain outcome based on your initial briefing and consistent communication with them over the course of the project. The final website needs to reflect your approved research, mock-ups and reflect the interactivity that has been agreed upon. The methods you use for creating each of your pages will be dependent on the hosting service you researched and agreed upon with the Client. Each of these services has very detailed instructions and tutorials for using their themes and templates. Below is a list of some embedded Help options in each hosting service, plus a video tutorial. You will find many tutorials through Google if you need more assistance than this. As always, if you find you are spending more than a few hours a day trying to find a solution, be sure to contact your trainer to get additional support. 3.6.1 Using Wordpress.comWordpress is a well-known industry standard CMS platform. Wordpress.com is the free hosting service option; it doesnt require you to have a hosting package, or buy a domain, or know any code. While the level of control you get from using your own hosting and knowing code, it is not essential to build and launch a website for a small business; especially if they are still testing the market to determine if their business is viable.SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 70 Picking a theme You have a number of options when picking a theme in Wordpress.com; they are categorised by: Staff picks These are themes that have been chosen and featured by Wordpress staff. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 71 Trending These are themes that are being chosen and/or searched for regularly by users. Subject type Dont feel like you have to choice a theme to match the subject of your website. You can choose a theme based on the structure of the content and customise it to match your subject. oAll types oBusiness oWedding oMinimal oTravel oFood oMusic Required features oCustom header oCustom menu oCustom background oPost slider oFeatured images oCustom colours oInfinite scroll Layout styles oAll columns oOne column oTwo columns oMany columns oResponsive Colours oAll colours oDark oLight oBlue oGreen Pink oRed SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 72 oOrange PriceoAll oFree oPremium (paid) When you choose a Wordpress theme to use, try to look at the structure of the content, rather than just the visuals and imagery used. These are important too of course, but they can be customised, the structure of content modules cannot be changed. For example, you should go back and look at your website plan and determine if: Are you using a horizontal or vertical navigation bar? Is it a list or block? Do you have a slider? Is it above your navigation or below it? Does it take up most of the screen? Do you have a gallery of images on the home page? Do you have a large image on each blog post, or a small thumbnail? Do you use right side navigation for blog post titles? Do you have social media icons and where do they sit? All of these questions and considerations will determine the theme that you choose. View each theme objectively and consider the blocks of content. So when you are looking at each theme and you click into one, you will see the following. The list on the right will provide you with a list of all of its features, check these to make sure they meet your requirements.You will also be able to see a demo of the site. It is important that you explore this in detail, so you understand all of the interactions and functionality. Make an informed choice based on usability, functionality, and aesthetic appeal, not visuals alone. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 73 Updating the layout When customising your Wordpress layouts, you will have access to a customise tab. This will allow you to adjust visual elements, but not structural layout options. You can also test to see how your site will look on Desktop, Tablet and Mobile platforms. This is an important consideration when choosing your theme. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 74 Creating your pages Creating new pages is really simple in Wordpress. If you click on Pages in the left side navigation you will be taken to a list of all your pages so far.SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 75 Hit the Add New button and you will be given options for adding content to your pages. There is no drag and drop in these themes, so you will not be able to control where the content is laid out, however you can choose the styling of the text. Be sure to add in a Page Title that accurately describes what the page is about; this will be the title that appears in the main navigation. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 76 If you wish to add sub-navigation pages: 1.Create the main page with no parent dropdown selected. 2.Create a new sub-page with the main page name selected in the Parent dropdown. You can set a featured image in these settings; depending on your theme this will show up if you add a slider to your homepage or as a thumbnail for a post. You have publishing options here too, as you will need to publish each page individually. See section 4.3.2 for more details on this process. Support options Internal - https://learn.wordpress.com/Video tutorial - http://www.lynda.com/WordPress-tutorials/WordPresscom-Essential-Training/141506-2.html3.6.2 Using Wix Picking a theme Themes are available under the Templates link and provide a large selection to choose from. Each theme has been custom-created using the Wix drag and drop editor and all you need to do is edit the content to match.This can be a good option if you havent done extensive work designing and prototyping a website for your client, or they dont have a lot of time or budget for you to create their site using a blank template.These templates are also very handy to see the functionality and layout options you have available to you in the Wix system. Explore these thoroughly and note down the elements that work and how you could customise your designs to match. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 77 SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 78 Updating the layout If you dont find the pre-made templates appealing or you cant find one with a structure to match your prototypes, Wix has blank templates available that you can fully customise. These blank templates allow you to use the drag and drop builder to structure your site to match your designs. The benefits of this method: You will easily follow the design mock-ups and plan previously approved by the client SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 79 You wont feel locked in to one method of functionality and can experiment with the options available The disadvantages of this method are: It can be difficult to imagine how the site will be transformed when the template is empty You wont always know what functionality is available until you see it in action.To work around these disadvantages, thoroughly explore the themes available and see how they have been constructed, this will provide you with a basis to build your own on. Building your pages Either add a new page via the Pages icon on the left, or pick a pre-created page to edit.Click on the + button on the left to Add elements to your page layout. There are many options available, so work logically through your website structure and plan. Updating the layout Wix uses a drag and drop method for adjusting your layout content. This is a very simple method and allows you to pick up and move your content modules around the page. There are guides that help you to align your modules and maintain your grid structure. You can update design elements: Background you can use an existing background image or texture, or you can customise this by uploading your own. Colours you can use an existing colour palette or customise it and create your own SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 80 Fonts there are font combination options available for you to use, however you can customise these to match your Style Guide. You are able to customise all type options; title, menu, headings, and body text. To add a store and products, you will use the bag button at the bottom of the left navigation. You have the option to add products, add store elements and to manage your store. Manage store this allows you to see all of your store settings. You can also upload a new product from here. Add products this allows you to upload your products and edit their individual settings. You can also edit the store settings from here. Add store elements This allows you to customise your product gallery and shopping cart settings. Support options Internal - https://www.wix.com/support/html5/Video tutorial - https://youtu.be/WRU83c06luMThere is also a Help Center you can access from inside the editor. Click on the blue question mark and a Help Center box will pop up to guide you through the process. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 81 3.6.3 Using Weebly Picking a theme 1.Add a site 2.Choose the focus of the site since you will eventually need to add shop elements to your website, you should pick Store at this point. 3.Choose a theme as with the other hosting options, you can customise your search via a couple of criteria. Again, focus on the structure of the template content, not just the visual appeal. a.Style All styles Bold Corporate Fun Large image Minimalist Simple Sleek Unique SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 82 b.Colour Orange Red Pick Purple Dark blue Light blue Green Yellow Black 4.Choose your sub-domain as with the other hosting options, you will be given the option to use your own domain or a free sub-domain. If you were working with a real world client, you would always choose and purchase a specific domain name. It is not professional to use a sub-domain service when projecting a corporate, professional image. However, for the purpose of this simulated project and assignment pick a sub-domain that is meaningful and available. 5.You can now build your pages and featured elements. Building your pages Weebly also offers a drag and drop interface that allows you to drag elements from the side navigation onto your page. 1.Click on a page title in the navigation 2.Choose a layout pick one that closely matches your prototype, you will be able to move elements around later. SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 83 3.Delete any elements you dont wish to include 4.Add all of the pages in your prototype and plan SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 84 Updating the layout Once you have a base layout for every page in your prototype and planning documentation, you will need to update the structure and aesthetics to match your mock-ups. You can drag any missing elements from the side panel directly into the layout and you can click on elements in the page and update their styles. Support Options Internal - https://weebly.zendesk.com/hc/en-usor https://weebly.zendesk.com/hc/en-us/articles/201696307-Beginner-s-Guide-First-StepsVideo tutorial - https://youtu.be/I7PjTgpgqn8 SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 85 4.Select and use a web hosting service 4.1.Identify relevant sources of information on web hosting options. There are a few different types of hosting services available to you. There are website hosting services like the ones we have discussed in previous sections, and there are hosted servers. Here we will introduce you to these hosted server options.When researching options for web hosting services, there are a variety of places you can look for valuable information: Internet service providers (ISPs) A quick Google search for ISPs within Australia will give you a range of results to look deeper into. All ISPs have a website with their products clearly displayed ready for research. It could be valuable to ask industry friends which hosting service they prefer. Industry associations Look to professional bodies for advice. http://www.aimia.com.au IT media reviews and articles Trusted publications will present useful information on choosing an ISP for you/your clients needs. http://au.pcmag.com/dreamhostcom/35484/feature/business-choice-awards-2015-web-hosting-servicesAfter you have done some research into service providers, check out some customer reviews to see how happy other customers of that service are.4.2.Evaluate different web hosting services and select according to business and technical requirements. When it comes time to build your website, there are a few options available to you. You can use a free website hosting service and website builder or paid server hosting. 4.2.1 Free Hosting services When choosing a free hosting service option, like Wordpress.com, Wix and Weebly these are the considerations you need to take into account.SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 86 Advantages Simple for clients to update content Free to use You dont need to know how to code Drag and drop functionality allows you to easily edit the layout of the interface. Templates are available. These reduce the amount of initial structural work and the layout of content and styled elements can be customised The templates usually have an adequate visual appeal, which can easily be updated. This can be a good option for clients, if: a.They dont have a large initial budget b.They want to test the market before committing to a large web development process Disadvantages Only use a sub-domain name; to get a dedicated domain name, one must be purchased and the account upgraded Limited bandwidthand speed Wordpress.com doesnt give SEO customisation options The available templates may not match the designs that were approved by the client or it takes a lot of time to find the right template that does match Any custom components or programming will require a paid upgrade Due to the sub-domain format, it is harder to rank well in organic Google searches Once you decide you want to move your design and content to a new paid hosting and domain name, you will have to start over. The code cannot be moved. Can take longer for pages to load Ads are placed on the site 4.2.2 Upgrading to a paid plan If the client decides they like the site you created on the free website builder but they want to have: SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 87 Their own domain nameLarger bandwidthA more robust ecommerce platformNo ads More storage You can discuss the option of choosing a paid subscription plan with their current hosting service. There are a number of options available to them and a tiered payment system depending on their needs. For example, these are the paid packages available on Wix: SITXICT001A Build and launch a website for a small businessLearner Guide eBook v1.1 P a g e| 88 4.2.3Paid hosted servers The alternative to free hosted services and website b