Hintlink

Hintlink

Home

Who we are

Capabilities

Web Hosting & System News Schedule

News  Oil  Exchanges & Economics

Weather Storms Mosaic Satellite Lightning Hail Snow Ice Air Temperature Tropical

Online Payments

Applications - Latest versions  Firefox Add-ons Thunderbird Add-ons Chrome Add-ons

Open Source Applications

Open Source OS/GUI

Viruses, Spam & Security

RSS News feed

Hobbies / Guinea Pigs

Utilities  RF Safety Calculator

WebCAM(1) (2)  (3)  More

Technologies  Product Designs 

 
  W4/VP9KF & G4BKI radio
 
 

Do’s and don’ts of webpage design

Many (even most) pages are designed using web based CMS these days. However, some local tools can be helpful in testing code or deciding upon features that might be better authored on your local machine. These Design and utility tools may help you. The Top Tips apply no matter which way you put together your web presence. A pretty comprehensive list of Latest Applications has been put together to help you, as well as a massive choice of OpenSource and other tools. Have fun! A good working knowledge of PHP may be helpful when patching and customising CMS output (most CMSes are driven by PHP with a mixture of Javascript and Ajax).

WYSIWYG Design tools Just about all of these have their own quirks, but you can try the following for free and may help in your initial design concepts, even if you intend to use a CMS later (making Templates work in CMSes comes to mind):

Komposer. Derived from the earlier program Nvu, with many bug fixes.
Trellian WebPage.

FTP (upload/download) tools
FileZilla (not a Mozilla product). Easy to use. v3 still being improved.

Other tools
OpenOffice. Development has slowed to a crawl and will likely disappear.
LibreOffice. Useful tool for changes and conversion to PDF files. Ongoing development.
TextPad. Very useful text editting tool for code patching. v5.2 the best of all versions.
JAlbum. Neat way of making slideshows on the web Use the Java versions only.
Beyond v9 complexity is overblown and it started to cost money, having been free for years. It can be easier to use Gallery and other server OSS based tools.

Top tips:

1. Fast Download

6. Absolutely minimise new technology

2. Usability

7. Avoid frames

3. Navigation

8. Keep it up-to-date

4. Scrolling

9. Branding

5. Simplicity

10. Links

1. Fast download

Ensure that your site downloads quickly. Partly this will be due to your choice of hosting company, browser, number of Add-ons, etc. Within 2-5 seconds at an absolute maximum, preferably 2 seconds or less. Assume that your user is on slow 'broadband' aDSL or Cable. Therefore the total file size of a page (including graphics) should never exceed 700kB.

To decrease file size and increase download speed - use as few graphics as possible, optimize the graphics you do have and create clear, concise HTML. Always include width and height attributes in the <img> tag so the browser can download the rest of the page while waiting for graphics to download. Include alt text in the <img> tag so that the page makes sense before the graphics download or if the user has graphics switched off.

Server side “includes” speed up download times as the included file only needs to be downloaded once to be used on several pages. This happens "server side" so that download time to the user is negligible. Style sheets also only need to be downloaded once. Using one means you don't have to specify style within the HTML page, which makes for a smaller HTML file size.

2. Usability

If your web site is not user friendly, visitors will not be able to use it and they will become frustrated and will not return to it. It is return users who will buy your product or service, not a unique user who merely visits your site just once. The key to good usability is found in easy to follow navigation and simple site structure.

3. Navigation

Poor navigation is where most unusable sites fall down. At any one time, the user should be able to reach any level of the site and clearly see where they are in the site's hierarchy. A well designed site should have a logical hierarchy of more detailed information as the user delves down into the site.

The main home page to a site should have links to a variety of levels, usually in the form of a navigation panel. On subsequent pages, the user should be able to reach other pages of the same level as well as be able to go up to the previous level and always be able to get immediately back to the home page.

Make sure the page title, located in the head information of your HTML, shows the page title and where the page is in the site. This is the title of the page that is visible at the very top of the browser window. This is useful to users who bookmark your site and ensures its name makes sense in a whole list of bookmarked sites.

4. Scrolling

Never use horizontal scrolling, users find it annoying - check your site on machines with smaller screens and with other browsers just to be sure. Avoid vertical scrolling, especially on the home page. Only 10% of users will scroll down further than they can initially see, so keep the important information and navigation at the top of a page. This is beneficial to search engines too, as they often only index the first portion of a page. What you put at the top of the page can entice users to scroll down to read further. If your most important content is hidden "below the fold", most users will never even see it.

