Web Guide

These guidelines have been put together by the Public Affairs Directorate to help you when creating pages for the web.

 

Points to bear in mind

  • People read differently online.
  • They won’t necessarily read from left to right.
  • They will scan pages rather than read every word.
  • They will focus on headings, subheadings, bold text and links.
  • They may not scroll down and therefore could miss text at the bottom of a page.
  • They might set their screen to ‘text only’ or be using screen reader software. This means that they won’t necessarily see web pages as you do. With this in mind, it is best to avoid referring to images or the next column in a table.
  • You should avoid using ‘click here’ as this is meaningless to screen reader software. Label your links descriptively (“see Undergraduate Prospectus”, not “for Undergraduate Prospectus click here”).

 

Creating a website

Planning
  • Effective planning at the beginning will ensure that whatever time or money is invested will not be wasted.
  • Know your target audience/users.
  • Remember, the site is not for you; it is for the site users.
  • User-focused content and site design is critical.
  • Future users of the site will determine its success, not internal critics.
  • Good navigation is essential. The user wants to click on links and find what they are looking for as quickly and easily as possible.
  • A good website is uncluttered and simple to use.
  • Use plain language. Avoid using jargon that your audience may not understand.
Site objectives
  • Why do you need a website? If it is just because everyone else has one, is that a good enough reason to spend your time and effort on it? A bad website does more harm than no website at all.
  • Identify the main objectives for your website. Are they promotional, training, marketing, information, community-building? You may have more than one objective for the site.
  • A good website is well maintained and constantly reviewed; is the commitment there to do this?
  • What are the longer-term goals? Try to be clear about goals and objectives and document them.
Gather information
  • Look for similar websites. This will show you what others have achieved and allow you to take on the role of a user.
  • What works well for those sites? What doesn’t work? How will your site be different? Look at content, navigation, writing style, etc.
  • If you are redesigning an existing site, analyse the ‘web metrics’ such as server log file statistics or Google Analytics. They are an invaluable source of information about your existing site visitors – what they are looking for, search words they are using, how they navigate through the site and where they are based around the world.
  • Identify your target audience and consult a test group if possible. The needs of your audience should determine the content and design of your site.
Budget and resources
  • Your budget will often determine your project scope; it may even restrict your ‘site objectives’.
  • Will you need to invest in technology to run your site? Will any of it require a database? Scripting?
  • Be realistic about what resources you have available; how often will you be able to update your site? Plan your content with this in mind (linking to central resources wherever possible will ensure that information is kept up to date).
Success Criteria
  • Write down what the success criteria for the site will be and review regularly.

 

Accessibility Standard

Universitas Brawijaya is committed to providing an accessible web presence that gives members of the public and members of the University community full access to University information, courses and activities offered through the web. It is also committed to establishing a minimum accessibility standard for web pages, and to encouraging web publishers to exceed the minimum accessibility standard. If you use assistive technology and the format of any material on our websites interferes with your ability to access the information,

please contact the webmaster of the website concerned in the first instance

. Please Contact the University webmaster as a

second

point of contact.

Universitas Brawijaya Web Accessibility Standard

Universitas Brawijaya endorses the Guidelines of the World Wide Web Consortium (W3C) as the standard for World Wide Web accessibility.

  • Web pages published or hosted by the University should comply with the University’s Web Accessibility Standard.
  • A text-only version of an inaccessible web page should be offered only in cases where extraordinary measures would be necessary to make that web page compliant. The text-only version of the web page must contain the same information and equivalent functionality and be updated whenever the inaccessible web page is updated.
  • Where undue administrative or financial burdens may be incurred in achieving accessible web pages, alternative formats may be used to provide information to individuals requiring it.
Help for Web Publishers

Information about training, checking tools and examples of Website Development can be found at

Responsibility of Web Accessibility

The unit responsible for the information in web pages is also responsible to make sure that the web page complies the standard of University Accessibility described in this policy. Development of accessible web page should be prioritized for the information of core institutions, such as study programs, registration, admission, and information of student’s and staff service. Unit with big website with core institutional information must make it a priority to make sure that the access to the most accessed pages is alright.

Testing of Accessibility and Usability

A number of Web browsing software (including text-only browser), a number of workstations, validation, and evaluation tool must be used to test the accessibility and usability of web page.

 

Writing for Web Pages

Points that should be remembered

  • In online web, people read differently.
  • They might not read from left to right.
  • They will tend to scan the pages instead of reading every word.
  • They will focus to read headings, subheadings, bold text and links.
  • They might not be able to scroll down and can’t read the texts on the lower parts of the page.

Writing and editing text

Tone of the writings
  • Make sure that the tone of the writing are authoritative, brief, and accessible.
  • Use standard language. Speaker of other language will also read your page. Avoid using jargon that might not be understood by your audience.
  • Check writing guide and style of the university for standard writing regulation.
  • If your unit use specific style, make sure that your page adhere to it.
  • Place important content on the upper part of the page. Additional information might follows.
  • Include words and phrases that will be used by your target audience, especially in heading and initial paragraphs. This will help your pages to appear in search engine and make your reader sure that they are looking at the correct page.
  • Use brief paragraph. Use bullet points if possible.
  • Keep your pages short – cut unnecessary texts anytime possible, or separate a long page into several short pages.
  • Avoid using ‘back to’ – your reader might come to the page from different entry points, and they might not understand what you mean by back to.
  • If you use existing print publication to produce pages, the content should be managed and re-edited. Web content usually is only a half of printed content.
  • Check about copyrights when using third party content, such as picture, text, and give credit to source if necessary.
  • Get permission of related party is you write on behalf of departments or faculty.
  • All of the web pages must be planned, written, and corrected prior to publication.
  • Date of modification and position title or departments of page writer should be mentioned, if necessary.
Headings
and links
  • Use headings to summarize paragraphs and sub-sections so that the reader can scan the page without having to read all of the texts.
  • Headings for links in right menu of university site must be written in sentence, for instance ‘also see’, ‘related links’.
  • Avoid using links in your texts. collect links in one place, such as right menu of university site, or in the bullet points in your text.
  • Use ‘anchor links’ if you need to put many texts in one page, which will then be connected to main positions in the text. This will make it possible for reader to directly go to the content that they want to see, instead of scrolling large texts.
  • Label your links clearly (“see Undergraduate Student Candidate”, instead of “for Undergraduate Students, click here”).
  • Avoid using individual email address-use generic email if possible.
  • Make sure that all links work well before publishing the page.

 

Search Engine Optimization (SEO)

The followings are several tips to help you in considering the optimization of search engine for your web page.

Keywords and Phrases
  • Know your audience. Include words and phrases that might be used by the target audience for your pages. For example, if you make a page describing ‘job opportunity’, is that the keywords that will be used by your audience. Is term like  ‘job’, openings’ or ‘job openings in universities’ will be needed, or combination of all?
  • Some search engines give more concern on words and phrases in top part of the page, so include the keywords and phrases, especially, in the headings and some early paragraphs. However, you should keep on repeating keywords and phrases in your page because search engines also paying attention to the amount of words and phrases that are repeated.
  • Use specific and generic words and phrases that are related to your page.
  • Keywords and phrases should always be relevant to the content of your page and target audience, not to increase the rank of your search engine.
Title Tag:
  • Words in title tag is very important in determining the rank of your page in search engines.
  • It is very important to make sure that the most important keyword is used in the title tag for every individual page in your site, and the closer with the front part of the tag, is better.
  • Use brief and clear title.
  • Most search engines, including Google, use text in the title tag as link text to your page. The text is also used as title by web browser and when making bookmark for pages, so the title must have meaning.
Heading Tags:

,

  • This is a good way to display keywords and key phrases in your page, and Google specifically give more stress on the content in heading tags than the text in main body. Tag

    is regarded to be more important than tag

    , etc.

  • It is better to only use the tags sometimes, because overuse of the tag will make your page messy and confuse the reader. Sometimes it is better to give highlight on heading using bold.
Links to the related
website
  • The more website put links to your page, the better your rank in search engines will be.
  • For example, sites with information on UK universities, bachelor/graduate, research, etc., will be very relevant for University – if it puts link to our site, it will increase our rank.
  • If you can control the link to your page, other site must also use that keyword. For example: ‘See our job openings’ instead of ‘for job openinge “click here”.’