5. Simplicity

Keep your site simple. Use white space carefully - don't waste it by having fixed width tables so that much of the screen is blank in a wide browser window. However, make sure you don't have more than 12 words to a line of text - it is difficult to read if there are more. Don't have gratuitous animated graphics, scrolling text or other moving items all over the place - they draw attention away from the content. If an animated graphic is used, only loop it once so it doesn't distract the user from the rest of the page.

Don't overcrowd a page with too much information, long lines and too many links, the user won't know what to look at first. However, one exception to this is when the information is technical and extremely useful to your visiting surfer.

6. Absolutely minimise new technology

Don't ever create sites that rely entirely on new technology, such as Flash, Java Script or Java. Many users won't spend the time or know how to download the plug-in to view the site. You can't guarantee all users will have, or want, the plug-ins, and you will "scare off" potential customers. It's more important to have people actually use your site, rather than simply ooh and ahh at its special effects. Use new technology sparingly, especially because it increases loading time dramatically and because it often causes browser crashes.

7. Never use framesets (not the same as iframes on their own)

Most use of framesets on the web is unnecessary, especially when it's been used simply to separate the screen into content and navigation. This is often confusing for users, can create unnecessary scroll bars, destroys the URL for people to e-mail the current page to someone, or bookmark it for future use. The URL they save ends up being the top of the frameset, not the one they wanted. This could lose you customers/visitors who don't want to trail through the site finding the particular page all over again.

Framesets are also detrimental to search engine listings. Search engines can't spider a frameset, directories often look on them as bad practice for the above reasons.

Note: iframes are sometimes useful when real-time sites, or sections of sites, cannot be easily 'fetched' because of vast (often unreadably encoded) time and date and other parameter information. This applies especially to weather sites and (sometimes) to software versions with numerous platforms and options.

8. Keep it up-to-date

Keep the content on your site current. Most good sites are constantly updated, so if yours is out-of-date, users won't return. Encourage people to come back with "news" or "highlights" sections on your home page which have the most up-to-date content. If your site has outdated material, users won't need to return as it appears they saw all there was to see the first time. This is true even for large sites. However, don’t make every page a nightmare to update. Keep the majority of information pages static (no maintenance) and change only a small number of very important “newsworthy” pages.

9. Branding

Maintain your company's (or site's) branding across all pages of your site. If there is no branding on a page, users won't necessarily know they are still in the same site. This is especially important for users who have entered the site from an external site and will need to know which site they are in. This is also relevant for printer friendly pages where site navigation is less important. These still require at the very least a company logo or site name which is a link to the home page, preferably in the top left hand corner.

10. Links

To a user, links are the structure of the world wide web. A user doesn't care whose site they are on, just the information they require. Standardise your links to make user's lives easier. Always use blue for unvisited links and red/purple for visited ones and always underline them (unless in an obvious link bar at the side or top of the page). Don't underline any text which isn't a link. Make your company logo or site name a link on every page. If you're linking to an external site, display the name so that a user knows they are being taken off to a different site.

Users have become accustomed to these attributes and while your site may look prettier with different colored links etc, it can be confusing in that it's not obvious where they have been before. Going to a previously visited page is frustrating and time consuming. Most users don't have the time to go to every relevant link in your site, make it easy for them to browse through to the information they require. Don’t create circular links where your user gets stuck in a page and can’t get out again.

Finally, don't move links! By this we mean don't change the URL of a page. People bookmark pages which are relevant to them for a long time (sometimes years). If you move pages, you could lose a valued customer. If a site clean up is necessary, then activate a re-direct for that URL to the new page location. In addition, for sites with constantly changing home pages with news stories or press releases, always produce a permanent location for the whole story at the same time. Place a link from the abstract to the full story so people can link to this. Changing the URL of a page causes havoc in search engines, giving people searching for your product or information the frustration of thinking they found just what they wanted on Google and then finding that it has disappeared because you moved it.

Other tips!

Don’t use gaudy colour schemes.

There are plenty of terrible examples of this on the web. A lot of them hinge around using black backgrounds for their pages.

Don’t use large text.

When large text is used, it might be nice for those more senior in years, but it creates a very un-professional look and makes it look like you’re shouting! Large text should only be used in titles.

Don’t use weird fonts