Tag
Links
Teks
(xxx)
and Image alt=”xxx”
  • Label text links clearly. For instance, use ‘View Undergraduate Prospectus’, instead of ‘to view Undergraduate Prospectus “click here”.’
  • This is also similar to alt tags of image. Insert text that are relevant to the image, or if you use it as a link, show where the link will take you, such as: alt=’Tampilkan Undergraduate Prospectus’.
Meta Description Tag
  • This tag make it possible for you to write unique description of search result. This text appear under link text in search result and is a good way to tell people of what can be found on your page.
  • It is better if you write the description briefly and clearly.
  • Not all search engines will use your description. Google, for instance, use its own description based on the content of your page.
C
ontent
  • Large amount of visitor will increase your ranking on search engine, so it is better if you always update and add new contents in your website. This will help to encourage visitor to return to your site and attract new visitors.
  • See what other people do. Choose several keywords/phrases from your page and perform search. For instance go to Google and search for ‘researcher in UB’. In the search result list, choose the first and click link labeled ‘cached’. You can see how the keywords are shown in the page.

 

Project Team

Effective planning of your Project Team will determine that the money and time invested won’t be wasted. Depend on the size of your project Anda, you might need two groups of team with steering group with higher level to make decision, and executive group to perform the task. Here are several roles/skills that you should bear in mind when assembling a team:

  • Project Manager –responsible to keep the overall aspects of project and make sure that it is finished on time and on budget.
  • I.T. Team –may include Programmers and Server Technician.
  • Design Team – Graphics Designers to create pictures, banners and multimedia component such as video etc.
  • Web Editors –responsible to write, manage, corrects, and set the tone of content. This position also needs a little knowledge on HTML and CMS (Content Management Systems).
  • Marketing Team –for market research, competitors analysis, SEO (search engine optimisation) and site marketing when the site is ready to open.
  • Testing Group – ideally the team should consists of the people from your target audience who can see whether the website fits their needs.

 

Structure and Navigation

The followings are several points that should be concerned when thinking about the structure and navigation of your site:

  • Make sure that you have a good concept on the structure of your site and how the navigation works before you start designing your page.
  • Good navigation is important. User want to click the link and find what they are looking as fast as possible. Ideally three clicks or less is the best.
  • You might want to use ‘navigation menu’ to keep all the links in one place, such as navigation on the right and left side of University site.
  • Site map maybe useful for initial site regulation.
  • Content, categorization, and development of the information of your site should be based on the need of target audience.
  • Can you give a link to the center resource instead of repeating the information available/updated on another place?
  • Manage the information to your directory if you plan on more than several pages. This will make it easy for you to manage your site along with its development.
  • When you give the name of sub directory and pages, remember that your choice will determine the URL. Avoid using capital letter or odd spaces – this might cause other to make mistake in making link to your page.
  • It is better if you don’t move/change the name of your page when it is live because it might cause broken links. Redirects can be made if the content must be moved, but make sure that it doesn’t have any effect on the user.
  • Is the information on your site can be seen by external or internal audience? You might want to limit the access to specific pages.
  • If you limit access to specific pages, make it clear when giving name of link.
  • If you move your site from server to server, or from your hard drive to server, using relative (e.g., “page.html”) instead of absolute address (e.g., “http://www.ub.ac.id/page.html”) it will make your site site more portable, and minimize broken links in he future.

 

Testing Usability/Accessibility

WCAG 1.0 guidelines, published by World Wide Web Consortium (W3C), is regarded as the main guide in making accessible website. Guide adherence level can be seen using automatic accessibility checking tools. Yet the best way to check the usability/accessibility of your site is by running some kind of end-user testing on various development phase, such as initial design, finished HTML page, before lunching, and when the site is live.

Why the test?

  • To see your site through fresh view. The need of your audience must determine the content and design of your site.
  • To understand how the visitor visit your site.
  • To find new ideas.
  • To improve your website.
  • Because University has committed to make an accessible web.

Testing tips

  • The most acceptable method for end user testing is by determining a group of tester to perform duty, using prototype on paper or page on screen to be worked on.
  • Before the test, assure the user that they are testing the website, not testing themselves.
  • Ask them to think while doing the task, sometimes this can result in interesting observation.
  • Every tester must perform the same task and session must be monitored by one or more observer, who continuously perform recording.
  • You might also want to make a feedback form, to be finished on the end of the testing, for the more generic comments.
  • Ideally, testing must not exceed 1 hour.
It is important to know what would you want to find every time you perform a test. Generally, in a test, you want to know:
  • How the user interact with your website
  • What is difficult for them to reach
  • Where did they lost
  • What is meaningful for them
  • What do they like and dislike
On specific test, you might want to know things such as:
  • Can the user reach key tasks?
  • Can the user find something soecific?
On the end of the test, collect all records from the Observer.
  • Write detailed report on all feedback.
  • Analyze the result and make a list of possible act.
  • Make a priority on this list; some will become important, some is rather needed, and others might be opinions that doesn’t need follow ups.

 

Technical Design

  • Please bear in mind that the site is not for you; the site is for user. Design and content must be presented by considering their needs.
  • Use template to maintain your design to stay consistent on all pages.
  • Use Cascading stylesheets (CSS) to format headings and body texts.
  • Make sure that your template is written on well built HTML.
  • Make sure that your template design looks like what you want on all the commonly used browser. For instance, the design might looks different on Firefox and Internet Explorer.
  • Avoid using pages designed with unnecessary scrolling.
  • It is better to use “Web safe’ color and think about colour contrast and colour blindness when designing a page.
  • Avoid using pop-ups on University Website

 

Information Strategy

The needs of your audience should be the determinant aspect of the contents and design of your page. Including words, phrases, and pictures that they can understand.

Presenting the information

  • Have your division perform best practice guide to present information? Make sure that any documentation you make for your website is consistent to the guide or any university regulation. For instance, Web publishers in central administration and publishing to the Web Admin must follow the Central Administration Web Service.
  • If your division use specific style, make sure that it is followed well by your page. Make sure that the style is spread to anyone responsible to perform publication on the site.
  • Contact you Divisional Webmaster to find out further.

Official information on departments, faculties, bodies, or service

  • Make sure that the information provided is accurate. If possible, linked to main resource will make sure that the information is up to date.
  • Make sure that the appropriate body has received the information.
  • Request a link to your information to be inserted to appropriate other website/page.
  • Clearly show if a page contain unverified information, or still developed and could be changed.

View responsibility

  • Creation/modification date and title of position/job department of the writer should be included, if needed, to identify the person responsible for the content.

Forward Link

  • Make sure that you put link to another web page, other reader will regard it as endorsement of its content.

 

Picture

The followings are several points that should be noticed when using picture in web.

  • Excessive picture might irritate user or disturb their navigation. Good website is not messy, and easy to be used.
  • Think of how your page will be seen by the user who sets the screen into text only or uses screen reader software.
  • Use descriptive text in ALT column in tag.
  • Make sure that you have a clear concept on how the picture will be seen and how the picture can benefit the target audience, because creation of graphic and picture could take time and cost.
  • Think of the size of your picture. Smaller picture will make it possible for your page to be downloaded faster, especially by dial-up user.
  • Maybe it is better to provide ‘thumbnail’ link to full size picture.
  • Pictures that are meant for print may not always look good on the web.
  • When using others’ picture, you have to obtain their permission first, especially if you will use caption to identify them.
  • Picture’s copyright is owned by photographer. But if you are assigned to make personal or domestic photo, the commissioner is the one with the rights to prevent the publication of the photograph. You might need license from photographer and/or person who commissioned the photo.
  • Give origin credit if needed.
  • Don’t use photograph depicting children without permission.

 

Multimedia

  • Multimedia elements and pictures can improve the appearance of your site, but it might slow down the loading time of your page. Think about the size of your picture file. Smaller file size will make it possible for your page to be downloaded faster, especially for dial-up user.
  • As a general regulation, multimedia file for moving picture,  audio, audio/visual or interactive content must be backed up with HTML version for users who can’t view such formats.
  • if you use PDF or other secondary format (secondary of Web because it is not in HTML) as a part of your web content, give link to the site in which the user can download the plug in needed, such as PDF Reader. Choose the brand trusted by user, and follow the requirement of the third party to quote their trademark, for instance Adobe® Acrobat® Reader.

 

Metadata

Metadata give specific information on the content and style of your page. Meta Tags is used to define metadata and placed in the head section of HTML or XHTML document, and cannot be seen by people who visit your site. The objective of this tags are to give you control on description and ranking of your web page and to prevent other pages from indexing. Such as:

  • Title Tag. Make sure that you put the most important key words when writing the title of the page, because the title will appear in user’s browser when visiting the page. The title will also be used as the name of the page when someone adds it to ‘Favourites’ or ‘Bookmarks’. Texts you use in the title tag is also important to determine how the search engine rank your web page. All big crawlers will use the text from the tag as the title of your page in search engine listing.
  • Description Tag. The tag will give you control on the description of content of your page in search engine listing, although not all of the search engine uses this tag. For instance, Google ignore it and automatically produce its own page description; others might use a part of it.
  • Keywords Tag. Most of the latest search engine now ignore this tag, but if you’re using it, it is better if you use the most important terms in the top part and using the words and phrases that appear on the page and how to connect it. It is widely known that Google sees the words in a page when indexing, that is why, it is better to insert words and phrases in text in your page that might be used by your target audience, especially on several initial paragraph and headings.
  • Meta Robots Tag. This tag makes it possible for you to determine some pages that must not be indexed by search engine, such as pages that is intended for staff only.

The followings are complete examples of several metadata, taken from 2005 Post Graduate Prospectus site, with comments:

This will inform the browser the location of ‘document type definition
‘ –definition of
HTML code version used
. In this regard
, XHTML 1.0 Strict:

 

 

The language used – ‘en’.
Server might make it:
Initial part of page head, and the character set used
:

Links to the external stylesheets used:

Embedded CSS is not recommended. If you make a link to external stylesheet file, user only need to download it once. This will also make your page code simpler for maintenance.

Link to copy right:

Metadata Administrative:

Keywords, and description sentence used by some :

Instruction for ‘robots’ who index the page for engines

Some ‘Dublin Core’ information. This haven’t been used widely, but there is no harm in adding it.

The title is important:

Graduate Studies Prospectus : UB Graduate Studies Prospectus 2006/07

End ‘head’

When You are Published

Evaluate your project

  • Check the objective of the site. What works well? What is canceled? is there anything that has been canceled but should be able to be implmented now? Is there any area in the site that should be able to be expanded?

Editorial Checklist

  • Do your division have best practice guide to present information? Make sure that all of the orientation you write for your website is consistent with it and with all regulations and guide of the university.
  • If your division use specific style, make sure that your page follows it. Make sure that it is spread to all who responsible to make a change on the site.
  • Who have the access to publish content on the site?
  • Who will approve a page before it is uploaded into live?
  • Who owns the content? Check the ownership issue when using third party content, such as picture and text, and give credit on the original creator if needed.
  • What file format should be used when submit content to Web?
  • If you need to show the preview of page before live, how will this be performed? Do you have development area, or will you put a page without link to present it?
  • If you have a publication system (such as CMS) that makes it possible for content creator to  log in and create their own content, what guides should the follow?
  • if your site is in XHTML Strict for instance, does the content creator knows that the HTML tag such as
    should use lower case and self-closing ()? Does they know that they should perform validation on their page?

Maintenance Checklist

  • Check whether there are new content flow and updated content in maintained site
  • Put your information into directories if you plan on many pages. This will make your site easier to be managed along with its development.
  • Update your homepage regularly, to make your site fresh.
  • Make a schedule to check certain aspect of the site, such as rights on paid picture.
  • Connect to main resources if possible to make sure that the information is up to date.
  • ‘Web metrics’ analysis such as statistics of log server file or Google Analytics are very valuable sources of information on the visitor of your site, what are they looking for, keywords they use, how they perform navigation on the site, and where are they come from.
  • Determine on how to archive the page.

Promotional Checklist

  • Make sure that you give link to relevant university and non university website.
  • Search engines such as Google takes time to index your page, as a result, you might not come up on search result for some time. When you finally come upm the assess of information quality indexed because you might need to tweak the keywords texts such as title and opening paragraph. Insert words and phrases in your texts that will be used by your target audience, especially on the heading and several initial paragraph. This will help your page to come up on search engine search result and convince the reader that they are reading the right page.
  • Look for other methods to promote your site, such as sending marketing email and print publication.

Further Information

For further information about this policy, please contact the University Webmaster (

)