Most windows machines come with about 100 fonts. If you have installed others on your machine and then use them in a web page, the receiving computer doesn’t know anything abut that font and will substitute, normally, Tahoma font (because it is the Windows default font used on the desktop icons, etc.).

Test your web page at any early stage of design.

Test and test often – after every upload of code. Test using different connections, but always test using slower aDSL . Test with different screen resolution settings. Above all, test with Internet Explorer,  Opera, Chrome  and Firefox and make sure that everything works and renders OK. If you can, test with Mac OS-X using Safari and test under Linux.

Use a relevant & tasteful background.

Backgrounds are very difficult indeed to design and test. Keep them simple. Fade them out much further than you would first imagine, otherwise your content will be overwhelmed by the background. Keep them small and highly repetitive. Test on several different types of screen – 15” CRT, 17” CRT, TFT standalone screen and a TFT and LCD notebook. You’ll be amazed at how the background takes on different appearances on each type of screen. Most of all, don’t go for a dark background, it makes the surfer think they’ve entered the black hole of Calcutta!

Here are some other useful tools and tips:

• Designing with colour
• Hexadecimal colours

Recently posted Ethics from a news publisher, many of these can apply to your company and page and are worth reflecting on!


Principles of Ethical Conduct


WE ARE COMMITTED TO:

I. Seeking and reporting the truth in a truthful way 
    • We will dedicate ourselves to reporting the news accurately, thoroughly and in context.
    • We will be honest in the way we gather, report and present news.
    • We will be persistent in the pursuit of the whole story.
    • We will keep our word.
    • We will hold factual information in editorials and other opinion pieces to the same standards of accuracy as news stories.
    • We will seek to gain sufficient understanding of the communities, individuals and stories we cover to provide an informed account of activities.
    • We will use content created by others in ways that adhere to the guidelines for protecting the Principles.
II. Serving the public interest 
    • We will uphold First Amendment principles to serve the democratic process.
    • We will be vigilant watchdogs of government and institutions that affect the public, fighting to ensure that the public’s business is conducted in public.
    • We will seek solutions as well as expose problems and wrongdoing in order to effect change for the good in the communities we serve.
    • We will provide a public forum for diverse people and views.
    • We will reflect and encourage understanding of the diverse segments of our community.
    • We will provide editorial and community leadership.
    • We will seek to promote understanding of complex issues.
III. Exercising fair play 
    • We will treat people with dignity, respect and compassion.
    • We will correct errors promptly.
    • We will strive to include all sides relevant to a story.
    • We will explain to readers our journalistic processes.
    • We will give particular attention to fairness in relations with people unaccustomed to dealing with the media.
    • We will use unnamed sources as the sole basis for published information only as a last resort and under specific procedures that best serve the public’s right to know.
II. Maintaining Independence
    • We will remain free of outside interests, investments or business relationships that may compromise the credibility of our news report.
    • We will maintain an impartial, arm’s length relationship with anyone seeking to influence the news.
    • We will avoid potential conflicts of interest and eliminate inappropriate influence on content.
    • We will be free of improper obligations to news sources, newsmakers and advertisers.
    • We will differentiate advertising from news. 
    • When sponsorships of news are appropriate, we will not allow them to determine, change or restrict content. 
II. Acting with integrity 
    • We will act honorably and ethically in dealing with news sources, the public and our colleagues.
    • We will obey the law.
    • We will observe common standards of decency.
    • We will take responsibility for our decisions and consider the possible consequences of our actions.
    • We will be conscientious in observing these Principles.
    • We will use technological tools with skill and thoughtfulness, avoiding approaches that skew facts, distort reality, or sensationalize events.
    • We will use newsgathering techniques such as hidden cameras or microphones only if there is no other way to tell a significant story effectively and only with management approval.
    • We will not plagiarize.
    • We will not manipulate images or sound in misleading ways. We will not present images that are reenacted without informing the audience.
    • We will always try to do the right thing.



menu
Home  | Who we are  | Capabilities  | Web Hosting & System News  | News  | Oil  | Exchanges  | Weather  | Online Payments  | Applications - Latest Versions
Open Source Applications  | Open Source OS/GUI  | Viruses, Spam & Security Alerts  | RSS News feed  | Hobbies  | Utilities  | WebCAM  | Politics  | Software

footer
© 2003-2017 Hintlink. All rights reserved. IP footer
User Agent: CCBot/2.0 (http://commoncrawl.org/faq/) IP Address: 54.80.146.251 Remote Host: